# Claude.md — Sahin Boydas Press Kit: Complete Website Specification

> This document is a comprehensive mirror of the entire press kit website. It contains every piece of content, every design decision, every route, and every component — enough for any AI agent (Claude, GPT, Manus, or any LLM) to recreate this website from scratch.

---

## 1. Project Overview

**What:** A multi-page personal press kit website with 22 switchable visual themes, YAML-driven content, SEO-optimized section pages, an Agent/Human toggle for LLM-readable output, a blog with long-form articles, and a media kit subpage.

**Who:** Sahin Boydas — Serial entrepreneur from Silicon Valley with 2 successful exits, angel investor in 234 startups (including Anthropic, OpenAI, Scale AI), and #1 Most Active Angel Investor in 2024.

**Why:** Press kits are typically PDFs that go stale. This is a living, themeable website where content updates require editing only YAML files — no code changes needed. Each section has its own SEO-optimized page with unique meta tags, Open Graph images, and JSON-LD structured data.

---

## 2. Tech Stack

| Layer | Technology | Version | Purpose |
|-------|-----------|---------|---------|
| Site generator | Astro | 7.4 | Renders every route to a static HTML file at build time; React islands hydrate in the browser |
| Framework | React | 19.2 | Page components, rendered at build time and hydrated |
| Language | TypeScript | 5.9 | Type safety |
| Styling | Tailwind CSS | 4.1 | Utility-first CSS with OKLCH colors |
| UI Components | shadcn/ui + Radix | — | Accessible primitives |
| Routing | Astro pages + Wouter | 3.x | One HTML file per route; Wouter reads the path inside each island |
| Animation | Framer Motion | 12.x | Page transitions & micro-interactions |
| Content | YAML + Zod | 4.x | Structured content with schema validation |
| Build | Vite | 7.x | Astro's bundler (`pnpm dev` runs `astro dev`) |
| Icons | Lucide React | 0.453 | Consistent icon set |
| SEO | react-helmet-async | 2.x | Per-page meta tags, OG images, JSON-LD, written into each page's HTML at build time |
| Hosting | Cloudflare Pages | — | Static hosting, deployed from `main` by GitHub Actions |
| Testing | Vitest + Playwright | 2.x | Spec and unit tests; visual and SEO regression |

---

## 3. Architecture

