AI Agent Guide for Suraj Fale Portfolio

This document provides comprehensive context and guidelines for AI agents working on this repository.

1. Project Identity

Name: Suraj Fale Portfolio
Purpose: Professional portfolio website for Suraj Fale, a Principal Engineer specializing in Scala, Kafka, and Distributed Systems.
Type: Single Page Application (SPA)
Live URL: https://surajfale.netlify.app

2. Technology Stack

Core: React 18, TypeScript 5.3
Build Tool: Vite 5.1
Package Manager: pnpm 8+ (Strictly enforce this)
UI Framework: Material-UI (MUI) v5
Styling Engine: Emotion (CSS-in-JS)
Routing: React Router DOM v7 (though mostly single-page scroll)
Linting: ESLint 9 (Flat Config)
Deployment: Netlify

3. Project Structure

src/
├── components/        # UI Components
│   ├── Hero.tsx      # Landing section
│   ├── About.tsx     # Bio & Skills
│   ├── Projects.tsx  # Portfolio showcase
│   ├── Socials.tsx   # Contact/Social links
│   ├── Footer.tsx    # Site footer
│   └── ThemeToggle.tsx # Dark/Light mode switch
├── content/
│   └── profile.ts    # CENTRAL SOURCE OF TRUTH for all text/data
├── pages/            # Route components (if any)
├── utils/            # Helper functions
├── App.tsx           # Main layout & ThemeProvider setup
├── theme.ts          # MUI Theme configuration (Colors, Typography)
└── main.tsx          # App entry point

4. Development Workflow

Install Dependencies:
```
pnpm install
```
Start Dev Server:
```
pnpm dev
```
(Runs on http://localhost:5173)
Build for Production:
```
pnpm build
```
Preview Build:
```
pnpm preview
```
Lint Code:
```
pnpm lint
```

5. Design System & Aesthetics

Theme: Supports Light and Dark modes (persisted in localStorage).
Primary Colors:
- LinkedIn Blue:
```
#0077B5
```
- GitHub Dark:
```
#24292E
```
Visual Style:
- Glassmorphism: Heavy use of semi-transparent backgrounds with blur.
- Gradients: Modern, vibrant gradients for text and backgrounds.
- Animations: Smooth transitions, hover effects (scale, lift), and micro-interactions.
Typography: Modern sans-serif (via MUI default or configured font).

6. Content Management

CRITICAL: Do not hardcode text in components.

All personal data, project details, and social links are stored in
```
src/content/profile.ts
```
.
To update the portfolio content, modify
```
src/content/profile.ts
```
.
Interfaces for content are defined in the same file to ensure type safety.

7. Agent Guidelines & Rules

Package Manager: ALWAYS use
```
pnpm
```
. Do not use
```
npm
```
or
```
yarn
```
.
Styling: Use MUI's
```
sx
```
prop or
```
styled
```
components. Avoid plain CSS files unless for global resets (
```
index.css
```
).
Icons: Use
```
@mui/icons-material
```
.
Responsiveness: Always ensure designs work on Mobile, Tablet, and Desktop. Use MUI's
```
useMediaQuery
```
or responsive
```
sx
```
values (e.g.,
```
width: { xs: '100%', md: '50%' }
```
).
Code Quality: Run
```
pnpm lint
```
before finishing a task to ensure no linting errors.
File Naming: PascalCase for components (
```
MyComponent.tsx
```
), camelCase for utilities (
```
myUtility.ts
```
).
Privacy: NEVER add personal contact info (phone, email, address) directly to the code.

8. Deployment

The project is deployed on Netlify.
Configuration is in
```
netlify.toml
```
.
Deploys automatically on push to
```
main
```
.

3. Project Structure

src/
├── components/        # UI Components
│   ├── Hero.tsx      # Landing section
│   ├── About.tsx     # Bio & Skills
│   ├── Projects.tsx  # Portfolio showcase
│   ├── Socials.tsx   # Contact/Social links
│   ├── Footer.tsx    # Site footer
│   └── ThemeToggle.tsx # Dark/Light mode switch
├── content/
│   └── profile.ts    # CENTRAL SOURCE OF TRUTH for all text/data
├── pages/            # Route components (if any)
├── utils/            # Helper functions
├── App.tsx           # Main layout & ThemeProvider setup
├── theme.ts          # MUI Theme configuration (Colors, Typography)
└── main.tsx          # App entry point

5. Design System & Aesthetics

Theme: Supports Light and Dark modes (persisted in localStorage).

Primary Colors:

LinkedIn Blue:
```
#0077B5
```
GitHub Dark:
```
#24292E
```

Visual Style:

Glassmorphism: Heavy use of semi-transparent backgrounds with blur.
Gradients: Modern, vibrant gradients for text and backgrounds.
Animations: Smooth transitions, hover effects (scale, lift), and micro-interactions.

Typography: Modern sans-serif (via MUI default or configured font).

7. Agent Guidelines & Rules

Package Manager: ALWAYS use

pnpm

. Do not use

npm

yarn

Styling: Use MUI's

sx

prop or

styled

components. Avoid plain CSS files unless for global resets (

index.css

Icons: Use

@mui/icons-material

Responsiveness: Always ensure designs work on Mobile, Tablet, and Desktop. Use MUI's

useMediaQuery

or responsive

sx

values (e.g.,

width: { xs: '100%', md: '50%' }

Code Quality: Run

pnpm lint

before finishing a task to ensure no linting errors.

File Naming: PascalCase for components (

MyComponent.tsx

), camelCase for utilities (

myUtility.ts

Privacy: NEVER add personal contact info (phone, email, address) directly to the code.

AI Agent Guide for Suraj Fale Portfolio

AI Agent Guide for Suraj Fale Portfolio

1. Project Identity

2. Technology Stack

3. Project Structure

4. Development Workflow

5. Design System & Aesthetics

6. Content Management

7. Agent Guidelines & Rules

8. Deployment

Related Skills

Markdown Converter

Nano Banana Pro

1password

AI Agent Guide for Suraj Fale Portfolio

1. Project Identity

2. Technology Stack

3. Project Structure

4. Development Workflow

5. Design System & Aesthetics

6. Content Management

7. Agent Guidelines & Rules

8. Deployment