Skip to main content

​
Components Overview

The Pirson Dev Portfolio uses a collection of custom-built React components to create an interactive and modern user experience. All components are designed with dark mode support, smooth animations, and responsive layouts.

Navbar

A floating dock navigation component with animated icons and route highlighting

FloatingDock

A macOS-style dock with magnetic hover effects and responsive mobile/desktop views

​
Theme & Language Components

ThemeSwitcher

Animated theme toggle with sun/moon icons and smooth dark mode transitions

LanguageSwitcher

Multi-language selector with flag icons supporting ES, EN, and FR

​
Content Components

Timeline

Scroll-based timeline component with animated progress tracking for education and experience

​
Component Features

All components in this portfolio share common characteristics:
  • Framer Motion animations for smooth transitions and interactions
  • Dark mode support with automatic theme detection
  • Responsive design optimized for mobile and desktop
  • TypeScript/JSX for type safety and developer experience
  • Tailwind CSS for consistent styling and theming
  • i18n integration for multi-language support

​
Installation

These components use the following key dependencies: 
npm install framer-motion react-router-dom react-i18next @tabler/icons-react

​
Usage Pattern

Most components follow this basic import and usage pattern: 
import ComponentName from './components/ComponentName';

function App() {
  return (
    <div>
      <ComponentName />
    </div>
  );
}
For detailed props, examples, and implementation details, explore the individual component documentation pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us