Role: Design, front-end engineering, content, SEO, deploy — solo.

Overview This is my own portfolio: a dark, one-page site plus a reusable case-study template, built from the ground up in Next.js. It's where all of my other work lives. The brief was simple and unforgiving — a developer's portfolio has to earn the claims it makes. If it says "fast, accessible, animated with intent," the build itself has to demonstrate that, not just describe it.

So I treated it like a client project with no excuses. Real design system, real motion engineering, real performance discipline, real internationalization wiring. No template, no page builder.

The challenge A portfolio is the hardest brief because there's no client to hide behind. Three tensions to hold at once:

Motion that feels premium without ever blocking the content or punishing low-power devices.

A single design language — warm near-black, an "Ember" accent, three typefaces — applied with enough restraint to read as expensive rather than busy.

Content modeled as data, so adding or reordering work is an edit, not a rebuild — and so a second language is a content task, not a refactor.

What I built A Next.js App Router site in TypeScript, with the design system mapped into Tailwind v4 as CSS variables — one source of truth for color, type and spacing.

Motion layer. GSAP with ScrollTrigger and SplitText, driven by Lenis smooth scroll synced to GSAP's ticker. Section reveals, a split-text hero headline, count-up stats, a process rail that draws on scroll, and parallax in the case-study gallery. Everything fails open: content is visible by default, and prefers-reduced-motion disables transforms entirely.

Type & brand. Clash Display, General Sans and Geist Mono, self-hosted via next/font/local — zero Google Fonts requests, no layout shift. An "LM." monogram and an Ember accent run through the whole system, including a theme picker that lets a visitor recolor the accent and persists it before first paint (no flash).

Content as data. Projects and their case studies live in one typed data file. The home "selected work" stack and every /work/[slug] page are generated from it.

i18n-ready. Wired with next-intl and locale-scoped routing — English ships today; Spanish is a drop-in messages file plus translated data, no structural change.

SEO & sharing. Schema.org JSON-LD (Person + WebSite on home, CreativeWork per case study), sitemap, robots, manifest, canonical and hreflang-ready alternates, and a dynamically generated OG image rendered from the brand fonts.

Contact. A conversational form posting to a Next.js route handler that sends via Resend, with the visitor's address as Reply-To and a honeypot for bots.

Outcome A portfolio that runs on the same standards I sell: a typed, component-driven Next.js build where adding work is a data edit and a second language is a content task. Self-hosted fonts with no third-party font requests, accessible motion that degrades gracefully, and a full SEO/social layer — deployed on Vercel at lucasmujica.dev.

Performance: Google PageSpeed, mobile — 97 Performance · 100 Accessibility · 100 Best Practices · 100 SEO.

Tools / Skills: Next.js (App Router), React 19, TypeScript, Tailwind CSS v4, GSAP (ScrollTrigger, SplitText), Lenis, next-intl, next/font/local, Resend, Schema.org JSON-LD, Vercel, Web performance, Accessibility, Web animation, Design systems

Live: https://lucasmujica.dev