01
Back to projects
CompletedSolo developer — design, architecture, and implementationOpen Source01 / 04

Portfolio Website

Most dev portfolios feel like themed templates. I wanted mine to feel like a product — cinematic scroll, a 3D globe tracing where I've worked, procedural audio, and full bilingual support. No UI library, no shortcuts.

View CodeLive Demo
Portfolio Website — project screenshot

// Project Overview

I got sick of portfolios that look like they came out of a tutorial. So I built this from scratch — Next.js for SSR and static generation, a custom CSS design system with no UI framework, Three.js for the interactive globe, scroll-driven cinematic sections, and a Web Audio API sound layer. Ships in English and Portuguese, respects accessibility preferences, and scores 95+ on Lighthouse.

< Tech Stack />

Next.jsReactTypeScriptThree.jsCSS Custom PropertiesFramer MotionWeb Audio APIResend

How it was built

A portfolio that doubles as a playground: WebGL globe, audio-reactive ambience, smooth-scroll, and a custom design system with two themes. The goal — feel like a product, not a CV.

0+
Lighthouse
0KB gz
3D Bundle
0fps
Render Target
0
Themes
tsx

Typed reveal: characters animate in as the block enters the viewport.

Challenges

  • Balancing visual richness with performance — the 3D globe needed to lazy-load without impacting initial page speed
  • Building a cinematic scroll system with sticky sections, fade transitions, and smooth camera movement without jank
  • Creating a custom design system (no UI library) that looks polished in both dark and light themes

Results

  • Lighthouse performance score 95+
  • 3D globe loads asynchronously with only 244KB gzipped overhead
  • Full bilingual support (EN/PT-BR) with zero layout shift on language switch
Next Project5G Telecom Digital Platform

Interested in seeing more of my work?

View All Projects