Personal Website
Portfolio and blog showcasing projects and writing
Demo coming soon
Overview
The personal website serves as both a portfolio to showcase completed projects and a platform for technical writing. The site uses Next.js 14 with the App Router for modern React patterns and optimal performance. MDX enables writing blog posts with embedded interactive components. The design prioritizes typography and whitespace, with a dark color scheme that is easy on the eyes.
Architecture
The site is built as a static generation first approach using Next.js. Blog posts are stored as MDX files and parsed at build time using gray-matter for frontmatter extraction. The pages use Framer Motion for entrance animations triggered by scroll position. Tailwind CSS provides styling with a custom dark theme. All pages are pre-rendered at build time for optimal performance and SEO.
Key Challenges
- •Creating an elegant, minimal design that focuses on content
- •Implementing smooth animations that feel natural and not distracting
- •Setting up MDX pipeline with proper syntax highlighting
- •Responsive design that works well on all screen sizes
What I Learned
- •Next.js 14 App Router patterns and best practices
- •Building effective personal branding through design
- •Framer Motion animation capabilities and performance considerations
- •MDX capabilities and how to extend it with custom components
Future Improvements
- •Add dark/light mode toggle
- •Implement newsletter signup with email integration
- •Add interactive project visualizations
- •Create RSS feed for blog posts