Co dostajesz
- Jeden plik HTML offline albo prawdziwe ścieżki w twoim projekcie React, Vue, Svelte lub Astro
- Strona główna, projekty i case studies, teksty i artykuły, wystąpienia, Uses, O mnie, CV, kontakt i 404
- Okładki projektów rysowane jako panele produktu w HTML na fotograficznych tłach
- Paleta poleceń, zakładki doświadczenia, siatka repozytoriów, filtry i walidowane formularze
- Opcjonalne tła lub zdjęcia z PopNow, wycenione, zanim zapłacisz
Sprawdzi się przy
- Inżynierowie i niezależni twórcy, którzy chcą mieć stronę osobistą
- Osoby szukające pracy, które potrzebują strony z case studies
- Programiści, którzy piszą lub występują i chcą mieć na to jedno miejsce
Nie nadaje się do
- Jasne lub kolorowe marki: projekt jest tylko ciemny
- Projektanci graficzni, których prace to głównie obrazy
- Strony firmowe i sklepy internetowe
Jak z niej korzystać
W Claude lub ChatGPT
Użyj umiejętności PopNow „Strona portfolio programisty” (developer-portfolio-website) do tego: Zbuduj moją stronę osobistą. Jestem inżynierem backendu w Berlinie; moje CV, trzy projekty i dwa wpisy na blogu są w ./notes.
W agencie do programowania
/popnow-developer-portfolio-website Zbuduj moją stronę osobistą. Jestem inżynierem backendu w Berlinie; moje CV, trzy projekty i dwa wpisy na blogu są w ./notes.
Potem spróbuj
Zrób tło dla czwartego projektu w tym samym stylu ciemnego kamienia i najpierw podaj wycenę.
Usuń sekcję wystąpień i zamień Uses na Proces.
Co przygotować
- Twoje stanowiska, daty i konkretne efekty
- Od dwóch do sześciu projektów z problemem, kluczowymi decyzjami i wynikami
- Wpisy, wystąpienia, repozytoria i narzędzia, które naprawdę masz
- Własny portret i prawdziwe zdjęcia z wydarzeń
Podobne umiejętności
Zobacz wszystkie →Kreator awatarów 3D
+3Zbuduj w przeglądarce uroczą pluszową postać 3D i zapisz ją jako przezroczysty PNG albo stronę 3D.
Heatmapa kalendarzowa
+3Rok codziennej aktywności jako cieniowana siatka kalendarza, z seriami, sumami i obsługą klawiatury.
Strona lądowania SaaS AI
+3Ciepły piaszczysty papier i żywa tablica kanban, na której asystent planuje zadania i przesuwa karty.
Animowana sekcja hero
+3Sekcja hero dla landing page z płynnie zmieniającym się słowem w nagłówku, dwoma przyciskami i szeroką ramką na obraz.
Strona agencji kreatywnej z shaderem
+3Żywy pomarańczowy shader w hero, przyklejone hasło, zaokrąglone menu i siatka case studies.
Ciemny landing page SaaS
+3Ciemna strona marketingowa produktu software z bogatą animacją, dostarczana jako jeden samodzielny plik HTML.
Strona portfolio projektanta
+3Sześć przechylonych kart wokół blednącego nagłówka, jedna czerwona karta portretu, redakcyjne case studies.
Redakcyjna strona SaaS
+3Granatowe dzielone hero, szeryfowy nagłówek obok zdjęcia dokumentalnego, skośne pasma i kobaltowy akcent.
Szablon strony glassmorphism
+3Matowe szklane pigułki na prawie czarnym tle, ogromny szeryfowy nagłówek i zapis e-mail.
Strona produktu sprzętowego
+3Ogromne cienkie nazwy modeli na srebrnych zdjęciach, matowe karty specyfikacji i linia produktów w skali.
Interaktywny diagram architektury
+3Klikalny diagram systemu offline, zbudowany ze sprawdzonego modelu JSON, z dowodami do każdego bloku.
Interaktywne hero z siatką
+3Ciemna siatka cienkich nici, która zagina się ku kursorowi i puszcza świecący pierścień z każdego kliknięcia.
Interaktywny graf wiedzy
+3Zamień notatki z projektu w przeszukiwalny graf offline, w którym każde twierdzenie prowadzi do wiersza źródła.
Szablon pulpitu KPI
+3Cztery kafle KPI ze znacznikami zmian nad wykresem liniowym, tabelą podziału i słupkami celów.
Strona lądowania z makiet AI
+3Najpierw zobacz trzy projekty pełnej strony, wybierz jeden, a agent zbuduje go jako czysty kod.
Szablon strony magazynu
+3Strona magazynu w jakości druku z artykułami, tematami, małym sklepem i prenumeratą, jako jeden plik HTML.
Hero z animacją cząsteczek
+3Tekst na ciepłym papierze obok obracającej się kuli z kropek, która zmienia kształt przy każdym pomyśle.
Strona marki osobistej
+3Portret wtopiony w ciepły papier pod cienkim nawiasem, z mocnymi hasłami po obu stronach.
Filmowa strona premiery produktu
+3Prawie czarna strona w świetle filmowym: szeryfowa karta tytułowa, nocna scena i formularz rezerwacji.
Szablon panelu administracyjnego
+3Działająca konsola zaplecza z wykresami, tabelami, tablicą kanban i kalendarzem, jako jeden plik HTML offline.
Szablon landing page SaaS
+3Spokojna, jasna strona marketingowa produktu software z działającą konsolą produktu, cennikiem i rejestracją.
Strona CV i portfolio w stylu scrapbooka
+3Wielostronicowe CV online z papierowych przedmiotów, z case studies i życiorysem do druku.
Szablon sklepu ze sneakersami
+3Kompletny sklep z obuwiem lub odzieżą: katalog, strony produktów, koszyk i demonstracyjna kasa w jednym pliku HTML.
Strona lądowania automatyzacji przepływów
+3Grafitowa strona, mały nagłówek i żywy graf węzłów, który działa, ponawia i strumieniuje logi.
Pytania
Dlaczego okładki projektów nie są zrzutami ekranu?
Każda okładka to mały interfejs produktu zbudowany w HTML i CSS z danymi z twojej dziedziny. Pozostaje ostry w każdym rozmiarze, pasuje do kolorów strony i nigdy nie pokazuje prywatnych danych z prawdziwego ekranu.
Czy potrzebuję do tego PopNow?
Nie. Dołączone tła z kamieniem i piaskiem możesz wykorzystać do swoich projektów, a wystąpienia mogą mieć rysowane miniatury. PopNow jest opcjonalny do nowych teł, zdjęcia biurka lub portretu po korekcji kolorów, a każde uruchomienie jest najpierw wyceniane.
Co, jeśli nie mam wystąpień ani repozytoriów open source?
Sekcje bez prawdziwej treści są usuwane razem z linkami do nich. Umiejętność nigdy nie wymyśla wystąpień, repozytoriów, liczby gwiazdek ani klientów prawdziwej osoby.
Czy można to dodać do mojej istniejącej aplikacji Next.js?
Tak. Umiejętność rozpoznaje stos technologiczny, zostawia niezwiązane pliki i odtwarza te same ścieżki jako prawdziwe strony z tymi samymi tokenami i fontami.