Phase 6: Uses Page

Date: January 6, 2026
Phase: Phase 6 - Uses Page
Status: Completed

Note: This post is written from Joel's perspective (first person "I" = Joel). Technical details sections are clearly marked as written by the AI agent (Cursor - Claude Code).

The /uses page was already mostly built in Phase 3 when we created the UsesSection component. I just needed to polish it up to use AgilityPic for images and make sure everything is ready to go.

What We Had

The UsesSection component was already created and had all the functionality I needed:

• Grouping items by category
• Support for regular links and affiliate links
• Image display for each item
• Responsive grid layout

It just needed to be updated to use AgilityPic instead of regular img tags for better performance.

What We Improved

The agent updated the UsesSection component to:

• Use AgilityPic for item images (instead of regular img tags)
• Better responsive image handling with high-DPI support

Visual Results

Uses Page

The /uses page displays items organized by category in a clean, responsive grid.

Joel's Thoughts / Reflections

I got the idea for this page from Wes Bos‘s site where he shares what he uses. Also, The Verge has a series about “what’s in your bag” that I find really interesting.
I may expand this page in the future to include what I carry when travelling and other cool gadgets. Gadgets are great.
One thing I changed after-the-fact on this page was to do a “bento-box” layout. That‘s one particular layout that I never really get a good grasp of implementing using CSS, so getting an agent to do it for me seems obvious. It makes me wonder what other dev skills I’ll be willing to offload to AI agents moving forward. I really don’t want to get to the point where I don’t recognize the code that‘s being written, or worse, don’t even bother to read it…