jajozeldev.eu – realizácia

CIEĽ

Cieľ projektu

Osobná stránka a portfólio vývojára postavené na čistom .NET 9 MVC bez CMS. Cieľom je mať rýchly, spoľahlivý a plne pod kontrolou spravovaný web, kde sa projekty dajú pridávať cez jednoduchú administráciu, vrátane obrázkov a sekcií. Dôraz na výkon, prístupnosť a čistý dizajn (svetlý/tmavý režim).

RIEŠENIE

Čo projekt rieši

Admin správa projektov: názov, slug, krátky popis, sekcie (introtext, technologies, features, …), poradie obrázkov podľa sekcie
Upload hlavného obrázka + samostatné uploady pre sekcie (thumb/webp/originál), lightbox na detaile
Sticky navigácia sekcií s automatickým zvýraznením aktívnej sekcie
Alerty cez TempData["Success"|"Error"|"Warning"] a partial _Alerts.cshtml
Generovanie slugu z titulku, bezpečné uloženie HTML obsahu sekcií (RTE)
Vlastný systém generovania faktúr

POUŽITEĽNOSŤ

Použiteľnosť a prístupnosť

Responzívny layout, čistá typografia, svetlý/tmavý režim cez CSS premenné
Sticky sekčná navigácia, ktorá neprekáža obsahu a funguje aj na mobile
Lightbox s podporou ESC a kliknutia mimo obrázka
Štandardné focus states, čitateľné kontrasty, bez zbytočných animácií (rešpekt „reduced motion“)

KVALITA

Výkon a optimalizácia

WebP + thumb pre rýchle načítanie, loading="lazy" kde dáva zmysel
Minimalizácia JS/CSS, defer načítavanie skriptov, bez 3rd-party trackerov
Jednoduchá cache statických súborov, obrázky s rozumnými rozmermi
Cieľ: stabilné vysoké Core Web Vitals a rýchla prvá interakcia aj na mobile

PRAX

Výzvy a riešenia

Sticky nav a kotvy na mobile: vybalansovanie bodu, kedy sa menu „prepnú“ do sticky, aby sa odkazy netrafili „pod“ header → vyriešené jemným offsetom a IntersectionObserverom
Obrázkový pipeline na hostingu: bezpečné generovanie webp/thumb a konzistentné ukladanie ciest v modeli → jasne rozdelené vlastnosti v ProjectModel
Jednoduché, ale robustné admin UX: udržať WYSIWYG obsah sekcií a poradie obrázkov bez zbytočného JS frameworku

STACK

Použité technológie

Backend: .NET 9, ASP.NET Core MVC, C#, Dapper (SQL Server)
Architektúra: knižnica jajozeldev.eu.library (Models, Repositories, Services, Helpers)
Frontend: Vlastné CSS, témy, vanilla JS (sticky nav, lightbox)
Obrázky: generovanie thumb + webp (hlavný obrázok aj sekčné obrázky), <picture> s fallbackom
Šablóny: Views/Partials (napr. _Alerts.cshtml cez TempData)

POD KAPOTOU

Technické riešenie

Oddelená knižnica jajozeldev.eu.library (modely, repozitáre, služby, helpery) = prehľadný kód a jednoduché testovanie
Dapper s parametrizovanými dopytmi, jednoduché repository rozhrania
Modely pre obrázky:
- ProjectModel: MainImageThumbUrl, MainImageWebpUrl, MainImageOriginalUrl
- ProjectImageModel: ProjectId, SectionKey (napr. „showcase“, „intro“), ImageUrl, Order
Partialy a helpery: _Alerts.cshtml, konzistentné zobrazenie flash správ
Minimal JS bez závislosti na frameworkoch, len to, čo je nutné (sticky nav, lightbox, drobné utily)

VÝSLEDOK

Výsledok

Projekt je základom osobného portfólia s dôrazom na výkon, jednoduchosť a kontrolu nad obsahom. Technicky čisté MVC riešenie bez balastu, pripravené na ďalší rozvoj (blog/články, RSS, drobné komponenty, automatizované testy a CI/CD).