Skip to main content

​
Components Overview

The Personal Portfolio project is built with a collection of modular, reusable React + TypeScript components. Each component is designed with glassmorphism aesthetics, dark mode support, and responsive behavior.

​
Available Components

Navbar

Responsive navigation bar with mobile menu, social links, and theme toggle

ChatBox

AI-powered chat assistant with markdown support and blog context integration

ProjectCard

Interactive project showcase cards with 3D tilt effects and tag system

Footer

Site footer with social links and contact information

​
Design Philosophy

All components in this portfolio follow these key principles:
  • Glassmorphism: Backdrop blur effects with transparent backgrounds
  • Dark Mode First: Built with dark mode as the primary theme
  • Responsive: Mobile-first design that adapts to all screen sizes
  • Type Safety: Fully typed with TypeScript interfaces
  • Accessibility: Semantic HTML and ARIA labels where needed

​
Component Structure

Components are located in src/components/ and follow this structure: 
src/components/
├── Navbar.tsx          # Main navigation
├── ChatBox.tsx         # AI chat interface
├── ProjectCard.tsx     # Project showcase card
├── Footer.tsx          # Site footer
└── ui/                 # Shared UI components
    └── ai-input.tsx    # Custom AI input field

​
Common Props

Many components share common props for consistency:
​
isDarkMode
boolean
default:"false"
Controls the component’s color scheme. When true, applies dark mode styling.

​
Getting Started

To use any component in your application:
  1. Import the component from src/components/
  2. Pass the required props (see individual component docs)
  3. Customize with optional props as needed
All components are designed to work together seamlessly. The isDarkMode prop should be managed at the application level and passed down to maintain consistency.

​
Next Steps

Explore the documentation for each component to learn about their specific props, usage patterns, and customization options.

Build docs developers (and LLMs) love

Get started for freeTalk to us