danielfang.me

Personal site for Daniel Fang — works, investments, and writing.

Live at danielfang.me.

---

Stack

Layer	Technology
Framework	Astro 5 — static by default, React islands where needed
UI	React 18 for interactive components
Styling	Tailwind CSS + CSS custom properties for design tokens
Animation	GSAP (ScrollTrigger) and Lenis for smooth scroll
Content	Astro Content Collections — Markdown or MDX for works, MDX for blog, JSON for investments
Testing	Vitest + Testing Library, run in CI and before every Netlify deploy (see TESTING.md)
Deployment	Netlify

---

Project structure

src/
├── pages/           # Routes: /, /works, /works/[slug], /lab, /blog, /blog/[slug],
│                    #         /investments, /contact, /404
├── layouts/         # BaseLayout (meta, nav, footer)
├── components/      # Nav, Footer, HeroSection, WorksCarousel, LabGrid,
│   ├── case-studies/    #   interactive case studies for select works
│   └── museum/          #   playable pixel-art museum (canvas engine + UI)
├── content/
│   ├── works/       # Project entries (Markdown or MDX + frontmatter)
│   ├── blog/        # Posts (MDX)
│   └── investments/ # Investment entries (JSON)
├── data/            # Static data (e.g. the museum's exhibit loader)
├── scripts/         # Client-side enhancements (magnetic CTA, etc.)
└── styles/          # global.css — tokens, base, utilities

public/              # Static assets — favicon, og image, images, videos, museum
tests/               # Vitest suites (see TESTING.md)

---

Commands

Command	Description
npm run dev	Start dev server at http://localhost:4321
npm run build	Production build → dist/
npm run preview	Preview the production build locally
npm test	Run the Vitest suite once (see TESTING.md)

Use the Node version pinned in .nvmrc (nvm use). npm test fails on any other major, and GitHub Actions and Netlify read the same file.

---

Routes

Route	Description
/	Landing — hero, works carousel, timeline
/works	Full works list
/works/:slug	Project detail with media gallery and optional interactive case study
/lab	Playable pixel-art museum — works as desks, investments as pedestals
/blog	Writing index
/blog/:slug	Post (MDX)
/investments	Investment portfolio
/contact	Contact + social links

---

Design system

• Palette — Dark base (#0A0A0A), surface shades, off-white text, single accent.
• Typography — Display (Syne), body (Plus Jakarta Sans), mono (JetBrains Mono).
• Motion — Consistent easing (cubic-bezier(0.16, 1, 0.3, 1)), durations 150–600ms; all animations respect prefers-reduced-motion.

---

Adding content

Works, blog posts, and investments are defined as content collections in src/content/. See src/content/config.ts for the schema of each collection.

• Works — Add a .md file under src/content/works/, or a .mdx file when the write-up embeds React components. Required frontmatter: title, description, role, year, stack, thumbnail, plus a unique order (npm test enforces it). Set featured: true to surface on the home carousel. Full walkthrough: docs/adding-works.md.
• Blog — Add a .mdx file under src/content/blog/ with title, date, excerpt, and optional tags.
• Investments — Add a .json file under src/content/investments/.

---

Analytics

Privacy-first, cookieless analytics via Cloudflare Web Analytics — no cookies, no consent banner, no PII. The beacon only loads in production builds and only when PUBLIC_CF_BEACON_TOKEN is set.

To enable: copy .env.example to .env, then set PUBLIC_CF_BEACON_TOKEN from the Cloudflare dashboard (Analytics & Logs → Web Analytics → site → JS snippet → token value). In production, set the same variable in Netlify under Site settings → Environment variables. SPA navigations (Astro's ClientRouter) are tracked automatically.

---

License

Source code is available for reference. Content (writing, images, project descriptions) is © Daniel Fang. Please don't redeploy this site as your own.