My Stack Spec

By Jay Griffin, Claude Sonnet 4.5*Spec emerged organically from building the page·  February 4, 2026
docsProject: jaygriff
🏷️ Tags:feature-specuxdesign

Spec for my stack page - filterable categories showing what I use, what I'm watching, what I retired, and why

Vision

The My Stack page shows what I actually use, what I'm following, and what I've retired—with the stories behind those choices. Instead of just listing "I use React," it explains why I picked React, what I moved away from, and what I'm actively exploring. Filter by AI dev, homelab, superseded tools, whatever—each view tells a different story about how my stack evolved.

It's basically a living document of my technical worldview and how it changes over time.

Problem Statement

Most tool pages are boring as hell:

Core Philosophy

This documents my technical worldview. It's not about flexing expertise—it's about showing:

The goal: show technical reasoning. React for components over templates. Tailwind → Emotion when I needed more control. Actively studying distributed AI. That kind of thing.

Current Implementation (Phase 1)

Component Architecture

src/app/my-stack/page.tsx
// ToolCard component (reusable)
<ToolCard 
  logo="/tool-logos/react.svg"
  title="React"
  description="Component architecture for ui"
  invert={false} // white logos need inversion
/>

// ColoredHeading (custom styled component)
const ColoredHeading = styled.h2`
  color: hsl(210, 100%, 60%);
  font-family: var(--font-sekuya), sans-serif;
  font-size: 2rem;
  margin: 3rem 0 1rem 0;
`;

// Section pattern (17 sections currently)
<ColoredHeading>Section Title</ColoredHeading>
<div style={{ margin: '3rem 0' }}>
  <Paragraph>Narrative description...</Paragraph>
</div>
<div style={gridContainerStyle}>
  <ToolCard ... />
  <ToolCard ... />
</div>
<Divider />

Current Sections (17 Total)

  1. Software I'm Following (6 tools): Cursor, Claude Code, GitHub Copilot SDK, Claude Cowork, Codex, Exo
  2. Software I Plan to Use (2 tools): LangChain, LangSmith
  3. Homelab & Self-Hosting (10 tools): Ollama, Open WebUI, Proxmox, Grafana, Hetzner, TrueNAS, Home Assistant, Prometheus, Unraid, OpenMediaVault
  4. Languages (6 tools): TypeScript, JavaScript, Python, HTML, CSS, Shell
  5. Core Dev Stack (12 tools): React, Next.js, Vite, Emotion, Vercel, Cloudflare, Git, GitHub, GitHub Copilot, VS Code, Chrome DevTools, jaygriff.com
  6. Chatbots (3 tools): ChatGPT, Claude, Gemini
  7. Vibecoding (2 tools): Lovable.dev, Bolt.new
  8. Productivity (6 tools): Notion, Obsidian, Excel, Google Sheets, Office Suite, Locus
  9. Photo & Image Editing (2 tools): Affinity, Canva
  10. Video Recording (1 tool): OBS
  11. Design & Color Tools (2 tools): Figma, Coolors
  12. OS Automation (2 tools): Hammerspoon, AutoHotKey
  13. CSS Frameworks (Superseded) (2 tools): Tailwind, DaisyUI
  14. Web Frameworks (Superseded) (4 tools): Django, Flask, Express, WordPress
  15. Static Site Generators (Superseded) (2 tools): Hugo, Jekyll
  16. Hosting & Infrastructure (Superseded) (1 tool): Netlify
  17. Tools Vanquished by Affinity (4 tools): Photoshop, Photopea, Inkscape, GIMP

Phase 2: Filtering System (Planned)

Filter Categories

Each filter creates a curated view with its own narrative:

Filter-Specific Narratives

Each filter gets its own introductory paragraph explaining context. Examples:

.ts
const filterIntros = {
  'ai-dev': `I build with AI-native tools daily. Not just using ChatGPT—I'm 
    deep into system prompts, context management, tool-calling patterns, and 
    distributed inference. This is where I see development heading.`,
    
  'homelab': `I respect homelab culture deeply even though I don't run one yet. 
    Proxmox, TrueNAS, Grafana—I'm studying these because self-hosting, 
    infrastructure ownership, and local-first AI are where I want to grow.`,
    
  'superseded': `These are tools I've retired, but each migration taught 
    something valuable. Tailwind → Emotion: realized CSS-in-JS gives more 
    control. Django → Next.js: discovered React components changed how I think 
    about UI. WordPress → Custom: understood the power of owning your stack.`,
    
  'studying': `I'm not just using tools—I'm studying how they're built. 
    Fascinated by Cursor's architecture, Claude Sonnet's context management, 
    distributed inference patterns in Exo. Want to understand internals, not 
    just APIs.`
};

