A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS, featuring a custom AI chat assistant powered by Azure's AI models.

• Features
• Live Demo
• Tech Stack
• Prerequisites
• Getting Started
• Deployment
• Current Working Features
• Known Issues
• Development Notes
• Netlify Deployment Guide
  • Initial Setup
  • Required Files
  • Deployment Steps
  • Troubleshooting
  • Monitoring
• Contributing
• License
• Contact

• Interactive AI Chat Assistant: Custom-trained AI that can answer questions about my background, skills, and experience
• Responsive Design: Fully responsive layout that works on mobile, tablet, and desktop
• Modern UI: Clean, professional design with smooth animations and transitions
• Project Showcase: Dynamic project cards with tags, links, and status indicators
• Dark Theme: Eye-friendly dark mode design
• Serverless Architecture: Utilizing Netlify Functions for backend operations

Visit the live site: https://ethanclinick.netlify.app

• Frontend:

  • React 18
  • TypeScript
  • Tailwind CSS
  • Lucide React (for icons)
  • Vite (build tool)

• Backend:

  • Netlify Functions
  • Azure AI Models

• Product Management:

  • Agile Methodologies
  • Risk Management
  • SaaS Product Development

• Deployment:

  • Netlify
  • GitHub Actions

• Node.js (v20 or higher)
• pnpm
• Azure AI API key (for chat functionality)

1. Clone the repository

   git clone https://github.com/eclinick/personal-portfolio.git
   cd personal-portfolio

2. Install dependencies

   pnpm install

3. Set up environment variables Create a .env file in the root directory:

   VITE_GITHUB_API_TOKEN=your_github_token
   API_TOKEN=your_azure_ai_api_token

4. Start the development server

   pnpm run dev

5. Build for production

   pnpm run build

The project is set up for automatic deployment to Netlify:

1. Connect your GitHub repository to Netlify
2. Configure the following environment variables in Netlify:
   • API_TOKEN (Azure AI API token)
   • VITE_GITHUB_API_TOKEN (GitHub API token)
3. Deploy will automatically trigger on push to main branch

• ✅ Responsive navigation with mobile menu
• ✅ Hero section with call-to-action buttons
• ✅ About section with skills showcase
• ✅ Projects section with filtering and status indicators
• ✅ Contact section with social links
• ✅ AI Chat assistant integration
• ✅ Serverless function for API proxy
• ✅ Automatic deployment pipeline

1. Chat assistant occasionally experiences timeout issues with long responses
2. Image optimization could be improved for faster loading
3. Some mobile menu transitions could be smoother

• The chat functionality uses a serverless function to proxy requests to Azure AI
• Project images should be optimized and stored in the src/assets directory
• Tailwind classes are used for styling with some custom CSS in src/index.css
• The AI context is stored in src/components/ChatBox.tsx

1. Fork the repository
2. Create a new branch (git checkout -b feature/improvement)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/improvement)
5. Create a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

Ethan Clinick - [email protected]

Project Link: https://github.com/eclinick/personal-portfolio

1. Create a Netlify Account

   • Sign up at netlify.com
   • Connect your GitHub account

2. Configure Build Settings

   • Create a new site from Git
   • Select your repository
   • Configure build settings:

   Build command: pnpm run build Publish directory: dist Functions directory: netlify/functions

3. Environment Variables In Netlify dashboard > Site settings > Environment variables:

   API_TOKEN=your_azure_ai_api_token
   VITE_GITHUB_API_TOKEN=your_github_token
   

1. netlify.toml (must be in root directory)

   [build]
    command = "pnpm run build"
     publish = "dist"
     functions = "netlify/functions"
   
   [[redirects]]
     from = "/*"
     to = "/index.html"
     status = 200
   
   [[headers]]
     for = "/*"
       [headers.values]
       Access-Control-Allow-Origin = "*"
       Access-Control-Allow-Methods = "GET, POST, OPTIONS"
       Access-Control-Allow-Headers = "Content-Type, Authorization"

2. Functions Setup

   • Create netlify/functions directory
   • Ensure chat.ts is in this directory
   • Functions will be available at /.netlify/functions/chat

1. Local Testing

   # Install Netlify CLI

pnpm add -g netlify-cli

netlify login

netlify dev

2. **Manual Deployment**
```bash
# Build the project
pnpm run build

# Deploy to Netlify
netlify deploy

# For production
netlify deploy --prod

3. Automatic Deployment
   • Enabled by default when connected to GitHub
   • Triggers on every push to main branch
   • Build logs available in Netlify dashboard

1. Function Errors

   • Check function logs in Netlify dashboard
   • Verify environment variables are set
   • Test locally using netlify dev

2. Build Failures

   • Review build logs in Netlify dashboard
   • Ensure all dependencies are in package.json
   • Verify build command works locally

3. CORS Issues

   • Check headers in netlify.toml
   • Verify function CORS headers
   • Test API endpoints using Postman

• View function invocations in Netlify dashboard
• Monitor build status and deployment history
• Check function logs for debugging
• Set up notifications for build failures