Commit 14425c88 authored by Alessio Parma's avatar Alessio Parma 🐔

hugo template

parent 5e11dcec
*.gem
.bundle
.sass-cache
_site
Gemfile.lock
# Created by https://www.gitignore.io/api/hugo
# Edit at https://www.gitignore.io/?templates=hugo
### Hugo ###
# Generated files by hugo
/public/
/resources/_gen/
# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux
# End of https://www.gitignore.io/api/hugo
[submodule "themes/hugo-coder"]
path = themes/hugo-coder
url = https://github.com/luizdepra/hugo-coder.git
# 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.
## Phantom for Jekyll
A minimalist, responsive portfolio theme for [Jekyll](http://jekyllrb.com/) with Bootstrap.
![preview](preview.jpg)
[See it in action](http://jamigibbs.github.io/phantom/).
## Fancy using it for your own site?
Here are some steps to get you started:
1. Clone this repo and cd into the directory:
```bash
git clone https://github.com/jamigibbs/phantom.git your-dir-name && cd your-dir-name
```
2. Run Jekyll:
```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' }
```
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 %}
```
### Animation Effects
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>
```
For a complete list of animations, see the [animation list](http://daneden.github.io/animate.css/).
### 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 %}
```
Read more about the [pagination plugin](http://jekyllrb.com/docs/pagination/).
## Credit
* Bootstrap, http://getbootstrap.com/, (C) 2011 - 2016 Twitter, Inc., [MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Wow, https://github.com/matthieua/WOW, (C) 2014 - 2016 Matthieu Aussaguel
, [GPL](https://github.com/matthieua/WOW#open-source-license)
* 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 Alessio Parma."
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: "https://pommalabs.xyz" # 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: '© 2019-2020 Alessio Parma'
admin_name: 'Alessio Parma'
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>
</div>
</div>
</main>
{% include footer.html %}
{% include header.html %}
<article>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}