Codework Orange

A personal blog and portfolio website focused on game development, featuring interactive WebAssembly games and technical articles about game engine creation.

Live site: codework-orange.com

Tech Stack

• Astro - Static site generator
• React - Interactive components
• TypeScript - Type safety
• Tailwind CSS - Styling
• MDX - Enhanced markdown for posts
• Pagefind - Client-side search
• WebAssembly - Embedded games built with the Banjo framework

Getting Started

Prerequisites

• Node.js 22 (see .nvmrc)
• pnpm 9.0.0+

Installation

pnpm install

Development

pnpm dev

Build

pnpm build

Preview

pnpm preview

Project Structure

src/
├── assets/          # Images and static assets
├── components/      # Astro and React components
├── content/
│   ├── post/        # Blog posts (MD/MDX)
│   ├── note/        # Short notes
│   └── tag/         # Tag metadata
├── layouts/         # Page layouts
├── pages/           # Routes
├── plugins/         # Custom remark/rehype plugins
├── styles/          # Global styles
└── utils/           # Utility functions

public/
├── games/           # Compiled WASM game files
└── icons/           # Favicons and app icons

Creating Content

Blog Post

Add a new .md or .mdx file in src/content/post/:

---
title: "Post Title"
description: "Brief description"
publishDate: "2025-01-01"
tags: ["gamedev", "banjo"]
draft: false
---

Your content here...

Note

Add a new .md or .mdx file in src/content/note/ with similar frontmatter.

Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Build for production
pnpm preview	Preview production build
pnpm lint	Run Biome linter
pnpm format	Format code
pnpm check	TypeScript check

Deployment

Automatically deployed to GitHub Pages on push to main via GitHub Actions.

License

MIT