```
site/                          ← Astro: one page per route (srcDir in astro.config.mjs)
├── pages/                     ← Fixed routes, [lang]/ prefixes, blog/[slug], interview/[slug]
├── islands/                   ← One React island per page component, wrapped in AppShell
├── layouts/Base.astro         ← The HTML document: head, hreflang, site-wide JSON-LD
└── lib/                       ← Static head (static-head.html), site JSON-LD, page head tags (head.ts), blog data, languages
client/
├── public/
│   ├── claude.md              ← This file (downloadable specification)
│   └── press-kit-prompt.txt   ← Quick prompt for remixing
├── src/
│   ├── AppShell.tsx           ← Providers, header and footer around every Astro island
│   ├── index.css              ← Global styles, CSS variables, theme tokens
│   ├── content/               ← 16 YAML files (all content lives here)
│   │   ├── profile.yaml       ← Hero section data (name, title, stats, image)
│   │   ├── about.yaml         ← Bio paragraphs + copy-ready bios (50-1000 chars)
│   │   ├── companies.yaml     ← 4 startups (RemoteTeam, Leo AR, MojiLaLa, MovieLaLa)
│   │   ├── angel-investments.yaml ← 234 angel investments with logos & valuations
│   │   ├── book.yaml          ← "Becoming Top 1%" book details
│   │   ├── stats.yaml         ← Quick stats grid (8 metrics)
│   │   ├── accelerators.yaml  ← 6 communities (Superfounders, PEF, StartX, etc.)
│   │   ├── press.yaml         ← 48+ press articles across 30+ publications
│   │   ├── interviews.yaml    ← 12 video/podcast interviews
│   │   ├── engineering.yaml   ← Technical skills & open source stats
│   │   ├── media-kit.yaml     ← Downloadable assets for press
│   │   ├── social-media.yaml  ← 5 social platforms (1M+ total followers)
│   │   ├── spirituality.yaml  ← 40+ wellness events across 5 categories
│   │   ├── blog.yaml          ← 5 blog article metadata entries
│   │   └── site-config.yaml   ← SEO defaults & header/footer config
│   ├── schemas/
│   │   └── content.ts         ← Zod schemas for every YAML file (~331 lines)
│   ├── lib/
│   │   ├── content.ts         ← YAML loader with caching & validation (~224 lines)
│   │   └── utils.ts           ← cn() helper for class merging
│   ├── contexts/
│   │   └── ThemeContext.tsx    ← 22 theme definitions + React context (~762 lines)
│   ├── components/
│   │   ├── TopHeader.tsx       ← Fixed header: title, theme switcher, Remix/Prompt buttons
│   │   ├── Sidebar.tsx         ← Left nav with section links, Agent/Human toggle
│   │   ├── ThemeLayouts.tsx    ← Theme-specific hero section variants (~687 lines)
│   │   ├── PressSection.tsx    ← Featured highlights + tabs + timeline/grid toggle (~672 lines)
│   │   ├── AgentView.tsx       ← Raw Markdown view for AI agents
│   │   ├── ThemeSwitcher.tsx   ← Theme dropdown with categories
│   │   ├── SectionPageHead.tsx ← SEO component: meta tags, OG, canonical, JSON-LD, breadcrumbs
│   │   ├── BackToTop.tsx       ← Scroll-to-top button
│   │   ├── DynamicSchema.tsx   ← Dynamic JSON-LD structured data
│   │   ├── ManusDialog.tsx     ← Prompt viewer modal
│   │   └── ErrorBoundary.tsx   ← Global error handler
│   ├── pages/
│   │   ├── Home.tsx            ← Main page with all sections (~2,511 lines)
│   │   ├── AboutPage.tsx       ← /about — Bio, bios, quote
│   │   ├── StartupsPage.tsx    ← /startups — 4 companies with exit details
│   │   ├── InvestmentsPage.tsx ← /investments — 234 angel investments
│   │   ├── BookPage.tsx        ← /book — "Becoming Top 1%" details
│   │   ├── CommunitiesPage.tsx ← /communities — 6 founder communities
│   │   ├── PressPage.tsx       ← /press — Featured + filterable press coverage
│   │   ├── YouTubePage.tsx     ← /youtube — Video interviews & podcasts
│   │   ├── SocialPage.tsx      ← /social — Social media profiles
│   │   ├── SpiritualityPage.tsx← /spirituality — 40+ wellness events
│   │   ├── BlogPage.tsx        ← /blog — Article listing
│   │   ├── ArticlePage.tsx     ← /blog/:slug — Long-form articles (1500+ words)
│   │   ├── MediaKit.tsx        ← /media-kit — Downloadable press assets
│   │   ├── Changelog.tsx       ← /changelog — Site update history
│   │   └── NotFound.tsx        ← 404 page
│   └── hooks/
│       ├── useMobile.tsx       ← Responsive breakpoint hook
│       ├── useOgMeta.ts        ← Open Graph meta helper
│       ├── useComposition.ts   ← Input composition state
│       └── usePersistFn.ts     ← Persistent function reference
```

**Total code:** ~10,350 lines (excluding shadcn/ui components) across 16 YAML content files (~1,159 lines).

---

## 4. Content Model — Complete Data

### 4.1 Profile (Hero Section)

```yaml
name: Sahin Boydas
title: 2x Exited Founder
tagline: Building the future of remote work
description: Serial entrepreneur from Silicon Valley with 2 successful exits. A life dedicated in building great products.
image: [CDN headshot URL]
stats:
  - { icon: building, value: "3", label: Startups }
  - { icon: trending-up, value: "2", label: Exits }
  - { icon: users, value: "1M+", label: Followers }
  - { icon: briefcase, value: "234", label: Investments }
location: Silicon Valley
established: "2010"
```

### 4.2 About (Bio Section)

Four bio paragraphs covering:
1. Serial entrepreneur, 4 startups, RemoteTeam CEO, remote work pioneer
2. Alumni of 5 accelerators: Stanford StartX, 500 Startups, FI, Betaworks Vision, Quake
3. MovieLaLa (360M reach, acquired by Gfycat), MojiLaLa (1.3B+ stickers)
4. Leo AR (Apple App of the Day, 10M+ AR videos, 100+ features)

Copy-ready bios at 50, 100, 250, 500, and 1000 character lengths.

Key quote: "Gusto acquired RemoteTeam in 2021, 580 days after incorporation. Investor pitching, team hiring, whole M&A process were over Zoom with no in-person meeting."

### 4.3 Companies (4 Startups)

