Создайте самодостаточный портфель Dribbble с Dribbbox

Dribbble - это популярный веб-сайт в сфере дизайна, где вы можете поделиться своими проектами WIP, проектами, макетами и даже бесплатными материалами. Взамен вы получите обратную связь и критику от коллег-дизайнеров, что хорошо для продвижения вашего дизайна на новый уровень..

Если вы хотите персонализировать способ отображения своего портфолио, вы можете отобразить снимки в своем собственном домене. Чтобы помочь вам с этим, вы можете попробовать Dribbbox.

Dribbbox - это библиотека, которая помогает нам отображать снимки Dribbble в нашем собственном домене, и это не доставит хлопот. Давайте посмотрим, как вы можете настроить Dribbbox для демонстрации ваших произведений искусства..

Установка Dribbbox

Я предполагаю, что у вас есть ваш домен и настройка сервера; общий хостинг должен работать просто отлично. В противном случае вы можете запустить локальный сервер, если у вас его нет. Если вам нужны инструкции по настройке локального сервера с AMPPS, прочитайте об этом здесь.

Загрузите пакет ZIP и загрузите контент на сервер. Включите index.html, config.js и папку assets.

Открой config.js и укажите имя пользователя, чтобы получить ваше портфолио из Dribbble.

В этом случае я использую портфолио Thoriq Firdaus для демонстрации. Вот как вы получаете портфель.

 dribbbox.config = dribbble_username: "tfirdaus", short_description: "Дизайнер мирового класса хочет быть"., адрес электронной почты: "[email protected]" 

Сохраните его и обновите страницу.

Это действительно так просто, не правда ли??

Ваш Портфолио на Dribbbox

Настройка проста. У вас есть три столбца. Ваши контактные данные находятся слева на статической боковой панели. Ваши кадры Dribbble находятся в средней прокручиваемой колонке, а справа - там, где зрители могут видеть ваш проект в полноэкранном режиме, по одному за раз. Настройка идеально подходит только в качестве дисплея, что означает, что публика не сможет давать вам отзывы, такие как комментарии или лайки. Они также не смогут поделиться вашей работой.

Dribbbox был оптимизирован для просмотра на мобильных устройствах. Когда веб-сайт просматривается на мобильном устройстве, макет, а также HTML-код дерева DOM будут реконструированы с помощью mobile.js. Укажите ширину области просмотра которой mobile.js должно проходить в index.html.

 (function () var s = document.createElement ("script") s.src = "assets / js /" + (matchMedia ("(max-width: 414px)"). match? "mobile": "desktop") ) + ".js" document.head.appendChild (s)) () 

Заключение

Dribbbox - это удобная библиотека для демонстрации ваших снимков Dribbble под вашим собственным доменным именем. С ним очень удобно работать, даже если вы не знаете JavaScript; просто добавьте свое имя пользователя и (необязательно) свой адрес электронной почты, и все готово. Если вам не нравится презентация по умолчанию, вы можете дополнительно персонализировать внешний вид с помощью CSS.

Больше на Hongkiat: разместите свой статический сайт в Dropbox с блинчиком