feat(ticket): create-uses-page (TKT-20260318-8155EC92)

[kylemcd]

Summary

• Created a new /uses page with a full-width table showcasing hardware, software, development tools, and other resources used day-to-day
• Implemented interactive tag filtering system that allows users to filter items by tags and sorts results by relevance

Root Cause

The ticket requested creation of a /uses page to showcase tools and resources, which didn't exist on the personal site.

Fix Applied

1. Created new route (src/routes/uses.index.tsx):

   • Follows existing route pattern used by /reading and /listening pages
   • Displays page title and intro text with the Uses component

2. Created Uses component (src/components/Uses/Uses.tsx):

   • Full-width responsive table with Name, Description, and Tags columns
   • Interactive tag filtering system at the top with toggle buttons
   • When tags are selected, the table automatically filters to show only matching items
   • Results are sorted by relevance (items matching more selected tags appear first)
   • Each tag in the table rows is clickable and can be used to add/remove filters
   • Shows item count (e.g., "Showing 8 of 16 items") to indicate filtering state
   • Includes 16 starter items across categories: Hardware, Software, Development, Productivity
   • Links open in new tabs where URLs are provided
   • Empty state message when no items match selected tags

3. Added comprehensive styling (src/components/Uses/Uses.styles.css):

   • Table responsive layout with alternating hover states
   • Filter buttons with active/inactive states
   • Tag buttons with visual feedback
   • Proper spacing and typography matching site design
   • Seamless integration with design tokens (colors, spacing)

4. Created route CSS (src/styles/routes/uses.css):

   • Minimal file for route-specific overrides (currently uses global layout)

Validation Results

• ✅ All 5 new files created and staged for commit
• ✅ Table displays all 16 items with Name, Description, and Tags columns
• ✅ Filter buttons allow selecting multiple tags
• ✅ Table dynamically filters and sorts based on selected tags
• ✅ Tag buttons in table rows are clickable for filtering
• ✅ Styling matches site design patterns and responsive layout
• ✅ Follows existing component architecture (styles.css + index.ts exports)
• ✅ Uses existing site design tokens for consistency

Risk & Rollback

Risk Level: Low

• New route and component addition with no modifications to existing code
• No breaking changes or dependency modifications
• Can be easily rolled back by removing the 5 new files

Rollback: Delete src/components/Uses/, src/routes/uses.index.tsx, and src/styles/routes/uses.css

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	kylemcd-com	f7729e8	Mar 18 2026, 03:06 PM