Toate proiectele
// meercha-ro.tsx

meercha.ro

Designer & InginerProiect personal2026
Next.js 14TypeScriptTailwindFramer Motion@react-pdf
// prezentare.md

Proiectul, pe scurt.

meercha.ro este un site de portofoliu construit cu Next.js 14, TypeScript, Tailwind CSS și Framer Motion. A fost proiectat și dezvoltat de la zero folosind fluxuri de lucru asistate de AI — Claude Code pentru orchestrarea agenților, Cursor pentru programare în pereche în editor.

Site-ul oferă suport complet pentru modul întunecat prin proprietăți CSS custom și next-themes, un CV PDF generat automat prin @react-pdf/renderer, ilustrații SVG programatice custom care răspund la tema activă și conformitate WCAG AA pe tot parcursul.

Fiecare componentă — de la animațiile la scroll la layout-ul bento grid — a fost scrisă de mână. Fără template-uri, fără kit-uri UI. Scopul a fost un site care să pară intenționat și să servească drept exemplu viu al tipului de muncă frontend pe care o fac.

// rolul-meu.md

Ce am livrat efectiv.

  • Am proiectat întreaga interfață UI/UX de la zero — layout, tipografie, sistem de culori, bibliotecă de componente
  • Am construit un sistem de ilustrații SVG custom care răspunde programatic la schimbările de temă dark/light
  • Am implementat CV PDF generat automat folosind @react-pdf/renderer servit dintr-o rută API
  • Am obținut conformitate WCAG AA pe toate paginile și elementele interactive
  • Am configurat fluxuri de dezvoltare augmentate de AI folosind Claude Code pentru iterație rapidă și calitatea codului
// aspecte-tehnice.tsx

Trei probleme care merită discutate.

// părțile interesante
// theming

Mod întunecat cu variabile CSS

În loc de comutare de clase, întregul sistem de culori folosește proprietăți CSS custom. next-themes setează o clasă .dark pe root, iar fiecare componentă citește din același namespace de variabile. Zero flash la încărcare, zero duplicare.

color: var(--text-muted)
// pdf

CV PDF generat automat

@react-pdf/renderer rulează într-o rută API Next.js. Aceleași date de CV care alimentează pagina web generează și un PDF descărcabil — mereu sincronizat, zero mentenanță manuală.

GET /api/resume-pdf → PDF stream
// illustration

Ilustrații SVG custom

Fiecare ilustrație este o componentă React care randează SVG inline. Folosesc proprietăți CSS custom pentru fill-uri și stroke-uri, așa că se adaptează la tema activă fără prop drilling sau duplicare.

fill={`url(#${useId()})`}
// rezultate.tsx

Ce s-a obținut.

Cronologie
2săptămâni până la lansare
Lighthouse
100Best Practices
Accesibilitate
AAconform WCAG
Stack
5tehnologii de bază