| Company | Role | Years | Status | Key Metric |
|---------|------|-------|--------|------------|
| RemoteTeam.com | Founder & CEO | 2019-2021 | Acquired by Gusto | 580 days to exit |
| Leo AR | Co-Founder & CEO | 2017-2019 | Apple App of the Day | 10M+ AR videos |
| MojiLaLa | Co-Founder & CEO | 2015-2017 | 1.3B+ stickers used | #2 sticker marketplace |
| MovieLaLa | Co-Founder & CEO | 2012-2015 | Acquired by Gfycat | 360M people reached |

### 4.4 Angel Investments (234)

Top investments with logos and valuations include: OpenAI, Anthropic, Scale AI ($29B), Hugging Face, Postman, WHOOP, Front, Eight Sleep, Pika, Mercury, Artisan AI, Brainbase, and more.

Categories: AI/ML, Developer Tools, Health & Wellness, Fintech, SaaS, Consumer.

### 4.5 Quick Stats

| Value | Label |
|-------|-------|
| 4 | Startups Founded |
| 2 | Successful Exits |
| 500+ | Investors Met |
| 100+ | Investors Raised From |
| 234 | Startups Invested In |
| 250+ | University Talks |
| 13 | Product Hunt Launches |
| 6 | Communities Joined |

### 4.6 Book

**Title:** Becoming Top 1%: The Code of Engineering
**Description:** A practical guide for entrepreneurs and professionals covering remote teams, venture capital, and achieving exceptional results.
**Links:** Amazon (print), Kindle Edition

### 4.7 Communities (6)

Superfounders, PEF (Post-Exit Founders), Stanford StartX, Long Range, District, and "Invite Me to More."

### 4.8 Press Coverage (48+ articles, 30+ publications)

**Featured publications with dedicated filter tabs:** TechCrunch (9 articles), Bloomberg (2), Forbes (2), New York Times (1), Wall Street Journal (1), Variety (2).

**Additional publications:** Fast Company, Fortune, Inc. Magazine, Huffington Post, Hollywood Reporter, CNET, Medium, ScreenDaily, The Wrap, VRFocus, Austin Business Journal, Boston Globe, Reworked.co, Thrive Global, US Chamber, Yahoo! Finance, The Balance SMB, CEO Blog Nation, DGen, Businessnewsdaily.com, Authority Magazine, Tgdaily.com, Runningremote.com, Business.com.

**Features:**
- 3-5 featured/pinned articles at the top with larger cards
- 6 publication tabs for quick filtering (TechCrunch, Bloomberg, Forbes, NYT, WSJ, Variety)
- "More Publications" dropdown for remaining publications
- Category filter and year filter
- Search by title or publication
- Grid view / Timeline view toggle
- Results counter and "Clear All" button

### 4.9 Interviews (12)

| Title | Platform | Type |
|-------|----------|------|
| Silicon Valley Wins: Building, Fundraising & Exiting | The Cost of It | Video |
| CEO Wisdom: Sahin Boydas Interview | CEO Wisdom Podcast | Video |
| Running Remote 2020 Interview | Running Remote | Video |
| Distributed Valley 2020: CEO of RemoteTeam | Remo | Video |
| The Future of Work & Society After COVID-19 | That Remote Life | Podcast |
| OhHello: Sahin Boydas (Episode 96) | OhHello with Jeremy Bloom | Podcast |
| Getting Acquired: RemoteTeam to Gusto | Leaders of Growth (Knight Capital) | Podcast |
| Why Failure is an Essential Part of Success | Think Business with Tyler | Podcast |
| Remote Working & Creating Startups | The Remote CEO Show | Podcast |
| Remote Working & Creating Startups | 415 Stories | Podcast |
| Are Offices Prisons of the Mind? | Remotely Inclined | Podcast |
| The Digital Workplace | Digital Workplace Podcast | Podcast |

### 4.10 Social Media (1M+ total followers)

| Platform | Handle | Followers |
|----------|--------|-----------|
| Twitter | @sahin | 50k+ |
| Instagram | @sahin | 179k+ |
| Instagram | @sahinboydas | 720k+ |
| LinkedIn | sahinboydas | 41k+ |
| YouTube | SahinClips | 10k+ |

### 4.11 Spirituality & Wellness (40+ events)

Five categories: Breathwork (17 events), Meditation & Yoga (6), Healing & Energy (8), Plant Medicine (3), Immersive (3).

Locations span San Francisco, Bay Area, Palo Alto, Oakland, Austin, Mexico, Costa Rica, Istanbul, Switzerland.

