update claude.md

Author: mawburn

.claude/settings.local.json

@@ -14,7 +14,8 @@
       "Bash(find:*)",
       "Bash(grep:*)",
       "Bash(rg:*)",
-      "Bash(git stash:*)"
+      "Bash(git stash:*)",
+      "WebFetch(domain:docs.anthropic.com)"
     ],
     "deny": []
   },

CLAUDE.md

@@ -1,15 +1,18 @@
-## Project Structure
+# CLAUDE.md - Project Instructions
+Last updated: 2025-07-31
 
-This is a personal portfolio site with a blog built using modern web technologies.
+Personal portfolio and blog site built with modern web technologies.
 
-### Framework & Libraries
+## Tech Stack
 
-- **React Router v7** (renamed from Remix) - Full-stack React framework
-- **TailwindCSS v4** - Utility-first CSS framework
-- **Three.js** - 3D graphics library for the synthwave background on home page
-- **TypeScript** - Type-safe JavaScript
+- React Router v7 (renamed from Remix) - Full-stack React framework
+- TypeScript 5.x - Type-safe JavaScript
+- TailwindCSS v4 - Utility-first CSS framework
+- Three.js - 3D graphics for synthwave background (home page only)
+- pnpm - Package manager
+- Vite - Build tool
 
-### App Architecture
+## Project Structure
 
 - `app/routes/` - File-based routing
   - `home.tsx` - Landing page with 3D synthwave background
@@ -29,55 +32,61 @@ This is a personal portfolio site with a blog built using modern web technologie
 - `content/blog/` - Markdown blog posts with frontmatter
 - `public/images/` - Blog post images in WebP format with size variants
 
-### Blog Images
+## Key Features
+
+- RSS 2.0 feed at `/rss.xml`
+- XML sitemap at `/sitemap.xml`
+- Social sharing (Twitter, LinkedIn, Bluesky, copy link)
+- Dark/light theme switching with system awareness
+- Responsive mobile-first design
+- Multi-size WebP blog images: `{slug}.webp`, `{slug}-twitter.webp`, `{slug}-small.webp`
 
-- Images use WebP format for better compression
-- Support for multiple sizes: `{slug}.webp`, `{slug}-twitter.webp`, `{slug}-small.webp`
-- Images can be specified in frontmatter or auto-detected by slug naming
+## Commands
 
-### Features
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm typecheck` - Run TypeScript type checking
+- `pnpm lint` - Run linting with oxlint
 
-- **RSS Feed**: Auto-generated RSS 2.0 feed at `/rss.xml` for blog syndication
-- **SEO Sitemap**: XML sitemap at `/sitemap.xml` with proper priorities and change frequencies
-- **Social Sharing**: Share buttons for Twitter, LinkedIn, Bluesky, and copy-to-clipboard
-- **Dark Mode**: System-aware theme switching with persistence
-- **Responsive Design**: Mobile-first approach with adaptive layouts
+## Code Style
 
-### Performance Optimizations
+- Use ES modules (import/export), not CommonJS
+- Destructure imports when possible
+- 2-space indentation
+- Semicolons required
+- Single quotes for strings
+- Function components with hooks only
+- Arrow functions preferred
+- PascalCase for components, camelCase for functions/variables
 
-- SynthwaveBackground is lazy-loaded and only renders on home page
-- Font preloading is conditional (blog pages only load Lexend fonts)
-- Blog content is processed server-side with caching
-- RSS and sitemap responses are cached for 1 hour
-- Theme toggle includes hydration safety to prevent flashing
+## Architecture Patterns
 
-### Styling Conventions
+- File-based routing with React Router v7
+- Server-side rendering for blog content
+- Lazy loading for heavy components (Three.js)
+- Conditional font preloading (Lexend fonts on blog pages only)
+- 1-hour caching for RSS and sitemap responses
+- Hydration-safe theme switching
 
-- Home page: Dark theme with synthwave aesthetics
-- Blog pages: Clean, readable design with `dark:bg-slate-900` background
-- Consistent spacing and typography using Tailwind utilities
+## Performance Guidelines
 
-## Development Guidelines
+- Three.js loads only on home page
+- Blog content processed server-side with caching
+- Images served as WebP with size variants
+- Avoid loading unused fonts on non-blog pages
 
-### Do's
+## Workflow
 
-- Follow existing patterns in the folder structure
-- Use file-based routing conventions for new pages
-- Examine node_modules packages to understand library functionality
-- Start with README.md files in each package
-- Adhere to .prettierrc & oxlint.json configurations
-- Use `pnpm` as the package manager
-- Only comment complex code requiring extra explanation
-- Always run `pnpm typecheck` and `pnpm lint` after creating or updating code
+- Always run `pnpm typecheck` and `pnpm lint` after code changes
 - Prefer editing existing files over creating new ones
-- Use lazy loading for heavy components (like Three.js background)
+- Test with actual builds, not dev server for error testing
+- Follow existing patterns in the codebase
 
-### Don'ts
+## Important Restrictions
 
-- DON'T USE COMMENTS unless there is a very unique piece of code that requires extra information
-- Don't use `(_) => null` syntax for unused parameters; omit them instead
-- Don't use `pnpm run dev` for error testing (inefficient)
-- Don't assume knowledge of React Router v7 or TailwindCSS v4 functionality
-- Don't use the `any` type unless absolutely necessary
-- Don't typecast unless absolutely necessary
-- Don't load heavy assets (Three.js, unused fonts) on blog pages
+- NEVER add comments unless absolutely necessary for complex logic
+- NEVER use `(_) => null` syntax - omit unused parameters
+- NEVER use `any` type or typecasting unless absolutely necessary
+- NEVER assume React Router v7 or TailwindCSS v4 APIs - check documentation
+- NEVER load Three.js or heavy assets on blog pages
+- NEVER create new files unless explicitly required

content/blog/2025-12-31-how-i-ai.md

@@ -0,0 +1,16 @@
+---
+title: 'How I use AI in my workflow'
+date: '2025-12-31 16:00'
+image: '2025-12-31-shopify-ai-chat.webp'
+excerpt: 'How I use AI tooling in my everyday workflow as a software engineer.'
+tags:
+  [
+    'AI tools',
+    'Anthropic',
+    'Claude Code',
+    'AI Chat',
+    'AI adoption',
+    'developer experience',
+    'vibe coding',
+  ]
+---