Portfolio Website

This repository contains the code for my portfolio website and its interactive projects.

Repository Structure

• frontend/ — Angular application and GitHub Pages content
• backend/ — Cloudflare Worker API for secure Gemini requests

The frontend is hosted with GitHub Pages. The backend is deployed as a Cloudflare Worker so API keys remain secure and are never exposed to visitors.

Frontend Setup (Angular)

Prerequisites

• Node.js
• Angular CLI

Install Angular CLI (if needed)

npm install -g @angular/cli

Install dependencies

cd frontend
npm install

Run locally

cd frontend
ng serve

Open the app in your browser at:

http://localhost:4200

The frontend will communicate with the local Cloudflare Worker backend when running locally.

Backend Setup (Cloudflare Worker)

Prerequisites

• Node.js
• Cloudflare account
• Wrangler CLI

Install Wrangler

npm install -g wrangler

Authenticate with Cloudflare

wrangler login

Install dependencies

cd backend
npm install

Configure Gemini API key

The Gemini API key is stored as a Cloudflare Worker secret and should never be committed to Git.

For local development, create backend/.dev.vars with:

GEMINI_API_KEY=your_api_key_here

For production deployment, add the secret with:

wrangler secret put GEMINI_API_KEY

Run backend locally

cd backend
npm run dev

The API should be available at:

http://localhost:8787

Test the backend

curl http://localhost:8787/api/test

Expected response:

{
  "message": "Worker is working!",
  "geminiConfigured": true
}

Production Build and Deployment

Build frontend

cd frontend
ng build --configuration production

This generates the production files into the docs/ folder, which GitHub Pages uses.

Deploy frontend

cd frontend
git add .
git commit -m "Update frontend build"
git push

GitHub Pages will serve the content from the docs/ folder.

Deploy backend

cd backend
npm run deploy

After deployment, Cloudflare will provide the Worker URL, for example:

https://your-worker-name.workers.dev

Update the production environment file at frontend/src/environments/environment.production.ts:

export const environment = {
  production: true,
  apiUrl: 'https://your-worker-name.workers.dev',
};

Then rebuild the frontend.

Development Workflow

1. Start the backend:

   cd backend
   npm run dev

2. Start the frontend:

   cd frontend
   ng serve

3. Make changes.

4. Test locally.

5. Build the frontend for production.

6. Commit and push changes.

Environment variables

Do not commit the following files:

• .env
• .dev.vars

These files contain API credentials.

The Gemini API key should only exist:

• locally in backend/.dev.vars
• in Cloudflare Worker secrets for production