Tech Stack

The Pirson Dev Portfolio is built with modern, cutting-edge technologies that provide excellent performance, developer experience, and user engagement. Here’s a comprehensive breakdown of the technology stack.

Core Framework

React 19.2.0

Latest React version with concurrent features and improved performance

Vite 7.1.7

Next-generation build tool with lightning-fast HMR and optimized builds

React 19.2.0

The latest version of React powers the entire application with cutting-edge features:

{
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  }
}

Key Features Used:

Concurrent rendering for smooth UI updates
Automatic batching for optimized state updates
Improved hooks with better performance characteristics
Enhanced error handling for better debugging

React 19 introduces significant performance improvements and new APIs that make the portfolio feel incredibly responsive.

Vite 7.1.7

Next-generation build tool providing exceptional developer experience:

{
  "devDependencies": {
    "vite": "^7.1.7",
    "@vitejs/plugin-react": "^5.0.4"
  }
}

Benefits:

⚡ Instant server start - No bundling required in development
🔥 Lightning-fast HMR - Updates reflect instantly
📦 Optimized builds - Rollup-based production bundling
🎯 Native ESM - Leverages browser ES modules

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss(), react()],
})

Vite 7’s ESM-based dev server starts in under 1 second, regardless of project size!

Styling

Tailwind CSS 4.1.14

The latest Tailwind CSS v4 with Vite plugin integration:

{
  "dependencies": {
    "@tailwindcss/vite": "^4.1.14",
    "tailwindcss": "^4.1.14",
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.6"
  }
}

Features:

Utility-first CSS for rapid UI development
JIT (Just-In-Time) compilation for optimal performance
Dark mode support with class-based strategy
Responsive design with mobile-first breakpoints
Custom color system with CSS variables

Additional Styling Tools

Styling Utilities

tw-animate-css (v1.4.0)

Pre-built animation utilities for Tailwind
Easy integration of complex animations

class-variance-authority (v0.7.1)

Type-safe component variants
Conditional styling with TypeScript support

clsx (v2.1.1)

Conditional class name composition
Clean syntax for dynamic classes

tailwind-merge (v3.3.1)

Intelligent Tailwind class merging
Prevents class conflicts

// Utility function combining clsx and tailwind-merge
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Animation & Motion

Framer Motion 12.34.3

Powerful animation library (using the motion package):

{
  "dependencies": {
    "motion": "^12.34.3"
  }
}

Used For:

🎬 Page transitions with spring physics
🎯 Interactive components with gesture support
📜 Scroll animations for timeline components
🔄 Layout animations for smooth repositioning

import { motion, AnimatePresence, useScroll, useTransform } from "motion/react";

// Spring-based page transitions
const pageVariants = {
  initial: { opacity: 0, y: 20, filter: "blur(8px)" },
  in: { opacity: 1, y: 0, filter: "blur(0px)" },
  out: { opacity: 0, y: -20, filter: "blur(8px)" },
};

The portfolio uses Framer Motion’s latest version (12.x) which includes improved performance and new animation capabilities.

React Transition Group 4.4.5

Additional transition utilities:

{
  "dependencies": {
    "react-transition-group": "^4.4.5"
  }
}

Component-based transition management
CSS transition integration
Exit/enter lifecycle hooks

Routing

React Router DOM 7.9.3

Latest React Router v7 for client-side routing:

{
  "dependencies": {
    "react-router-dom": "^7.9.3"
  }
}

Implementation:

import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path={t("routes.about-me")} element={<About />} />
        <Route path={t("routes.projects")} element={<Projects />} />
        <Route path={t("routes.contact")} element={<Contact />} />
      </Routes>
    </Router>
  );
}

Features:

Client-side routing for instant navigation
Nested routes support
Route transitions with AnimatePresence integration
Internationalized routes with i18next

Routes are dynamically translated based on the selected language, providing a fully localized URL structure.

Internationalization

i18next 25.6.0

Comprehensive i18n solution:

{
  "dependencies": {
    "i18next": "^25.6.0",
    "react-i18next": "^16.1.3"
  }
}

Supported Languages:

🇬🇧 English (en)
🇪🇸 Spanish (es)
🇫🇷 French (fr)

Implementation Example:

import { useTranslation } from "react-i18next";

function Component() {
  const [t] = useTranslation("global");
  
  return (
    <div>
      <h1>{t("home.title")}</h1>
      <p>{t("home.description")}</p>
    </div>
  );
}

Features:

Namespace support for organized translations
Lazy loading of translation files
Pluralization and interpolation
Route translation for SEO-friendly URLs
LocalStorage persistence for language preference

Translation File Structure

src/locales/
├── en/
│   └── global.json
├── es/
│   └── global.json
└── fr/
    └── global.json

Each language has its own directory with translation JSON files organized by namespace.

Icon Libraries

Multiple icon libraries provide maximum flexibility:

Tabler Icons React 3.35.0

Primary icon library:

{
  "dependencies": {
    "@tabler/icons-react": "^3.35.0"
  }
}

import {
  IconBrandGithub,
  IconBrandLinkedin,
  IconMail,
  IconHome,
  IconUser,
} from "@tabler/icons-react";

🎨 Over 4,000+ icons
⚡ Tree-shakeable imports
🎯 Consistent design system
📦 Small bundle size

Lucide React 0.544.0

Alternative icon set:

