ELLO 👋 JEKYLL: A Jekyll vCard Theme

Ello is a simple animated Jekyll vCard theme by Randall, optimized for use with GitHub Pages (but can be used wherever Jekyll can live).

Based on a Dribbble by Riccardo Cavallo and a CodePen by Aaron Taylor.

Installation

Add this line to your Jekyll site's Gemfile:

gem "ello-jekyll-vcard-theme"

And add this line to your Jekyll site's _config.yml:

theme: ello-jekyll-vcard-theme

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-vcard-theme

Usage

If you install this theme as a gem, you'll be required to make your own index.html, _data/main.yaml, and data/details.yaml files. You can use the files included in this repository (which are originally came from my GitHub Pages site) as working example of what's required.

TL;DR

Use main.yaml to update the information on the contact-box with whatever you wish to display in the content-box area. Use details.yaml to list all the profiles you want to link to from your site.

main.yaml

  • hi - The main message displayed on the top of the contact-box. In the example provided, I'm using a secondary site.data.details.name variable to input my name; which can be further modified in the details.yaml file.

  • message - The secondary message displayed on the mid-section of the contact-box.

  • cta-button - The call-to-action message displayed on the button, which is then displayed in the contact-box.

  • cta-title - The message displayed when the contact-box is active.

details.yaml

  • name - Your name (only required if you're using the site.data.details.name variable)

  • avatar - Your GitHub avatar. Reference the jekyll-avatar repo for more information on how to use.

  • contact - Enter your information in the following format:

    • profile - Name of the Network, which will be displayed
    • network - Slug (short-name) of the Network, which is used to assign styles. See note below.
    • user-id - Your User-ID on the Network, which will be displayed as a subtitle.
    • link - Link to your profile on Network, which will be linked to the box.
    • icon - Link from Font-Awesome Icon Library, which will be displayed.

Note about STYLES

Currently ONLY the following Networks are supported (#HEX included):

  • email: #A3AAAE - iCloud's color
  • s(ecure)-email: #0091FF - Criptext's color
  • headmaster: #ff5555 - Headmaster's Color (...my Medium publication)
  • work: #bd93f9 - Conjured's Color (...where I work)
  • google: #4285f4
  • keybase: #4c8eff
  • github: #6e5494
  • gitlab: #fc6d26
  • bitbucket: #205081
  • medium: #00ab6c
  • dribbble: #ea4c89
  • behance: #1769ff
  • telegram: #0088CC
  • linkedin: #0077B5
  • angellist: #000
  • facebook: #3b5998
  • twitter: #1da1f2

In order to add more Networks, you must also add the network in _sass/componets/contact-box.scss. Starting on line 261, you should see the currently supported Networks listed. You can add the network anywhere you desire in the following format...

  &.<slug-from-details-yaml> {
    @include icon-styles($<network-variable-from-details-yaml>)
  }

You are more than welcome to add more with Jekyll's overide feature for Gem themes and/or contribute the modification to this theme's GitHub repository.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/ran-dall/ello-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in vcard.gemspec accordingly.

License

The theme is available as open source under the terms of the MIT License.