diff --git a/CLAUDE.md b/CLAUDE.md index 70b030f..afa98a2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -10,7 +10,7 @@ core: - bun dev - run dev server - bun build - build the project - bun preview - build and preview with wrangler -- bun deploy - build and deploy to cloudflare pages (then run `wrangler pages deploy --branch=main` for production) +- bun run deploy - build and deploy to cloudflare pages (then run `wrangler pages deploy --branch=main` for production) utilities: - bun commit - interactive git commit with AI-generated messages diff --git a/README.md b/README.md index 8ba8792..898d1c1 100644 --- a/README.md +++ b/README.md @@ -1,222 +1,78 @@ -# nicholai-work-2026 +nicholai.work +=== -Personal portfolio and blog site built with Astro. +personal portfolio and blog built with astro. live at https://nicholai.work -🌐 [Live Site](https://nicholai.work) +tech stack +--- -## I used these: +- astro - static site framework +- react - interactive components +- tailwind css - styling +- mdx - markdown with jsx +- cloudflare pages - hosting +- typescript - type safety -- **Astro** - Static site framework -- **React** - Interactive components -- **Tailwind CSS** - Styling -- **MDX** - Markdown with JSX support -- **Cloudflare Pages** - Hosting & deployment -- **TypeScript** - Type safety - -## some commands +commands +--- ```bash -pnpm install - -pnpm dev - -pnpm build - -pnpm preview - -pnpm run deploy +bun install # install deps +bun dev # dev server at localhost:4321 +bun build # production build +bun preview # preview with wrangler +bun run deploy # build and deploy to cloudflare ``` -## Image Optimization +image conversion +--- ```bash -# Convert all images in src/assets/ -pnpm run convert:avif:all - -pnpm run convert:avif:jpeg - -pnpm run convert:avif:png - -# Custom quality (0-100, default: 65) -node src/utils/convert-to-avif.js --jpeg --quality 80 -``` -## Blog - -Blog posts are created as MDX files in the `src/content/blog/` directory. The file name becomes the URL slug (e.g., `my-post.mdx` → `/blog/my-post/`). - -### Step 1: Create the MDX File - -Create a new `.mdx` file in `src/content/blog/`: - -```bash -src/content/blog/my-new-post.mdx +bun run convert:avif:all # convert all images in src/assets/ +bun run convert:avif:jpeg # just jpegs +bun run convert:avif:png # just pngs ``` -### Step 2: Add Frontmatter +blog posts +--- -Every blog post requires frontmatter at the top of the file. Here's the complete schema: +create mdx files in `src/content/blog/`. filename becomes the url slug. + +frontmatter: ```mdx --- -title: 'Your Post Title' -description: 'A brief description that appears in listings and meta tags' +title: 'Post Title' +description: 'brief description for listings and seo' pubDate: 'Jan 15 2025' -heroImage: '../../assets/your-image.jpg' -featured: true -category: 'Case Study' -tags: ['VFX', 'Houdini', 'Nuke'] +heroImage: '../../assets/image.jpg' # optional +featured: true # optional, shows in hero +category: 'Case Study' # optional, for filtering +tags: ['VFX', 'Houdini'] # optional, for related posts --- ``` -#### Required Fields +images go in `src/assets/` (processed by astro) or `public/media/` (static, use absolute paths like `/media/video.mp4`). -- **`title`** (string) - The post title -- **`description`** (string) - Brief description for listings and SEO -- **`pubDate`** (string) - Publication date in any format (e.g., `'Jan 15 2025'`, `'2025-01-15'`) - -#### Optional Fields - -- **`heroImage`** (image path) - Hero image for the post. Use relative path from the MDX file: - - Images in `src/assets/`: `'../../assets/image.jpg'` - - Images in `public/media/`: Use absolute path in content: `/media/image.jpg` -- **`featured`** (boolean, default: `false`) - Set to `true` to feature on blog index page -- **`category`** (string) - Category for filtering (e.g., `'Case Study'`, `'Tutorial'`, `'Thoughts'`) -- **`tags`** (array of strings) - Tags for categorization and related posts -- **`updatedDate`** (string) - Optional update date - -### Step 3: Write Your Content - -Write your content using Markdown or MDX syntax. You can use: - -- Standard Markdown (headings, lists, links, etc.) -- JSX components and HTML -- Custom styling with Tailwind classes - -#### Example: Adding Videos - -```mdx -
/// VIDEO CAPTION
-/// CAPTION 1
-/// CAPTION 2
-/// PROJECT VIDEO
-