Software engineeringIn progress
My Portfolio Website
A Next.js portfolio with reusable project case studies, server-side contact validation and unit tests.
Solo designer & developer · 2025
- Next.js
- TypeScript
- React
- Tailwind CSS
- Nodemailer
- Vitest
Problem
Recruiters need to quickly see what I have built and where my technical contribution lies.
Approach
A compact project presentation with screenshots, source code links and optional technical detail.
Architecture
- Browser
- Next.js
- POST /api/contact
- SMTP
Engineering decisions
- Static project data and shared components keep case studies consistent without a database.
- SMTP credentials stay on the server; the contact API validates input and escapes HTML.
- Unit tests verify contact validation and project image selection.
Read the technical details
My personal portfolio — this website. Designed with a precise design system and built with Next.js 15 App Router, Tailwind CSS and Framer Motion. The project combines technical precision with a considered user experience. The site is still in development, with new projects and improvements added regularly.
Features
- Responsive design with mobile and desktop navigation
- Dark mode with star field effects
- A project collection with filterable technology stacks
- A contact form with server-side validation using Nodemailer
Challenges
- Building a consistent design system from scratch: colors, typography, spacing and components
- Dark mode with canvas-based stars and shooting stars without SSR issues
- Maintaining performance with Framer Motion animations and dynamic imports
Lessons learned
- Next.js 15 App Router, route groups and the metadata API
- How a comprehensive design system (DESIGN.md) speeds up development
- Canvas animations and ResizeObserver for responsive background effects