FM Arq: Premium Bilingual Architecture Studio Portfolio
Editorial portfolio for a Buenos Aires architecture practice — GSAP scroll motion, Lenis smoothing, route veils, and next-intl with localized project slugs.
Overview
FM Arq is a production-grade bilingual portfolio for an Argentine architecture studio in Buenos Aires, engineered as an editorial experience rather than a template grid. Built with Next.js 16 and React 19, the site pairs strict TypeScript, Tailwind CSS v4 design tokens, and static content models with a dedicated motion layer: Lenis smooth scroll on desktop wired to GSAP ScrollTrigger, scrubbed architectural image zoom, diagonal SplitJoin home act, featured project slider with pre-mounted heroes, sticky project-stack panels, and full-viewport route transitions that freeze outgoing sticky surfaces without breaking mobile layout. Content spans twelve localized works with paired Spanish and English slugs, narrative galleries, before/after pairs, studio manifesto, practices, team, and contact — all driven from typed config and content modules. Internationalization uses next-intl with Spanish as the default unprefixed locale and English under a locale prefix, including locale-aware pathnames and slug pairing on project switches. SEO ships per-page metadata, canonical alternates, sitemap entries for both locales, JSON-LD without placeholder address or social data, and JPEG Open Graph cards separate from AVIF portfolio delivery. Contact is a single server boundary: Zod-validated API route with Nodemailer delivery and WhatsApp deep links from studio config.
Key Features
Challenges & Solutions
Delivering a premium architecture portfolio required motion that feels like camera and layering — not decoration — while keeping LCP heroes stable and touch devices on native scroll. Key challenges included coordinating Lenis with GSAP without double listeners or scroll jank, implementing route veils that freeze only outgoing sticky nodes so mobile SplitJoin gutters and contact chrome do not collapse mid-transition, tuning ImageZoom as one-shot settle on coarse pointers versus scrub on desktop, pre-mounting featured slider photography so wipes never flash empty frames, and maintaining sticky archive momentum on iOS without overflow clipping fighting sticky positioning. Content architecture had to keep long copy in content modules, UI chrome in message catalogs, and public identity in config while supporting paired localized slugs and static generation for every project. SEO discipline meant withholding fake street or social data from JSON-LD until launch-ready, while still shipping canonical alternates and Open Graph cards per locale.
What I Learned
This project deepened expertise in editorial frontends where typography, pacing, and scroll choreography carry the brand as much as photography. It validated GSAP as the single animation authority when ScrollTriggers are scoped, refreshed on layout changes, and torn down with their components. The route-transition shell reinforced how sticky positioning and fixed overlays interact — and how freezing the wrong layer breaks mobile flow. next-intl patterns for slug pairing and locale switches without breaking conceptual page continuity proved essential for bilingual architectural storytelling. Treating documentation, motion inventory, and rebrand skills as part of the deliverable mirrored how high-end studio sites evolve after handoff. Most importantly, FM Arq confirmed the ability to ship a restrained, reference-informed experience — warm paper, asymmetric rhythm, one dark act — that competes with agency-grade architecture marketing without copying identities.