# Portfolio Layouts

> Creates responsive portfolio galleries, project showcases, and image grid layouts. Use when building portfolio pages, creating image galleries, or designing project showcase sections. Handles lazy loading and responsive image optimization.

- Skill: `yennanliu/portfolio-layouts` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yennanliu/portfolio-layouts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yennanliu/portfolio-layouts/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yennanliu (https://skillmd.com/u/yennanliu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yennanliu/portfolio-layouts

---


# Portfolio and Gallery Layouts

## Responsive Grid Layouts
- Use CSS Grid for gallery layouts: `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))`
- Flexbox for flexible card layouts
- Adjust columns per breakpoint:
  - Mobile (< 768px): 1-2 columns
  - Tablet (768px-1024px): 2-3 columns
  - Desktop (> 1024px): 3-4 columns

## Image Optimization
- Use picture element for art direction
- Lazy load with: `loading="lazy"`
- Size images appropriately (max 200KB for thumbnails)
- Use WebP with JPG fallback

## Portfolio Card Structure
```html
<div class="portfolio-card">
  <div class="image-wrapper">
    <img src="thumb.jpg" loading="lazy" alt="Project name">
  </div>
  <div class="card-content">
    <h3>Project Title</h3>
    <p>Description</p>
    <a href="#">Learn More</a>
  </div>
</div>
```

## Hover/Animation Effects
- Use CSS transitions for smooth effects
- AOS (Animate On Scroll) library integration
- Parallax effects on hero sections
- Keep animations under 300ms for responsiveness

## Gallery Best Practices
- Maintain consistent aspect ratios across gallery
- Provide loading states for images
- Include alt text for all images
- Consider using modal/lightbox for full-size views
- Implement filter/sort functionality for large portfolios