readme

Getting Started

Before starting a producive collaboration with me, we need a few prerequisites.

Installation

git clone
cd claycurry.com
bun install

Overview

This site was created to accomplish several goals:

1. Professional presence — A central hub for my work and experience
2. Technical blog — Share knowledge and document learnings
3. Design experimentation — Test UI patterns and interactions
4. Performance benchmark — Maintain excellent Core Web Vitals

"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

Technical Stack

Core Technologies

Key Features

• App Router — Leveraging Next.js 16's app directory structure
• Server Components — Optimized rendering strategy
• Dark Mode — System preference detection with manual toggle
• MDX Blog — Write posts in Markdown with React components
• View Counter — Track page popularity with serverless functions

Project Structure

src/
├── app/
│   ├── (site)/
│   │   ├── page.tsx          # Homepage
│   │   └── blog/
│   │       ├── _content/     # MDX blog posts
│   │       ├── _lib/         # Blog utilities
│   │       └── [[...slug]]/  # Dynamic routes
│   └── api/
│       └── views/            # View counter API
├── lib/
│   ├── ui/
│   │   ├── blocks/           # Layout components
│   │   ├── components/       # Reusable UI
│   │   ├── controls/         # Interactive elements
│   │   ├── icons/            # SVG icons
│   │   └── widgets/          # Complex components
│   └── utils.ts              # Helper functions
└── mdx.d.ts                  # MDX type definitions

Design Principles

Visual Hierarchy

The design follows a clear information hierarchy:

• Primary: Name, title, key actions
• Secondary: Section headers, navigation
• Tertiary: Body content, metadata

Color System

/* Light mode */
--background: #ffffff;
--foreground: #171717;
--accent: #3b82f6;
 
/* Dark mode */
--background: #0a0a0a;
--foreground: #ededed;
--accent: #60a5fa;

Typography

• Headings: Bold, tight tracking
• Body: Regular weight, comfortable line height
• Code: Monospace, slightly reduced size

Performance Goals

Core Web Vitals targets:

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1

Optimization Strategies

1. Image optimization with next/image
2. Font subsetting and preloading
3. Route prefetching for navigation
4. Static generation where possible

Future Roadmap

Planned improvements:

• implement routes
• implement footer
• implement registry
• extend header for sm: variant
• implement OG preview, X metadata
• implement page counter based on isr.
• implement blog aside
• add support for page readers
• implement markdown rules
• integrate seo
• implement alpine
• implement lambda functions
• implement api/activity
• implement slug api
• implement authentication workflows (Google + GitHub)
• Add cookie support for view counting
• Write an article introducing Laplace and Fourier Transform
• Add LaTeX support for technical posts
• Add MDX support for rendering code blocks
• Add table of contents for blog posts
  • Allow users to choose to show / hide table of contents
  • Construct table of contents based on style, theme, color
• Implement RSS feed
• Add search functionality
• Create project showcase section
• Add reading time estimates
• Improve accessibility (WCAG AA)

This site is open source. Feel free to explore the repository on GitHub.