A live portfolio
A deployed, responsive site with a day and night theme, interactive 3D and accessibility built in.
- Result
- Online
Project · 2026
This Website
My portfolio, designed and built step by step with Claude.
- Web Design
- Front-end
- Interactive 3D
- AI-assisted development
Team
1 person
Duration
1 month
Supervision
Personal project, guided by Claude
Summary
I used Claude to plan and build my own portfolio step by step, from an empty folder to a deployed site with interactive 3D objects, a day and night theme and accessibility built in. Each step was explained as it went, so I learned Astro, React, Tailwind CSS and Three.js while building.
My role. Designer and developer. I decided the design, the structure and the content, and built the site step by step with Claude as a guide.
Timeline
How it unfolded.
Week 1
Project setup
Astro, TypeScript and Tailwind CSS, versioned on GitHub.
Tools
What I worked with.
Claude
My guide, from planning every step to debugging and explaining the code.
Astro
Fast static pages, with interactivity only where it is needed.
React
Interactive components such as the slides and the timeline.
TypeScript
Typed content data, so mistakes are caught early.
Tailwind CSS
A consistent design system built from utility classes.
Three.js
The interactive 3D objects of every page.
GitHub
Version history, and the source of every deployment.
Vercel
Hosting, with a new deployment at every push.
Challenges
What got in the way.
Learning new frameworks
Astro, React, Tailwind and Three.js were new to me. Working with Claude made it much faster, because I could ask every question as it came up.
No hover on a phone
Every effect that relies on the mouse needed a touch equivalent, so the menus, the carousel and the 3D controls were reworked for fingers.
Keeping the 3D light
Three.js is heavy. The 3D loads only when needed and pauses when it is off screen, to keep the site fast.
Results
What came out of it.
A quality audit
Lighthouse scores between 70 and 100 across Performance, Accessibility, Best Practices and SEO.
- Result
- 70 to 100
Looking ahead
Reuse the structure for future projects: adding a new page only takes a new entry in a data file.
Next project
Roguia