{
  "dependencies": {
    "lucide-react": "^0.544.0"
  }
}

Modern, clean design
Actively maintained
TypeScript support
Customizable stroke width

React Icons 5.5.0

Community icon packs:

{
  "dependencies": {
    "react-icons": "^5.5.0"
  }
}

Access to Font Awesome, Material Design, and more
Unified API across all icon sets
Over 50+ icon libraries

Theming

next-themes 0.4.6

Theme management solution:

{
  "dependencies": {
    "next-themes": "^0.4.6"
  }
}

Features:

🌓 System preference detection
💾 LocalStorage persistence
🎨 Multiple theme support
⚡ Zero flash on load
🔄 Smooth transitions

Despite the “next-” prefix, this library works perfectly with any React application, not just Next.js projects.

Analytics

Vercel Analytics 1.5.0

Privacy-friendly analytics:

{
  "dependencies": {
    "@vercel/analytics": "^1.5.0"
  }
}

Benefits:

📊 Page view tracking
⚡ Web Vitals monitoring
🔒 Privacy-compliant (no cookies)
🎯 Zero configuration on Vercel
📈 Real-time insights

Development Tools

TypeScript 19.1.16

Type definitions for React:

{
  "devDependencies": {
    "@types/react": "^19.1.16",
    "@types/react-dom": "^19.1.9",
    "tsconfig.json": "included"
  }
}

ESLint 9.36.0

Linting and code quality:

{
  "devDependencies": {
    "eslint": "^9.36.0",
    "@eslint/js": "^9.36.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.22",
    "globals": "^16.4.0"
  }
}

Configured Rules:

React Hooks best practices
React Refresh HMR compatibility
Modern JavaScript standards
Custom project-specific rules

Run npm run lint to check for code quality issues before committing.

Build Configuration

Package Scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "vite"
  }
}

Development

npm run dev - Start dev server with HMR

Build

npm run build - Create optimized production build

Lint

npm run lint - Check code quality with ESLint

Preview

npm run preview - Preview production build locally

Browser Support

baseline-browser-mapping 2.10.0

Modern browser targeting:

{
  "devDependencies": {
    "baseline-browser-mapping": "^2.10.0"
  }
}

The portfolio targets modern browsers with ES6+ support:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

The build uses native ES modules and modern JavaScript features for optimal performance in current browsers.

Version Summary

Here’s a complete reference of all major dependencies:

Complete Dependency List

Core:

React: 19.2.0
React DOM: 19.2.0
Vite: 7.1.7

Styling:

Tailwind CSS: 4.1.14
@tailwindcss/vite: 4.1.14
PostCSS: 8.5.6
Autoprefixer: 10.4.21

Animation:

motion: 12.34.3
react-transition-group: 4.4.5

Routing:

react-router-dom: 7.9.3

Internationalization:

i18next: 25.6.0
react-i18next: 16.1.3

Icons:

@tabler/icons-react: 3.35.0
lucide-react: 0.544.0
react-icons: 5.5.0

Utilities:

clsx: 2.1.1
tailwind-merge: 3.3.1
class-variance-authority: 0.7.1

Theming:

next-themes: 0.4.6

Analytics:

@vercel/analytics: 1.5.0

Why These Technologies?

Performance

Vite 7 and React 19 provide industry-leading build times and runtime performance

Developer Experience

Hot module replacement, TypeScript support, and modern tooling make development a joy

User Experience

Smooth animations, instant page transitions, and responsive design create an engaging experience

Maintainability

Well-organized code, type safety, and modern patterns make the codebase easy to maintain

All dependencies are kept up-to-date with the latest stable versions, ensuring security and access to the newest features.

Overview

Getting Started

Components

Customization

Deployment

​Tech Stack

​Core Framework

React 19.2.0

Vite 7.1.7

​React 19.2.0

​Vite 7.1.7

​Styling

​Tailwind CSS 4.1.14

​Additional Styling Tools

​Animation & Motion

​Framer Motion 12.34.3

​React Transition Group 4.4.5

​Routing

​React Router DOM 7.9.3

​Internationalization

​i18next 25.6.0

​Icon Libraries

​Tabler Icons React 3.35.0

​Lucide React 0.544.0

​React Icons 5.5.0

​Theming

​next-themes 0.4.6

​Analytics

​Vercel Analytics 1.5.0

​Development Tools

​TypeScript 19.1.16

​ESLint 9.36.0

​Build Configuration

​Package Scripts

Development

Build

Lint

Preview

​Browser Support

​baseline-browser-mapping 2.10.0

​Version Summary

​Why These Technologies?

Performance

Developer Experience

User Experience

Maintainability

Build docs developers (and LLMs) love

Tech Stack

Core Framework

React 19.2.0

Vite 7.1.7

Styling

Tailwind CSS 4.1.14

Additional Styling Tools

Animation & Motion

Framer Motion 12.34.3

React Transition Group 4.4.5

Routing

React Router DOM 7.9.3

Internationalization

i18next 25.6.0

Icon Libraries

Tabler Icons React 3.35.0

Lucide React 0.544.0

React Icons 5.5.0

Theming

next-themes 0.4.6

Analytics

Vercel Analytics 1.5.0

Development Tools

TypeScript 19.1.16

ESLint 9.36.0

Build Configuration

Package Scripts

Browser Support

baseline-browser-mapping 2.10.0

Version Summary

Why These Technologies?