State Management

.ts
// Client component with useState
'use client';

const [activeFilter, setActiveFilter] = useState<FilterCategory>('all');

// Filter button component
interface FilterButtonProps {
  label: string;
  category: FilterCategory;
  active: boolean;
  onClick: () => void;
}

// Conditional rendering
{activeFilter === 'all' && <GalleryView tools={allTools} />}
{activeFilter === 'ai-dev' && (
  <>
    <FilterIntro text={filterIntros['ai-dev']} />
    <ToolSection title="AI Development Tools" tools={aiDevTools} />
  </>
)}

Tag System (Cross-Cutting Concerns)

Some tools belong in multiple categories. Use tags for flexible filtering:

.ts
interface ToolData {
  logo: string;
  title: string;
  description: string;
  invert?: boolean;
  tags: string[]; // e.g., ['ai', 'dev', 'core-stack']
  status: 'active' | 'watching' | 'want-to-use' | 'superseded';
}

// Example
const tools: ToolData[] = [
  {
    logo: '/tool-logos/cursor.svg',
    title: 'Cursor',
    description: 'Ai-first code editor',
    tags: ['ai', 'dev', 'core-stack', 'following'],
    status: 'active'
  },
  {
    logo: '/tool-logos/vercel.svg',
    title: 'Vercel',
    description: 'Serverless deployment platform',
    tags: ['infrastructure', 'hosting', 'core-stack'],
    status: 'active'
  }
];

UX Requirements

Gallery Mode (All View)

Filtered Views

Filter Button Design

.ts
// Filter bar at top of page
<FilterBar>
  <FilterButton label="All" category="all" active={activeFilter === 'all'} />
  <FilterButton label="AI Dev" category="ai-dev" active={activeFilter === 'ai-dev'} />
  <FilterButton label="Homelab" category="homelab" active={activeFilter === 'homelab'} />
  <FilterButton label="Superseded" category="superseded" active={activeFilter === 'superseded'} />
  <FilterButton label="Creative" category="creative" active={activeFilter === 'creative'} />
  <FilterButton label="Core Stack" category="core-stack" active={activeFilter === 'core-stack'} />
</FilterBar>

// Active state styling
const FilterButton = styled.button<{ active: boolean }>`
  background: ${props => props.active ? 'hsl(210, 100%, 60%)' : 'transparent'};
  color: ${props => props.active ? 'white' : 'hsl(210, 100%, 60%)'};
  border: 2px solid hsl(210, 100%, 60%);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background: hsl(210, 100%, 60%);
    color: white;
  }
`;

Filter Examples

AI Dev Filter

Shows: Cursor, Claude Code, GitHub Copilot SDK, Exo, LangChain, LangSmith, Chatbots, Vibecoding tools

Intro could be: "I build with AI-native tools daily. Not just using ChatGPT—deep into system prompts, context management, tool-calling patterns, local inference."

Homelab Filter

Shows: All 10 homelab tools (Ollama, Open WebUI, Proxmox, TrueNAS, Grafana, etc.)

Intro could be: "I love homelab even though I don't run a lot of hardware. Studying Proxmox, TrueNAS, Grafana because self-hosting and local-first AI is where I want to grow."

Superseded Filter

Shows: Retired tools with migration stories

Implementation Roadmap

Phase 1: Current State ✓

Phase 2: Data Refactor (Next)

Phase 3: Filter UI (Following Phase 2)

Phase 4: Gallery Mode (Following Phase 3)

Phase 5: Migration Stories (Final Polish)

Success Metrics

Technical Debt & Future Considerations

Known Issues

Future Enhancements

Conclusion

This is about showing technical decision-making. Not a static skill list—it tells stories about why I switched tools, what I'm exploring, and how my stack evolved.

Filter by AI dev to see the AI-native workflow. Click Superseded for migration stories. Hit Homelab to see aspirational infrastructure interests. Each view is its own narrative about how I think about tech.