Twój Pierwszy Projekt: Zamień CV w interaktywną aplikację w 60 minut!

Witajcie na dzisiejszych zajęciach! 🚀

Rynek pracy, szczególnie w obszarze mediów i marketingu, wymaga czegoś więcej niż pliku PDF lub DOC wysłanego mailem. Dziś liczy się Personal Branding.

Wyobraźcie sobie, że zamiast zwykłego dokumentu, wysyłacie rekruterowi link do nowoczesnej, interaktywnej strony, która idealnie wyświetla się na jego smartfonie. To właśnie zrobimy w ciągu najbliższych 60 minut.

Nie musicie być programistami. Wykorzystamy podejście hybrydowe: Waszą wiedzę o sobie oraz potęgę AI, by stworzyć produkt na poziomie "Senior Level".

🧰 Czego użyjemy? (Słowniczek dla Laika)

Zanim zaczniemy, wyjaśnijmy sobie trzy pojęcia, które sprawią, że poczujecie się pewniej. Rozmawialiśmy już wstępnie o nich w poprzednich postach:

HTML: To "szkielet" Waszej strony. To tutaj znajduje się treść: Wasze dane, informacje o doświadczeniu, linki oraz inne potrzebne rzeczy.
Tailwind CSS (przez CDN): To "magiczne pudełko z opcjami wyglądu waszej aplikacji". Pozwala nam nadawać stronie wygląd (kolory, fonty, odstępy) bez tworzenia osobnych, skomplikowanych plików ze stylem. Wszystko dzieje się wewnątrz jednego pliku!
Netlify: Nasz "program do wyświetlenia CV". To darmowa platforma, która weźmie Wasz plik z komputera i w kilka sekund opublikuje go w globalnej sieci pod unikalnym adresem(subdomeną).

📝 Plan Działania: Krok po Kroku

Krok 1: Przygotuj wsad (Twoje CV)

Otwórz swoje obecne CV. Skopiuj z niego najważniejsze sekcje: O mnie, Doświadczenie, Edukacja, Umiejętności i Kontakt. AI potrzebuje tych danych, aby "wiedzieć", o czym budować stronę. Równie dobrze możesz wkleić całe CV, ale jest to pójście na skróty. Proponuję maksymalnie dopracować to co chcecie mieć na swojej stronie dobry input = dobry output.

Krok 2: Użyj "Mistrzowskiego Promptu"

Ten prompt został skonstruowany według profesjonalnego frameworka CRISPE (metod i nazw jest obecnie wiele, nie zwracaj uwagi na nomenklaturę, skup się na treści i specyfikacji), aby zapewnić najwyższą jakość designu i kodu.

MISTRZOWSKI PROMPT DO TWOJEJ WIZYTÓWKI:

(CR) ROLA: Jesteś elitarnym UI/UX Designerem i Lead Frontend Developerem. Twoim celem jest stworzenie nowoczesnej, minimalistycznej strony personal brandingowej (Digital Business Card / Personal Website), która wygląda jak projekty z serwisu Awwwards, Behance.

(I) KONTEKST: Użytkownik to student, który chce dzięki nowej stronie internetowej znaleźć lepszą pracę i zachwycić przyszłego pracodawcę. Strona ma być jego interaktywnym CV. Musi budować zaufanie, pokazywać profesjonalizm i nowoczesne podejście do technologii. Inspiracja stylem: czysty layout, dużo "oddechu" (whitespace), elegancka typografia. W oparciu o zasady rządzące najlepszymi Design Systemami i UI Kit'ami.

(S) ZADANIE: Wygeneruj jeden, kompletny plik index.html.

Użyj Tailwind CSS zaimportowanego przez CDN (wszystko musi działać z pozycji jednego pliku HTML).

Cała strona musi być w tym jednym pliku (żadnych dodatkowych plików .css czy .js, wszelkie ewentualne dodatki bezpośrednio w HTML).

Struktura:

Hero Section: Moje imię i nazwisko, chwytliwy slogan (Headline), przycisk do pobrania PDF oraz linki do LinkedIn/Social Media (przycisk powinien linkować do pliku /CV.pdf umieszczonego w folderze strony [folder główny bez podfolderów]).

O mnie: Krótka, inspirująca biografia.

Doświadczenie & Edukacja: Elegancka oś czasu, siatka (grid), punktowana lista. W zależności od objętości doświadczenia w pracy i edukacji.

Skills: Nowoczesne tagi/pigułki z umiejętnościami.

Kontakt: Prosta sekcja z mailem i numerem telefonu.

(P) STYL I DESIGN SYSTEM:

