Case study
Web Application
RNR Portfolio
This portfolio. Custom-built React + TypeScript SPA with Framer Motion, code-split lazy loading, and accessibility-first component architecture. Scores 95+ across Lighthouse Performance, Accessibility, and SEO.
The problem
Generic portfolio templates look identical and fail to communicate a developer's actual personality or technical depth. Recruiters spend under 10 seconds on a portfolio before deciding.
The solution
Designed and built a custom React + TypeScript portfolio from scratch with Framer Motion page transitions, an accessibility-first component hierarchy, SEO-optimised metadata, and performance budgets enforced via Vite build analysis.
Outcome
Lighthouse scores: Performance 95+, Accessibility 95+, SEO 100. Hosted on Netlify with CI/CD on every commit. Fully responsive across mobile, tablet, and desktop.
What I learned
Animation and accessibility are often in tension — prefers-reduced-motion support is non-negotiable. Also discovered that styled-components adds non-trivial runtime overhead; would evaluate CSS Modules next time.
Stack
- React
- TypeScript
- Styled-Components
- Framer Motion
- Vite
- Netlify