LH 100⚡ Lighthouse 100/100 2026

High-performance multilingual architectural portfolio platform with island architecture, automated image pipeline, and Lighthouse 100/100 on mobile.

Architectural portfolios demand extreme visual fidelity — massive, high-resolution imagery showcasing structural details. Traditional SPAs and heavy frameworks introduce massive Layout Shifts (CLS), poor Largest Contentful Paint (LCP) times, and fragmented SEO across regions, destroying both user experience and discoverability.

Engineered a highly optimized, statically generated (SSG), multilingual platform from the ground up using Astro 5 and Vue.js 3. By coupling Astro’s island architecture with build-time image pipelines, the platform delivers zero-JS entry states, flawless layout integrity, and instant internationalization.

Instead of forcing a monolithic JS bundle onto the client, interactive components are hydrated surgically:

HeroSlider.vue uses deferred hydration (client:idle) to prioritize critical above-the-fold content loading.

MasonryGallery.vue leverages client:visible, initializing the complex Macy.js dynamic grid only when scrolled into view — saving massive main-thread execution time.

To handle multi-megabyte architectural photographs, a build-time image processing pipeline was scripted using Sharp:

Dynamically inspects metadata and enforces structural max-widths (1920px)

Auto-generates lightweight next-gen formats (.webp, .avif)

Hardcodes dynamic aspect ratios into the DOM, completely eliminating CLS

An event-driven filtering system between static Astro elements and reactive Vue components: CustomEvent('projectFilter') dispatched through global window listeners. The masonry grid updates its state, executes DOM changes via nextTick, and forces layout recalculations exactly after each micro-interaction or slide transition.

Multi-locale concurrent routing (/es/, /en/, /fr/)

Automated language sitemap indexes with individual region injections (sitemap-en.xml, etc.)

Strict JSON-LD Schema structures with deep contextual keywords like VisualArtwork and dynamic geo-targeted metadata

Lighthouse 100/100 Mobile Performance Score. The platform loads in under 1 second while serving heavy visual components, dynamic multilingual routing, and responsive image sets that completely eliminated data overhead across all devices.

System Architecture Diagram · Click to zoom

Astro 5 Vue.js 3 Tailwind CSS TypeScript Firebase Macy.js Swiper.js Sharp

Visit Project