Skip to main content

Performance-Optimized React Portfolio

A deep dive into building a modern portfolio website with custom GSAP animations, technical SEO, and Core Web Vitals optimization. Learn how to implement smooth scrolling, lazy loading, and multi-language support.

Get StartedExplore Architecture
const portfolio =
tech: ‘React 19 + Vite’,
animations: ‘GSAP + ScrollTrigger’,
styling: ‘Tailwind CSS v4’,
i18n: ‘Custom Context’,
performance: ‘100/100 Lighthouse’
;

Quick start

Get the portfolio running locally in minutes

1

Clone the repository

Clone the repository from GitHub to your local machine.
git clone https://github.com/Garridoparrayeray/yeraygarrido.dev.git
cd yeraygarrido.dev
2

Install dependencies

Install all required packages using npm. Requires Node.js 18 or higher.
npm install
The project uses React 19, Vite 6, GSAP 3.14, and Tailwind CSS v4. All dependencies will be installed automatically.
3

Start the development server

Launch the Vite development server with hot module replacement.
npm run dev
The site will be available at http://localhost:3000. The development server runs on all interfaces (0.0.0.0) for network access.
4

Build for production

Create an optimized production build with minification and code splitting.
npm run build
The build process uses Terser for minification with console and debugger statements removed. GSAP and react-github-calendar are split into separate vendor chunks for optimal loading. CSS is code-split and injected via JavaScript for Tailwind v4 compatibility.

Explore by topic

Dive deep into the technical implementation

Architecture

Learn about the project structure, performance strategies, and animation system architecture

Components

Explore the modular React components including Hero, Header, Interactive Canvas, and more

Features

Discover key features like i18n, lazy loading, smooth scrolling, and the public CV API

Performance

Deep dive into Core Web Vitals optimization, lazy loading strategies, and render performance

Animations

Understand GSAP implementation, ScrollTrigger integration, and timeline management

Development

Get started with local development, building for production, and customization guides

Key features

Production-ready patterns and optimizations

⚡

Custom GSAP animations

Scroll-triggered animations with timeline management and GPU acceleration for smooth 60fps performance

Learn more
🌍

Multi-language support

Custom React Context implementation for English, Spanish, and Basque with dynamic SEO metadata updates

Learn more
🚀

Lazy-loaded components

React Suspense boundaries with interaction-triggered loading for optimal Time to Interactive (TTI)

Learn more
📡

Public CV API

Static XML and JSON endpoints for programmatic access to CV data directly from the terminal

Learn more

Ready to explore the codebase?

Dive into the source code and see how this portfolio was built with performance and user experience as top priorities.

Get StartedView on GitHub