A modern, responsive personal portfolio website built to showcase my technical projects, professional experience, and skills. The site features an engaging 3D animated header, smooth page transitions, and a clean, professional design.
Key Features
✓ 3D animations with Three.js
✓ Dark/Light theme toggle
✓ Fully responsive design
✓ Server-side rendering
✓ SEO optimized
✓ Fast page transitions
- StackNext.js, React, Chakra UI, Three.js, Framer Motion
- PlatformWeb (Cross-platform)
- HostingNetlify
- Live Sitemarcos-ashton-personal-portfolio.netlify.app
- SourceGitHub Repository
Technical Implementation
The website is built using Next.js for optimal performance with server-side rendering and automatic code splitting. Chakra UI provides the component library with built-in accessibility and responsive design. Three.js powers the interactive 3D computer model in the header.
Architecture Highlights
- Next.js: Server-side rendering for SEO and fast initial page loads
- Chakra UI: Accessible component library with theming support
- Three.js: WebGL-based 3D graphics with GLTF model loading
- Framer Motion: Smooth page transitions and micro-interactions
- Responsive Design: Mobile-first approach with breakpoint-based layouts
Performance Optimizations
- • Lazy loading of 3D components
- • Image optimization with Next.js Image component
- • Code splitting for smaller bundle sizes
- • Cookie-based color mode persistence