Nicholai/nicholai-work-2026
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update readme and claude.md for bun migration

Browse Source 
- rewrite readme in casual markdown style
- fix bun run deploy command (deploy is reserved)
This commit is contained in:
Nicholai Vogel 2026-01-20 09:53:23 -07:00
parent 4f16c9738d
commit 4445584353
2 changed files with 50 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CLAUDE.md
View File

@ -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

242
README.md
View File

@ -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
<div class="video-container my-10">
<video controls class="w-full border border-white/10">
<source src="/media/my-video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<p class="text-slate-500 text-sm mt-3 font-mono">/// VIDEO CAPTION</p>
</div>
```
#### Example: Image Grids
```mdx
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-10">
<div class="video-container">
<video controls class="w-full border border-white/10">
<source src="/media/video-1.mp4" type="video/mp4" />
</video>
<p class="text-slate-500 text-sm mt-3 font-mono">/// CAPTION 1</p>
</div>
<div class="video-container">
<video controls class="w-full border border-white/10">
<source src="/media/video-2.mp4" type="video/mp4" />
</video>
<p class="text-slate-500 text-sm mt-3 font-mono">/// CAPTION 2</p>
</div>
</div>
```
### Step 4: Adding Images
#### Option 1: Images in `src/assets/`
For images processed by Astro (optimization, etc.):
1. Place image in `src/assets/`
2. Reference in frontmatter: `heroImage: '../../assets/my-image.jpg'`
3. Use in content with Astro's Image component (import required)
#### Option 2: Images in `public/media/`
For static assets (videos, large images):
1. Place file in `public/media/`
2. Reference with absolute path: `/media/my-video.mp4`
3. No import needed, works directly in HTML/MDX
### Step 5: File Naming
- Use kebab-case: `my-awesome-post.mdx`
- The filename (without extension) becomes the URL slug
- Example: `gstar-raw-olympics.mdx` → `/blog/gstar-raw-olympics/`
### Complete Example
Here's a complete example blog post:
```mdx
---
title: 'My Awesome Project'
description: 'A deep dive into the technical pipeline behind this amazing project.'
pubDate: 'Jan 15 2025'
heroImage: '../../assets/project-hero.jpg'
featured: true
category: 'Case Study'
tags: ['VFX', 'Houdini', 'Pipeline']
project structure
---
## Introduction
This is the introduction to my project.
## The Challenge
Here's what we were trying to solve.
<div class="video-container my-10">
<video controls class="w-full border border-white/10">
<source src="/media/project-video.mp4" type="video/mp4" />
</video>
<p class="text-slate-500 text-sm mt-3 font-mono">/// PROJECT VIDEO</p>
</div>
## Technical Approach
### Key Features
- Feature one
- Feature two
- Feature three
## Results
The project was a success!
```
### Blog Features
- **Automatic sorting** - Posts are sorted by `pubDate` (newest first)
- **Featured posts** - First post with `featured: true` appears in hero section
- **Related posts** - Automatically finds related posts by category or shared tags
- **Category filtering** - Users can filter posts by category on the blog index
- **Previous/Next navigation** - Automatic navigation between posts
- **RSS feed** - Available at `/rss.xml`
## Project Structure
```text
src/
├── assets/ # Images processed by Astro
├── components/ # Reusable components
├── assets/ # images processed by astro
├── components/ # reusable components
├── content/
│ ├── blog/ # Blog posts (MDX files)
│ ├── pages/ # Page content
│ └── sections/ # Homepage sections
├── layouts/ # Page layouts
├── pages/ # Routes
├── styles/ # Global styles
└── utils/ # Utility scripts (AVIF converter, etc.)
│ ├── blog/ # blog posts (mdx)
│ ├── pages/ # page content
│ └── sections/ # homepage sections
├── layouts/ # page layouts
├── pages/ # routes
├── styles/ # global styles
└── utils/ # utility scripts
```
## Deployment
deployment
---
The site is deployed to Cloudflare Pages. The `pnpm run deploy` command builds the site and deploys it using Wrangler.
Deployment happens automatically on push to the main branch (if configured in Cloudflare Pages dashboard).
deployed to cloudflare pages. `bun run deploy` builds and deploys via wrangler.
for production: `wrangler pages deploy --branch=main`