Leica Florian Robert

<< Înapoi la proiecte

My website V3 — studiu de caz

Rol: Design și dezvoltare. An: 2026.

Site: leicaflorianrobert.dev

Redesignul portofoliului meu: un site care nu se limitează să prezinte proiectele, ci povestește la persoana întâi trecerea de la web-ul vechi la randarea modernă.

Vezi acest studiu de caz cu motorul Legacy. Pentru a-l vedea așa cum a fost proiectat, activează randarea nativă mai jos.

Clar, dar tăcut

V2 era ordonată și funcțională: o paletă deschisă și caldă, texte lungi, nicio previzualizare a lucrărilor pe prima pagină. Prezenta bine serviciile, dar nu arăta ce știu să fac.

Obiectivele V3: o grafică mai modernă și mai contrastantă, mai multe imagini și o identitate care să vorbească precum un dezvoltator.

Motorul Dual

Site-ul se deschide în modul Legacy: Times New Roman, linkuri albastre subliniate, o fotografie alb-negru într-o ramă gri. Un hipertext din anii '90.

Un buton, Activează randarea nativă, pornește o scurtă secvență de boot cu un glitch și duce la versiunea Native: întunecată, monospațiată, cu accente portocalii. Alegerea este memorată între pagini.

Puține elemente, mult contrast

Un negru moale în loc de negru absolut, o singură culoare de accent și un singur font: JetBrains Mono, de la titlu la formular.

• #111113 fundal
• #18181B suprafață
• #EDEBE6 text
• #FF5B14 accent

Noul logo: inițialele cu litere mici și cursorul, ca o comandă de terminal. Înlocuiește monograma FR cu cei doi L răsturnați.

Mișcare și spațiu

• Hover cu curbă „arc" pe carduri și butoane, în loc de tranziții liniare.
• Paralaxă ușoară pe fotografie, halou și fragmentul de cod din hero.
• Spații verticale generoase între secțiuni, o coloană de 1120px.
• Proiecte prezentate în machete de laptop și smartphone, servicii cu imagine.
• Pe mobil, serviciile devin un slider orizontal.

Sub capotă

• Un site static. Nuxt generează fiecare pagină ca HTML gata făcut, în cele trei limbi: nu există un server de ținut pornit, iar paginile ajung imediat.
• Conținut pe blocuri în Directus. Fiecare pagină este o succesiune de blocuri (texte, galerii, cronologii, proiecte) pe care le compun din panou. Când un conținut se schimbă, Directus reconstruiește și publică singur site-ul.
• Fiecare bloc există de două ori. O versiune Legacy și una Native citesc aceleași date: schimbarea modului nu reîncarcă pagina, schimbă doar felul în care e desenată.
• Se pornește mereu din Legacy. Serverul pregătește versiunea anilor '90, simplă și lizibilă oriunde; Native se aprinde în browser, iar alegerea rămâne salvată pentru vizitele următoare.
• Animații cu măsură. Widgeturile, cronometrele și portretul ASCII se opresc când ies de pe ecran, ca să nu consume resurse degeaba, iar derularea lină este activă doar în Native.
• CV-ul se generează singur. La fiecare publicare un browser headless tipărește CV-ul în PDF în cele trei limbi; dacă nu încape pe o pagină, publicarea se oprește în loc să pună online un CV tăiat.

Condus de mine, scris cu AI

Designul a prins formă în Claude Design; codul și textele, în trei limbi, au fost scrise de Claude Code sub conducerea mea, cu metoda Superpowers: fiecare modificare pornește de la un plan, trece prin aprobarea mea, este verificată în browser în ambele moduri și se încheie cu un commit mic și ușor de citit.

A conduce un AI este o meserie în sine: trebuie să știi ce să ceri, să recunoști o soluție fragilă și să spui nu la momentul potrivit. Obiectivele, arhitectura și conținutul sunt ale mele, la fel și ultimul cuvânt la fiecare pas. Multe idei vin de la mine, precum cronologia experiențelor preluată din vechiul site, care rămâne fixă cât derulezi și aprinde anul pe care îl citești; tot atâtea corecturi, de la ritmul spațiilor dintre secțiuni la datele aliniate cu CV-ul.

Nu este un site generat dintr-un clic, ci suma multor alegeri, fiecare cântărită și decisă de mine.

Mai mult loc pentru cine sunt

Față de V2 site-ul spune mult mai mult și o spune ca dezvoltator.

• Mai mult conținut: servicii, proiecte, experiențe și povestea mea, în trei limbi.
• Proiectele în prim-plan: cele cu un studiu de caz dedicat au o pagină care povestește lucrarea pe larg și se ajunge la ele din pagina principală.
• Despre mine și povestea mea au mai multă vizibilitate, cu o pagină care spune de unde vin.
• O grafică ce vorbește despre mine: modul Legacy amintește de web-ul de la care am pornit, Native de cel în care lucrez azi. Chiar și experiența cea mai veche intră în poveste.
• Mai mult loc pentru experiențele profesionale: cronologia le parcurge an cu an.