Add CLAUDE.md with codebase guidance (#213)

Document build/check commands, the Svelte 5 + Vite + Tailwind v4 architecture, project conventions, and the GitHub Pages deploy flow for future Claude Code sessions. Co-authored-by: Claude Opus 4.8 (1M context) <[email protected]>
2026-09-12 05:20:40 -05:00 · 2026-07-13 02:06:17 -05:00
parent 1be3d1a9bd
commit b8d1c61dbf
1 changed files with 35 additions and 0 deletions
@@ -0,0 +1,35 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+This project uses **Yarn 3 (Berry)** — pinned via `packageManager` in `package.json`. Use `yarn`, not `npm`.
+
+- `yarn dev` — start the Vite dev server
+- `yarn build` — production build to `dist/`
+- `yarn preview` — serve the production build locally
+- `yarn check` — type-check with `svelte-check` (the only "lint"/CI gate; there is no ESLint/Prettier and no test suite)
+
+`yarn check` runs automatically on `git commit` via the Husky `pre-commit` hook, and on every PR / push to `main` via the `ci-test` workflow. There are no unit tests, so `yarn check` is the check to run before considering a change done.
+
+## Architecture
+
+A single-page, statically-generated personal résumé site — no router, no backend, no data fetching. Everything is hardcoded content in Svelte components.
+
+- **Entry:** `src/main.ts` mounts `App.svelte` into `#app` (see `index.html`) using Svelte 5's `mount()`.
+- **Composition:** `App.svelte` stacks four page **sections** from `src/lib/`: `HeaderSection`, `SkillsSection`, `ExpSection`, `ContactSection`. Adding/reordering page content happens here.
+- **Reusable primitives** live in `src/lib/components/` (`Header`, `Hero`, `Link`) and `src/lib/icons/`. Sections compose these; primitives hold no page-specific content.
+- Résumé text (skills, experience, contact info) is written inline in the section components — edit the relevant `*Section.svelte` file to change site content.
+
+## Conventions
+
+- **Svelte 5 runes syntax** throughout: props via `let { ... } = $props()`, slots via `{@render children?.()}`. Do not use legacy `export let` / `<slot>`.
+- Prefer `<script lang="ts">` with a typed props object for new components (see `components/Link.svelte`, `components/Hero.svelte`). Some older section files use plain `<script>` — match the file you are editing.
+- **Tailwind CSS v4** with **no config file**. It is enabled via the `@tailwindcss/vite` plugin and `@import "tailwindcss"` in `src/app.css`; customize through CSS, not a `tailwind.config.js`. `tailwind-merge` is available for conditional class composition.
+- Styling is Tailwind utility classes in markup; the dark theme base (`bg-gray-950 text-white`) is set on `<body>` in `index.html`.
+- `checkJs` is on and `.js`/`.svelte` files are type-checked — keep JSDoc/types valid so `yarn check` passes.
+
+## Deploy
+
+Pushing to `main` triggers the `deploy` workflow: `yarn build` → upload `dist/` → GitHub Pages (https://dankotowski.dev). Note CI uses Node 20, while local dev is pinned to Node 22.14.0 in `.tool-versions`.