portfolio-items

Mosaic Portfolio Item

Mosaic Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with mosaic-style layouts and sections using the Snowlake Jekyll theme.

Front Matter Configuration

General Metadata

date: YYYY-MM-DD                  # Publication date of the portfolio item
layout: portfolio/items/columns-layout  # Required layout for mosaic 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: mosaic                # Mosaic layout grouping
filters:                          # Categorization tags
  - branding
  - video

Project Mosaic & Item Information

thumbnail: "/path/to/thumbnail.webp"  # Thumbnail for portfolio listing
big_image: "/path/to/big-image.webp"  # Large featured image
width2: true                      # Optional width scaling
height2: true                     # Optional height scaling
order: 1                          # Optional display order

Section Layout

Section Structure

<section alignment="left|right">
![Alt Text](/path/to/image.webp "Optional Title")

## Section Heading

**Highlight or Tagline**

<p class="lead">
Descriptive lead paragraph explaining the section's context or significance.
</p>

[Link Text](#)
</section>

Alignment Options

  • alignment="left": Content aligned to the left
  • alignment="right": Content aligned to the right

Section Components

  1. Image

    • Use Markdown image syntax
    • Provide meaningful alt text
    • Optional title attribute

  2. Heading

    • Use ## for section headings
    • Keep headings concise and descriptive

  3. Tagline

    • Use bold text for emphasis
    • Capture the essence of the section

  4. Lead Paragraph

    • Use <p class="lead"> for prominent text
    • Provide context or key insights

  5. Optional Link

    • Use Markdown link syntax
    • Can be a placeholder or actual link

Best Practices

Image Guidelines

  1. Use high-quality, relevant images
  2. Optimize images for web performance
    • Compress images
    • Use WebP format
  3. Maintain consistent image styles
  4. Use descriptive file names

Content Design

  1. Create a narrative flow between sections
  2. Use consistent formatting
  3. Balance text and visual elements
  4. Highlight key project aspects
  5. Maintain a clear, engaging structure

Responsive Considerations

  • Sections will adapt to different screen sizes
  • Test layout on various devices
  • Ensure readability across platforms

Customization Options

  • Adjust width2 and height2 for image scaling
  • Use order to control section display sequence
  • Experiment with alignment and content placement

Troubleshooting

  • Verify image paths
  • Check Markdown syntax
  • Ensure consistent formatting
  • Test responsiveness

Example Workflow

  1. Choose a compelling project
  2. Select high-quality images
  3. Craft concise, engaging sections
  4. Use consistent styling
  5. Review and refine layout