Eva: Jekyll theme for artist’s portfolio

To start:

  • Add "jekyll-theme-eva" gem to your Gemfile
  • Specify "jekyll-theme-eva" theme in your site configuration
  • Drop theme’s _plugins directory into your site base directory — see issue #3
  • Drop theme’s _includes/_responsive_image.html into your site’s _includes — see issue #3
  • Add theme configuration to _config.yml
  • Create _data/albums and populate it with album data

Note: uses plugins and Node (Webpack), so not suitable for GitHub Pages auto-build.

See in action: Illustrator’s site and its source.

Configuration (in _config.yml)

Set these to your liking:

# This will be shown everywhere, required
title_name:

# This will be included in website data,
# may be useful for search engines & social sharing
full_name:
given_name:
family_name:
additional_name:

# Also useful for search engines & social sites. Keep under 255 characters
description: Vector ink & illustration
job_title:

tagline: artist’s jekyll theme
# 3-4 words

url: https://example.com/

phone_number: +1234567890

social:
  links:
    - https://www.instagram.com/<your username>/
    - https://<your username>.tumblr.com/
# Supported social links: Facebook, Instagram, Tumblr, Twitter, Github.

email: [email protected]
# Or, for spam protection (TODO: automate email encoding):
# email_encoded: <encoded string>
# key: <crypto key>

# google_site_verification: <string>
# google_analytics_code: <string with dashes, usually begins with UA>

# Language in the format outlined here:
# https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
language: en

Add these as is:

plugins:
  - jekyll-responsive-image

responsive_image:
  template: _includes/_responsive_image.html
  sizes:
    - width: 480
      quality: 80
    - width: 800

Album data structure (in _data/)

(- albums/)
  - <album 1 name>/
    - about.yml
    - symbol.png
    - artwork/
      - <artwork 1 name>/
        - about.yml
        - <image file name>.svg
      - <artwork 2 name>/
        - about.yml
        - <image file name>.svg

Album symbols should have equal sides (look OK if resized to fit in a square).

Album data expected in its about.yaml:

# -- This is shown to the visitor:
title: Album Title
description: Briefly about this

# -- This appears in HTML meta,
#    and may be used & made visible by search engines:
seo:
  description: Briefly about this, possibly other phrasing than above

# -- This appears in URLs:
name: album-name

# -- This determines appearance of the album on home page:
priority: 1  # Ordering relative to other album(s)
home_nav_icon_style: inset  # supported: inset, full-bleed

# -- This determines how album page is laid out:
artwork_list_style: inset multi-column
# supported: inset multi-column, full-bleed one-column

Artwork data expected in its about.yaml is just name and title, in same YAML format.

Customization

  • Place favicon.svg, favicon.png (64x64px), [email protected] into your site root
  • Place custom logo/mascot code into _includes/head_symbol_home.html
  • Create assets/css/style.scss with variables and custom styling rules. (Place variables before @import 'jekyll-theme-eva';, custom rules after)