Leon Leroy Architecture
A multilingual architectural portfolio platform with islands architecture, an automated image pipeline, and Lighthouse 100/100 on mobile.
What was the problem to solve?
Architectural portfolios demand extreme visual fidelity: high-resolution images that document structural details. Traditional frameworks introduce massive Layout Shifts (CLS), poor LCP times, and SEO fragmented across regions, destroying both the user experience and search visibility.
How we solved it at Núcleo Studio
Engineering of a high-performance, multilingual static platform with Astro 5 + Vue.js 3, combining islands architecture with build-time image pipelines to achieve JavaScript-free entry states, perfect layout integrity, and instant internationalization.
Islands Architecture and Partial Hydration
Instead of forcing a monolithic JS bundle onto the client, interactive components are hydrated surgically:
HeroSlider.vue uses deferred hydration (client:idle) to prioritize loading of the critical above-the-fold content.
MasonryGallery.vue uses client:visible, initializing the dynamic grid with Macy.js only when it enters the viewport, saving execution time on the main thread.
Automated Image Pipeline
To handle multi-megabyte architectural photographs, a build-time processing pipeline was implemented with Sharp:
Dynamic metadata inspection and enforcement of structural maximum widths (1920px)
Automatic generation of next-gen formats (.webp, .avif)
Hardcoding dynamic aspect ratios in the DOM to eliminate CLS entirely
Multi-Criteria Asynchronous Filtering
An event-driven filtering system between static Astro elements and reactive Vue components: CustomEvent('projectFilter') through global window listeners. The masonry grid updates its state, executes DOM changes via nextTick, and forces layout recalculations exactly after each micro-interaction.
Multi-Region SEO and i18n
Concurrent multi-locale routing (/es/, /en/, /fr/)
Automated language sitemaps with regional injections (sitemap-en.xml, etc.)
Strict JSON-LD structures with contextual keywords like VisualArtwork and dynamic geo-targeted metadata.
The business impact
Lighthouse 100/100 on Mobile Performance. Total load under 1 second with heavy visual components, dynamic multilingual routing, and responsive image sets that completely eliminated data overhead across devices.
Does your company have a similar bottleneck?
We analyze your operation and show you exactly how we can automate it. No commitment.