Setup

Setup Guide

Instructions for local development, building, and deploying the portfolio.

Prerequisites

• Node.js v16 or higher
• npm (comes with Node.js)
• Git

Installation

# Clone the repository
git clone https://github.com/davidagustin/davidagustin.github.io.git
cd davidagustin.github.io

# Install dependencies
npm install

# Start development server
npm start

The site will open at http://localhost:3000.

Available Scripts

Command	Description
npm start	Start development server with hot reload
npm run build	Create optimized production build in build/
npm test	Run test suite
npm run lint	Run Biome linter
npm run format	Auto-format code with Biome
npm run check	Run both lint and format checks
npm run deploy	Build and deploy to GitHub Pages

Adding a New Project

1. Open src/utils/constants.ts
2. Add a new entry to the PROJECTS array:

{
  id: 26,  // Increment from last ID (currently 25 projects)
  title: 'Project Name',
  description: 'Brief description of the project.',
  technologies: ['Next.js', 'TypeScript', 'Tailwind CSS'],
  githubUrl: 'https://github.com/davidagustin/project-repo',
  liveUrl: 'https://project.vercel.app',  // Optional
  category: 'Category Name',
  features: [
    'Feature 1',
    'Feature 2',
    'Feature 3',
    'Feature 4',
  ],
}

3. Optionally add a screenshot to public/screenshots/project-{id}.png
4. The project will automatically appear in all three views (Grid/Carousel/Table) with filtering support.

Modifying Sections

Each section is an independent component in src/components/:

File	Section
Hero.tsx	Apple-style parallax landing
About.tsx	Skills with animated counters
Projects.tsx	Multi-view (Grid/Carousel/Table) with search/filter
Donation.tsx	Support/donation options
Contact.tsx	Email contact form with dark mode
Footer.tsx	Footer with links
Navbar.tsx	Fixed navigation with dark mode toggle
Snackbar.tsx	Toast notifications

Customizing Colors

Edit tailwind.config.js to change the color palette:

colors: {
  primary: {
    // Blue accent tones
    500: '#5c7cfa',
    600: '#4c6ef5',
    700: '#4263eb',
  },
  surface: {
    // Neutral tones for backgrounds and text
    50: '#f8fafc',
    900: '#0f172a',
    950: '#020617',
  },
}

Deployment

GitHub Pages (Default)

npm run deploy

This runs react-scripts build then gh-pages -d build, pushing the build/ directory to the gh-pages branch.

Other Platforms

The npm run build output is a standard static site. Deploy build/ to any static hosting:

• Vercel: Import the repo, it auto-detects CRA
• Netlify: Set build command to npm run build, publish directory to build
• AWS S3: Upload build/ contents to an S3 bucket with static hosting enabled

Environment

No environment variables are required. The EmailJS public key is embedded in the source (this is by design — EmailJS public keys are safe to expose).