Personal Portfolio Website
SEO-optimized Next.js portfolio showcasing frontend development expertise with smooth animations and accessibility compliance.
Project Overview
A modern, performance-optimized personal portfolio built with Next.js 14 and React. Features server-side rendering (SSR), component-driven architecture, and WCAG 2.1 AA accessibility standards. Showcases professional projects with detailed case studies, interactive UI elements, and seamless navigation for optimal user experience.
- Architected responsive, mobile-first layout with Next.js 14 App Router and dynamic routing
- Integrated Framer Motion for scroll-triggered animations and page transitions
- Implemented SEO best practices including meta tags, Open Graph, and structured data
- Optimized images with Next.js Image component for faster loading
Project Journey
Previous portfolio sites suffered from poor maintainability, slow load times, and lacked cohesive project presentation. Needed a scalable solution with modern web standards, SEO optimization, and easy content management without a traditional CMS.
Implemented component-driven architecture with Next.js App Router for optimal performance and SEO. Utilized Framer Motion for fluid animations, Tailwind CSS for responsive design, and TypeScript for type-safe development. Created a structured data model enabling quick updates without backend dependencies.
Achieved 95+ Lighthouse performance score with sub-2-second load times. Improved project discoverability through SEO optimization and enhanced user engagement with smooth scroll-based animations. Reduced content update time by 70% through streamlined data structure.
Technology Stack
Project Gallery
Related Projects
BukaDiMana - Ramadan Bazaar Discovery Platform
Community-driven platform helping Muslims discover nearby Ramadan bazaars, explore food stalls, and plan iftar meals during the holy month. Features interactive map with bazaar locations, stall directories with photos and menus, prayer time integration, and user contributions. Built with Next.js, React Leaflet, and Supabase as an open-source project during #GodamSahur – a month-long Ramadan hackathon encouraging developers to build meaningful community tools.
Waktu Solat - Islamic Prayer Times App for Malaysia
Minimalist web application providing accurate Islamic prayer times for all zones across Malaysia. Features real-time prayer countdown with circular progress indicator, daily prayer schedule (Subuh, Zohor, Asar, Maghrib, Isyak), automatic location-based zone detection, and upcoming Islamic events calendar (Ramadan, Eid, Hijri dates). Built with Next.js for performance and SEO, integrating with Malaysia's official Waktu Solat API (JAKIM).
Ready to start your project?
Let's discuss how I can help bring your ideas to life with modern web technologies.