hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Créer un portefeuille Dribbble auto-hébergé avec Dribbbox

Dribbble est un site Web populaire dans la sphère de conception où vous pouvez partager vos projets, conceptions, maquettes, et même freebies de WIP. En retour, vous recevrez des commentaires et des critiques de la part des autres concepteurs, ce qui est bon pour pousser votre conception au prochain niveau.

Si vous souhaitez personnaliser la présentation de votre portfolio, vous pouvez afficher les photos sous votre propre domaine. Pour vous aider avec cela, vous pouvez essayer Dribbbox.

Dribbbox est une bibliothèque qui nous aide à afficher des photos Dribbble sous notre propre domaine, ne sera aucun des tracas. Jetons un coup d'oeil à la façon dont vous pouvez configurer Dribbbox pour la présentation de vos œuvres d'art.

Dribbbox Installation

Je suppose que vous avez votre domaine et une configuration de serveur; un hébergement partagé devrait fonctionner très bien. Sinon, vous pouvez exécuter un serveur local si vous n'en avez pas. Si vous avez besoin d'instructions 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. Incluez le fichier index.html, le fichier config.js et le dossier assets.

Ouvrez le fichier config.js et spécifiez le nom d'utilisateur pour récupérer votre portfolio 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 = {dribbble_username: "tfirdaus", short_description: "Un designer de classe mondiale veut être.", email_address: "[email protected]"} 

Enregistrez-le et actualisez la page.

C'est vraiment aussi simple, n'est-ce pas?

Votre portefeuille sur Dribbbox

L'installation est simple. Vous avez trois colonnes. Vos coordonnées sont à l'extrême gauche dans une barre latérale statique. Vos photos Dribbble sont dans la colonne du milieu déroulant, et sur la droite, c'est là que les spectateurs peuvent voir votre projet en pleine vue, un à la fois. La configuration est parfaite uniquement en tant qu'écran, ce qui signifie que le public ne sera pas en mesure de vous donner des commentaires comme des commentaires ou des goûts. Ils ne seront pas en mesure de partager votre travail non plus.

Dribbbox a été optimisé pour la visualisation sur les appareils mobiles. Lorsque le site est visualisé sur mobile, la mise en page ainsi que le code HTML de l'arborescence DOM seront reconstruits via mobile.js . Spécifiez la largeur de la fenêtre d' mobile.js dans l' 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 Dribbble sous votre propre nom de domaine. Il est très intuitif de travailler avec, même si vous ne connaissez pas JavaScript; il suffit d'ajouter votre nom d'utilisateur et (facultativement) votre adresse e-mail, et vous êtes tous ensemble. Si vous n'aimez pas la présentation par défaut, vous pouvez personnaliser davantage l'apparence via CSS.

Plus sur Hongkiat: Hébergez votre site Web statique dans Dropbox avec Pancake

50 sites Web de créateurs beaux et attrayants

50 sites Web de créateurs beaux et attrayants

Regarder ce que les autres ont fait avant vous est une excellente façon d'obtenir de l'inspiration. Cela peut également conduire à des conceptions innovantes. Dans cet esprit, où pouvons-nous aller? La réponse est, d'autres concepteurs de sites Web. Leur but est de promouvoir leurs compétences, leur style et leur attention aux détails, tout en communiquant les informations nécessaires. Ce son

(Conseils techniques et de conception)

DevTools Showdown: Edge F12 vs Firefox vs Chrome

DevTools Showdown: Edge F12 vs Firefox vs Chrome

Les outils de développement de Microsoft Edge, le nouveau navigateur par défaut de Windows 10 ont un design moderne et quelques nouvelles fonctionnalités par rapport à son prédécesseur, F12 Dev Tools d'Internet Explorer 11.La question de savoir si les outils de développement de Microsoft Edge se mesurent à leurs concurrents populaires - les outils de développement dans d'autres navigateurs modernes tels que Mozilla Firefox et Google Chrome - se pose naturellement dans l'esprit de nombreux développeurs.Dans cet

(Conseils techniques et de conception)