Jak jsem vybudoval moderní portfolio s Nuxt 3: Kompletní technický rozbor

Úvod

Vítejte u technického rozboru mé nejnovější práce - moderního portfolia postaveného na Nuxt 3 s pokročilými optimalizacemi a administračním systémem. Tento projekt představuje moji práci a zkušenosti jak pracuji.

Součástí portfolia je samozřejmě administrace, která je robustní a obsahuje prvky jako je správa blogpostů, projektů, gistů, poznámek a médií. U postů nechybí ani like systém, který zaznamenává na základě cookies, a vlastní systém pro sledování zobrazení, nejčtenějších článků a podobně.

Níže vypisuji body, které tento web obsahuje nebo s nimi pracuje. Backend jsem kompletně přepsal z PHP/Nette na NestJS - jde tedy o vlastní REST API postavené na Node.js a plně typované v TypeScriptu.

Hlavní cíle projektu

1. Performance First

• Server-side rendering optimalizovaný pro Core Web Vitals a SEO
• Rychlé načítání i na mobilních zařízeních
• Cache strategie napříč API i frontendem

2. Moderní UX/UI

• Dark/Light mode s automatickou detekcí systému
• Plynulé animace a přechody napříč celým webem
• Responsivní design pro všechna zařízení

3. Robustní administrace

• Kompletní CMS systém
• Media management s automatickou kompresí a S3 úložištěm
• Cache a bezpečnostní opatření pro produkci

Technický Stack

Frontend

• Nuxt 3 / Vue 3 (Composition API), server-side rendering
• Tailwind CSS pro konzistentní design systém
• VueUse Motion pro animace

Backend

• NestJS (Node.js), kompletně typované v TypeScriptu
• PostgreSQL databáze, Drizzle ORM
• Vlastní opaque session token autentizace (ne JWT) s posuvnou expirací

Klíčové knihovny

• Markdown-it - pokročilé zpracování obsahu
• Prism.js - syntax highlighting pro kód
• Sharp - automatická komprese a optimalizace obrázků
• Vee-validate - validace formulářů

Deployment & Hosting

• Docker - kontejnerizovaný backend i frontend
• GitHub Actions - CI/CD pipeline s automatickým buildem a nasazením
• Vlastní VPS - plná kontrola nad infrastrukturou
• GitHub Container Registry - správa produkčních image verzí

Architektura aplikace

Struktura projektu

mikecode/
├── app/             # Nuxt frontend (pages, components, composables)
├── server/          # NestJS backend (moduly, DTO, služby)
├── packages/         # Sdílené balíčky (typy, auth, databázový klient)
└── public/           # Statické assety

Klíčové stránky

• Hlavní stránka - hero sekce s dynamickým textem
• Moje práce - portfolio projektů s filtrací
• Blog - markdown obsah s kategoriemi, líbí se mi systémem a zobrazeními
• Gisty - ukázky a tipy kódu k praktickému použití
• CV - interaktivní životopis
• Kontaktujte mě - kontaktní formulář s validací a anti-bot ochranou

Performance Optimalizace

1. Cache strategie

Cache hlavičky jsou nastavené individuálně podle typu obsahu a endpointu - statický obsah (číselníky) má delší platnost, dynamický obsah (blog, gisty) kratší, s ohledem na aktuálnost dat.

2. Optimalizace obrázků

• Sharp - komprese a generování responzivních variant při nahrání
• S3 úložiště - média se servírují přímo z cloudového úložiště, ne z aplikačního serveru
• Lazy loading pro všechny obrázky napříč webem

3. Code splitting

• Automatické chunkování podle stránek
• Lazy loading těžších komponent
• Tree shaking pro menší velikost výsledného balíčku

UX/UI Implementace

Dark/Light mode

Přepínání mezi světlým a tmavým režimem s automatickou detekcí systémové preference, doplněné o volbu vlastního barevného tématu.

Animace a přechody

• VueUse Motion pro plynulé animace při scrollování
• CSS přechody pro hover efekty
• Plynulé přechody mezi stránkami napříč celým webem

Responsivní design

• Mobile-first přístup
• Tailwind CSS pro konzistentní design
• Flexbox a Grid pro moderní layout

Analytics a Tracking

Vlastní eventy

• Odeslání kontaktního formuláře
• Zobrazení projektů
• Zobrazení a lajky článků
• Zobrazení a lajky gistů

Vedle vlastního trackingu na úrovni API a databáze běží souběžně i Google Analytics pro celkový přehled návštěvnosti.

Administrační systém

Kompletní CMS

• Správa blogu s markdown editorem
• Knihovna médií s uploadem a automatickou kompresí
• Správa projektů, dovedností a pracovních zkušeností
• Přehled a správa kontaktních zpráv

Deployment a DevOps

CI/CD Pipeline

• GitHub Actions pro automatický build a nasazení
• Selektivní build - úprava backendu nebo frontendu spustí build a deploy jen té dotčené části
• Automatické čištění starých buildů, ať se zbytečně nehromadí

Prostředí

• Vývoj - Docker Compose s lokální PostgreSQL databází
• Produkce - vlastní VPS, kontejnery řízené přes Docker Compose

Bezpečnost

Implementovaná opatření

• Rate limiting na přihlašování proti hrubé síle
• Ochrana proti odhalení existence účtu podle rychlosti odpovědi
• Bezpečnostní HTTP hlavičky napříč celým API
• Validace a limity na vstupní data

Cookies a soukromí

• Cookie consent s možností granulárního nastavení
• Lajky vázané na cookies, ne na účet

Klíčové výhody

1. Developer Experience

• Hot Module Replacement pro rychlý vývoj
• TypeScript napříč celým stackem pro typovou bezpečnost
• Jednotná struktura sdílených balíčků mezi projekty

2. User Experience

• Rychlá klientská navigace
• Plynulé přechody a animace
• Konzistentní vizuální jazyk napříč celým webem

3. SEO Optimalizace

• Server-side rendering pro vyhledávače
• Automaticky generovaná sitemap.xml
• Meta tagy a Open Graph napříč stránkami

Budoucí plány

Krátkodobé

• [ ] Dokončení vícejazyčného obsahu (CZ/EN)
• [ ] Rozšíření administrace o přehledové dashboardy

Dlouhodobé

• [ ] Pokročilejší analytické přehledy
• [ ] Další rozšíření administrace podle reálných potřeb

Získané poznatky

Co fungovalo skvěle

1. Nuxt 3 - výborná developer experience
2. Tailwind CSS - rychlé prototypování
3. Composition API - přehlednější organizace kódu
4. NestJS - jasná struktura backendu, snadná rozšiřitelnost

Výzvy a řešení

1. Přepis backendu z PHP na Node - sjednocení response formátu a autentizace
2. Optimalizace obrázků - Sharp a S3 pro rychlé servírování médií
3. SEO - server-side rendering v kombinaci s promyšlenými meta tagy

Závěr

Tento projekt představuje moderní přístup k tvorbě portfolia. Kombinuje výkonnost, UX a funkčnost v jednom celku. Nuxt 3 na frontendu a NestJS na backendu umožnily vytvořit robustní základ, na kterém se dá dál nezávisle stavět.

Pokud vás zajímá více technických detailů nebo máte otázky k implementaci, neváhejte mě kontaktovat!

Technologie použité v projektu: Nuxt 3, Vue 3, TypeScript, Tailwind CSS, NestJS, PostgreSQL, Drizzle ORM, Docker, GitHub Actions

Tento článek je součástí mé série o moderním web developmentu. Sledujte můj blog pro další technické články a tutoriály!