project portfolio site

Step 3: Projects Grid

System Text-to-Speech Ready

Slide: 0:00 / 0:00

Slide 1 of 0Interactive Deck

Full Lesson Reference

Showcase your work in a visual grid.

Create the Grid

terminal

Add a projects section with a grid layout.

For now, use placeholder projects:
- Project 1: [Title], [Brief description]
- Project 2: [Title], [Brief description]
- Project 3: [Title], [Brief description]

Each project card should show:
- A thumbnail image (use placeholders for now)
- Project title
- Brief description or category
- Link to project detail page

Style the Cards

terminal

Style the project cards:
- Consistent thumbnail aspect ratio (16:9 or 4:3)
- Subtle hover effect
- Clean typography
- Even spacing between cards

Make them clickable — they'll link to project pages.

Add Your Real Projects

Replace placeholders with your actual projects:

terminal

Replace the placeholder projects with my real ones:

1. [Project Name]
   - Description: [Brief description]
   - Image: [Provide image or describe it]

2. [Project Name]
   - Description: [Brief description]
   - Image: [Provide image or describe it]

[Add more as needed]

Responsive Grid

terminal

Make the grid responsive:
- 3 columns on desktop
- 2 columns on tablet
- 1 column on mobile

Maintain consistent spacing at all sizes.

Checkpoint

Projects grid displays
Cards have hover effects
Real project content added
Responsive at all sizes

What You Learned

Grid layouts for content
Card component patterns
Responsive column changes
Hover states for interactivity

Exercises

Send the "Create the Grid" prompt with placeholder titles, then the "Style the Cards" prompt; hover over a card to confirm the effect feels subtle, not distracting.
Replace the placeholders with your real projects using the "Add Your Real Projects" prompt, providing or describing an image for each.
Send the "Responsive Grid" prompt, then resize from desktop to tablet to mobile widths and confirm the columns collapse from 3 → 2 → 1 with even spacing.