2 min read
Step 3: Projects Grid
Showcase your work in a visual grid.
Create the Grid
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 pageStyle the Cards
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:
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
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