Fardin Iqbal Portfolio Expert

Expert assistant for maintaining and enhancing Fardin Iqbal's personal portfolio website - a full-stack Next.js application with editorial design aesthetic, MDX blog, 3D visualizations, and analytics dashboard.

What This Skill Does

This skill provides comprehensive knowledge of the Fardin Iqbal portfolio codebase, enabling you to:

Core Context

**Project Type:** Full-stack Next.js 16 (App Router) with API routes

**Hosting:** Vercel (auto-deploys on push to main)

**URL:** https://fardin-portfolio-beryl.vercel.app

**Design Aesthetic:** Editorial/magazine style (New Yorker inspired)

Technology Stack

Directory Structure

```

src/app/ # Next.js App Router pages

src/components/ # 100+ React components

├── layout/ # Header, Footer, Navigation

├── sections/ # Home page sections

├── essays/ # Blog components

├── arboretum/ # 3D tree visualization

├── dashboard/ # Admin dashboard

├── ui/ # Reusable primitives

├── effects/ # Animations

└── immersive/ # Reading experience

src/lib/ # Utilities & content loading

src/data/ # Static data (skills, interests)

src/types/ # TypeScript definitions

content/ # JSON + MDX content files

├── blog/ # MDX essays

├── profile.json # Personal info

├── projects.json # Portfolio items

├── experience.json # Work history

├── books.json # Reading list

├── media.json # Movies/shows

└── courses.json # Learning materials

```

Key Pages

| Route | Purpose | Protection |

|-------|---------|-----------|

| `/` | Home - all portfolio sections | Public |

| `/essays` | Blog listing with tag filters | Public |

| `/essays/[slug]` | Individual essay with TOC | Public |

| `/projects/[slug]` | Project detail | Public |

| `/now` | Current activities | Public |

| `/uses` | Tech stack & tools | Public |

| `/arboretum` | 3D tree visualization | Password-gated |

| `/insights` | Personal journal analysis | Protected |

| `/dashboard` | Analytics dashboard | Clerk auth |

Content Management Guidelines

Adding/Editing MDX Essays

1. Create/edit file in `content/blog/slug-name.mdx`

2. Required frontmatter:

```yaml

title: "Essay Title"

date: "2026-01-02"

description: "SEO description"

image: "/images/blog/image.png"

tags: ["Tag1", "Tag2"]

published: true

featured: false

```

3. Use markdown for content with optional JSX components

4. Images go in `public/images/blog/`

Editing JSON Content

All JSON files validate against TypeScript types in `src/types/`.

Design System

**Typography:**

**Color Palette:**

**Design Principles:**

API Routes

```

POST /api/contact # Contact form (rate-limited 5/min, sanitized input)

GET /api/health # Health check endpoint

```

Development Commands

```bash

npm run dev # Start development server (usually :3001)

npm run build # Production build

npm run lint # ESLint check

```

Deployment

**IMPORTANT:**

Special Features

Protected Routes

**Note:** Clerk auth is optional - components gracefully handle missing configuration.

Step-by-Step Instructions

Task: Add a New Blog Post

1. Create MDX file: `content/blog/your-slug.mdx`

2. Add frontmatter with all required fields

3. Write content using markdown

4. Add images to `public/images/blog/`

5. Set `published: true` when ready

6. Commit and push to deploy

Task: Add a New Project

1. Open `content/projects.json`

2. Add new object with required fields: id, title, category, tech, description, narrative

3. Add project image to `public/images/projects/`

4. Update image path in JSON

5. Commit and push to deploy

Task: Modify Component Styling

1. Locate component in `src/components/`

2. Use Tailwind classes for styling

3. Follow editorial design system (serif fonts, editorial red accents)

4. Test both dark and light modes

5. Ensure mobile responsiveness

Task: Add New API Route

1. Create file in `src/app/api/[route]/route.ts`

2. Export handler functions (GET, POST, etc.)

3. Add rate limiting if needed

4. Sanitize inputs for security

5. Return proper status codes and JSON responses

Task: Update Dashboard Analytics

1. Modify components in `src/components/dashboard/`

2. Update API calls if needed

3. Ensure Clerk auth is properly checked

4. Test with valid/invalid auth states

Important Constraints

1. **DO NOT** attempt GitHub Pages deployment - this is a full-stack Next.js app

2. **DO NOT** manually deploy with Vercel CLI - automatic deployment is configured

3. **ALWAYS** test responsive design on mobile breakpoints

4. **ALWAYS** maintain editorial design aesthetic (serif fonts, subtle animations)

5. **ALWAYS** validate JSON content against TypeScript types

6. **ALWAYS** handle Clerk auth gracefully (fallback if not configured)

7. **NEVER** commit sensitive credentials or API keys

8. **USE** the Krug Skill for usability improvements

9. **USE** the frontend-design Skill for interface enhancements

Reference Documentation

For comprehensive details, see `docs/SITE_DOCUMENTATION.md` in the repository.

Common Patterns

**Loading MDX content:**

```typescript

import { getMDXComponent } from 'next-contentlayer/hooks'

```

**Protected route pattern:**

```typescript

import { auth } from '@clerk/nextjs'

const { userId } = auth()

if (!userId) return redirect('/sign-in')

```

**Animation pattern:**

```typescript

import { motion } from 'framer-motion'

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>

```

**Tailwind dark mode:**

```typescript

className="bg-white dark:bg-neutral-950"

```