About

This project is a personal portfolio website designed to present professional skills, projects, and contact information in a visually engaging manner. Built with Next.js and TypeScript, it leverages modern frontend tools to deliver a fast, responsive, and animated user experience.

Purpose

The primary goal is to serve as a digital resume that highlights technical expertise and project work. Key features include:

• Animated hero section with SVG and text overlays
• Modular project showcase with card components
• Smooth page transitions and mobile responsiveness
• Custom header and footer components for consistent branding
• Integration of TailwindCSS for styling and Framer Motion for animations

Technical Deep Dive

A notable architectural choice is the use of Framer Motion for page and component animations, as seen in components/Home/Hero.tsx where motion.div applies animated variants from transitions/transHero.ts. This approach enables declarative, reusable animation patterns that enhance user engagement without sacrificing performance. The project also employs Next.js's static generation for optimized loading, with components structured for reusability and clarity, such as Card and Header. The separation of transition logic into dedicated files promotes maintainability and consistency across animated elements.

Lessons Learned

One challenge was balancing animation performance with visual appeal, especially on mobile devices. Fine-tuning the motion variants and leveraging Next.js's optimized image component helped mitigate lag, but it underscored the importance of performance testing early in development. Additionally, designing a flexible component architecture facilitated future scalability and feature additions.