Créer un portfolio Dribbble auto-hébergé avec Dribbbox
Dribbble est un site Web populaire dans la sphère de la conception graphique où vous pouvez partager vos projets WIP, vos conceptions, vos maquettes et même vos cadeaux. En retour, vous obtiendrez les commentaires et critiques de vos collègues concepteurs, ce qui vous permettra de pousser votre conception au niveau supérieur..
Si vous souhaitez personnaliser l'affichage de votre portefeuille, vous pouvez afficher les plans sous votre propre domaine. Pour vous aider avec ça, vous pouvez essayer Dribbbox.
Dribbbox est une bibliothèque qui nous aide à afficher les plans de Dribbble sous notre propre domaine, sans aucun tracas. Voyons comment vous pouvez configurer Dribbbox pour mettre en valeur vos œuvres d'art..
Installation de Dribbbox
Je suppose que vous avez votre domaine et une configuration de serveur; un hébergement partagé devrait bien fonctionner. Sinon, vous pouvez exécuter un serveur local si vous n'en avez pas. Si vous avez besoin d’informations sur la configuration d’un serveur local avec AMPPS, lisez-le ici..
Téléchargez le package ZIP et téléchargez le contenu sur le serveur. Inclure les fichiers index.html, config.js et assets.
Ouvrez le config.js et spécifiez le nom d'utilisateur pour récupérer votre portefeuille de Dribbble.
Dans ce cas, j'utilise le portfolio de Thoriq Firdaus pour la démo. Voici comment vous récupérez le portefeuille.
dribbbox.config = nom d'utilisateur dribbble: "tfirdaus", short_description: "Un concepteur de classe mondiale qui veut être". adresse email: "[email protected]"
Enregistrez-le et actualisez la page.
C'est vraiment aussi simple que ça, non?
Votre portefeuille sur Dribbbox
La configuration est simple. Vous avez trois colonnes. Vos coordonnées sont à l'extrême gauche dans une barre latérale statique. Vos photos Dribbble se trouvent dans la colonne centrale défilante, et à droite, les visualiseurs peuvent voir votre projet dans son intégralité, un à la fois. La configuration est parfaite uniquement en tant qu’affichage, ce qui signifie que le public ne pourra pas vous donner de commentaires, comme des commentaires ou des likes. Ils ne pourront pas partager votre travail non plus.
Dribbbox a été optimisé pour l'affichage sur les appareils mobiles. Lorsque le site Web est visualisé sur mobile, la mise en page ainsi que le code HTML de l’arborescence DOM seront reconstruits à travers mobile.js. Spécifiez la largeur de la fenêtre dont le mobile.js devrait avoir lieu dans le index.html.
(function () var s = document.createElement ("script") s.src = "assets / js /" + (matchMedia ("(max-width: 414px)"). correspond à "mobile": "desktop" ) + ".js" document.head.appendChild (s)) () Conclusion
Dribbbox est une bibliothèque pratique pour montrer vos photos de Dribbble sous votre propre nom de domaine. Il est très intuitif de travailler avec même si vous ne connaissez pas JavaScript. ajoutez simplement votre nom d'utilisateur et (éventuellement) votre adresse e-mail, et vous êtes tous ensemble. Si vous n'aimez pas la présentation par défaut, vous pouvez personnaliser l'apparence avec CSS..
Plus sur Hongkiat: Hébergez votre site Web statique dans Dropbox With Pancake
