Skip to main content
This portfolio application is built with modern React components using Framer Motion for animations and Tailwind CSS for styling. Below is a comprehensive overview of all available components.

​
Main Components

The portfolio consists of several key section components that make up the complete user experience:

​
Hero Section

  • Hero - Landing page with animated typing effect and profile image

​
Navigation

  • Navbar - Fixed navigation bar with smooth scrolling and mobile menu

​
Content Sections

  • About - Personal introduction and technical expertise cards
  • Skills - Technology stack showcase with animated icons
  • Education - Academic timeline with vertical progress line
  • Projects - Project cards with detailed descriptions and tech stacks
  • Work - Work experience section
  • Contact - Contact form with EmailJS integration

​
UI Components

  • Theme Toggle - Dark/light mode switcher with smooth transitions
  • Social Dock - Floating dock with social media links

​
Common Features

All components share these characteristics:
  • Responsive Design - Mobile-first approach with breakpoints for all screen sizes
  • Dark Mode Support - Complete theme support using React Context
  • Smooth Animations - Framer Motion integration for professional transitions
  • Accessibility - Semantic HTML and ARIA labels where appropriate

​
Component Architecture

src/components/
├── Hero.jsx              # Landing section
├── Navbar.jsx            # Navigation
├── About.jsx             # About section
├── Skills.jsx            # Skills grid
├── Education.jsx         # Education timeline
├── Projects.jsx          # Projects showcase
├── Work.jsx              # Work experience
├── Contact.jsx           # Contact form
├── ThemeToggle.jsx       # Theme switcher wrapper
├── SocialDock.jsx        # Social media dock
└── ui/                   # Reusable UI components
    ├── animated-theme-toggler.jsx
    ├── dock.jsx
    └── button.jsx

​
Higher-Order Components

Many sections use the SectionWrapper HOC for consistent styling and animations: 
import { SectionWrapper } from '@/hooks';

function MyComponent() {
  return <div>Content</div>;
}

export default SectionWrapper(MyComponent, "section-id");
The SectionWrapper adds scroll-based animations, padding, and section IDs for navigation.

​
Styling Approach

All components use:
  • Tailwind CSS for utility-first styling
  • Custom CSS classes defined in styles.js
  • Dark mode variants using dark: prefix
  • Responsive utilities (sm:, md:, lg:, xl:)

​
Animation Patterns

Common animation variants from utils/motion.js: 
// Fade in from direction
fadeIn(direction, type, delay, duration)

// Text reveal animation
textVariant(delay)

// Stagger children
staggerContainer(staggerChildren, delayChildren)

​
Next Steps

Explore individual component documentation for:
  • Detailed implementation
  • Props and configuration
  • Code examples
  • Customization options

Build docs developers (and LLMs) love

Get started for freeTalk to us