Vytvorte portfólio Dribbbox s vlastným hosťovaním

Dribbble je populárna webová stránka v oblasti dizajnu, kde môžete zdieľať svoje WIP projekty, návrhy, mockups a dokonca aj freebies. Na oplátku dostanete spätnú väzbu a kritiku od kolegov dizajnérov, čo je dobré posunúť svoj dizajn na ďalšiu úroveň.

Ak chcete prispôsobiť spôsob zobrazovania vášho portfólia, môžete zobraziť zábery vo vašej doméne. Aby sme vám s tým mohli pomôcť, môžete vyskúšať Dribbbox.

Dribbbox je knižnica, ktorá nám pomáha zobrazovať zábery Dribbble pod vlastnou doménou, nebude mať žiadny problém. Poďme sa pozrieť na to, ako môžete nastaviť Dribbbox pre prezentáciu vašich umeleckých diel.

Inštalácia Dribbboxu

Predpokladám, že máte doménu a nastavenie servera; zdieľaný hosting by mal fungovať v pohode. V opačnom prípade môžete spustiť lokálny server, ak ho nemáte. Ak potrebujete pokyny na nastavenie lokálneho servera s AMPPS, prečítajte si ho tu.

Prevezmite balíček ZIP a odovzdajte obsah na server. Zahrňte index.html, config.js a priečinok s aktívami.

Otvor config.js a zadajte používateľské meno na získanie svojho portfólia od spoločnosti Dribbble.

V tomto prípade používam portfólio spoločnosti Thoriq Firdaus na demo. Tu je postup, ako získať portfólio.

 dribbbox.config = dribbble_username: "tfirdaus", short_description: "Designér svetovej triedy chce byť.", email_address: "[email protected]" 

Uložte ho a obnovte stránku.

Je to naozaj také jednoduché, že nie?

Vaše portfólio na Dribbbox

Nastavenie je jednoduché. Máte tri stĺpce. Vaše kontaktné údaje sú v ľavom okraji v statickej postrannej lište. Zábery vo formáte Dribbble sa nachádzajú v strede posuvného stĺpca a vpravo je miesto, kde môžu diváci vidieť váš projekt v plnom pohľade, jeden po druhom. Nastavenie je perfektné iba ako displej, čo znamená, že verejnosť vám nebude môcť poskytnúť spätnú väzbu, ako komentáre alebo poznámky. Tiež nebudú môcť zdieľať vašu prácu.

Dribbbox bol optimalizovaný pre zobrazenie v mobilných zariadeniach. Keď sa webové stránky zobrazia na mobilných zariadeniach, rozloženie a HTML stromu DOM sa zrekonštruujú mobile.js. Zadajte šírku zobrazenia, na ktorej je zobrazená hodnota mobile.js by sa malo uskutočniť v index.html.

 (funkcia () var s = document.createElement ("skript") s.src = "assets / js /" + (matchMedia ("max-width: 414px" ) + ".js" document.head.appendChild (s)) () 

záver

Dribbbox je užitočná knižnica, ktorá vám umožní zobraziť vaše Dribbble zábery pod vlastným názvom domény. Je veľmi intuitívne spolupracovať aj v prípade, že nepoznáte JavaScript; jednoducho pridajte svoje používateľské meno a (voliteľne) svoju e-mailovú adresu a vy ste všetci nastavení. Ak sa vám nepáči predvolená prezentácia, môžete ďalej prispôsobiť vzhľad pomocou CSS.

Viac o Hongkiat: Host vaše statické webové stránky v Dropbox s Pancake