Skip to main content

​
Get Started in 5 Minutes

This guide will help you set up the portfolio and see it running locally as quickly as possible.
1

Clone the repository

Clone the project to your local machine:
git clone https://github.com/eclinick/personal-portfolio.git
cd personal-portfolio
2

Install dependencies

Install all required packages using pnpm:
pnpm install
This project uses pnpm v10.19.0 as specified in package.json. If you don’t have pnpm installed, run:
npm install -g [email protected]
3

Set up environment variables

Create a .env file in the root directory with the following variables:
# Azure AI API Token (for chat functionality)
API_TOKEN=your_azure_ai_api_token

# GitHub API Token (for contribution graph)
VITE_GITHUB_API_TOKEN=your_github_token
Without these environment variables, the AI chat and GitHub contribution graph won’t work. You can still run the portfolio, but these features will be disabled.
4

Start the development server

Run the development server:
pnpm run dev
Your portfolio will be available at http://localhost:5173
5

Explore the portfolio

Open your browser and navigate to http://localhost:5173. You should see:
  • Welcome animation on first visit
  • Hero section with profile image
  • GitHub contribution graph
  • Featured projects section
  • Employment timeline
  • AI chat assistant (floating button in bottom right)

​
Available Scripts

Here are the npm scripts available in package.json: 
# Start Vite dev server with hot reload
pnpm run dev

​
Project Structure

Once installed, your project structure will look like this: 
personal-portfolio/
├── src/
│   ├── app/              # Page components
│   │   ├── Portfolio.tsx # Landing page
│   │   ├── About.tsx     # About page
│   │   ├── BlogList.tsx  # Blog listing
│   │   └── BlogPost.tsx  # Blog post view
│   ├── components/       # Reusable components
│   │   ├── ChatBox.tsx   # AI chat assistant
│   │   ├── ProjectCard.tsx
│   │   ├── Menu.tsx
│   │   ├── Footer.tsx
│   │   └── ui/           # UI primitives
│   ├── assets/           # Images and static files
│   ├── App.tsx           # Main app with routing
│   └── main.tsx          # Entry point
├── netlify/
│   └── functions/
│       └── chat.ts       # Serverless chat API
├── dist/                 # Production build output
├── netlify.toml          # Netlify configuration
├── vite.config.ts        # Vite configuration
├── tailwind.config.js    # Tailwind CSS config
└── package.json          # Dependencies

​
Testing the AI Chat

To test the AI chat assistant:
1

Click the chat button

Look for the floating chat button in the bottom right corner of the page.
2

Start a conversation

Try asking questions like:
  • “Tell me about Ethan’s experience”
  • “What projects has he worked on?”
  • “What skills does he have?”
3

Check the response

The AI should respond with information based on the system prompt in src/components/ChatBox.tsx:74
The chat assistant uses Azure AI’s GPT-4o-mini model for intelligent responses. You can customize the system prompt to change how the AI represents you.

​
Local Development with Netlify Functions

To test serverless functions locally: 
# Install Netlify CLI globally
pnpm add -g netlify-cli

# Login to Netlify
netlify login

# Run dev server with functions
netlify dev
This will:
  • Start Vite on http://localhost:8888
  • Enable the /. netlify/functions/chat endpoint
  • Hot reload both frontend and functions

​
Troubleshooting

If port 5173 is already in use, Vite will automatically try the next available port. Check the console output for the actual URL.
Make sure you’ve set the API_TOKEN environment variable in your .env file. The chat function proxies requests to Azure AI at https://models.inference.ai.azure.com/chat/completions
Clear your node_modules and reinstall:
rm -rf node_modules pnpm-lock.yaml
pnpm install
Make sure you’re using TypeScript 5.5.3 or higher. Check with:
pnpm list typescript

​
Next Steps

Installation Guide

Learn about prerequisites and detailed setup

Customization

Personalize your portfolio with your content

Deployment

Deploy your portfolio to Netlify

API Reference

Explore the chat API and functions
The portfolio includes a welcome animation that shows on first visit. It’s stored in session storage, so it only appears once per browser session.

Build docs developers (and LLMs) love

Get started for freeTalk to us