### 4.12 Blog Articles (5 + 1 long-form)

| Slug | Title | Category | Read Time |
|------|-------|----------|-----------|
| how-i-became-number-1-angel-investor-2024 | How I Became the #1 Most Active Angel Investor in 2024 | Angel Investing | 8 min |
| lessons-from-4-startups-2-exits | Lessons from 4 Startups and 2 Exits in Silicon Valley | Entrepreneurship | 10 min |
| why-i-invest-in-ai-startups | Why I Invest in AI Startups: My Thesis on the AI Revolution | AI and Technology | 7 min |
| remote-team-to-gusto-580-days | From Zero to Acquisition in 580 Days: The RemoteTeam Story | Entrepreneurship | 12 min |
| angel-investing-framework-for-beginners | Angel Investing Framework: How to Evaluate Early-Stage Startups | Angel Investing | 9 min |

The "angel-investing-framework-for-beginners" article is a 1,500+ word long-form piece with sections on prerequisites, deal sourcing, a five-dimension evaluation framework, portfolio construction, and common mistakes.

### 4.13 Engineering

Technical leadership: 8x Startup CTO, hundreds of thousands of lines of code, trained 100s of engineers.
Open source: 4000+ GitHub stars, 25+ projects, 12000+ HackerNews karma.
Languages: Swift, Objective-C, Ruby, JavaScript, Python, PHP, ASP.NET, C#, VB, C++, C, COBOL, Pascal, Basic.

---

## 5. Routes & SEO

Every section page uses `<SectionPageHead>` for unique meta tags, canonical URLs, Open Graph images, and JSON-LD structured data.

| Route | Page | OG Image | JSON-LD Type |
|-------|------|----------|--------------|
| `/` | Home (all sections) | Profile photo | Person + WebSite |
| `/about` | About | Generated OG | Person |
| `/startups` | Startups | Generated OG | Organization |
| `/investments` | Investments | Generated OG | ItemList |
| `/book` | Book | Generated OG | Book |
| `/communities` | Communities | Generated OG | ItemList |
| `/press` | Press Coverage | Generated OG | CollectionPage |
| `/youtube` | YouTube/Interviews | Generated OG | ProfilePage |
| `/social` | Social Media | Generated OG | ProfilePage |
| `/spirituality` | Spirituality | Generated OG | ItemList |
| `/blog` | Blog listing | Default | Blog |
| `/blog/:slug` | Article detail | Default | Article |
| `/media-kit` | Media Kit | Default | — |
| `/changelog` | Changelog | Default | — |

---

## 6. Theme Engine (22 Themes)

### 6.1 Theme Categories

**VC-Inspired (8):** Sequoia Capital, Y Combinator, Andreessen Horowitz, Benchmark, Accel, Greylock, Lightspeed, Gamma

**AI Company-Inspired (8):** Anthropic, OpenAI, Replit, Lovable, Cursor, Perplexity, Midjourney, Neon Cyber

**Art & Style (6):** Zen Nature, Art Deco Luxe, Raw Brutalist, Minimalist, Newspaper, UI Skills

### 6.2 Theme Structure

Each theme defines: id, name, description, emoji, heroImage, fonts (display + body), colors (12 tokens: background, foreground, primary, primaryForeground, secondary, secondaryForeground, accent, accentForeground, muted, mutedForeground, card, cardForeground, border), cardStyle, buttonStyle, specialEffects.

Colors are applied as CSS variables at runtime. Theme selection persists in localStorage. Random theme on first visit.

---

## 7. Key Components

### 7.1 SectionPageHead (SEO)

Renders per-page: `<title>`, `<meta name="description">`, `<meta name="keywords">`, `<link rel="canonical">`, Open Graph tags (og:type, og:url, og:title, og:description, og:image, og:site_name), Twitter Card tags, article-specific meta (published_time, author, section), language tags, BreadcrumbList JSON-LD, and optional page-specific JSON-LD.

### 7.2 PressSection

Features: 3-5 featured/pinned articles with larger cards at top, 6 publication tabs (TechCrunch, Bloomberg, Forbes, NYT, WSJ, Variety) with article counts, "More Publications" dropdown, category and year filters, text search, grid/timeline view toggle, results counter, and "Clear All" button.

### 7.3 ProjectCard

Renders app cards with either a website screenshot thumbnail (using `screenshot_url` from YAML) or a data-driven preview showing logos or metric rows. Supports tags, badges, accent colors, and hover animations.

