Overview
This portfolio site has been completely rebuilt from scratch to reflect my recent growth in modern frontend technologies including React, Next.js, and TypeScript.
You can still view my previous portfolio here to see how far I have come. Feel free to explore my updated work — and check back soon for further improvements!
In this updated version, I have also focused on performance and accessibility improvements, including Lighthouse optimization, WAVE evaluations, and the integration of Friendly Captcha for WCAG-compliant and privacy-friendly form validation.
This site was created using my custom boilerplate. You are welcome to clone it and use it as a starting point for your own projects!
Improvements from the last version
- Design from scratch with Figma
- Improved page structure with Next.js routing and better performance
- Categorized skills section for easier readability
- Project section with more detailed descriptions
- More complex responsive design, now that the number of pages has increased
- Documentation in README.md and feature branches per pages while development
- Introduced better Git workflow by managing branches based on features and development stages, and experimented with GitHub Actions to automate Lint and Build for faster, safer deployments.
- Accessibility and performance based on Lighthouse, WAVE, and Friendly Captcha evaluations.
- Implemented keyboard navigation with visible focus rings on interactive elements.
- Enhanced color contrast and applied proper ARIA attributes for better accessibility compliance.
- Optimized page performance and Core Web Vitals scores.
- Introduced Friendly Captcha to provide WCAG-compliant and privacy-friendly form validation.
Features
- Fully designed in Figma using a Design System
- Built with React 18 and Next.js App Router
- Written in TypeScript
- Integrated with Vercel for seamless deployment
- Tailwind CSS setup with responsive and dark mode support
- Responsive design that works seamlessly on mobile and desktop.
- Dynamic site settings stored in src/app/constants/site.ts
- Two layouts: Centered layout for homepage and 404. Two-column layout with header and right-side menu for other pages.
- Custom 404 page
- Dark mode
- SEO-ready with sitemap.xml and robots.txt
- Minimal GitHub Actions workflow that runs npm run lint automatically on each push and pull request to the main branch.
- Contact form integrated with EmailJS
- Accessible navigation with focus indicators and ARIA labels.
- Performance-optimized images and lazy loading for faster page rendering.
Tech Stack
- Frameworks: React, Next.js
- Languages: TypeScript
- Styling: Tailwind CSS
- Design: Figma
- Animation: Framer Motion
- Deployment: Vercel
- Performance & SEO: Lighthouse, Wave, Friendly Captcha, Sitemap
- CI/CD: GitHub Actions
- Email Service: EmailJS