portfolio-items

Columns Portfolio Item Guide

Columns Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with column-based layouts 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 columns 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

filters:                          # Categorization tags
  - branding
  - video

Visual Content Configuration

thumbnail: "/path/to/thumbnail.webp"  # Thumbnail for portfolio listing
big_image: "/path/to/big-image.webp"  # Large featured image
sm_img: "/path/to/small-image.webp"   # Small supporting image

Section Layout Structure

Section Syntax

<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 for additional context

  2. Heading

    • Use ## for section headings
    • Keep headings concise and descriptive
    • Capture the essence of the section

  3. Tagline

    • Use bold text for emphasis
    • Highlight key project aspects or unique selling points

  4. Lead Paragraph

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

  5. Optional Link

    • Use Markdown link syntax
    • Can be a placeholder or actual link to more details

Best Practices

Visual Design

  1. Maintain consistent visual style
  2. Use high-quality, relevant images
  3. Alternate left and right alignments for visual interest
  4. Ensure images complement the text
  5. Use images that tell a story

Content Strategy

  1. Create a narrative flow between sections
  2. Use consistent formatting
  3. Balance text and visual elements
  4. Highlight project’s unique aspects
  5. Keep content concise and engaging

Responsive Considerations

  • Sections adapt to different screen sizes
  • Mobile-friendly layout
  • Ensure readability across devices
  • Test on various screen resolutions

Customization Options

  • Control section alignment
  • Add multiple sections
  • Experiment with image and text placement
  • Customize link styles
  • Adjust typography and spacing

Performance Optimization

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

Accessibility Guidelines

  • Provide descriptive alt text
  • Ensure color contrast
  • Support keyboard navigation
  • Compatible with screen readers
  • Add ARIA labels for enhanced accessibility

Troubleshooting

  • Verify image paths
  • Check Markdown syntax
  • Ensure consistent formatting
  • Test responsiveness
  • Validate front matter configuration

Example Workflow

  1. Select compelling project
  2. Choose high-quality images
  3. Craft engaging section content
  4. Alternate section alignments
  5. Review and refine layout
  6. Test across devices

Technical Considerations

  • Uses flexible column-based layout
  • Supports multiple sections
  • Responsive design
  • Compatible with modern browsers
  • Lightweight and performant