Crie Portfolio de Dribbles Auto-Hospedado com o Dribbbox
Dribbble é um site popular na esfera do design, onde você pode compartilhar seus projetos WIP, projetos, maquetes e até brindes. Em troca, você receberá feedback e críticas de outros designers, o que é bom para levar o seu design ao próximo nível.
Se você quiser personalizar o modo de exibição do seu portfólio, poderá exibir as imagens em seu próprio domínio. Para te ajudar com isso, você pode experimentar o Dribbbox.
O Dribbbox é uma biblioteca que nos ajuda a exibir imagens do Dribbble em nosso próprio domínio, sem problemas. Vamos dar uma olhada em como você pode configurar o Dribbbox para mostrar suas obras de arte.
Instalação do Dribbbox
Eu suponho que você tenha seu domínio e uma configuração de servidor; uma hospedagem compartilhada deve funcionar muito bem. Caso contrário, você pode executar um servidor local, se você não tiver um. Se você precisar de instruções sobre como configurar um servidor local com o AMPPS, leia sobre isso aqui.
Faça o download do pacote ZIP e faça o upload do conteúdo para o servidor. Inclua o index.html, o config.js e a pasta de recursos.
Abra o config.js e especifique o nome de usuário para recuperar seu portfólio do Dribbble.
Neste caso, estou usando o portfólio da Thoriq Firdaus para a demonstração. Veja como você recupera o portfólio.
dribbbox.config = dribbble_username: "tfirdaus", short_description: "Um designer de classe mundial quer ser.", email_address: "[email protected]"
Salve e atualize a página.
É tão simples assim, não é??
Seu portfólio no Dribbbox
A configuração é simples. Você tem três colunas. Seus detalhes de contato estão na extrema esquerda em uma barra lateral estática. Suas fotos do Dribbble estão na coluna rolável do meio e, à direita, é onde os espectadores podem ver seu projeto à vista, um de cada vez. A configuração é perfeita apenas como exibição, o que significa que o público não poderá fornecer comentários como comentários ou curtidas. Eles não poderão compartilhar seu trabalho.
O Dribbbox foi otimizado para visualização em dispositivos móveis. Quando o site é visualizado no celular, o layout, bem como o HTML da árvore DOM, serão reconstruídos por meio de mobile.js. Especifique a largura da porta de visualização da qual o mobile.js deve ocorrer no index.html.
(function () var s = document.createElement ("script") s.src = "recursos / js /" + (matchMedia ("(max-width: 414px)"). corresponde a "mobile": "desktop" ) + ".js" document.head.appendChild (s)) () Conclusão
O Dribbbox é uma biblioteca útil para exibir suas fotos do Dribbble com seu próprio nome de domínio. É muito intuitivo trabalhar mesmo se você não conhece JavaScript; Basta adicionar seu nome de usuário e (opcionalmente) seu endereço de e-mail, e está tudo pronto. Se você não gosta da apresentação padrão, você pode personalizar ainda mais a aparência através de CSS.
Mais sobre Hongkiat: Hospede seu site estático no Dropbox com Pancake
