jaygriff.com Features

This isn't just a website—it's a full-stack development platform built from scratch with Next.js, TypeScript, and React. Every feature here was designed to make building and shipping faster, better, and more enjoyable.

🎨 Content & Design System

Dual Content System

Flexible content architecture supporting both formats with automatic discovery:

• TSX Components - Full React power for interactive pages, custom layouts, and complex compositions
• Markdown Files - Write in markdown with JSON frontmatter, auto-renders with primitives via react-markdown + remark-gfm
• Zero Config - Drop a file in content/, add metadata, it appears on the site. No build config, no manual registration
• Unified Metadata - Same PostMeta interface for both formats, consistent routing and discovery

Primitive Component System

Constraint-based design system optimized for AI composition and consistent styling:

• Core Primitives - Heading, Paragraph, List, Link, Code, Table, Blockquote, Container, Stack, Flex, Box
• Theme Integration - All primitives connected to live theme system with real-time updates
• Composable by Design - AI can generate beautiful pages by composing primitives without custom CSS
• Fix Once, Apply Everywhere - Update Link primitive to use Next.js Link → entire site gets SPA navigation
• Emotion CSS-in-JS - Dynamic styling, theme access, TypeScript support

CodeBlock Component

Syntax-highlighted code display with polished interactions:

• Multi-Language Support - TypeScript, JavaScript, React (TSX/JSX), CSS, HTML, Markdown, Bash/Shell with Prism.js
• File Icons - Language-specific icons in header (TypeScript logo, React logo, shell icon, etc.)
• Hover-Only Copy Button - Reduces visual clutter, appears smoothly on hover with crossfaded SVG icons
• Smart Copy Feedback - Checkmark persists during 2s animation even when cursor leaves, instant hide when animation completes if not hovering
• No Flash Transitions - data-copied attribute with transition:none prevents brief visibility flashes
• Custom Language Styling - Bash/shell uses terminal green, other languages get VS Code Dark+ theme

ContentHeader with Smart Tooltips

Metadata display with intelligent tooltip positioning:

• Multiple Update Dates - Supports string | string[] for pages with many edits, displays as ordered list
• Auto-Flip Positioning - Tooltips detect viewport overflow using getBoundingClientRect() and flip from above to below automatically
• Hover Delay Logic - 0.5s delay before showing prevents appearing when cursor sweeps across, 0.15s fast disappear on leave
• Authorship Notes - Optional asterisk-triggered tooltip explaining collaborative authorship or AI involvement

Live Theme Editor

Visual design system with real-time preview (dev mode only):

• Interactive Controls - Adjust colors, typography, spacing, borders, shadows in real-time
• HSL Color System - Primary hue/saturation sliders for cohesive color schemes
• LocalStorage Persistence - Theme settings survive page reloads
• Copy/Export Config - Generate theme config code for permanent changes

🚀 Performance & Architecture

Next.js 15 App Router

• Server Components by Default - Smaller bundles, faster loads, better SEO
• Static Generation - All content pages pre-rendered at build time with generateStaticParams
• Client Components - Strategic use for interactivity (Navigator, Theme Editor, NavBar)
• SPA Navigation - Next.js Link integration for instant client-side routing

Smart Routing System

• Metadata-Based Routes - PostMeta interface drives routing for posts and docs
• App Routes for Foundational Pages - About Me, Features, Roadmap, Reader's Guide as app routes for custom layout control
• Dynamic Routes for Content - /posts/[slug] and /docs/[slug] for auto-discovered content
• Automatic Sitemap - Generated from route metadata for SEO

Content Discovery & Loading

• Filesystem-Based Discovery - Automatically finds all content files in content/ directory
• Metadata Extraction - Parses TSX exports and markdown frontmatter uniformly
• Type-Safe Loading - TypeScript ensures PostMeta consistency across all content
• Route Generation - getAllRoutes() aggregates all discoverable content for navigation

🎯 Navigation & UX

Navigator Component

Keyboard-first content navigation inspired by VS Code command palette:

• Instant Search - Filter all content by title/description in real-time
• Keyboard Navigation - Arrow keys, Enter to select, Escape to close
• Visual Feedback - Highlighted selection, smooth animations
• Click-Outside Close - Intuitive modal behavior with scroll detection

NavMenu with Radix UI

Accessible dropdown menu using Radix UI primitives:

• Hamburger Menu - Clean SVG icon, no external dependencies
• Main Navigation - Home, About Me, About This Site, Features, Roadmap, Reader's Guide, Privacy Policy
• Dev-Only Section - Theme Editor only visible in NODE_ENV === 'development'
• Full Accessibility - Keyboard navigation, focus management, ARIA attributes handled by Radix
• Composable Primitives - Radix components with custom styling, no style conflicts

Responsive NavBar

• Floating Pill Design - Fixed bottom positioning with rounded pill shape
• Compact Padding - Reduced spacing for sleek appearance without sacrificing usability
• Custom Font - Sekuya Google Font for distinctive branding
• Particle Effects - Animated particles on title hover for visual polish
• Mobile-Optimized - Responsive sizing, touch-friendly targets, Safari-compatible positioning
• Navigator Integration - Quick access to all content from any page

📝 Developer Experience

AI-Optimized Workflow

Built specifically for AI-assisted development with structured outputs and composable primitives:

• Natural Language → Pages - Describe intent, AI generates TSX with primitives, approve and ship
• Structured Metadata - PostMeta interface provides clear schema for AI to follow
• Component Composition - AI composes from known primitives instead of generating custom CSS
• Instant Deployment - Vercel CI/CD for push-to-deploy workflow

Content Workflow

• Write Anywhere - TSX for complex pages, Markdown for quick docs
• Immediate Preview - Hot reload on save, instant feedback loop
• Git-Backed - Full version history, easy rollback, collaborative editing via PRs
• Workflow Transparency - 🤖🔧✍️ badges track AI vs human authorship

🛠️ Infrastructure

Deployment & Hosting

• Vercel Platform - Zero-config deployment, edge network, automatic HTTPS
• CI/CD Pipeline - Push to main → automatic build → instant deploy
• Vercel Analytics - Privacy-friendly page view tracking
• Custom Domain - jaygriff.com with SSL

Content Versioning

• Git as Source of Truth - All content in version control
• Superseded Archive - raw/content/superseded/ for old versions useful in AI synthesis
• Commit History as Memory - Full edit history for every page
• Branch-Based Workflow - Feature branches for major changes

Open Source & Transparency

• Public GitHub Repo - Full source code visible to anyone
• MIT-Style Licensing - Use at your own risk, no warranties
• Radical Transparency - Process, mistakes, and evolution all public
• Bootstrap Repo - Designed to be forked and reused for future projects

📊 Content Management

Metadata System

• PostMeta Interface - title, slug, date, author, type, description, tags, and more
• Dual Format Support - TSX exports, markdown JSON frontmatter
• Flexible Authorship - Single author, multiple authors, authorship notes for transparency
• Type Discrimination - post vs doc vs doc:commit for different content types

Content Organization

• Tagging System - Free-form tags for categorization and discovery
• Project IDs - Group content by project for multi-site support
• Draft Support - Hide incomplete content from production
• Related Posts - Cross-linking via slug references

🎯 What's Next?

Check out the Roadmap for planned features including:

• AI-powered metadata editor for quick content updates
• Dev-mode WYSIWYG content editor for in-browser markdown editing
• Search with hotkeys, filters, and sorting
• Badge system to display workflow transparency on pages
• Component generator for rapid primitive composition

This site is a living development platform—constantly evolving, always improving, built in public.