← back to projects
journalctl -u esp-tribunas --full

journalctl -u esp-tribunas --full

ESP Tribunas Córcega Website

Mobile-first public site with clear information architecture and storytelling animations.

0+

Lighthouse performance

0s

LCP target

0%

responsive

0

content sections

alejandro@codedbyjav.cc :~$ cat context.md

Why?

context.md

ESP Tribunas legacy site had confusing navigation, poor mobile experience, and low SEO ranking. Citizens and operators could not find procedures or public service information quickly. The utilities company needed a reliable digital presence reflecting modern operations without sacrificing accessibility.

alejandro@codedbyjav.cc :~$ grep -E "^\[ \]" objectives.md

Goals

objectives.checklist
  • ○ Rebuild information architecture centered on user tasks.
  • ○ Mobile-first design with green Core Web Vitals.
  • ○ Storytelling with GSAP animations respecting reduced-motion.
  • ○ Technical SEO and metadata per service section.
  • ○ Simple maintenance without legacy WordPress dependency.

alejandro@codedbyjav.cc :~$ ls adr/

Architecture decisions

Next.js SSG over WordPress

alternatives: WordPress + custom theme, static Astro

why: Full performance control, reusable components, and content preview.

trade-off: Content editing requires a dev workflow, not a visual CMS.

GSAP for storytelling

alternatives: CSS-only, Framer Motion (React island)

why: Complex scroll sequences with fine control and reduced-motion pause.

trade-off: Additional JS bundle mitigated with deferred loading.

Tailwind + design tokens

alternatives: Legacy Bootstrap, pure CSS modules

why: Responsive consistency and fast maintenance across 12 sections.

trade-off: Dense utility classes in complex components.

Optimized images and lazy loading

alternatives: Unoptimized IMG tags, generic CDN

why: LCP under 3s on 4G mobile for field users.

trade-off: Asset pipeline on each content release.

alejandro@codedbyjav.cc :~$ tree -L 2 src/

Architecture

architecture.flow
SSG Pages Content JSON GSAP Scroll SEO Layer Static CDN

alejandro@codedbyjav.cc :~$ npm ls --depth=0

Tech stack

Next.js React Tailwind GSAP SSG SEO Core Web Vitals Next.js React Tailwind GSAP SSG SEO Core Web Vitals

alejandro@codedbyjav.cc :~$ tail -f results.log

Results

results.log
[OK] [OK] Lighthouse performance 95+ on mobile
[OK] [OK] Task-based navigation reduced clicks to key procedures
[OK] [OK] LCP < 3s on 4G connections
[OK] [OK] 100% responsive and accessible sections

lessons learned

  • Information architecture matters more than animations for service sites.
  • GSAP with prefers-reduced-motion avoids sacrificing accessibility.
  • SSG + structured content simplifies periodic SEO audits.

Building something together?

Open to senior full-stack roles and selected freelance work. Reach me on LinkedIn — I read every message.

LinkedIn →