portfolio-items

Grid Portfolio Item Guide

Grid Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with grid-style carousel layouts using the Snowlake Jekyll theme.

Front Matter Configuration

General Metadata

date: YYYY-MM-DD                  # Publication date of the portfolio item
layout: portfolio/items/carousel-layout  # Required layout for grid portfolio
title: "Portfolio Item Title"     # Main title of the portfolio item
sub_title: "Subtitle Description" # Optional subtitle
header_image: "/path/to/header-image.webp"  # Full-width header image

Client Information

client: "Client Name"             # Name of the client or organization

Categorization

grouped_by: grid                  # Grid layout grouping
filters:                          # Categorization tags
  - branding
  - design

Project Grid & Item Information

thumbnail: "/path/to/thumbnail.webp"  # Thumbnail for portfolio listing
big_image: "/path/to/big-image.webp"  # Large featured image
carousel_images:                  # Array of images for carousel/grid display
  - "/path/to/image1.webp"
  - "/path/to/image2.webp"
  - "/path/to/image3.webp"
  # Add more images as needed

Content Structure

Markdown Content

---
# Front Matter (as described above)
---

# Project Description
This is the **Markdown content** for the project.

<p class="lead">
Introductory lead paragraph explaining the project's essence.
</p>

Detailed project description and context.

### Features:
- Feature 1
- Feature 2
- Feature 3

Additional project details or insights.

Image Configuration

  • thumbnail: Small preview image for portfolio listings
  • big_image: Larger featured image
  • carousel_images: Collection of images for grid/carousel display
  1. Use high-quality, consistent images
  2. Maintain similar aspect ratios
  3. Optimize images for web performance
  4. Use descriptive, meaningful images

Content Guidelines

Project Description

  • Use a mix of Markdown and HTML
  • Start with a compelling lead paragraph
  • Provide context and project details
  • Highlight key features or achievements

Formatting Tips

  • Use **bold** for emphasis
  • Create lists for features or key points
  • Use <p class="lead"> for prominent text
  • Keep content concise and engaging

Customization Options

Image Display

  • Carousel automatically adapts to image count
  • Images can be navigated manually
  • Responsive design for various screen sizes

Content Flexibility

  • Mix text, lists, and formatting
  • Add sections as needed
  • Include links or additional media

Troubleshooting

Common Issues

  • Verify image paths
  • Check file permissions
  • Ensure image formats are web-compatible
  • Test responsiveness on different devices

Performance Optimization

  • Compress images
  • Use WebP format
  • Minimize large image files
  • Implement lazy loading

Best Practices

Design Considerations

  1. Visual Consistency

    • Use a cohesive color palette
    • Maintain consistent image styles
    • Align with overall brand identity

  2. Storytelling

    • Create a narrative through images
    • Show project progression
    • Highlight unique aspects

  3. User Experience

    • Ensure smooth carousel navigation
    • Provide clear, readable content
    • Make images interactive

Example Workflow

  1. Select compelling project
  2. Gather high-quality images
  3. Write engaging description
  4. Configure front matter
  5. Review and refine layout