Personal Website

A modern, responsive personal website built with Next.js, TypeScript, and Tailwind CSS to showcase my portfolio, skills, and professional experience.

Features

• Responsive Design: Fully responsive layout that adapts seamlessly across all devices
• Dark/Light Mode Support: Dynamic theme switching with CSS variables
• Smooth Animations: GSAP-powered scroll-triggered animations for enhanced user experience
• Interactive Navigation: Enhanced navbar with hover effects and smooth transitions
• Project Showcase: Responsive grid layout with aligned action buttons and hover effects
• Comprehensive Resume: Professional experience, education, fellowships, and publications
• Social Media Integration: Direct links to professional profiles and contact information
• Modern UI/UX: Clean, minimalistic design with consistent styling throughout

Technologies Used

• Next.js: React framework for server-rendered applications
• TypeScript: For type-safe code development
• Tailwind CSS: Utility-first CSS framework for rapid styling
• GSAP: Professional-grade animation library for smooth scroll effects
• React Hooks: For state management and component lifecycle
• CSS Variables: Dynamic theming and consistent color schemes

Project Structure

The project is organized into reusable components:

• NavBar: Enhanced navigation component with hover effects and smooth transitions
• ProfileSection: Personal information and profile picture with optimized animations
• SocialLinks: Links to GitHub, LinkedIn, and other platforms
• Summary: Brief introduction and professional summary
• TechnicalSkills: Showcase of technical abilities and certifications
• Resume: Comprehensive professional experience, education, fellowships, and publications
• ProjectCards: Responsive project showcase with aligned buttons and hover effects
• animations.ts: GSAP animation configurations for scroll-triggered effects

Recent Improvements

Animation & Performance Fixes

• Fixed hero section opacity issues by optimizing GSAP animations
• Resolved project cards visibility problems with proper animation timing
• Enhanced scroll-triggered animations for smoother user experience

UI/UX Enhancements

• Enhanced navbar buttons with subtle hover effects and improved padding
• Implemented responsive project grid layout (1 column on mobile, 2 columns on desktop)
• Aligned project card action buttons to the bottom for consistent layout
• Updated fellowship and publications sections with consistent styling and proper font colors

Responsive Design

• Optimized grid layouts for better mobile and desktop experience
• Improved button alignment and spacing across all components
• Enhanced visual consistency with unified color schemes and styling patterns

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Open http://localhost:3000 to view the website in your browser.