AJK Portfolio Site

Building a portfolio site that stands out requires balancing visual appeal with performance and accessibility. The challenge was to create an engaging user experience while maintaining:

• Exceptional Core Web Vitals scores
• WCAG AA accessibility compliance
• Smooth animations that respect user preferences
• Seamless dark mode without FOUC (Flash of Unstyled Content)

Implemented a comprehensive Atomic Design architecture with Next.js 15 server components for optimal performance. Key technical achievements:

Performance Optimization

Leveraged Next.js 15 server components for zero-JS hydration where possible. Implemented requestAnimationFrame for smooth parallax effects and disabled resource-intensive animations on touch devices.

Dark Mode System

Built a FOUC-free dark mode using Tailwind CSS 4 variant system with localStorage persistence and system preference detection. Theme script runs before React hydration to prevent flash.

Accessibility-First Modals

Custom hooks for focus trapping, scroll locking, escape key handling, and click-outside detection. All modals feature proper ARIA attributes and keyboard navigation.

The site achieves excellent Core Web Vitals scores while maintaining rich interactivity through custom cursor effects, parallax scrolling, and Framer Motion animations. The Atomic Design structure ensures component reusability and maintainability.

Integration with Sanity CMS provides a content management solution that scales with the portfolio, allowing easy updates without code deployments.