Skip to main content

​
Introduction

Welcome to the Pirson Dev Portfolio documentation. This is a modern, professional portfolio website built with React that showcases projects, skills, and professional experience in an engaging and interactive way.

​
What is Pirson Dev Portfolio?

Pirson Dev Portfolio is a single-page application (SPA) built with React 19 and Vite that serves as a personal portfolio website. It features a clean, modern design with smooth animations, dark mode support, and full multilingual capabilities.

Modern Tech Stack

Built with React 19, Vite 7, and Tailwind CSS 4 for optimal performance and developer experience

Multilingual Support

Full internationalization with i18next supporting English, Spanish, and French

Smooth Animations

Powered by Framer Motion (motion v12) for fluid page transitions and interactive elements

Theme Switching

Built-in dark/light mode with smooth transitions and localStorage persistence

​
Who is this for?

This portfolio template is perfect for:
  • Developers looking to showcase their projects and skills
  • Freelancers who need a professional online presence
  • Job seekers wanting to stand out with an interactive portfolio
  • Students building their first portfolio website
The portfolio includes sections for Home, About, Projects, and Contact, making it easy to present your professional story.

​
Key Highlights

​
Professional Design

The portfolio features a sophisticated violet-themed gradient background with glassmorphism effects. The design adapts seamlessly between light and dark modes, providing an optimal viewing experience in any environment.

​
Internationalization Ready

With full i18next integration, the portfolio supports multiple languages out of the box:
  • English (en)
  • Spanish (es)
  • French (fr)
The language switcher includes beautiful flag icons and automatically translates routes and content.

​
Interactive Components

The portfolio includes several custom UI components:
  • Floating Dock Navigation - A macOS-style dock with hover effects
  • Timeline Component - Perfect for displaying career history and education
  • Text Flip Animation - Eye-catching animated text rotations
  • Project Carousel - Showcase your work in an engaging way
All components are built with accessibility and performance in mind, using React 19’s latest features.

​
Smooth Page Transitions

Every page navigation includes smooth fade and blur animations powered by Framer Motion, creating a polished, app-like experience. 
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)" },
};

​
Getting Started

The portfolio is built as a standard Vite + React application. Here’s how to get started: 
npm install
npm run dev
The development server will start at http://localhost:5173 with hot module replacement (HMR) enabled.
The project uses Vite 7 for lightning-fast development builds and optimized production bundles.

​
Project Structure

The codebase is organized for maintainability and scalability: 
src/
├── components/      # Reusable UI components
│   ├── ui/         # Core UI components (Timeline, FloatingDock, etc.)
│   └── projects/   # Project-specific components
├── pages/          # Route pages (Home, About, Projects, Contact)
├── locales/        # i18next translation files (en, es, fr)
├── lib/            # Utility functions
└── utils/          # Helper utilities

​
Analytics & Deployment

The portfolio includes Vercel Analytics integration for tracking visitor insights and is optimized for deployment on Vercel with zero configuration.
A vercel.json configuration file is included for custom deployment settings.

​
Next Steps

Explore Features

Discover all the features and capabilities

Tech Stack

Learn about the technologies used

Build docs developers (and LLMs) love

Get started for freeTalk to us