Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js 18+

Required for running the development server and build tools

Git

For cloning the repository and version control

npm

Package manager (comes with Node.js)

Code editor

VS Code, WebStorm, or your preferred editor
Node.js 18 or higher is required. Check your version with node --version.

​
Installation steps

1

Clone the repository

Clone the repository from GitHub to your local machine:
Terminal
git clone https://github.com/Garridoparrayeray/yeraygarrido.dev.git
cd yeraygarrido.dev
This will download the complete source code and all assets.
2

Install dependencies

Install all required npm packages:
Terminal
npm install
This will install the following key dependencies:Runtime dependencies:
  • react@19.0.0 - React library
  • react-dom@19.0.0 - React DOM renderer
  • gsap@3.14.2 - Animation library
  • lenis@1.3.17 - Smooth scrolling
  • react-github-calendar@5.0.5 - GitHub contribution calendar
  • @vercel/analytics@1.6.1 - Analytics integration
  • @vercel/speed-insights@1.3.1 - Performance monitoring
  • @microsoft/clarity@1.0.2 - User behavior analytics
Development dependencies:
  • vite@6.2.0 - Build tool
  • typescript@5.8.2 - Type checking
  • tailwindcss@4.1.14 - CSS framework
  • @vitejs/plugin-react@5.0.4 - React plugin for Vite
  • terser@5.46.0 - JavaScript minifier
  • vite-plugin-css-injected-by-js@4.0.1 - CSS injection plugin
  • React 19: Latest version with improved Suspense and concurrent features
  • Vite 6: Fastest build tool with native ESM support
  • GSAP 3.14: Industry-standard animation library
  • Tailwind v4: Latest version with improved performance and DX
  • Lenis 1.3: Smoothest scrolling library with momentum-based easing
3

Start the development server

Launch the Vite development server:
Terminal
npm run dev
The development server will start on port 3000 and bind to all network interfaces:
Output
VITE v6.2.0  ready in 324 ms

➜  Local:   http://localhost:3000/
➜  Network: http://192.168.1.100:3000/
The server runs on 0.0.0.0 (all interfaces) so you can access it from other devices on your network for mobile testing.
4

Open in browser

Navigate to http://localhost:3000 in your browser. You should see the portfolio homepage with the animated hero section.The development server includes:
  • ⚡ Hot Module Replacement (HMR)
  • 🔄 Instant updates on file changes
  • 🐛 Source maps for debugging
  • 📱 Network access for mobile testing

​
Available scripts

The project includes several npm scripts defined in package.json:
​
npm run dev
command
Starts the Vite development server on port 3000 with HMR enabled
​
npm run build
command
Creates an optimized production build in the dist/ directory with Terser minification
​
npm run preview
command
Serves the production build locally for testing before deployment
​
npm run clean
command
Removes the dist/ directory to start fresh
​
npm run lint
command
Runs TypeScript type checking without emitting files

​
Development workflow

1

Make changes

Edit files in the src/ directory. Changes will be reflected immediately thanks to HMR.
2

Test locally

View your changes at http://localhost:3000 and test on different screen sizes.
3

Build for production

Run npm run build to create an optimized production bundle.
4

Preview production build

Run npm run preview to test the production build locally before deploying.

​
Project structure overview

Once installed, your project structure will look like this:
Directory structure
yeraygarrido.dev/
├── public/              # Static assets
│   ├── cv.xml          # Public API endpoint
│   ├── cv.json
│   ├── cv.txt
│   ├── img/
│   └── fonts/
├── src/
│   ├── components/     # React components
│   ├── context/        # Global state
│   ├── App.tsx         # Main app component
│   └── main.tsx        # Entry point
├── vite.config.ts      # Vite configuration
├── tsconfig.json       # TypeScript config
├── package.json        # Dependencies
└── tailwind.config.js  # Tailwind config
Start by exploring the src/App.tsx file to understand how lazy loading and Suspense boundaries are implemented.

​
Next steps

Now that you have the project running locally, explore the documentation:

Architecture

Learn about the project structure and design patterns

Components

Explore the React components and their implementations

Performance

Understand the performance optimization strategies

Animations

Deep dive into GSAP animations and ScrollTrigger

i18n

Learn about the multi-language implementation

Customization

Customize the portfolio for your own use

​
Troubleshooting

If port 3000 is occupied, Vite will automatically try the next available port (3001, 3002, etc.).To use a specific port:
npm run dev -- --port 3001
Delete node_modules/ and reinstall:
rm -rf node_modules package-lock.json
npm install
Run type checking to see detailed errors:
npm run lint
HMR can be disabled with the DISABLE_HMR environment variable. Check your .env file or remove the variable:
unset DISABLE_HMR
npm run dev

Build docs developers (and LLMs) love

Get started for freeTalk to us