Matěj Hrabák - Osobní Portfolio
Ukázky projektu
Klíčové funkce
Dvojí zaměření
Unikátní kombinace webového vývojáře a finančního poradce s plynulým přepínáním mezi oběma sekcemi.
Moderní design
Pokročilé animace s Framer Motion, interaktivní prvky a plně responzivní design s tmavým motivem.
Blog a články
MDX blog systém s články o financích a pojištění, optimalizovaný pro SEO a sdílení.
Popis projektu
Toto portfolio představuje můj osobní projekt, který kombinuje mé dvě profesní zaměření - webový vývoj a finanční poradenství. Web slouží jako ukázka mých schopností v obou oblastech a zároveň jako platforma pro prezentaci mých služeb a sdílení znalostí.
Hlavní cíle a implementace
Moderní design a UX
Implementoval jsem moderní, minimalistický design s důrazem na uživatelskou přívětivost. Použití Framer Motion pro plynulé animace a přechody mezi sekcemi vytváří příjemný uživatelský zážitek.
Technická implementace
Využití Next.js 14 s App Router pro optimální výkon a SEO, TypeScript pro typovou bezpečnost, a Tailwind CSS v kombinaci se Shadcn UI pro konzistentní a moderní vzhled.
Blog systém s MDX
Implementace blogového systému pomocí MDX pro tvorbu článků s bohatým obsahem, včetně automatického generování meta tagů a optimalizace pro vyhledávače.
Optimalizace a výkon
Důraz na výkon a optimalizaci, využití Image komponenty Next.js pro optimalizaci obrázků, implementace lazy loadingu a efektivní code splitting pro rychlé načítání.
Výzvy a jejich řešení
Největší výzvou bylo vytvořit web, který by efektivně prezentoval obě mé profesní role a zároveň poskytoval intuitivní navigaci pro návštěvníky hledající konkrétní služby. Toto jsem vyřešil pomocí jasného rozdělení obsahu a implementací kontextového přepínání mezi sekcemi.
Výsledek a přínosy
Portfolio úspěšně demonstruje mé schopnosti v obou oblastech a slouží jako efektivní nástroj pro získávání nových klientů. Blog sekce pomáhá budovat důvěryhodnost a poskytuje hodnotný obsah návštěvníkům. Projekt také slouží jako ukázka mých technických dovedností v moderním webovém vývoji.
Technické detaily
Frontend technologie
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Framer Motion
- Shadcn UI
Blog a obsah
- MDX pro články
- Next.js MDX Remote
- Automatické meta tagy
Optimalizace
- Next.js Image Optimization
- Code Splitting
- SEO optimalizace
- Lazy Loading
Deployment
- Vercel hosting
- Vlastní doména
- CI/CD pipeline
Doba realizace
Vývoj zahájen: 15. 12. 2024. Projekt byl vyvíjen průběžně a aktuální stav je aktualizován k 6. 11. 2025.
Rok dokončení
2025
Status
Nasazeno produkční prostředí
