The Architecture Behind a 3D Developer Portfolio

Why Build a Portfolio From Scratch

In 2026, your portfolio is your first impression — 81% of recruiters prioritize developer portfolios over resumes. But most portfolio templates are generic, slow, and invisible to search engines. I wanted something different: a site that scores 100/100 on Lighthouse SEO while running a full 3D interactive room.

The challenge was clear: make it beautiful, make it fast, make it findable. If you are wondering whether building your own portfolio is worth the effort, read why every developer needs a portfolio in 2026 first.

The Stack Decision

This 3D developer portfolio is built with Astro v5, chosen over Next.js and SvelteKit for its zero-JavaScript-by-default island architecture — meaning the 1MB Three.js bundle only loads on the explore page, while every other page ships near-zero client-side JavaScript.

Every interactive component is an isolated island that hydrates independently. This design decision was the single most impactful architectural choice for achieving Lighthouse 100/100 SEO scores.

The Full Stack

• Framework: Astro v5.7.13 with island architecture
• UI: React 19 for interactive components
• 3D: Three.js + React Three Fiber for the hacker room
• Animation: GSAP 3 + ScrollTrigger for scroll-driven effects
• Smooth Scroll: Lenis with syncTouch optimization
• Styling: SCSS with scoped class strategy
• Deploy: Vercel with auto-deploy from GitHub

Performance Architecture

The Hydration Strategy

All interactive React components use client:idle hydration instead of client:load, meaning they only hydrate after the browser’s main thread is idle — keeping the critical rendering path free and initial page loads under 1 second on 3G connections.

Vendor Chunk Splitting

Manual Rollup chunks prevent bundle bloat:

• vendor-three (1MB) — only loaded on the 3D explore page
• vendor-react (194KB) — shared across all interactive islands
• vendor-gsap (127KB) — animation library

Deferred Analytics

GA4 and Microsoft Clarity are loaded via requestIdleCallback in the SEO component — they never compete with critical rendering.

SEO: The 100/100 Score

Achieving a perfect Lighthouse SEO score required systematic optimization:

Schema Architecture

The site uses a unified @graph JSON-LD format with 14+ unique schema types:

• WebSite with SearchAction for sitelinks
• Person as the central entity with sameAs linking all social profiles
• ProfilePage for the about page
• FAQPage with 42 structured FAQs
• Service schemas for each offering
• BlogPosting for articles
• Speculation Rules API for near-instant page navigation
• IndexNow for instant Bing/Yandex indexing

The Numbers

The 3D Room

The explore page features a full Three.js scene — a hacker room with interactive hotspots for projects, skills, experience, and certifications. Built with React Three Fiber and GLB models with PBR textures.

The key optimization: content-visibility auto and intersection observers ensure the 3D scene only renders when visible, preventing GPU waste on other pages.

Lessons Learned

1. Islands architecture is the future — ship zero JS unless you need it
2. Schema markup compounds — each new type reinforces your entity graph
3. Performance is SEO — Core Web Vitals directly impact rankings
4. Deferred loading is free performance — analytics, fonts, and heavy components should never block first paint

This site is open-source in spirit — the architecture patterns described here are reusable for any developer portfolio.

Explore More:

• Explore the 3D Room — experience the Three.js hacker room firsthand
• View all projects — see the portfolio of work that this site showcases
• Read why every developer needs a portfolio — the business case for building your own
• See my web development services — I build portfolio websites for clients too