Kolory: Główny kolor: [Wstaw kolor, np. Głęboki granat #0f172a], Tło: Jasne/Białe, Akcent: [Wstaw kolor, np. Złoty lub Błękit].

Typografia: Nagłówki - Serif (np. Playfair Display), Treść - Sans-serif (np. Inter).

Efekty: Delikatne cienie (soft shadows), płynne przejścia (transitions) przy najechaniu na przyciski.

Responsywność: Strona musi być perfekcyjna na telefonie (Mobile-First) oraz innych urządzeniach. Full Responsive.

(E) DANE DO WSTAWIENIA: [TUTAJ WKLEJ TREŚĆ SWOJEGO CV]

Aby zamienić ten tekst w gotowy kod, potrzebujecie dostępu do modeli językowych (LLM) lub dedykowanych generatorów wizualnych. Oto najlepsze opcje dostępne w 2026 roku:

1. Najlepsze Modele Językowe (Chatboty)

Claude.ai (Anthropic) – 👑 Król Kodowania. Obecnie uznawany za najdokładniejszy model w pisaniu czystego kodu Tailwind CSS i HTML[cite: 19]. [cite_start]Funkcja "Artifacts" pozwoli Wam zobaczyć podgląd strony od razu w oknie czatu[cite: 20].
DeepSeek – 🦄 Czarny Koń. Model, który wstrząsnął rynkiem, oferując niesamowitą wydajność często całkowicie za darmo[cite: 21]. [cite_start]Świetnie radzi sobie z logiką i szybkimi skryptami[cite: 22].
ChatGPT (OpenAI) – 🛠️ Wszechstronny Scyzoryk. Najlepszy do analizy Waszego przesłanego pliku CV i wyciągania z niego esencji[cite: 23]. [cite_start]Jeśli macie screenshot swojego starego CV, model Vision go precyzyjnie przeanalizuje[cite: 24].
Gemini (Google) – 📚 Bibliotekarz. Dzięki ogromnemu oknu kontekstowemu możecie mu wkleić nie tylko CV, ale i dziesiątki swoich projektów jako bazę do portfolio[cite: 25, 26, 27].
LM Arena (LMSYS) – Otwarta arena rankingowa, gdzie społeczność wybiera najlepsze modele[cite: 28]. [cite_start]W zakładce "Direct Chat" możecie przetestować topowe modele świata zupełnie za darmo[cite: 29].

2. Generative UI (Widzisz kod w czasie rzeczywistym)

To narzędzia stworzone specjalnie do budowania interfejsów „na żywo” bezpośrednio z opisu tekstowego:

v0.dev (Vercel) – Standard w React/Tailwind. Narzędzie od twórców Next.js, które generuje zoptymalizowane komponenty idealnie pasujące do nowoczesnego stacku technologicznego[cite: 31, 32].
Bolt.new (StackBlitz) – Full-Stack w przeglądarce. Pozwala edytować kod, instalować biblioteki i podglądać projekt w czasie rzeczywistym, bez wychodzenia z przeglądarki[cite: 33, 34].
Lovable.dev – Narzędzie stawiające na estetykę i UX. [cite_start]Idealne, gdy zależy Wam na profesjonalnym designie i efekcie "wow" od pierwszej sekundy[cite: 35, 36].

3. „Sekretne” darmowe dostępy i agregatory

Jeśli skończą Wam się darmowe wiadomości na powyższych stronach, skorzystajcie z tych opcji:

Google AI Studio – Profesjonalne narzędzie od Google, dające darmowy dostęp programistyczny do najmocniejszych modeli Gemini 1.5 Pro.
Phind – Wyszukiwarka AI stworzona specjalnie dla programistów. Bardzo precyzyjna w rozwiązywaniu technicznych problemów z kodem.
Poe.com – Platforma dająca dostęp do wielu modeli (GPT-4, Claude, Llama) w jednym miejscu, z wygodnymi dziennymi limitami.
HuggingChat – Całkowicie darmowa platforma od Hugging Face, dająca dostęp do najlepszych modeli Open Source (np. Llama 3 czy Qwen).

4. Błyskawiczne generatory Landing Page

Dla tych, którzy potrzebują kompletnej struktury w kilkanaście sekund:

Durable – Pozwala zbudować podstawowy szkielet strony biznesowej w około 30 sekund[cite: 378].
Loopple AI – Umożliwia budowanie sekcji strony z gotowych bloków za pomocą prostych poleceń tekstowych.

💡 Pro-Tip: Jeśli model AI "utknie" lub wygeneruje błąd w kodzie, po prostu skopiuj treść błędu z przeglądarki i wklej ją z powrotem do czatu. AI naprawi swój błąd i poda Ci poprawną wersję pliku w kilka sekund!

Poprawki i Szlify

Jeśli coś Ci się nie podoba, nie zmieniaj kodu ręcznie. Napisz do AI: "Zmień kolor tła na delikatny szary" lub "Zwiększ odstępy między sekcjami doświadczenia". Ważne jest to, aby komunikować się z algorytmem w sposób jasny, klarowny i precyzyjny.

🚀 Publikacja: Twoja Strona "Na Żywo" w 5 Sekund!

Masz już kod od AI? Zapisz go na komputerze w folderze jako plik o nazwie index.html Możesz to zrobić za pomocą Visual Studio Code, a nawet zwykłago notatnika.

Wejdź na stronę Netlify i załóż konto.
Wejdź na stronę Netlify Drop.
Przeciągnij folder, w którym znajduje się Twój plik index.html, bezpośrednio w okno przeglądarki.
MAMY TO! Twoja strona jest już dostępna pod publicznym linkiem.
Wyślij ten link na swój telefon i zobacz, jak profesjonalnie wygląda Twoja wizytówka w wersji mobilnej i desktopowej.

💡 Dlaczego to podejście wygrywa?

W 2026 roku tworzenie stron to dialog z technologią. Dzięki temu ćwiczeniu nauczyliście się:

Jak rozmawiać z AI, używając języka designu (kolory, hierarchia wizualna, typografia).
Jak działają nowoczesne systemy projektowe (Design Systems).
Jak błyskawicznie wdrażać projekty w życie bez zbędnych barier technologicznych za pomocą promtów.

Do dzieła! Niech Wasze cyfrowe wizytówki pomogą Wam zdobyć wymarzone staże i pracę. Powodzenia! 🟢

Pytania? Coś nie działa? Piszcie śmiało na m@zeprzalka.com!