portfolio-items

Carousel Portfolio Item Guide

Carousel Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with carousel-style 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 carousel portfolio
title: "Portfolio Item Title"     # Main title of the portfolio item
sub_title: "Subtitle Description" # Optional subtitle
background_image: "/path/to/background-image.webp"  # Background image for the portfolio item

Client Information

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

Categorization

categories:                       # Categorization tags
  - branding
  - corporate

Visual Content Configuration

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
  - "/path/to/carousel-image1.webp"
  - "/path/to/carousel-image2.webp"
  - "/path/to/carousel-image3.webp"
  # Add more images as needed

Image Selection

  • Recommended number of images: 4-6
  • Use high-quality, visually compelling images
  • Maintain consistent image style and aspect ratio
  • Automatic sliding
  • Manual navigation
  • Responsive design
  • Touch-friendly for mobile devices

Content Structure

Markdown Content Guidelines

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

## About 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 insights or background information.

Best Practices

Image Preparation

  1. Use high-resolution images
  2. Optimize for web performance
  3. Maintain visual consistency
  4. Tell a visual story through images
  5. Compress images without losing quality

Content Strategy

  • Craft engaging project descriptions
  • Use <p class="lead"> for prominent text
  • Include key features or highlights
  • Provide context and background
  • Keep text concise and informative
  • Ensure smooth image transitions
  • Provide clear navigation controls
  • Support keyboard and touch interactions
  • Implement responsive design
  • Optimize for different screen sizes

Customization Options

  • Adjust number of carousel images
  • Customize carousel navigation
  • Add captions or overlays
  • Control slide duration and transition effects

Performance Optimization

  • Use WebP image format
  • Compress and resize images
  • Implement lazy loading
  • Minimize initial page load time
  • Use responsive image techniques

Accessibility Guidelines

  • Provide alt text for all images
  • Ensure keyboard navigability
  • Support screen readers
  • Maintain sufficient color contrast
  • Add ARIA labels for carousel controls

Troubleshooting

  • Verify image paths
  • Check file permissions
  • Ensure image compatibility
  • Test on multiple devices and browsers
  • Validate front matter configuration

Example Workflow

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

Technical Considerations

  • Compatible with modern browsers
  • Uses Bootstrap carousel component
  • Supports touch and mouse interactions
  • Responsive and mobile-friendly
  • Lightweight and performant