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 thecontact-box.
In the example provided, I'm using a secondarysite.data.details.name
variable to input my name; which can be further modified in thedetails.yaml
file.message
- The secondary message displayed on the mid-section of thecontact-box.
cta-button
- The call-to-action message displayed on the button, which is then displayed in thecontact-box
.cta-title
- The message displayed when thecontact-box
is active.
details.yaml
name
- Your name (only required if you're using thesite.data.details.name
variable)avatar
- Your GitHub avatar. Reference thejekyll-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 displayednetwork
- 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.