Installation

This guide provides comprehensive instructions for installing and setting up David Carrascosa’s portfolio on your local development environment.

Prerequisites

Before installing the portfolio, ensure your system meets these requirements:

Required Software

Node.js 18 or Higher

The portfolio requires Node.js 18+ for modern JavaScript features and optimal performance.Check your Node.js version:

node --version
# Should output v18.0.0 or higher

Install Node.js:

Download from nodejs.org
Or use a version manager like nvm:

# Using nvm (recommended)
nvm install 20
nvm use 20

Node.js versions below 18 are not supported and may cause compatibility issues.

Package Manager

Choose one of the following package managers:

Bun (Recommended)
npm
yarn
pnpm

Bun is a fast JavaScript runtime and package manager. This project was built with Bun.

# Install Bun (macOS/Linux)
curl -fsSL https://bun.sh/install | bash

# Verify installation
bun --version

Bun documentation

npm comes pre-installed with Node.js.

# Verify npm installation
npm --version

# Update to latest version (optional)
npm install -g npm@latest

Yarn is a popular alternative to npm.

# Install Yarn globally
npm install -g yarn

# Verify installation
yarn --version

pnpm is a fast, disk-efficient package manager.

# Install pnpm
npm install -g pnpm

# Verify installation
pnpm --version

Git

Git is required to clone the repository.

# Check Git installation
git --version

Install Git:

macOS: brew install git or download from git-scm.com
Linux: sudo apt install git (Ubuntu/Debian) or sudo yum install git (CentOS/RHEL)
Windows: Download from git-scm.com

System Requirements

Component	Minimum	Recommended
Node.js	18.0.0	20.0.0+
RAM	4 GB	8 GB+
Disk Space	500 MB	1 GB
OS	macOS 10.15+, Ubuntu 20.04+, Windows 10+	Latest stable

Installation Steps

Clone the Repository

Clone the portfolio repository from GitHub:

git clone https://github.com/tu-usuario/web-portfolio.git

Replace tu-usuario with the actual GitHub username or organization.

Navigate to the project directory:

cd web-portfolio

Install Dependencies

Install all required packages listed in package.json:

bun install

This will install:

Core dependencies: React, React DOM, React Router
Build tools: Vite, TypeScript, SWC
UI framework: Tailwind CSS, shadcn/ui, Radix UI
Animation: Framer Motion
Dev dependencies: ESLint, Vitest, Testing Library

Installation time: ~30-60 seconds (varies by internet speed)

The project includes a bun.lockb file for Bun users. If using npm, yarn, or pnpm, a new lockfile will be generated.

Verify Installation

Verify that all dependencies were installed correctly:

# Check that node_modules exists
ls node_modules

# Verify React is installed
ls node_modules/react

You should see a node_modules directory with all installed packages.

Start Development Server

Launch the Vite development server:

bun run dev

Expected output:

VITE v5.4.19  ready in 324 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.100:5173/
➜  press h + enter to show help

The server listens on all network interfaces (::) by default, configured in vite.config.ts:8.

Access the Application

Open your browser and navigate to:

http://localhost:5173

You should see the portfolio homepage with:

Navigation bar
Hero section
About section
Experience timeline
Skills showcase
Contact form

Try resizing your browser window to see the responsive design in action.

Environment Configuration

This portfolio does not require environment variables for basic operation. However, if you plan to add features like:

Contact form email delivery
Analytics integration
CMS integration

You may need to create a .env file:

.env

# Example environment variables (not required for basic setup)
VITE_API_URL=https://api.example.com
VITE_CONTACT_EMAIL=[email protected]

Never commit .env files to version control. The .gitignore file already excludes them.

Project Structure

After installation, your project directory should look like:

web-portfolio/
├── node_modules/          # Installed dependencies (ignored by git)
├── public/                # Static assets
├── src/
│   ├── components/
│   │   ├── ui/           # shadcn/ui components (40+ files)
│   │   ├── AboutSection.tsx
│   │   ├── ContactSection.tsx
│   │   ├── ExperienceSection.tsx
│   │   ├── HeroSection.tsx
│   │   ├── Navbar.tsx
│   │   ├── NavLink.tsx
│   │   └── SkillsSection.tsx
│   ├── hooks/
│   │   └── use-mobile.tsx
│   ├── lib/
│   │   └── utils.ts
│   ├── pages/
│   │   ├── Index.tsx
│   │   └── NotFound.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── .gitignore
├── bun.lockb              # Bun lockfile
├── components.json        # shadcn/ui config
├── eslint.config.js
├── index.html
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.ts
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts         # Vite configuration
└── vitest.config.ts       # Test configuration

Verification Steps

Confirm your installation is working correctly:

Run Type Checking

Verify TypeScript compilation:

npx tsc --noEmit

No output means success. Errors indicate type issues.

Run Linter

Check code quality:

bun run lint

This runs ESLint against the codebase.

Run Tests

Execute the test suite:

bun run test

All tests should pass.

Build for Production

Create an optimized production build:

bun run build

Expected output:

vite v5.4.19 building for production...
✓ 1234 modules transformed.
dist/index.html                  0.45 kB │ gzip:  0.30 kB
dist/assets/index-abc123.css    12.34 kB │ gzip:  3.45 kB
dist/assets/index-def456.js    123.45 kB │ gzip: 45.67 kB
✓ built in 2.34s

The dist/ directory contains production-ready files.

Preview Production Build

Test the production build locally:

bun run preview

Open the provided URL (usually http://localhost:4173) to preview.

Troubleshooting

Common Issues

Getting Additional Help

If you’re still experiencing issues:

Check the console for error messages
Review Vite logs in the terminal
Search existing issues on GitHub
Open a new issue with:
- Node.js version (node --version)
- Package manager and version
- Error messages and stack traces
- Steps to reproduce

Vite Documentation

Official Vite troubleshooting guide

React Documentation

React documentation and guides

Tailwind CSS Docs

Tailwind CSS documentation

shadcn/ui Docs

shadcn/ui component library

Next Steps

Now that you have the portfolio installed:

Explore the Codebase

Start with src/App.tsx to understand the routing structure
Review src/pages/Index.tsx to see how sections are composed
Browse src/components/ to explore individual components

Customize the Portfolio

Edit content in section components (HeroSection.tsx, etc.)
Modify styles in tailwind.config.ts
Customize shadcn/ui components in src/components/ui/

Build and Deploy

Run bun run build to create a production build
Deploy to Vercel, Netlify, or GitHub Pages
See the Building & Deploying guide for deployment instructions

You’re all set! The portfolio is installed and ready for development.

Get Started

Development

Components

UI Components

Styling

Installation

Installation

Prerequisites

Required Software

System Requirements

Installation Steps

Environment Configuration

Project Structure

Verification Steps

Troubleshooting

Common Issues

Getting Additional Help

Vite Documentation

React Documentation

Tailwind CSS Docs

shadcn/ui Docs

Next Steps

Build docs developers (and LLMs) love

Get Started

Development

Components

UI Components

Styling

​Installation

​Prerequisites

​Required Software

​System Requirements

​Installation Steps

​Environment Configuration

​Project Structure

​Verification Steps

​Troubleshooting

​Common Issues

​Getting Additional Help

Vite Documentation

React Documentation

Tailwind CSS Docs

shadcn/ui Docs

​Next Steps

Build docs developers (and LLMs) love

Installation

Prerequisites

Required Software

System Requirements

Installation Steps

Environment Configuration

Project Structure

Verification Steps

Troubleshooting

Common Issues

Getting Additional Help

Next Steps