Personal Portfolio Website
A modern portfolio website built with Next.js 15, TypeScript, and Tailwind CSS
Personal Portfolio Website
A modern, responsive portfolio website showcasing my projects, blog posts, and professional experience.
Overview
This project is a personal portfolio website designed to present my work, share knowledge through blog posts, and provide an easy way for potential clients or employers to contact me.
Tech Stack
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Content Management: Velite (MDX)
- Deployment: Vercel
- Linting: Biome
Features
✅ Implemented
- Modern, clean design
- Dark mode support
- Responsive layout
- Type-safe content management
- SEO optimized
- Fast performance
🚧 In Progress
- Blog system with MDX
- Project showcase
- Contact form
- Analytics integration
Key Highlights
Performance
- Lighthouse score: 95+
- Server-side rendering for better SEO
- Optimized images and assets
- Code splitting and lazy loading
Developer Experience
- Type-safe content with Velite
- Component library with shadcn/ui
- Fast linting with Biome
- Hot reload in development
Design
- Modern UI with Tailwind CSS
- Smooth animations with Framer Motion
- Accessible components
- Mobile-first approach
Challenges & Solutions
Challenge 1: Content Management
Problem: Need a simple way to manage blog posts and projects without a database.
Solution: Implemented Velite for type-safe MDX content management. This provides:
- Type safety for all content
- Fast build times
- Git-based workflow
- No database needed
Challenge 2: Performance
Problem: Ensuring fast load times and good Core Web Vitals.
Solution:
- Used Next.js Server Components
- Implemented image optimization
- Code splitting
- Static generation where possible
Lessons Learned
- Context Engineering is crucial - Well-organized code makes AI assistance much more effective
- Type safety matters - TypeScript + Velite caught many potential bugs
- Start simple - MVP first, then iterate
- Performance by default - Next.js provides great defaults
Future Improvements
- Add search functionality
- Implement RSS feed
- Add more blog posts
- Create case studies for projects
- Add testimonials section
- Implement newsletter signup
Links
- Live Site: gnourt.dev
- GitHub: github.com/gnourt/portfolio
Conclusion
This project demonstrates modern web development practices and serves as a foundation for my online presence. It's continuously evolving with new features and content.