Skip to main content
Hero Light

​
Overview

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS, featuring a custom AI chat assistant powered by Azure’s AI models. This portfolio showcases your work with an interactive AI assistant that can answer questions about your background, skills, and experience.

​
Key Features

Interactive AI Chat Assistant

Custom-trained AI powered by Azure that answers questions about your background, skills, and experience with intelligent context awareness

Modern UI/UX

Clean, professional design with glassmorphism effects, smooth animations, and eye-friendly dark theme built with Tailwind CSS

Project Showcase

Dynamic project cards with 3D hover effects, tags, status indicators, and links to live demos and GitHub repositories

Serverless Architecture

Netlify Functions for backend operations with automatic deployment pipeline and Azure AI integration

​
Tech Stack

​
Frontend

  • React 18 - Modern UI library with hooks and concurrent features
  • TypeScript - Type-safe development with IntelliSense
  • Tailwind CSS - Utility-first CSS framework
  • Vite - Lightning-fast build tool and dev server
  • Framer Motion - Production-ready animation library
  • Lucide React - Beautiful, consistent icon set

​
Backend & Services

  • Netlify Functions - Serverless functions for API proxying
  • Azure AI Models - GPT-4o-mini for intelligent chat responses
  • Convex - Real-time backend for blog and data management

​
Deployment

  • Netlify - Automatic deployment and hosting
  • GitHub Actions - CI/CD pipeline integration

​
What You’ll Build

This portfolio includes:
1

Hero Section

Eye-catching landing page with profile image, tagline, and scroll animations
2

GitHub Contributions

Live contribution graph showing your development activity
3

Featured Projects

Interactive project cards with glassmorphism and 3D hover effects
4

Employment Timeline

Professional experience displayed in a beautiful timeline
5

AI Chat Assistant

Floating chat widget with blog context awareness and markdown support
6

Blog System

Dynamic blog with Convex backend and AI-powered summaries

​
Quick Start

npm install
npm run dev
This project uses pnpm as the package manager. Make sure you have Node.js v20 or higher installed.

​
Live Demo

Check out the live portfolio at ethanclinick.netlify.app

​
Next Steps

Quickstart Guide

Get your portfolio running in 5 minutes

Installation

Detailed setup instructions and configuration

Customization

Learn how to personalize your portfolio

Deployment

Deploy to Netlify and go live

​
Architecture Highlights

​
Component Structure

The portfolio uses a clean component architecture:
  • App.tsx - Main routing with React Router
  • Portfolio.tsx - Landing page with hero and sections
  • ChatBox.tsx - AI assistant with Azure integration
  • ProjectCard.tsx - Interactive project display with 3D effects
  • UI Components - Reusable components with Radix UI primitives

​
Styling Approach

Custom Tailwind configuration with:
  • Glassmorphism utilities
  • Custom animations (float, glow-pulse, chat-bounce)
  • Orange (#f97316) primary color theme
  • Dark-first design system

​
State Management

  • React hooks for local state
  • Convex for real-time data sync
  • Session storage for welcome animation state
The AI chat assistant uses blog context to provide intelligent summaries when viewing blog posts. This creates a seamless user experience!

Build docs developers (and LLMs) love

Get started for freeTalk to us