A modern, high-performance portfolio website showcasing frontend engineering excellence
- Overview
- Features
- Technology Stack
- Project Structure
- Getting Started
- Performance Optimizations
- SEO & Accessibility
- Development
- Deployment
- Contributing
- License
- Contact
This is a modern, high-performance portfolio website built with Next.js 14, TypeScript, and cutting-edge web technologies. The project showcases frontend engineering excellence through:
- Premium UI/UX Design: Stunning animations, smooth transitions, and interactive elements
- Performance-First Approach: Optimized for 60 FPS scrolling and minimal resource usage
- SEO Excellence: Comprehensive meta tags, structured data, and semantic HTML
- Accessibility: WCAG compliant with keyboard navigation and screen reader support
- Responsive Design: Seamless experience across all devices and screen sizes
I'm Khalid Hossain Badhon, a frontend-focused full-stack developer specializing in building exceptional web experiences with Next.js, React, and TypeScript. This portfolio demonstrates my expertise in modern web development, performance optimization, and user-centric design.
- Custom Cursor Animation: Interactive cursor with smooth animations
- Smooth Scrolling: Lenis-powered smooth scroll with performance optimizations
- Dark Mode: Theme toggle with system preference detection
- WebGL Background: Stunning DarkVeil WebGL animation with device-aware rendering
- Framer Motion Animations: Smooth, GPU-accelerated animations throughout
- Responsive Navigation: Desktop navbar with mobile bottom navigation and hamburger menu
- Interactive Components: Hover effects, micro-animations, and engaging UI elements
- Hero Section: Eye-catching introduction with animated text and call-to-action
- About Section: Personal introduction with journey timeline and interactive map
- Tech Stack: Visual showcase of technologies and skills
- Projects: Filterable project gallery with detailed case studies
- Testimonials: LinkedIn recommendations carousel with auto-play
- FAQ: Accordion-style frequently asked questions
- Contact: Multi-channel contact form with validation
- Footer: Comprehensive footer with social links and navigation
- Server-Side Rendering (SSR): Fast initial page loads with Next.js 14
- TypeScript: Type-safe development with comprehensive type definitions
- Form Validation: React Hook Form with Zod schema validation
- Email Integration: Nodemailer for contact form submissions
- Image Optimization: Next.js Image component with remote pattern support
- Code Splitting: Automatic code splitting for optimal bundle sizes
- Progressive Enhancement: Works without JavaScript, enhanced with it
- Speed Insights: Vercel Speed Insights integration for performance monitoring
- GPU Acceleration: Hardware-accelerated transforms and animations
- Visibility Detection: Pauses animations when tab is hidden or elements are off-screen
- Intersection Observer: Lazy loading and viewport-based rendering
- Optimized Particles: Reduced particle count with visibility-aware rendering
- CSS Containment: Layout isolation for faster paint operations
- Passive Event Listeners: Non-blocking scroll event handlers
- Content Visibility: Automatic content rendering optimization
- Device-Aware DPR: Adaptive pixel ratio for mobile devices
Performance Metrics: Consistent 55-60 FPS scrolling, 50% reduction in paint operations, 50-70% CPU reduction during normal usage
- Next.js 14.2.3 - React framework with App Router
- React 18 - UI library
- TypeScript 5 - Type-safe JavaScript
- Tailwind CSS 3.4.1 - Utility-first CSS framework
- Shadcn/ui - Re-usable component library
- Radix UI - Unstyled, accessible components
- Framer Motion - Animation library
- Lucide React - Icon library
- Lenis - Smooth scroll library
- Motion - Advanced animation utilities
- OGL - WebGL library for DarkVeil effect
- Embla Carousel - Carousel with auto-scroll
- React Hook Form - Form state management
- Zod - Schema validation
- Nodemailer - Email sending
- class-variance-authority - Component variant management
- clsx - Conditional className utility
- tailwind-merge - Tailwind class merging
- next-themes - Theme management
- Sonner - Toast notifications
- @vercel/speed-insights - Performance monitoring
portfolio-v2.0/
├── app/ # Next.js App Router
│ ├── about/ # About page
│ ├── api/ # API routes
│ │ └── send/ # Email sending endpoint
│ ├── projects/ # Projects page
│ │ └── [id]/ # Dynamic project detail pages
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ ├── loading.tsx # Loading state
│ ├── not-found.tsx # 404 page
│ ├── lenis-smooth-scroll.css # Lenis scroll styles
│ └── scroll-optimizations.css # Performance optimization styles
│
├── components/ # React components
│ ├── layout/ # Layout components
│ │ ├── sections/ # Page sections
│ │ │ ├── about/ # About section components
│ │ │ ├── hero.tsx # Hero section
│ │ │ ├── testimonial.tsx # Testimonials section
│ │ │ ├── contact.tsx # Contact section
│ │ │ ├── faq.tsx # FAQ section
│ │ │ ├── footer.tsx # Footer section
│ │ │ ├── tect-stack.tsx # Tech stack section
│ │ │ └── SideDock.tsx # Social media dock
│ │ ├── navbar.tsx # Desktop navigation
│ │ ├── mobile-nav.tsx # Mobile navigation
│ │ ├── footer-layout.tsx # Footer layout
│ │ ├── whatsapp-float.tsx # WhatsApp floating button
│ │ └── theme-provider.tsx # Theme context provider
│ │
│ ├── project/ # Project components
│ │ ├── ProjectContainer.tsx # Project gallery container
│ │ ├── ProjectCard.tsx # Project card component
│ │ ├── ProjectFilter.tsx # Project filter
│ │ └── ProjectDetail.tsx # Project detail view
│ │
│ ├── ui/ # Shadcn/ui components
│ │ ├── button.tsx # Button component
│ │ ├── card.tsx # Card component
│ │ ├── input.tsx # Input component
│ │ ├── accordion.tsx # Accordion component
│ │ ├── custom-cursor.tsx # Custom cursor
│ │ └── ... # Other UI components
│ │
│ ├── magicui/ # Magic UI components
│ │ ├── scroll-progress.tsx # Scroll progress indicator
│ │ ├── particles.tsx # Particle animation
│ │ └── ... # Other magic components
│ │
│ ├── icons/ # Icon components
│ ├── DarkVeil.tsx # WebGL background animation
│ ├── TextPressure.tsx # Text pressure effect
│ └── CurvedLoop.jsx # Curved loop animation
│
├── data/ # Static data
│ ├── projects.ts # Project data
│ ├── recommendations.ts # LinkedIn recommendations
│ ├── timeline.ts # Career timeline
│ ├── values.ts # Core values
│ └── animated-text.tsx # Animated text data
│
├── hooks/ # Custom React hooks
│ ├── scroll-performance.ts # Scroll optimization hooks
│ └── use-mobile.tsx # Mobile detection hook
│
├── lib/ # Utility libraries
│ ├── provider/ # Context providers
│ │ └── LenisProvider.tsx # Lenis scroll provider
│ └── utils.ts # Utility functions
│
├── types/ # TypeScript type definitions
│ └── project.ts # Project type definitions
│
├── public/ # Static assets
│ ├── project/ # Project images
│ └── ... # Other public assets
│
├── .env # Environment variables
├── .eslintrc.json # ESLint configuration
├── .prettierrc # Prettier configuration
├── .gitignore # Git ignore rules
├── components.json # Shadcn/ui configuration
├── next.config.mjs # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
├── postcss.config.mjs # PostCSS configuration
├── package.json # Dependencies and scripts
├── PERFORMANCE_OPTIMIZATIONS.md # Performance documentation
├── SCROLL_FPS_OPTIMIZATIONS.md # Scroll optimization guide
├── LICENSE # MIT License
└── README.md # This file
--> -->
Khalid Hossain Badhon
- Website: khalidhossain.me
- LinkedIn: linkedin.com/in/khalidhossainbadhon
- GitHub: github.com/badhon252
- Twitter: @badhon252
- Email: [email protected]
- Shadcn/ui - For the amazing component library
- Vercel - For hosting and deployment
- Next.js Team - For the incredible framework
- Tailwind CSS - For the utility-first CSS framework
- Framer Motion - For smooth animations
- Lenis - For smooth scrolling
Made with ❤️ by Khalid Hossain Badhon
⭐ Star this repository if you found it helpful!