Prerequisites
Before you begin, ensure you have the following installed on your system:Required Software
Node.js
pnpm
Version 10.19.0 (specified in package.json)Install globally:Verify installation:
Git
Code Editor
We recommend VS Code with extensions:
- ESLint
- Tailwind CSS IntelliSense
- TypeScript and JavaScript Language Features
API Credentials
You’ll need API keys for full functionality:Azure AI API Token
Required for the AI chat assistant feature.
- Sign up for Azure AI services
- Create a new AI resource
- Get your API token from the resource dashboard
- The chat uses the endpoint:
https://models.inference.ai.azure.com/chat/completions
The chat is configured to use the gpt-4o-mini model by default (see
ChatBox.tsx:125)Installation Steps
1. Clone the Repository
2. Install Dependencies
Install all required packages:Core Dependencies (22 packages)
Core Dependencies (22 packages)
- React 18.3.1 - UI library
- React DOM 18.3.1 - React renderer
- React Router DOM 6.30.1 - Client-side routing
- TypeScript 5.5.3 - Type safety
- Vite 5.4.2 - Build tool
- Tailwind CSS 3.4.1 - Styling framework
- Framer Motion 12.23.5 - Animations
- Lucide React 0.344.0 - Icons
- React Markdown 9.0.1 - Markdown rendering
- Convex 1.31.4 - Real-time backend
- And more…
Dev Dependencies (16 packages)
Dev Dependencies (16 packages)
- ESLint - Code linting
- TypeScript ESLint - TS linting rules
- Autoprefixer - CSS vendor prefixes
- PostCSS - CSS transformations
- Vite Plugin React - React support for Vite
- And more…
3. Environment Configuration
Create a.env file in the root directory:
4. Convex Setup (Optional)
If you want to use the blog functionality:Sign up for Convex
Create a free account at convex.dev
Initialize Convex
- Create a new Convex project
- Generate
convex.jsonconfiguration - Set up development sync
5. Verify Installation
Run the development server to verify everything is set up correctly:The dev server uses Vite’s fast HMR (Hot Module Replacement) for instant updates during development.
Configuration Files
Vite Configuration
Thevite.config.ts file is already configured with:
vite.config.ts
- React plugin for JSX support
- Path alias
@/points tosrc/ - Build output to
dist/directory
Tailwind Configuration
Thetailwind.config.js includes custom theme extensions:
tailwind.config.js
TypeScript Configuration
The project uses three TypeScript config files:tsconfig.json- Base configurationtsconfig.app.json- App-specific settingstsconfig.node.json- Node/build tool settings
Netlify Functions Setup
The chat functionality uses a Netlify serverless function:Function Structure
netlify/functions/chat.ts
Netlify Configuration
Thenetlify.toml file configures deployment:
netlify.toml
Testing Your Installation
1. Check Development Server
http://localhost:5173 and verify:
- Welcome animation plays
- Hero section loads with profile image
- Navigation menu works
- Smooth scroll animations
2. Test the Build
dist/ folder with optimized production files.
3. Preview Production Build
4. Run Linter
Common Issues
Module not found errors
Module not found errors
Clear cache and reinstall:
Port 5173 already in use
Port 5173 already in use
Either kill the process using the port or Vite will automatically use the next available port (5174, 5175, etc.)
TypeScript errors
TypeScript errors
Make sure your editor is using the workspace TypeScript version:
- In VS Code:
Cmd/Ctrl + Shift + P> “TypeScript: Select TypeScript Version” > “Use Workspace Version”
Chat function 404 errors
Chat function 404 errors
In local development, the chat function endpoint is
/.netlify/functions/chat. Make sure you’re using netlify dev to test functions locally, not pnpm run dev.Environment variables not loading
Environment variables not loading
Vite requires environment variables to be prefixed with
VITE_ to be exposed to the client. Server-side variables (like API_TOKEN for Netlify Functions) don’t need this prefix.Next Steps
Customization
Personalize your portfolio with your own content
Deployment
Deploy your portfolio to Netlify
AI Chat Configuration
Customize the AI assistant behavior
Components
Learn about reusable UI components
The portfolio is configured to work with both local development and Netlify deployment out of the box. No additional configuration needed!