docs
Components

Components

Comprehensive guide to all reusable components in the portfolio.

Animation Components

MotionDiv

Scroll-triggered fade-in animation wrapper.

Location: src/components/motion-div.tsx

Props:

  • delayOffset?: number - Animation delay in seconds
  • children: React.ReactNode - Content to animate

Usage:

<MotionDiv delayOffset={0.5}>
  <p>This text fades in after 0.5s</p>
</MotionDiv>

MotionText

Character-by-character text reveal animation.

Location: src/components/motion-text.tsx

Usage:

<MotionText delayOffset={0}>
  Hi, I'm Abishek Maharajan! 👋
</MotionText>

MotionList

Stagger animation for list items.

Location: src/components/motion-list.tsx

Usage:

<MotionList delayOffset={0.5} showWhenInView={true}>
  <div>Item 1</div>
  <div>Item 2</div>
</MotionList>

UI Components

ContactList

Social media and contact links with icons.

Location: src/components/contact-list.tsx

Included Links:

  1. Email
  2. X/Twitter
  3. GitHub
  4. LinkedIn
  5. Google Cloud Skills Boost
  6. Credly

BackToTop

Floating scroll-to-top button.

Location: src/components/back-to-top.tsx

Features:

  • Appears when scrolled > 100px
  • Fixed position (bottom-right)
  • Smooth scroll animation

Header

Navigation header with logo and links.

Location: src/components/header.tsx

Features:

  • Logo in GoldenSignature font
  • Navigation links: About, Skills, Contact
  • Smooth scroll to sections
  • Responsive layout

GridBackground

Animated grid background pattern.

Location: src/components/grid-background.tsx

Layout Components

ErrorBoundary

React error boundary for graceful error handling.

Location: src/components/layout/ErrorBoundary.tsx

Features:

  • Catches React errors
  • Displays user-friendly message
  • Logs errors for debugging

WebVitalsReporter

Performance monitoring component.

Location: src/components/layout/WebVitalsReporter.tsx

Metrics Tracked:

  • LCP, INP, CLS, FCP, TTFB

Utility Functions

cn (classnames)

Merge Tailwind classes with conflict resolution.

Location: src/lib/utils.ts

Usage:

cn("px-4 py-2", "px-6") // Result: "py-2 px-6"

getAssetPath

Handle base path for GitHub Pages deployment.

Location: src/utils/paths.ts

Usage:

<img src={getAssetPath("photo.jpg")} />

Best Practices

  1. Type Safety: Always define prop types
  2. Accessibility: Include ARIA labels
  3. Responsive: Mobile-first design
  4. Performance: Optimize animations
  5. Reusability: Keep components generic
Getting StartedDeployment