Skip to content

Latest commit

 

History

History
93 lines (56 loc) · 2.84 KB

README.md

File metadata and controls

93 lines (56 loc) · 2.84 KB
Raw

Phantom for Jekyll

A minimalist, responsive portfolio theme for Jekyll with Bootstrap.

preview

See it in action on my own portfolio site.

Fancy using it for your own site?

Here are some steps to get you started:

  1. Clone this repo and cd into the directory:

git clone https://github.com/jamigibbs/phantom.git your-dir-name cd your-dir-name

  1. Run Jekyll:

jekyll serve --watch

Don't have Jekyll yet? Get `er installed then!

  1. Visit in your browser at:

http://127.0.0.1:4000

Launching with Github Pages 🚀

Jekyll + Github pages is a marriage made in heaven. You can use your own custom domain name or use the default Github url (ie. http://username.github.io/repository) and not bother messing around with DNS settings.

Theme Features

Navigation

To activate a navigation bar in the header, set the global nav variable to true in:

/_data/global.yml

Then add your navigation items in the /_data/nav.yml file. For example:

main:
    - { url: '/', text: 'Home' }
    - { url: '/about', text: 'About' }

Contact Form

You can display a contact form within the modal window template. This template is already setup to use the Formspree email system. You'll just want to add your email address to the form in /_includes/contact-modal.html.

Place the modal window template in any place you'd like the user to click for the contact form. The template will display a link to click for the contact form modal window:

{% include contact.html %}
{% include contact-modal.html %}

Animation Effects

Animations with CSS classes are baked into the theme. To animate a section or element, simply add the animation classes:

<div id="about-me" class="wow fadeIn">
  I'm the coolest!
</div>

For a complete list of animations, see the animation list.

Pagination

By default, pagination on the home page will activate after 10 posts. You can change this within _config.yml. You can add the pagination to other layouts with:

  {% for post in paginator.posts %}
    {% include post-content.html %}
  {% endfor %}

  {% include pagination.html %}

Read more about the pagination plugin.

Credit