Înapoi la portofoliu
SiteStudiu / personal

Paste Fericit

Concept de landing page pascală cu direcție vizuală inspirată din noaptea Învierii: aur bizantin, burgundy liturgic, tipografie ceremonială, simboluri ortodoxe și animații discrete, proiectată pentru o experiență statică rapidă și accesibilă.

Paste Fericit

Stack principal

Astro (planned)
Tailwind CSS (planned)
HTML5
CSS3
JavaScriptIntersection Observer API (planned)CSS Custom PropertiesStatic Site GenerationHetzner (deployment target)

Provocarea

Provocarea a fost definirea unei pagini de sărbătoare care să transmită specificul Paștelui Ortodox Românesc fără să cadă într-un template generic cu pasteluri și simboluri occidentale, păstrând în același timp performanța, lizibilitatea pe mobil, accesibilitatea și o implementare suficient de simplă pentru hosting static.

Soluția

Soluția documentată pornește de la o direcție vizuală coerentă și o arhitectură statică. Design brief-ul stabilește paleta, tipografia, layout-ul în patru secțiuni, iconografia și animațiile, iar decizia tehnică alege Astro + Tailwind CSS pentru SSG și un bundle minim. Toate efectele sunt gândite să funcționeze fără state complex sau backend și să se degradeze corect pentru utilizatorii cu reduced motion.

Complexitate notabilă

Paste Fericit este un studiu personal pentru o experiență web sezonieră dedicată Paștelui Ortodox Românesc. Repository-ul verificat nu conține aplicația finală în branch-ul main; conține însă un design brief detaliat, deciziile tehnice și istoricul de lucru care descriu foarte clar produsul urmărit. Din acest motiv proiectul este prezentat ca un concept/prototip documentat, nu ca un site finalizat sau un produs lansat.

Direcția de produs evită estetica generică de Paște occidental și construiește experiența în jurul momentului de la miezul nopții: fundal albastru-negru și burgundy, aur inspirat din icoane, lumină de lumânare, cruce ortodoxă cu trei bare, ou roșu cu motive geometrice românești și elemente florale discrete. Pagina a fost gândită ca un scroll vertical continuu cu patru zone: hero fullscreen, mesaj de felicitare, secțiune decorativă și footer minimal.

Design system-ul documentat definește tokeni pentru culori, tipografie, spacing, umbre, tranziții și breakpoints. Fonturile propuse sunt Cinzel Decorative pentru mesajele monumentale, Cinzel pentru subtitluri și Cormorant Garamond pentru text. Brief-ul include o abordare mobile-first, un container îngust pentru lizibilitate și scale tipografice diferite pentru telefon, tabletă și desktop.

Interacțiunile planificate sunt deliberate și lightweight: glow de lumânare, particule aurii, reveal pentru heading, shimmer discret și apariții la scroll prin IntersectionObserver. Documentația cere explicit respectarea prefers-reduced-motion și evitarea animațiilor agresive, audio-ului automat și efectelor care ar distrage de la mesaj.

Arhitectura decisă a evoluat de la un scaffold Vanilla Vite către Astro + Tailwind CSS, pentru generare statică și minimum de JavaScript livrat către browser. Istoricul menționează existența temporară a unui scaffold Vite și a unor fișiere CSS/JS, dar acestea nu sunt prezente în commitul curent, deci nu sunt tratate ca implementare livrată.

Deployment-ul a fost planificat pentru Hetzner: build static în dist/ și copiere pe server pentru paste.tigidal.ro. În repository nu există însă workflow CI/CD, script de deploy, configurare Nginx, build output sau commit care demonstrează publicarea efectivă. URL-ul nu este folosit ca link public în portofoliu deoarece nu a putut fi verificat ca site disponibil în momentul analizei.

Rezultate cheie

  • Design brief complet pentru experiența 'Night of Resurrection', cu paletă, tipografie, spacing, umbre, breakpoints și reguli de utilizare
  • Arhitectură de pagină documentată în patru secțiuni: hero, greeting, zonă decorativă și footer
  • Direcție vizuală bazată pe simboluri ortodoxe românești și reguli explicite pentru evitarea esteticii occidentale generice
  • Plan de animații lightweight pentru glow, particule, text reveal, shimmer și apariții la scroll
  • Cerință de accesibilitate pentru prefers-reduced-motion și contraste minime documentate în design brief
  • Decizie de arhitectură pentru Astro + Tailwind CSS și generare statică
  • Plan de deployment static pe Hetzner, fără backend dedicat
  • Separare documentată între scaffoldul Vite inițial, ulterior abandonat, și stack-ul Astro ales pentru implementarea finală

Proiecte asemănătoare

Vrei ceva similar?

Începe cu wizard-ul de estimare — răspunzi la câteva întrebări și primești un range de preț + timeline realist.