Commit 97237a7a authored by Alessio Parma's avatar Alessio Parma 🐔

new template

parent bf8bc3b4
*.gem
.bundle
.sass-cache
_site
Gemfile.lock
# Phantom Change Log
All notable changes to this project will be documented in this file.
# 1.1.1 - May, 04 2019
- Update pagination to fix [#14](https://github.com/jamigibbs/phantom/issues/14)
# 1.1.0 - May, 26 2018
- Fix [#6](https://github.com/jamigibbs/phantom/issues/6) & [#7](https://github.com/jamigibbs/phantom/issues/6) to enable pagination
- Conversion to Gem-based theme to fix [#8](https://github.com/jamigibbs/phantom/issues/8)
- Add code formatting and syntax highlighting
- Consolidate configuration to `_config.yml`
- Standardize a few variable names for clarity
- Fix image reference in posts
- Move `about.md`
- Rename _**this**_ file
- Update README as needed
# 1.0.2 - Apr 13, 2016
- Fomspree has been changed to secure connection (https)
# 1.0.1 - Feb 24, 2016
- Fixing Medium button conditional display
- Adding Google Analytics setting
# 1.0.0 - Feb 21, 2016
- Initial release
# frozen_string_literal: true
source "https://rubygems.org"
gemspec
The MIT License (MIT)
Copyright (c) 2016 Jami Gibbs
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
![Build Status](https://gitlab.com/pages/plain-html/badges/master/build.svg)
## Phantom for Jekyll
---
A minimalist, responsive portfolio theme for [Jekyll](http://jekyllrb.com/) with Bootstrap.
Example plain HTML site using GitLab Pages.
![preview](preview.jpg)
Learn more about GitLab Pages at https://pages.gitlab.io and the official
documentation https://docs.gitlab.com/ce/user/project/pages/.
[See it in action](http://jamigibbs.github.io/phantom/).
---
## Fancy using it for your own site?
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
Here are some steps to get you started:
- [GitLab CI](#gitlab-ci)
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
- [Did you fork this project?](#did-you-fork-this-project)
- [Troubleshooting](#troubleshooting)
1. Clone this repo and cd into the directory:
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
```bash
git clone https://github.com/jamigibbs/phantom.git your-dir-name && cd your-dir-name
```
## GitLab CI
2. Run Jekyll:
This project's static Pages are built by [GitLab CI][ci], following the steps
defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
```bash
bundle exec jekyll serve
```
_Don't have Jekyll yet? [Get `er installed then!](http://jekyllrb.com/docs/installation/)_
3. Visit in your browser at:
`http://127.0.0.1:4000`
## Launching with Github Pages :rocket:
Jekyll + Github pages is a marriage made in heaven. You can [use your own custom domain name](https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/) or use the default Github url (ie. http://username.github.io/repository) and not bother messing around with DNS settings.
## Theme Features
### Navigation
Navigation can be customized in `_config.yml` under the `nav_item` key. Default settings:
```yaml
nav_item:
- { url: '/', text: 'Home' }
- { url: '/about', text: 'About' }
```
image: alpine:latest
pages:
stage: deploy
script:
- echo 'Nothing to do...'
artifacts:
paths:
- public
only:
- master
Set the `nav_enable` variable to false in `_config.yml` to disable navigation.
### Contact Form
You can display a contact form within the modal window template. This template is already setup to use the [Formspree](https://formspree.io) 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:
```liquid
{% include contact.html %}
{% include contact-modal.html %}
```
The above example expects to put all your HTML files in the `public/` directory.
### Animation Effects
## GitLab User or Group Pages
Animations with CSS classes are baked into the theme. To animate a section or element, simply add the animation classes:
```html
<div id="about-me" class="wow fadeIn">
I'm the coolest!
</div>
```
To use this project as your user/group website, you will need one additional
step: just rename your project to `namespace.gitlab.io`, where `namespace` is
your `username` or `groupname`. This can be done by navigating to your
project's **Settings**.
For a complete list of animations, see the [animation list](http://daneden.github.io/animate.css/).
Read more about [user/group Pages][userpages] and [project Pages][projpages].
### 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:
```liquid
{% for post in paginator.posts %}
{% include post-content.html %}
{% endfor %}
{% include pagination.html %}
```
## Did you fork this project?
Read more about the [pagination plugin](http://jekyllrb.com/docs/pagination/).
If you forked this project for your own use, please go to your project's
**Settings** and remove the forking relationship, which won't be necessary
unless you want to contribute back to the upstream project.
## Credit
## Troubleshooting
* Bootstrap, http://getbootstrap.com/, (C) 2011 - 2016 Twitter, Inc., [MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)
1. CSS is missing! That means that you have wrongly set up the CSS URL in your
HTML files. Have a look at the [index.html] for an example.
* Wow, https://github.com/matthieua/WOW, (C) 2014 - 2016 Matthieu Aussaguel
, [GPL](https://github.com/matthieua/WOW#open-source-license)
[ci]: https://about.gitlab.com/gitlab-ci/
[index.html]: https://gitlab.com/pages/plain-html/blob/master/public/index.html
[userpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#user-or-group-pages
[projpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#project-pages
* Animate.css, https://github.com/daneden/animate.css, (C) 2016 Daniel Eden, [MIT](https://github.com/daneden/animate.css/blob/master/LICENSE)
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: "Hello. I'm Jami Gibbs."
email: '[email protected]'
description: "I'm a software developer and designer from Chicago creating useful things for the web."
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://jamigibbs.github.io/phantom" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: 'jamigibbs'
github_username: 'jamigibbs'
medium_username: 'blog.jamigibbs.com'
# Build settings
markdown: kramdown
# theme: phantom # Uncomment once published to RubyGems
plugins:
- jekyll-paginate-v2
############################################################
# Site configuration for the Jekyll 3 Pagination Gem
# The values here represent the defaults if nothing is set
pagination:
# Site-wide kill switch, disabled here it doesn't run at all
enabled: true
# Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
debug: false
# The default document collection to paginate if nothing is specified ('posts' is default)
collection: 'posts'
# How many objects per paginated page, used to be `paginate` (default: 0, means all)
per_page: 10
# The permalink structure for the paginated pages (this can be any level deep)
permalink: '/page/:num/' # Pages are index.html inside this folder (default)
#permalink: '/page/:num.html' # Pages are simple html files
#permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
# Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
title: ':title - page :num'
# Limit how many pagenated pages to create (default: 0, means all)
limit: 0
# Optional, defines the field that the posts should be sorted on (omit to default to 'date')
sort_field: 'date'
# Optional, sorts the posts in reverse order (omit to default decending or sort_reverse: true)
sort_reverse: true
# Optional, the default category to use, omit or just leave this as 'posts' to get a backwards-compatible behavior (all posts)
category: 'posts'
# Optional, the default tag to use, omit to disable
tag: ''
# Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts,
# in reality this can be any value, suggested are the Microsoft locale-codes (e.g. en_US, en_GB) or simply the ISO-639 language code )
locale: ''
# Optional,omit or set both before and after to zero to disable.
# Controls how the pagination trail for the paginated pages look like.
trail:
before: 2
after: 2
# Optional, the default file extension for generated pages (e.g html, json, xml).
# Internally this is set to html by default
extension: html
# Optional, the default name of the index file for generated pages (e.g. 'index.html')
# Without file extension
indexpage: 'index'
############################################################
### Phantom settings
footer_text: '© 2018 Jami Gibbs'
admin_name: 'Jami Gibbs'
google_analytics: "UA-9999999-99" # Update with your own tracking ID
enable_contact: false
#### Phantom Navigation menu
enable_nav: true
nav_item:
- { url: '/', text: 'Home' }
- { url: '/about', text: 'About' }
<div id="contact" class="modal fade" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<form class="form-horizontal form-contact clearfix" action="https://formspree.io/[email protected]" method="POST">
<div class="form-group">
<label class="message-label">Dear Jami,</label>
<textarea class="message form-control" rows="8" name="body" placeholder="Type your message..."></textarea>
</div>
<div class="form-group">
<label for="name">Sincerely,</label>
<input type="name" class="name form-control" placeholder="Your Name">
<label for="email" class="sr-only">Email</label>
<input type="email" class="email form-control" name="_replyto" placeholder="Your Email">
</div>
<input type="submit" class="btn btn-default" style="float-right" value="Send">
</form>
</div>
</div>
</div>
</div>
<a data-toggle="modal" data-target="#contact"> Why not get in touch?</a>
<div class="content-wrap">
<div class="row">
<div class="col-xs-12 col-md-6">
{% include post-content.html %}
</div>
<div class="col-xs-12 col-md-6">
{% include featured-image.html %}
</div>
</div>
</div>
<div class="content-wrap">
<div class="row">
<div class="col-xs-12 col-md-6">
{% include featured-image.html %}
</div>
<div class="col-xs-12 col-md-6">
{% include post-content.html %}
</div>
</div>
</div>
{% if post.featured_image %}
<img class="img-responsive" src="{{ post.featured_image }}" title="{{ post.title }}">
{% endif %}
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-2 col-md-offset-1">
<p class="text-muted text-left "><a href="{{ site.url }}">{{ site.footer_text }}</a></p>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-2">
<a class="section-jump" href="#top">
<i class="fa fa-angle-up fa-3x"></i>
</a>
</div>
</div>
</div>
</footer>
</div><!-- .main.container -->
<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="{{ site.url }}/js/wow.min.js"></script>
<script src="{{ site.url }}/js/app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', ' {{ site.google_analytics }}', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
<!doctype html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<title>{% if page.title %}{{ page.title }} - {{ site.title }}{% elsif post.title %}{{ post.title }} - {{ site.title }}{% else %}{{ site.title }} - {{ site.description }}{% endif %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="{{ site.title }} - {{ site.description }}" href="{{ site.url }}/feed.xml">
<link rel="alternate" type="application/atom+xml" title="{{ site.title }} - {{ site.description }}" href="{{ site.url }}/atom.xml">
<!-- Favicons -->
<link rel="icon" href="{{ site.url }}/img/favicon.png">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700|Merriweather:400,300,300italic,400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Styles -->
<link rel="stylesheet" href="{{ "/css/animate.min.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
</head>
<body class="{{ post.title | downcase | replace:' ','-' | replace:',','' | strip_html }}{% if page.category %} category-{{ page.category }}{% endif %}{% if page.layout-class %} layout-{{ page.layout-class }}{% endif %}">
<div class="main container" id="top">
{% if site.enable_nav == true %}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">{{ site.admin_name }}</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% for item in site.nav_item %}
<li>
<a href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
{% endif %}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="hero-container">
<div class="hero-content">
{% if site.title != '' %}
<h1 class="text-center">{{site.title}}</h1>
{% endif %}
{% if site.description != '' or site.enable_contact == true %}
<p class="text-center">
{% if site.description != '' %}
{{site.description}}
{% endif %}
{% if site.enable_contact == true %}
{% include contact.html %}
{% include contact-modal.html %}
{% endif %}
</p>
{% endif %}
<div class="hero-buttons">
{% if site.twitter_username != '' %}
<a href="https://twitter.com/{{ site.twitter_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-twitter fa-lg"></i>Twitter</button></a>
{% endif %}
{% if site.github_username != '' %}
<a href="https://github.com/{{ site.github_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-github fa-lg"></i>Github</button></a>
{% endif %}
{% if site.medium_username != '' %}
<a href="https://{{ site.medium_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-medium fa-lg"></i>Medium</button></a>
{% endif %}
</div>
</div>
</div>
<a class="section-jump text-center" href="#portfolio">
<i class="fa fa-angle-down fa-3x"></i>
</a>
</div>
</div>
</div>
{% if paginator.total_pages > 1 %}
<nav class="pagination-wrap">
<ul class="pagination">
{% if paginator.previous_page %}
<li>
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
{% endif %}
{% if paginator.page_trail %}
{% for trail in paginator.page_trail %}
<li {% if page.url == trail.path %}class="active"{% endif %}>
<a href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}">{{ trail.num }}</a>
</li>
{% endfor %}
{% endif %}
{% if paginator.next_page %}
<li>
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
<div class="content">
<h3 class="title">{{ post.title }}</h3>
<p class="excerpt">{{ post.lead_text }}</p>
{% if post.project_link != empty %}
<a href="{{ post.project_link }}" class="project-link"><button class="btn btn-default btn-lg"><i class="fa fa-{{post.button_icon}} fa-lg"></i>{{post.button_text}}</button></a>
{% endif %}
{% if post.tags != empty %}
<div class="tags">
{% for tag in post.tags %}
<span>{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
<!-- {% if post.categories != empty %}
<div class="categories">
{% for category in post.categories %}
<span>{{ category }}</span>
{% endfor %}
</div>
{% endif %} -->
</div>
{% include header.html %}
{% include title-group.html %}
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
{% for post in paginator.posts %}
{% include tile.html %}
{% endfor %}
{% include pagination.html %}
</div>
</div>
</div>
</main>
{% include footer.html %}
{% include header.html %}
{% include home-hero.html %}
<main id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
{% if site.section_title != '' %}
<h2 class="section-title text-center">{{ site.section_title }}</h2>
{% endif %}
{% if site.section_subtitle != '' %}
<p class="section-subtitle text-center">{{ site.section_subtitle }}</p>
{% endif %}
<div class="break"></div>
{% for post in paginator.posts %}
<div class="wow fadeIn">
{% if post.position == "left" %}
{% include content-left.html %}
{% endif %}
{% if post.position == "right" %}
{% include content-right.html %}
{% endif %}
</div>
{% endfor %}
{% include pagination.html %}
</div>