Osiem oryginalnych układów portfolio programisty z podglądem na żywo, do czego pasuje każdy z nich i szablon HTML i CSS do skopiowania, który za darmo opublikujesz na GitHub Pages.
Mocne portfolio programisty szybko pokazuje trzy rzeczy: co budujesz, dowód, że to działa, i jak się z Tobą skontaktować. Osiem poniższych układów to oryginalne przykłady do podglądu i dostosowania, od jednostronicowej listy studiów przypadków po stronę w stylu terminala, a pod nimi prosty szablon HTML i CSS, który opublikujesz jeszcze dziś.
Wybierz układ według celu
Cel
Układ do wypróbowania
Dlaczego
Pierwsza praca juniora
Studia przypadków projektów
Pokazuje sposób myślenia, nie tylko zrzuty ekranu
Klienci freelance
Usługi i rezultaty
Zaczyna od tego, co dostaje klient
Praca open source
Siatka repozytoriów
Prawdziwy kod jest o jedno kliknięcie
Frontend lub design engineering
Interaktywna prezentacja
Sama strona jest dowodem
Role senior lub staff
Najpierw teksty
Dłuższe wpisy pokazują umiejętność oceny
Większość list portfolio programistów to zrzuty ekranu cudzych stron, których nie można skopiować i które szybko się starzeją. Tutaj każdy układ to oryginalny wireframe narysowany dla tej strony. Przełączaj się między nimi, aby zobaczyć strukturę, przeczytaj, kiedy każdy pasuje, a potem zacznij od szablonu na dole.
Wybierz z tabeli cel, który pasuje do Twojej następnej pracy lub klienta.
Obejrzyj odpowiadający mu układ w przełączniku i zanotuj kolejność jego sekcji.
Skopiuj szablon, wstaw swoje imię, projekty i linki, a niepotrzebne sekcje usuń.
Opublikuj go za darmo na GitHub Pages lub dowolnym hostingu statycznym, a potem dodaj link w CV i profilach.
Trzy ukończone projekty z krótkim opisem są lepsze niż dwanaście zrobionych w połowie.
Przy każdym projekcie podaj problem, swoją rolę, stack i jeden rezultat, za który ręczysz.
Dodaj link do działającego demo i do kodu źródłowego; recenzenci często sprawdzają kod przed zrzutami ekranu.
Umieść zwykły link e-mail w nagłówku i stopce, żeby nikt nie musiał go szukać.
Sprawdź swoje portfolio pod kątem dostępności i szybkości, bo recenzenci to robią.
Najczęściej zadawane pytania
Co powinno zawierać portfolio programisty?
Jednozdaniowe podsumowanie tego, czym się zajmujesz, od trzech do sześciu projektów z problemem, rolą, stackiem i linkami, krótką sekcję o sobie i jasny sposób kontaktu. Pobieranie CV i sekcja z tekstami to przydatne dodatki, nie wymagania.
Czy muszę budować portfolio od zera?
Nie. Osobom rekrutującym bardziej zależy na projektach niż na tym, czy ramę napisałeś ręcznie. Samodzielne zbudowanie to dobry mały projekt przy rolach frontendowych, a szablon lub kreator stron w zupełności wystarczy programistom backend, data czy mobile.
Gdzie za darmo hostować portfolio programisty?
GitHub Pages publikuje HTML, CSS i JavaScript prosto z repozytorium pod adresem w rodzaju yourname.github.io. Inne hostingi statyczne działają podobnie, a własną domenę możesz dodać później.
Ile projektów pokazać?
Od trzech do sześciu. Wybierz te najbliższe pracy, której szukasz, i najmocniejszy umieść na początku, bo wielu odwiedzających nigdy nie przewija listy do końca.
Czy dodawać projekty ze szkoły lub z tutoriali?
Tylko jeśli istotnie je zmieniłeś. Klon z tutorialu, który ma wielu kandydatów, mówi recenzentowi niewiele; dodaj funkcję, zestaw testów lub prawdziwy zbiór danych i wyjaśnij, co zmieniłeś.
Opisuj projekty jak małe studia przypadków
Zrzut ekranu dowodzi, że umiesz zrobić zrzut ekranu. Dwa lub trzy zdania o problemie, trudnej części i sposobie rozwiązania pokazują, jak myślisz, a to właśnie sprawdzają rozmowy kwalifikacyjne.
Każde studium przypadku ma być łatwe do przejrzenia: tytuł, jednozdaniowe podsumowanie, tagi stacku, potem krótka historia i linki. Odwiedzający otworzą szczegóły, jeśli zechcą.
Niech sama strona będzie dobrą próbką
Twoje portfolio to jedyny projekt, który na pewno zobaczy każdy recenzent. Semantyczne nagłówki, widoczne style fokusu, szybkie ładowanie i układ działający na telefonie liczą się jako dowody.
Unikaj ciężkich animacji wstępnych i ekranów ładowania. Opóźniają treść, po którą przyszli recenzenci, i mogą szkodzić osobom preferującym ograniczony ruch.
Aktualizuj je małym wysiłkiem
Trzymaj projekty jako prostą listę w jednym pliku, aby dodanie nowego zajmowało minuty. Usuwaj projekty, które nie odpowiadają już Twojemu poziomowi.
Dodaj w stopce linię z datą ostatniej aktualizacji. Dyskretnie mówi odwiedzającym, że informacje są aktualne.
Lista kontrolna karty projektu
Na co powinien odpowiadać każdy wpis projektu
Pole
Przykład
Tytuł
Aplikacja do zamiany zmian dla małej przychodni
Jednozdaniowe podsumowanie
Pozwala personelowi wymieniać się zmianami bez ponownego wpisywania grafiku przez kierownika
Twoja rola
Samodzielna realizacja albo części, za które odpowiadałeś w zespole
Stack
React, Node, Postgres
Trudna część
Zapobieganie temu, by dwie osoby jednocześnie zajęły tę samą zmianę
Rezultat
Coś prawdziwego i sprawdzalnego, na przykład przechodzące testy lub prawdziwi użytkownicy
Linki
Działające demo i repozytorium z kodem
Darmowy szablon portfolio programisty
Jeden plik HTML z CSS inline. Nie wymaga budowania, działa na telefonach i przełącza się na ciemne kolory, gdy prosi o to system odwiedzającego.
Szablon portfolio w jednym pliku
Edytuj kod, a podgląd się zaktualizuje. Zastąp przykładowe imię, projekty i e-mail, a potem zapisz plik jako index.html.
Studia przypadków projektów
Najlepsze dla: Osoby szukające pracy na poziomie junior i mid
Imię i jednozdaniowa rola
Trzy karty studiów przypadków
Krótko o mnie
Kontakt
Każda karta otwiera stronę z problemem, podejściem, stackiem i rezultatem.
Usługi i rezultaty
Najlepsze dla: Freelancerzy
Co buduję dla klientów
Lista usług
Wybrane realizacje
Proces w trzech krokach
Formularz kontaktowy lub e-mail
Mówi do kupujących, więc zaczyna od efektów, a nie od języków.
Siatka repozytoriów
Najlepsze dla: Kontrybutorzy open source
Wstęp
Siatka repozytoriów z językiem i celem
Wystąpienia lub wpisy
Kontakt
Każdy kafelek prowadzi prosto do kodu i działającego demo.
Styl terminala
Najlepsze dla: Role backend, DevOps i narzędziowe
Nagłówek w stylu wiersza poleceń
Podsumowanie whoami
Lista projektów ls
Kontakt cat
Zabawne, o ile każda linia jest czytelna, a strona nadal działa z myszą.
Interaktywna prezentacja
Najlepsze dla: Programiści frontend i kreatywni
Pełnoekranowy interaktywny hero
Pokaz projektów
Notatki techniczne
Kontakt
Szanuj ograniczony ruch i zostaw zwykłą tekstową drogę do projektów.
Najpierw teksty
Najlepsze dla: Starsi inżynierowie
Krótkie bio
Najnowsze wpisy
Wybrane projekty
Wystąpienia
Kontakt
Wpisy pokazują umiejętność oceny i komunikacji, które mocno ważą przy rekrutacji seniorów.
Jednostronicowe CV
Najlepsze dla: Każdy, kto ma mało czasu
Nagłówek z linkami
Oś czasu doświadczenia
Projekty
Umiejętności
Pobierz CV
Webowa wersja CV, którą na telefonie czyta się łatwiej niż PDF.
Podzielony ekran
Najlepsze dla: Programiści, którzy też projektują
Stała lewa kolumna z imieniem i linkami
Przewijana prawa kolumna z projektami
Linki kontaktowe pozostają widoczne, gdy odwiedzający przeglądają prace.