Створіть самостійно розміщений портфель Dribbble з Dribbbox
Dribbble є популярним веб-сайтом для дизайну, де ви можете поділитися своїми WIP проектами, проектами, макетами і навіть безкоштовними. Натомість ви отримаєте зворотній зв'язок і критику від колег-дизайнерів, які добре підштовхнуть ваш дизайн до наступного рівня.
Якщо ви хочете персоналізувати спосіб відображення свого портфеля, ви можете відобразити знімки під власним доменом. Щоб допомогти вам у цьому, ви можете спробувати Dribbbox.
Dribbbox - це бібліотека, яка допомагає нам показувати знімки Dribbble під нашим власним доменом. Давайте подивимося, як можна налаштувати Dribbbox для демонстрації творів мистецтва.
Установка Dribbbox
Я припускаю, що у вас є домен і налаштування сервера; хостинг повинен працювати дуже добре. В іншому випадку ви можете запустити локальний сервер, якщо його немає. Якщо вам потрібні інструкції щодо налаштування локального сервера з AMPPS, читайте про нього тут.
Завантажте пакет ZIP і завантажте вміст на сервер. Включіть index.html, config.js та папку активів.
Відкрийте вікно config.js і вкажіть ім'я користувача для отримання вашого портфеля з Dribbble.
У цьому випадку я використовую портфоліо Thoriq Firdaus для демонстрації. Ось як ви отримуєте портфель.
dribbbox.config = dribbble_username: "tfirdaus", short_description: "дизайнер світового класу wanna-be.", email_address: "[email protected]"
Збережіть та оновіть сторінку.
Це дійсно так просто, чи не так?
Ваш портфель на Dribbbox
Установка проста. У вас є три стовпці. Ваші контактні дані знаходяться в крайній лівій частині на статичній бічній панелі. Ваші знімки Dribbble знаходяться в середньому прокручуваному стовпці, а праворуч, де глядачі можуть бачити ваш проект у повному вигляді, по одному. Налаштування ідеальне лише як показ, що означає, що громадськість не зможе дати вам відгуки, як коментарі або подібні коментарі. Вони також не зможуть поділитися вашою роботою.
Dribbbox оптимізовано для перегляду на мобільних пристроях. Коли веб-сайт переглядається на мобільних пристроях, макет, а також HTML дерева DOM буде реконструйовано mobile.js. Вкажіть ширину вікна перегляду mobile.js має відбуватися в index.html.
(function () var s = document.createElement ("скрипт") s.src = "assets / js /" + (matchMedia ("(max-width: 414px)"). відповідає? "mobile": "desktop" ) + ".js" document.head.appendChild (s)) () Висновок
Dribbbox - це зручна бібліотека для показу ваших знімків Dribbble під власним доменним ім'ям. Це дуже інтуїтивно зрозуміло, навіть якщо ви не знаєте JavaScript; просто додайте своє ім'я користувача та (необов'язково) свою адресу електронної пошти, і ви все налаштовані. Якщо вам не подобається презентація за умовчанням, ви можете додатково персоналізувати вигляд за допомогою CSS.
Більше про Hongkiat: Хост ваш статичний сайт в Dropbox з млинцем
