Sukurkite savarankišką „Dribbble“ portfelį su „Dribbbox“

„Dribbble“ yra populiari svetainė dizaino srityje, kurioje galite pasidalinti savo WIP projektais, dizainais, maketais ir net nemokamais. Savo ruožtu gausite grįžtamąjį ryšį ir kritiką iš kolegų dizainerių, kurie yra gera stumti savo dizainą iki kito lygio.

Jei norite individualizuoti savo portfelio rodymo būdą, galite rodyti nuotraukas pagal savo domeną. Norėdami padėti jums, galite išbandyti „Dribbbox“.

„Dribbbox“ yra biblioteka, padedanti rodyti „Dribbble“ vaizdus pagal savo domeną, ar tai nebus jokio vargo. Pažvelkime, kaip galite nustatyti „Dribbbox“, kad galėtumėte pristatyti savo meno kūrinius.

Dribbbox diegimas

Manau, kad turite domeną ir serverio sąranką; Bendras priegloba turėtų veikti tik gerai. Priešingu atveju galite paleisti vietinį serverį, jei neturite. Jei jums reikia instrukcijų, kaip nustatyti vietinį serverį su AMPPS, skaitykite apie tai čia.

Atsisiųskite ZIP paketą ir įkelkite turinį į serverį. Įtraukite index.html, config.js ir turto aplanką.

Atidaryk config.js ir nurodykite naudotojo vardą, kad gautumėte portfelį iš „Dribbble“.

Šiuo atveju demonstracijoje naudojasi „Thoriq Firdaus“ portfeliu. Štai kaip jūs atkuriate portfelį.

 dribbbox.config = dribbble_username: "tfirdaus", trumpas aprašymas: "Pasaulinio lygio dizaineris, kuris nori būti.", email_address: "[email protected]" 

Išsaugokite ir atnaujinkite puslapį.

Tai tikrai taip paprasta, ar ne?

Jūsų portfelis „Dribbbox“

Sąranka yra paprasta. Turite tris stulpelius. Jūsų kontaktiniai duomenys yra tolimoje kairėje statinėje šoninėje juostoje. Jūsų Dribbble kadrai yra viduryje slenkamoje stulpelyje, o dešinėje - tai, kur žiūrovai gali matyti jūsų projektą pilną vaizdą vienu metu. Sąranka puikiai tinka tik kaip ekranas, o tai reiškia, kad visuomenė negalės jums pateikti atsiliepimų, pavyzdžiui, komentarų ar mėgstamiausių. Jie taip pat negalės pasidalinti jūsų darbu.

Dribbbox buvo optimizuotas peržiūrėti mobiliuosiuose įrenginiuose. Kai internetinė svetainė peržiūrima mobiliuoju telefonu, DOM medžio išdėstymas ir HTML bus rekonstruoti mobile.js. Nurodykite peržiūros srities plotį mobile.js turėtų vykti index.html.

 (funkcija () var s = document.createElement ("script") s.src = "turtas / js /" + (matchMedia ("(maksimalus plotis: 414px)"). atitinka? "mobilusis": "darbalaukis" ) + ".js" document.head.appendChild (s)) () 

Išvada

„Dribbbox“ yra patogi biblioteka, rodanti jūsų „Dribbble“ atvaizdus pagal savo domeno vardą. Jis yra labai intuityvus dirbti su net jei nežinote „JavaScript“; tiesiog pridėkite savo naudotojo vardą ir (pasirinktinai) savo el. pašto adresą, ir visi esate nustatyti. Jei jums nepatinka numatytasis pristatymas, galite dar labiau suasmeninti išvaizdą per CSS.

Daugiau apie „Hongkiat“: priimkite savo statinę svetainę „Dropbox With Pancake“