Un site HTML static migrat pe o bază Next.js reală, cu identitatea vizuală păstrată intactă.
Prezentare
Site-ul unui antrenor personal, migrat dintr-un singur fișier HTML scris de mână într-o aplicație Next.js adevărată, fără să schimbe felul în care arată sau se citește pentru un vizitator.
Site-ul existent funcționa, dar structura lui dintr-un singur fișier nu avea unde să crească — fără tipuri, fără componente refolosibile și fără o cale realistă de a adăuga cele șase limbi de care clientul avea nevoie.
Provocare
O ședință reală de antrenament, Cluj-Napoca.
Abordare
Am reconstruit toată baza tehnică — rutare, componente, un sistem real de internaționalizare, un comutator de temă — păstrând designul vizual existent ca specificație, apoi am verificat rezultatul dând efectiv click prin el, nu având încredere într-un build curat.
Site-ul, așa cum e construit
Design și dezvoltare
- Un sistem în șase limbi, construit de la zero
- Română, engleză, maghiară, franceză, spaniolă și germană, comutabile în browser, fără ca layoutul să se rearanjeze între limbi.
- Un comutator de temă care respectă preferința sistemului
- Mod luminos și mod întunecat, păstrate între vizite, pornind de la ce preferă deja sistemul vizitatorului, până când el alege altceva.
Decizii tehnice
- O eroare pe care doar testarea prin interacțiune reală o putea prinde
- Un antet de securitate livrat într-o etapă anterioară bloca în tăcere fiecare script interactiv de pe site — build-ul rămânea verde și fiecare verificare de tipuri trecea, pentru că niciuna nu verifică dacă un click chiar face ceva. Prinsă doar dând click prin site-ul live.
Rezultate
Greutatea inițială a paginii
2237 KB514 KB
Site-ul original, dintr-un singur fișier, livra 2,2 MB la prima încărcare, aproape totul imagini neoptimizate; site-ul reconstruit livrează 514 KB. Mediana a trei încărcări, cu memoria cache dezactivată.
Cumulative Layout Shift
~0
Măsurat pe site-ul reconstruit. Largest Contentful Paint nu este revendicat aici în mod deliberat — originalul putea fi măsurat doar de pe disc, iar compararea cu un site live, prin rețea, ar înfrumuseța rezultatul în loc să-l descrie.
- Rol
- Arhitectură, Dezvoltare, Migrare
- Stack
- Next.js, TypeScript, Tailwind CSS
- An
- 2026
- Domeniu
- Fitness și antrenament personal