Personal Portfolio Website
A high-performance portfolio website built with Nuxt 4, featuring 3D animations, contact form integration, and admin CMS.
Project Overview
A personal portfolio website that serves as both a showcase and a technical case study. The goal was to build something visually engaging without sacrificing performance or maintainability.
Key Challenges
3D Hero Section Performance
The homepage features a 3D carousel with floating animations. The challenge was keeping animations smooth at 60fps while minimising impact on page load.
I used CSS-based 3D transforms with perspective and hardware acceleration. Heavy elements are lazy-loaded to keep initial paint fast.
Contact Form with Email Notifications
The contact form needed to send emails directly without relying on third-party form services. I integrated Nodemailer with Gmail SMTP using App Passwords for authentication.
Added a dedicated Thank You page with route protection so analytics can track successful submissions.
Responsive Layout Issues
The stats section was getting cut off on certain screen sizes. Fixed by adjusting section height behaviour and overflow properties. Changed the navigation from sticky to fixed positioning for better UX on scroll.
Custom 404 Page
Created a custom error page with a floating card design and subtle animations. Initially implemented with a redirect approach that caused issues in production, then refactored to render inline.
What I Learnt
Production environments behave differently than local. Environment variables with special characters need proper encoding. Always test authentication flows end-to-end before deployment.
Graceful error handling matters. When the database connection failed in production, the site broke completely. Added fallbacks so the site works with static content when the database is unavailable.
Outcome
The site achieves perfect Lighthouse scores and provides a smooth experience across devices. It includes a complete admin system for managing content, protected by password and optional 2FA authentication.