Vytvořit Dribbbox s vlastním hostitelem Dribbble Portfolio

Dribbble je populární webové stránky v oblasti designu, kde můžete sdílet své projekty WIP, návrhy, makety a dokonce i zdarma. Na oplátku získáte zpětnou vazbu a kritiku od kolegy designérů, což je dobré posunout váš návrh na další úroveň.

Pokud chcete přizpůsobit způsob zobrazení svého portfolia, můžete zobrazit snímky ve vlastní doméně. Abychom vám s tím pomohli, můžete si vyzkoušet Dribbbox.

Dribbbox je knihovna, která nám pomáhá zobrazovat Dribbble záběry pod naší vlastní doménou, žádný z potíží. Pojďme se podívat, jak můžete nastavit Dribbbox pro představení vašich uměleckých děl.

Instalace Dribbbox

Předpokládám, že máte doménu a nastavení serveru; sdílený hosting by měl fungovat dobře. V opačném případě můžete spustit místní server, pokud ho nemáte. Pokud potřebujete instrukce, jak nastavit lokální server pomocí AMPPS, přečtěte si o tom zde.

Stáhněte si balíček ZIP a nahrajte jej na server. Zahrňte index.html, config.js a složku prostředků.

Otevři config.js a zadejte uživatelské jméno pro načtení vašeho portfolia z Dribbble.

V tomto případě používám portfolio Thoriq Firdaus pro demo. Zde je návod, jak získat portfolio.

 dribbbox.config = dribbble_username: "tfirdaus", short_description: "Návrhář světové třídy, který chce být", email_address: "[email protected]" 

Uložte ji a obnovte stránku.

Je to opravdu tak jednoduché, že ne?

Vaše portfolio na serveru Dribbbox

Nastavení je jednoduché. Máte tři sloupce. Vaše kontaktní údaje jsou na levém statickém bočním panelu. Vaše Dribbble záběry jsou v prostředním rolovacím sloupci a na pravé straně je místo, kde mohou diváci vidět váš projekt v plném zobrazení. Nastavení je perfektní pouze jako zobrazení, což znamená, že veřejnost vám nebude schopna poskytnout zpětnou vazbu, jako jsou komentáře nebo komentáře. Nebudou moci sdílet vaši práci.

Dribbbox byl optimalizován pro zobrazení na mobilních zařízeních. Když je web prohlížen na mobilu, bude rozvrženo, stejně jako HTML stromu DOM mobile.js. Určete šířku výřezu, na kterou mobile.js by se mělo konat v index.html.

 (function () var s = document.createElement ("script") s.src = "assets / js /" + (matchMedia ("(max-width: 414px)") odpovídá "mobile": "desktop" ) + ".js" document.head.appendChild (s)) () 

Závěr

Dribbbox je šikovná knihovna, která předvádí vaše Dribbble záběry pod vaším vlastním názvem domény. Je velmi intuitivní pracovat i když neznáte JavaScript; jednoduše přidejte své uživatelské jméno a (volitelně) svou e-mailovou adresu a všichni jste nastaveni. Pokud se vám nelíbí výchozí prezentace, můžete vzhled dále přizpůsobit prostřednictvím CSS.

Více na Hongkiat: Host Your Static Webové stránky v Dropbox S Pancake