create

Portfolio Layouts Guide for Snowlake Jekyll Theme

Comprehensive Portfolio Layouts Guide

Overview

The Snowlake Jekyll Theme offers 8 unique portfolio layouts to showcase your projects effectively. This guide will help you create and customize your portfolio with ease.

Portfolio Layouts

1. Grid Portfolio Layout (grid-portfolio.html)

Features:

  • Responsive grid display
  • Equal-sized project cards
  • Clean, organized presentation

Example Front Matter:

---
layout: portfolio/portfolio-grid
title: "Grid Portfolio"
sub_title: "Consectetur adipiscing elit"
portfolio_area:
  enable: true
  categories:
    - title: "Branding"
      filter: "branding"
    - title: "Design"
      filter: "design"
    - title: "Photography"
      filter: "photography"
---

2. Grid Portfolio Details Layout (grid-portfolio-details.html)

Features:

  • Detailed grid layout
  • Project descriptions
  • Hover effects
  • Filtering capabilities

Example Front Matter:

---
layout: portfolio/portfolio-grid-details
title: "Grid Portfolio with Details"
sub_title: "Aenean lacinia bibendum nulla sed consectetur"
portfolio_area:
  enable: true
  categories:
    - title: "Branding"
      filter: "branding"
    - title: "Corporate"
      filter: "corporate"
    - title: "Application"
      filter: "application"
    - title: "Video"
      filter: "video"
---

3. Masonry Portfolio Layout (masonry-portfolio.html)

Features:

  • Irregular grid layout
  • Dynamic sizing
  • Pinterest-like presentation

Example Front Matter:

---
layout: portfolio/portfolio-masonry
title: "Masonry Portfolio"
sub_title: "Nullam quis risus eget urna mollis"
portfolio_area:
  enable: true
  categories:
    - title: "Art"
      filter: "art"
    - title: "Creative"
      filter: "creative"
    - title: "Illustration"
      filter: "illustration"
---

4. Masonry Portfolio Details Layout (masonry-portfolio-details.html)

Features:

  • Detailed masonry layout
  • Project metadata
  • Lightbox integration

Example Front Matter:

---
layout: portfolio/portfolio-masonry-details
title: "Masonry Portfolio with Details"
sub_title: "Vestibulum id ligula porta felis"
portfolio_area:
  enable: true
  categories:
    - title: "Digital"
      filter: "digital"
    - title: "Print"
      filter: "print"
    - title: "Branding"
      filter: "branding"
---

5. Fullscreen Grid Layout (fullscreen-grid.html)

Features:

  • Full-width grid
  • Immersive project display
  • Minimal navigation

Example Front Matter:

---
layout: portfolio/portfolio-fullscreen-grid
title: "Fullscreen Grid Portfolio"
sub_title: "Maecenas sed diam eget risus"
portfolio_area:
  enable: true
  categories:
    - title: "Web"
      filter: "web"
    - title: "Mobile"
      filter: "mobile"
    - title: "Desktop"
      filter: "desktop"
---

6. Boxed Details Layout (box-item-details.html)

Features:

  • Contained project display
  • Detailed project information
  • Clean, professional look

Example Front Matter:

---
layout: portfolio/portfolio-boxed-details
title: "Boxed Portfolio Details"
sub_title: "Donec ullamcorper nulla non metus"
portfolio_area:
  enable: true
  categories:
    - title: "Enterprise"
      filter: "enterprise"
    - title: "Startup"
      filter: "startup"
    - title: "Innovation"
      filter: "innovation"
---

7. Portfolio Item Details (portfolio-item-details.html)

Features:

  • Traditional portfolio layout
  • Detailed case studies
  • Narrative-driven presentation

Example Front Matter:

---
layout: portfolio/portfolio-classic-details
title: "Portfolio Item Details"
sub_title: "Cras mattis consectetur purus sit amet"
portfolio_area:
  enable: true
  categories:
    - title: "Case Study"
      filter: "case-study"
    - title: "Project"
      filter: "project"
---

8. Mosaic Portfolio Layout (mosaic-portfolio.html)

Features:

  • Artistic, puzzle-like layout
  • Varied project sizes
  • Creative presentation

Example Front Matter:

---
layout: portfolio/portfolio-mosaic
title: "Mosaic Portfolio"
sub_title: "Fusce dapibus, tellus ac cursus commodo"
portfolio_area:
  enable: true
  categories:
    - title: "Experimental"
      filter: "experimental"
    - title: "Conceptual"
      filter: "conceptual"
    - title: "Innovative"
      filter: "innovative"
---

Portfolio Best Practices

  1. Use high-quality project images
  2. Provide clear, concise descriptions
  3. Showcase diverse project types
  4. Implement responsive design
  5. Use consistent styling

Performance Optimization

  • Optimize image sizes
  • Implement lazy loading
  • Use efficient CSS Grid/Flexbox
  • Minimize external resources

Accessibility Considerations

  • Alt text for images
  • Keyboard navigation
  • Color contrast
  • Screen reader support

Version Compatibility

Tested with:

  • Jekyll 4.x
  • Liquid 4.x