Crea un portfolio Dribbble self-hosting con Dribbbox
Dribbble è un popolare sito web nella sfera del design in cui puoi condividere i tuoi progetti WIP, progetti, prototipi e persino omaggi. In cambio riceverai feedback e critiche da altri designer che è buono per portare il tuo design al livello successivo.
Se desideri personalizzare il modo in cui visualizzi il tuo portafoglio, puoi visualizzare gli scatti sotto il tuo dominio. Per aiutarti, puoi provare Dribbbox.
Dribbbox è una libreria che ci aiuta a visualizzare gli scatti di Dribbble sotto il nostro dominio, non ci sono problemi. Diamo un'occhiata a come puoi configurare Dribbbox per mostrare le tue opere d'arte.
Installazione di Dribbbox
Presumo che tu abbia il tuo dominio e una configurazione del server; un hosting condiviso dovrebbe funzionare bene. Altrimenti, puoi eseguire un server locale se non ne hai uno. Se hai bisogno di istruzioni su come configurare un server locale con AMPPS, leggi qui.
Scarica il pacchetto ZIP e carica il contenuto sul server. Includere index.html, config.js e la cartella delle risorse.
Apri il config.js e specifica il nome utente per recuperare il tuo portafoglio da Dribbble.
In questo caso, sto utilizzando il portfolio di Thoriq Firdaus per la demo. Ecco come recuperi il portafoglio.
dribbbox.config = dribbble_username: "tfirdaus", short_description: "Un designer di livello mondiale wanna-be.", email_address: "[email protected]"
Salvalo e aggiorna la pagina.
È davvero così semplice, no??
Il tuo portafoglio su Dribbbox
L'installazione è semplice. Hai tre colonne. I tuoi dati di contatto sono all'estrema sinistra in una barra laterale statica. I tuoi scatti Dribbble sono nella colonna centrale scorrevole, e sulla destra, è dove gli spettatori possono vedere il tuo progetto in piena vista, uno alla volta. La configurazione è perfetta solo come display, il che significa che il pubblico non sarà in grado di darti feedback come commenti o Mi piace. Non saranno nemmeno in grado di condividere il tuo lavoro.
Dribbbox è stato ottimizzato per la visualizzazione su dispositivi mobili. Quando il sito web viene visualizzato su dispositivi mobili, verrà ricostruito il layout e l'HTML dell'albero DOM mobile.js. Specificare la larghezza della vista di cui il file mobile.js dovrebbe avvenire nel index.html.
(function () var s = document.createElement ("script") s.src = "assets / js /" + (matchMedia ("(larghezza massima: 414px)"). corrisponde? "mobile": "desktop" ) + ".js" document.head.appendChild (s)) () Conclusione
Dribbbox è una libreria utile per mostrare i tuoi scatti Dribbble sotto il tuo nome di dominio. È molto intuitivo lavorare anche se non si conosce JavaScript; aggiungi semplicemente il tuo nome utente e (facoltativamente) il tuo indirizzo email, e sei pronto. Se non ti piace la presentazione predefinita, puoi personalizzare ulteriormente l'aspetto tramite CSS.
Altro su Hongkiat: ospita il tuo sito web statico in Dropbox con Pancake
