Erstellen Sie mit Dribbbox ein selbstgehostetes Dribbble-Portfolio
Dribbble ist eine beliebte Website im Designbereich, auf der Sie Ihre WIP-Projekte, Entwürfe, Modelle und sogar Werbegeschenke freigeben können. Im Gegenzug erhalten Sie Feedback und Kritik von Kollegen, die Ihr Design auf die nächste Stufe bringen können.
Wenn Sie die Anzeige Ihres Portfolios personalisieren möchten, können Sie die Aufnahmen unter Ihrer eigenen Domain anzeigen. Um Ihnen dabei zu helfen, können Sie Dribbbox ausprobieren.
Dribbbox ist eine Bibliothek, mit der wir Dribbble-Aufnahmen unter unserer eigenen Domäne anzeigen können. Lassen Sie uns einen Blick darauf werfen, wie Sie Dribbbox für die Präsentation Ihrer Kunstwerke einrichten können.
Installation der Dribbbox
Ich gehe davon aus, dass Sie über eine Domäne und einen Server verfügen. Ein Shared Hosting sollte gut funktionieren. Andernfalls können Sie einen lokalen Server ausführen, wenn Sie keinen Server haben. Wenn Sie Anweisungen zum Einrichten eines lokalen Servers mit AMPPS benötigen, lesen Sie dies hier.
Laden Sie das ZIP-Paket herunter und laden Sie den Inhalt auf den Server hoch. Fügen Sie die index.html, die config.js und den Ordner mit den Assets ein.
Öffne das config.js Geben Sie den Benutzernamen an, um Ihr Portfolio von Dribbble abzurufen.
In diesem Fall verwende ich das Portfolio von Thoriq Firdaus für die Demo. So rufen Sie das Portfolio ab.
dribbbox.config = dribbble_username: "tfirdaus", short_description: "Ein Weltklasse-Designer möchte sein.", email_address: "[email protected]"
Speichern Sie es und aktualisieren Sie die Seite.
Es ist wirklich so einfach, nicht wahr??
Ihr Portfolio auf Dribbbox
Das Setup ist einfach. Sie haben drei Spalten. Ihre Kontaktdaten befinden sich ganz links in einer statischen Seitenleiste. Ihre Dribbble-Aufnahmen befinden sich in der mittleren, durchlaufbaren Spalte, und rechts können Zuschauer Ihr Projekt nacheinander in voller Ansicht sehen. Das Setup ist nur als Anzeige perfekt, was bedeutet, dass die Öffentlichkeit kein Feedback wie Kommentare oder Likes geben kann. Sie können Ihre Arbeit auch nicht teilen.
Dribbbox wurde für die Anzeige auf mobilen Geräten optimiert. Wenn die Website mobil betrachtet wird, werden sowohl das Layout als auch der HTML-Code des DOM-Baums rekonstruiert mobile.js. Geben Sie die Breite des Ansichtsfensters an mobile.js sollte im stattfinden index.html.
(function () var s = document.createElement ("script") s.src = "assets / js /" + (matchMedia ("(max-width: 414px)"). passt? "mobile": "desktop" ) + ".js" document.head.appendChild (s)) () Fazit
Dribbbox ist eine praktische Bibliothek, um Ihre Dribbble-Aufnahmen unter Ihrem eigenen Domainnamen zu präsentieren. Es ist sehr intuitiv zu arbeiten, auch wenn Sie JavaScript nicht kennen. Fügen Sie einfach Ihren Benutzernamen und (optional) Ihre E-Mail-Adresse hinzu, und Sie sind fertig. Wenn Sie die Standardpräsentation nicht mögen, können Sie das Erscheinungsbild mit CSS weiter personalisieren.
Mehr über Hongkiat: Hosten Sie Ihre statische Website in Dropbox With Pancake
