# Project Structure

Detailed breakdown of the project's directory structure.



Detailed breakdown of the project's directory structure.

## Root Directory [#root-directory]

```text
├── .github/          # GitHub Actions workflows
├── content/          # MDX content files
├── docs/             # Separate Next.js/Fumadocs documentation app
├── public/           # Static assets
├── scripts/          # Build and utility scripts
└── src/              # Application source code
```

## Source Directory (`src/`) [#source-directory-src]

### `app/` [#app]

Next.js 16 App Router pages and API routes.

```text
app/
├── api/             # API endpoints
│   ├── chatbot/     # AI chatbot
│   ├── emails/      # Contact form
│   ├── github/repos/# GitHub integration
│   ├── gumroad/products/ # Gumroad products
│   ├── notes/[slug]/views/ # View tracking
│   ├── og/          # OG image generation
│   ├── search/      # Content search
│   └── vsco/        # VSCO gallery
├── globals.css      # Global styles
├── layout.tsx       # Root layout
└── page.tsx         # Homepage
```

### `components/` [#components]

React components organized by domain.

```text
components/
├── chat/            # Chatbot widget
├── gallery/         # VSCO gallery, featured gallery
├── home/            # Bio, social links, Gumroad
├── layout/          # SiteNav, BottomNav, CommandPalette, SmoothScroll
├── mdx/             # Table, YouTubeEmbed
├── notes/           # ArticlePage, NoteList, RelatedArticles
├── projects/        # ProjectList, FilterBar, OpenSource
├── ui/              # ImagePreview, UniversalImage
└── ThemeProvider.tsx # Custom theme context
```

### `hooks/` [#hooks]

Custom React hooks.

```text
hooks/
├── use-views.ts                 # Page view tracking
├── use-gumroad-products.ts      # Gumroad products
├── use-vsco-gallery.ts          # VSCO gallery data
└── use-infinite-vsco-gallery.ts # Paginated VSCO
```

### `lib/` [#lib]

Utilities and helper functions.

```text
lib/
├── animation/     # Framer Motion variants
├── content/       # MDX parsing (gray-matter)
├── image/         # Unsplash resolution
├── projects/      # Project config and icons
├── og.ts          # OG image URL generation
└── vsco-local.ts  # Local VSCO export reader
```

## Content Directory [#content-directory]

```text
content/
└── notes/         # Blog posts (.mdx)
```

## Data Directory [#data-directory]

```text
data/
└── vsco-export.json  # VSCO data export metadata
```

## Scripts Directory [#scripts-directory]

```text
scripts/
├── build/         # Image download scripts
├── content/       # Chatbot training data
└── training-data/ # Generated training data
```

## Public Directory [#public-directory]

```text
public/
└── images/        # Image assets
    ├── unsplash/  # Downloaded Unsplash images
    └── vsco/      # Downloaded VSCO images
```

## Configuration Files [#configuration-files]

* `package.json` - Dependencies and scripts
* `tsconfig.json` - TypeScript configuration
* `next.config.ts` - Next.js configuration
* `eslint.config.mjs` - ESLint rules
* `postcss.config.mjs` - PostCSS config
* `vitest.config.ts` - Test configuration

## Next Steps [#next-steps]

* [Tech Stack →](/docs/architecture/tech-stack)
* [Development Guide →](/docs/getting-started/development)