Personal Portfolio Website

This repository contains the source code for my personal portfolio website.

The site is a static showcase of selected projects, engineering work, and professional background.
If you fork this repository, please provide proper attribution by linking back to isaacgitonga.com.

👉 Live site: isaacgitonga.com

---

Tech Stack

Frontend

• HTML5
• TypeScript
• Tailwind CSS
• GSAP (animations)

Tooling / Hosting

• Vite
• ESBuild
• Vercel

Backend (Contact Form)

• Vercel Serverless Functions
• Nodemailer (email delivery)

---

Installation & Setup

1. Clone the repository

git clone https://github.com/gitongaisaac/portfolio.git
cd portfolio

2. Install dependencies

# Install dependencies
npm install

3. Environment variables

An example environment file is provided.

# An example environment file is provided.
cp .env.example .env.local

Required Environment Variables:

EMAIL_USER=your-username@gmail.com
EMAIL_PASS=your-app-password
VERCEL_OIDC_TOKEN="OIDC-token" # This token is usually auto generated by Vercel in .env.local when you run `vercel env pull`

VERCEL_OIDC_TOKEN is usually auto-generated by Vercel in .env.local when you run:

vercel env pull

For more details, see:

Vercel OIDC Token documentation

Google App Passwords documentation

The contact form uses Nodemailer with Google App Passwords for secure email delivery.

4. Run locally

npm run dev

Or, to fully emulate the serverless environment:

vercel dev

See:
Vercel CLI Documentation

5. Build for production

npm run build

Project Structure

.
├── api/                   # Serverless functions (Contact form POST api —Nodemailer)
├── public/                # Static assets (images, logos)
├── src/
│   ├── animations/        # GSAP animation logic for all the pages and their sections.
│   ├── assets/
│   │   └── data/          # Project and site data
│   ├── pages/             # Page-specific TypeScript logic
│   │   └── home.ts        # TypeScript logic specific to `index.html`
│   │   └── project.ts     # TypeScript logic specific to `project.html`
│   ├── main.css           # Global styles (Tailwind)
│   ├── main.ts            # Main entry point
│   └── types.ts           # TypeScript type definitions
├── index.html             # Home page
├── project.html           # Project detail page template
├── package.json           # Dependencies and scripts
├── tsconfig.json          # TypeScript configuration
├── vercel.json            # Vercel deployment configuration
└── vite.config.ts         # Vite configuration

• The animations folder contains all the animations for the portfolio except for the global animations; animations belonging to both the index.html and project.html pages are in main.ts.
• Each section in index.html has its own animation file in src/animations. project.html has just src/animations/project.ts file for all its animations.
• main.ts is the main TypeScript file. Both index.html and project.html must first load this file before calling their specific TypeScript files in src/pages.

License

This project is licensed under the MIT License.
You are free to explore, reuse, and adapt the code with attribution.