Stwórz własny Dribbble Portfolio z Dribbbox
Dribbble to popularna strona internetowa w dziedzinie projektowania, w której możesz udostępniać swoje projekty WIP, projekty, makiety, a nawet darmowe gadżety. W zamian otrzymasz informację zwrotną i krytykę od innych projektantów, co jest dobre, aby przenieść twój projekt na wyższy poziom.
Jeśli chcesz spersonalizować sposób wyświetlania swojego portfolio, możesz wyświetlać zdjęcia w swojej własnej domenie. Aby ci w tym pomóc, możesz wypróbować Dribbboksa.
Dribbbox to biblioteka, która pomaga nam wyświetlać strzały Dribbble w naszej własnej domenie, bez żadnych kłopotów. Przyjrzyjmy się, w jaki sposób możesz skonfigurować Dribbboksa do prezentacji swoich dzieł sztuki.
Instalacja Dribbbox
Zakładam, że masz swoją domenę i konfigurację serwera; wspólny hosting powinien działać dobrze. W przeciwnym razie możesz uruchomić lokalny serwer, jeśli go nie masz. Jeśli potrzebujesz instrukcji, jak skonfigurować serwer lokalny za pomocą AMPPS, przeczytaj o tym tutaj.
Pobierz pakiet ZIP i prześlij zawartość na serwer. Dołącz folder index.html, config.js i assets.
Otworzyć config.js i podaj nazwę użytkownika, aby pobrać swoje portfolio z Dribbble.
W tym przypadku używam portfolio Thoriq Firdaus do demo. Oto jak odzyskać portfolio.
dribbbox.config = dribbble_username: "tfirdaus", short_description: "światowej klasy projektant, który chce być.", email_address: "[email protected]"
Zapisz i odśwież stronę.
To naprawdę takie proste, prawda?
Twoje portfolio na Dribbbox
Konfiguracja jest prosta. Masz trzy kolumny. Twoje dane kontaktowe znajdują się po lewej stronie statycznego paska bocznego. Twoje zdjęcia Dribbble znajdują się w środkowej przewijanej kolumnie, a po prawej stronie widzowie mogą zobaczyć Twój projekt w pełnym widoku, pojedynczo. Konfiguracja jest idealna tylko jako wyświetlacz, co oznacza, że opinia publiczna nie będzie w stanie przekazywać opinii, takich jak komentarze lub polubienia. Nie będą też mogli dzielić się twoją pracą.
Dribbbox został zoptymalizowany pod kątem wyświetlania na urządzeniach mobilnych. Gdy strona jest wyświetlana na telefonie komórkowym, układ i HTML drzewa DOM zostaną zrekonstruowane mobile.js
. Określ szerokość rzutni, której mobile.js
powinno odbywać się w index.html
.
(function () var s = document.createElement ("script") s.src = "assets / js /" + (matchMedia ("(max-width: 414px)"). matches? "mobile": "desktop" ) + „.js” document.head.appendChild (s)) ()
Wniosek
Dribbbox to przydatna biblioteka, w której możesz wyświetlać swoje zdjęcia Dribbble pod własną nazwą domeny. Obsługa jest bardzo intuicyjna, nawet jeśli nie znasz JavaScript; po prostu dodaj swoją nazwę użytkownika i (opcjonalnie) swój adres e-mail, a wszystko gotowe. Jeśli nie podoba Ci się domyślna prezentacja, możesz dodatkowo spersonalizować wygląd za pomocą CSS.
Więcej o Hongkiat: Hostuj swoją statyczną stronę internetową w Dropbox With Pancake