### 7.4 AgentView

Generates a complete Markdown document from all YAML content for LLM consumption. Includes "Copy .md" and "Download .md" buttons.

---

## 8. Build & Deploy

```bash
# Install dependencies
pnpm install

# Development (astro dev on port 3000)
pnpm dev

# Production build: static HTML for every route into dist-astro/
pnpm build:astro

# Checks
pnpm check   # TypeScript
pnpm test    # Vitest

# Key dependencies
pnpm add astro @astrojs/react wouter framer-motion yaml zod lucide-react react-helmet-async
pnpm add class-variance-authority clsx tailwind-merge sonner
```

The site is fully static — every route is a prerendered HTML file, and no backend is required. GitHub Actions builds it with `pnpm build:astro` and deploys `dist-astro/` to Cloudflare Pages on every push to `main`. All content is in YAML files, validated by Zod schemas at load time.

---

## 9. Customization Guide

### To use for your own press kit:

1. Fork the repository
2. Edit YAML files in `client/src/content/` — change names, bios, stats, links
3. Replace images — update photo URLs in profile.yaml and media-kit.yaml
4. Adjust themes — modify colors in ThemeContext.tsx or add new themes
5. Update SectionPageHead BASE_URL in `components/SectionPageHead.tsx`
6. Deploy — build with `pnpm build:astro`, deploy `dist-astro/` to any static host

### To add a new content section:

1. Create `content/new-section.yaml`
2. Add Zod schema in `schemas/content.ts`
3. Add loader in `lib/content.ts`
4. Add section component in `pages/Home.tsx`
5. Create dedicated page in `pages/NewSectionPage.tsx` with `SectionPageHead`
6. Add the route to `ROUTES` in `scripts/gen-astro-routes.py` and run `pnpm gen:astro-routes` to generate its Astro page and island
7. Add nav item in `components/Sidebar.tsx`

### To add a new theme:

Add to the `themes` object in `ThemeContext.tsx` with all required fields: id, name, description, emoji, heroImage, fonts, colors (12 tokens), cardStyle, buttonStyle, specialEffects.

---

## 10. Key Design Decisions

1. **YAML over JSON**: More readable for non-developers editing content
2. **Zod validation**: Catches content errors at load time, not render time
3. **CSS variables for themes**: Allows runtime theme switching without re-render
4. **No backend**: Fully static site, deployable anywhere
5. **Agent mode**: Makes the press kit machine-readable for AI agents
6. **22 themes**: Demonstrates design range and makes the site memorable
7. **Per-page SEO**: Each section has unique meta tags, OG images, and JSON-LD
8. **Screenshot thumbnails**: App cards show actual website designs, not placeholders
9. **Featured press**: Most impactful articles pinned at top with larger cards
10. **Copy-ready bios**: Press can grab bios at the exact length they need
11. **react-helmet-async**: Page components declare their own head tags; the Astro build writes them into each page's HTML
12. **Astro static build**: Crawlers, AI fetchers and social scrapers get complete HTML without running JavaScript

---

## 11. Prompt for AI Agents

```
Build me a personal press kit website with Astro, React 19, TypeScript and
Tailwind CSS 4, rendered to static HTML. The site should have:

1. 22 switchable visual themes (8 VC-inspired, 8 AI company-inspired, 6 artistic)
2. All content in 16 YAML files validated by Zod schemas
3. Sections: Hero, About (with copy-ready bios at 50/100/250/500/1000 chars),
   Startups (4 companies, 2 exits), Angel Investments (234),
   Book, Communities, Press Coverage (featured highlights + tabs + timeline/grid),
   YouTube/Interviews (12), Social Media (1M+ followers), Engineering,
   Spirituality (40+ wellness events)
4. Dedicated SEO pages for each section with react-helmet-async
5. Per-page Open Graph images, canonical URLs, and JSON-LD structured data
6. Fixed left sidebar navigation with smooth scroll
7. Top header with theme switcher, random theme, and "Remix" button
8. Agent/Human toggle that shows raw Markdown for LLMs
9. Blog with long-form articles (1500+ words) at /blog/:slug
10. Media Kit subpage at /media-kit
11. Responsive design with mobile hamburger menu
12. Framer Motion animations on scroll
13. Theme persistence in localStorage with random initial selection
14. Press section with featured highlights, publication tabs, search, and timeline view
```

---

## License

MIT — Fork it, customize it, make it yours.

---

*Built with Manus AI. Last updated: October 2026.*