jekyll-theme-portfolio 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 047ef6298a3c5943e7941ac7a7881577785eb7d1
+  data.tar.gz: 63e3840292c2235f72a87d25d2d144d191b83178
+SHA512:
+  metadata.gz: 591c85df6e5cb7c33bd625867760cc9082651f5e52b88fa498917b2c4f5cc86af2ca1ee3625ecf75b48e78fc04025195ea2dade7b9f239701ff6dbdce66611be
+  data.tar.gz: f6ae3964aa4a4c4eac3add0a2a9fda0821f1bc63d3b6b048a8c42dcda546173283622ab17ed9f29aaf31497ca61c9c150605f60c28c823ff6005a749aff181de

data/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Nicolas Vanhoren
+
+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.

data/README.md

@@ -0,0 +1,19 @@
+# Portfolio Page for Github Pages
+
+The goal of this project is to make it easy for people who want to host their portfolio to actually do so without having to jump through a ton of hoops or pay any money. I originally made this for [my own portfolio](https://projects.tedivm.com/) after realizing that all the existing portfolio themes were expensive or required extensive customization.
+
+This project is a [Jekyll](https://jekyllrb.com/) theme, which means that it can be used to set up a free website on [Github Pages](https://pages.github.com/).
+
+It is possible to use this theme without understanding anything about building websites. It works by using a configuration file to store all of your projects, which it then displays (including logos, descriptions, and a variety of links). This way when you want to add a new project all you have to do is add a few lines to a configuration and it will appear.
+
+It is also possible to go beyond that and customize the project right down to the CSS. This theme is made with [Bootstrap 4](https://getbootstrap.com/) and [SCSS](https://sass-lang.com/documentation/syntax).
+
+
+# Awknowledgements
+
+This project was forked off of the excellent [Boostrap 4 Github Pages project](https://github.com/nicolas-van/bootstrap-4-github-pages).
+
+* A full Bootstrap 4 theme usable both on Github Pages and with a standalone Jekyll.
+* Recompiles Bootstrap from SCSS files, which allows to customize Bootstrap's variables and use Bootstrap themes.
+* Full support of Bootstrap's JavaScript plugins.
+* Supports all features of Github Pages and Jekyll.

data/_includes/footer.html

@@ -0,0 +1,57 @@
+
+<div class="py-5 border-top">
+  <div class="container">
+
+
+    <div class="row">
+
+      <div class="col-sm">
+        <ul class="list-unstyled">
+          <li>
+            {%- if site.author -%}
+              {{ site.author | escape }}
+            {%- else -%}
+              {{ site.description | escape }}
+            {%- endif -%}
+          </li>
+          {%- if site.email -%}
+            <li>
+              <a href="mailto:{{ site.email }}">
+                {{ site.email }}
+              </a>
+            </li>
+          {%- endif -%}
+        </ul>
+      </div>
+
+      <div class="col-sm text-right">
+        {% if site.tagline %}<p>{{- site.tagline | escape -}}</p>{% endif %}
+      </div>
+
+    </div>
+
+  </div>
+</div>
+
+
+{% if site.fathom_key %}
+  <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+  <script>
+  (function(f, a, t, h, o, m){
+    a[h]=a[h]||function(){
+      (a[h].q=a[h].q||[]).push(arguments)
+    };
+    o=f.createElement('script'),
+    m=f.getElementsByTagName('script')[0];
+    o.async=1; o.src=t; o.id='fathom-script';
+    m.parentNode.insertBefore(o,m)
+  {% if site.fathom_domain -%}
+  })(document, window, '//{{ site.fathom_domain }}/tracker.js', 'fathom');
+  {%- else -%}
+  })(document, window, '//stats.usefathom.com/tracker.js', 'fathom');
+  {%- endif %}
+  fathom('set', 'siteId', '{{ site.fathom_key }}');
+  fathom('trackPageview');
+  </script>
+  <!-- / Fathom -->
+{%- endif -%}

data/_includes/head.html

@@ -0,0 +1,12 @@
+<head>
+ <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {%- seo -%}
+  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+  {%- feed_meta -%}
+  <script defer src="{{ "/assets/javascript/bootstrap/jquery.min.js" | relative_url }}"></script>
+  <script defer src="{{ "/assets/javascript/bootstrap/bootstrap.bundle.min.js" | relative_url }}"></script>
+  <script defer src="https://buttons.github.io/buttons.js" integrity="sha384-szBDCttiBKEqclgvjfm0xu/GOyoGJH3pVG2Ptr69bXpDc9ZU0Ed0BYkeZZ98F7Ym" crossorigin="anonymous"></script>
+</head>

data/_includes/header.html

@@ -0,0 +1,43 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <div class="container">
+    <a class="navbar-brand" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+
+    {%- assign page_paths = site.header_pages -%}
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav ml-auto">
+        {%- for path in page_paths -%}
+          {%- assign my_page = site.pages | where: "path", path | first -%}
+          {%- if my_page.title -%}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+          </li>
+          {%- endif -%}
+        {% endfor -%}
+        {% if site.homepage %}
+        <li class="nav-item">
+          <a class="nav-link" href="{{ site.homepage }}" aria-label="Go to homepage"><i class="fas fa-home fa-2x" title="Go to homepage."></i></a>
+        </li>
+        {% endif %}
+        {% if site.github_username %}
+        <li class="nav-item">
+          <a class="nav-link" href="https://github.com/{{ site.github_username }}" aria-label="Follow @{{ site.github_username }} on Github"><i class="fab fa-github fa-2x" title="Follow @{{ site.github_username }} on Github"></i></a>
+        </li>
+        {% endif %}
+        {% if site.twitter_username %}
+        <li class="nav-item">
+          <a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" aria-label="Follow @{{ site.twitter_username }} on Twitter"><i class="fab fa-twitter fa-2x" title="Follow @{{ site.twitter_username }} on Twitter"></i></a>
+        </li>
+        {% endif %}
+        {% if site.linkedin_username %}
+        <li class="nav-item">
+          <a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}/" aria-label="Follow @{{ site.linkedin_username }} on LinkedIn"><i class="fab fa-linkedin fa-2x" title="Follow @{{ site.linkedin_username }} on LinkedIn"></i></a>
+        </li>
+        {% endif %}
+      </ul>
+    </div>
+  </div>
+</nav>

data/_layouts/default.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body>
+
+    {%- include header.html -%}
+
+    <div class="py-5">
+      <div class="container page-content">
+          {{ content }}
+      </div>
+    </div>
+
+    {%- include footer.html -%}
+
+  </body>
+
+</html>

data/_layouts/home.html

@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+<div>
+
+  {%- if page.title -%}
+  <header>
+    <h1>{{ page.title }}</h1>
+  </header>
+  {%- endif -%}
+
+  <section>
+    {{ content }}
+  </section>
+
+  {%- if site.posts.size > 0 -%}
+    <p class="h4">{{ page.list_title | default: "Posts" }}</p>
+    <ul class="list-unstyled">
+      {%- for post in site.posts -%}
+      <li>
+        <span class="text-muted">
+          {%- assign date_format = "%b %-d, %Y" -%}
+          {{ post.date | date: date_format }}
+        </span>
+        <p class="h5">
+          <a href="{{ post.url | relative_url }}">
+            {{ post.title | escape }}
+          </a>
+        </p>
+        {%- if site.show_excerpts -%}
+          {{ post.excerpt }}
+        {%- endif -%}
+      </li>
+      {%- endfor -%}
+    </ul>
+
+    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
+  {%- endif -%}
+
+</div>

data/_layouts/page.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+<article>
+  {% if page.title %}
+  <header>
+    <h1>{{ page.title | escape }}</h1>
+  </header>
+  {% endif %}
+  <section>
+    {{ content }}
+  </section>
+</article>

data/_layouts/portfolio.html

@@ -0,0 +1,66 @@
+---
+layout: page
+---
+{{ content }}
+{% for category in site.data.projects %}
+<div class='row'>
+  <div class='col-12 my-3'>
+    <h3>{{ category.name }}</h3>
+    {% if category.description %}
+    <div class="alert alert-light">{{ category.description | safe | newline_to_br }}</div>
+    {% endif %}
+    {%- assign columns = 3 -%}
+    {% for project in category.projects %}
+      {% assign loop = forloop.index | minus: 1 | modulo: columns %}
+      {% if loop == 0 %}
+      <div class="row">
+      {% endif %}
+        <div class="col-12 col-sm-6 col-xl-{{ 12 | divided_by: columns | int }} my-3">
+          <div class="card">
+            <div class="text-center">
+            {% if project.image %}
+              <img src="{{ "/assets/images/projects" | relative_url }}/{{ project.image }}" class="py-1 w-50 card-img-top" alt="{{ project.name }} Project Logo">
+            {% elsif project.icon %}
+              <i class="{{ project.icon}} fa-10x py-2 logo-icon"></i><br><br>
+            {% elsif category.image %}
+              <img src="{{ "/assets/images/projects" | relative_url }}/{{ category.image }}" class="py-1 w-50 card-img-top" alt="{{ project.name }} Project Logo">
+            {% elsif category.icon %}
+              <i class="{{ category.icon}} fa-10x py-2 logo-icon"></i><br><br>
+            {% else %}
+              <i class="fas fa-code-branch fa-10x py-2 logo-icon"></i><br><br>
+            {% endif %}
+            </div>
+            <div class="card-body">
+              <h5 class="card-title">{{ project.name }}
+              {% if project.github %}
+              <div class="float-right"><a class="github-button" href="https://github.com/{{ project.github }}" data-show-count="true" aria-label="Star {{ project.name }} on GitHub">Star</a><div>
+              {% endif %}
+              </h5>
+              {% if project.description %}
+              <p class="card-text">{{ project.description | safe | newline_to_br }}</p>
+              {% endif %}
+            </div>
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item text-center">
+                {% if project.homepage %}<a href="{{ project.homepage }}" class="card-link"><i class="fas fa-home fa-2x" title="{{ project.name }} Homepage"></i></a>{% endif %}
+                {% if project.documentation %}<a href="{{ project.documentation }}" class="card-link"><i class="fas fa-book-open fa-2x" title="{{ project.name }} Documentation"></i></a>{% endif %}
+                {% if project.github %}<a href="https://github.com/{{ project.github }}" class="card-link"><i class="fab fa-github fa-2x" title="{{ project.name }} on Github"></i></a>{% endif %}
+                {% if project.dockerhub %}<a href="https://hub.docker.com/r/{{ project.dockerhub }}" class="card-link"><i class="fab fa-docker fa-2x" title="{{ project.name }} on Docker Hub"></i></a>{% endif %}
+                {% if project.puppet_forge %}<a href="https://forge.puppet.com/{{ project.puppet_forge }}" class="card-link"><i class="fas fa-flask fa-2x" title="{{ project.name }} on Puppet Forge"></i></a>{% endif %}
+                {% if project.npm %}<a href="https://www.npmjs.com/package/{{ project.npm }}" class="card-link"><i class="fab fa-npm fa-2x" title="{{ project.name }} on the NPM Registry"></i></a>{% endif %}
+                {% if project.pypi %}<a href="https://pypi.org/project/{{ project.pypi }}/" class="card-link"><i class="fab fa-python fa-2x" title="{{ project.name }} on PyPI"></i></a>{% endif %}
+                {% if project.packagist %}<a href="https://packagist.org/packages/{{ project.packagist }}" class="card-link"><i class="fab fa-php fa-2x" title="{{ project.name }} on Packagist"></i></a>{% endif %}
+                {% if project.wordpress %}<a href="https://wordpress.org/plugins/{{ project.wordpress }}/" class="card-link"><i class="fab fa-wordpress fa-2x" title="{{ project.name }} on the Wordpress Plugin Directory"></i></a>{% endif %}
+              </li>
+            </ul>
+          </div>
+        </div>
+      {%- assign last_loop = columns | minus: 1 -%}
+      {% if loop == last_loop or forloop.last == true %}
+      </div>
+      {%- endif -%}
+    {%- endfor -%}
+  </div>
+</div>
+
+{% endfor %}

data/_layouts/post.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+<article>
+
+  <header>
+    <h1>{{ page.title | escape }}</h1>
+    <p class="text-muted">
+      <time datetime="{{ page.date | date_to_xmlschema }}">
+        {%- assign date_format = "%b %-d, %Y" -%}
+        {{ page.date | date: date_format }}
+      </time>
+      {%- if page.author -%}
+        • {{ page.author }}
+      {%- endif -%}
+    </p>
+  </header>
+
+  <section>
+    {{ content }}
+  </section>
+
+</article>

data/_sass/_bootstrap_customization.scss

@@ -0,0 +1,332 @@
+// This is the place to place Bootstrap-related CSS customizations.
+// As example you can start by importing the _bootswatch.scss file from one of the
+// theme provided by https://bootswatch.com .
+
+// Minty 4.3.1
+// Bootswatch
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Montserrat" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.navbar {
+  font-family: $headings-font-family;
+}
+
+.bg-dark {
+  background-color: $secondary !important;
+}
+
+.border-dark {
+  border-color: $secondary !important;
+}
+
+// Buttons =====================================================================
+
+.btn {
+  font-family: $headings-font-family;
+
+  &,
+  &:hover {
+    color: $white;
+  }
+
+  &-light,
+  &-light:hover {
+    color: $gray-700;
+  }
+
+  &-link,
+  &-link:hover {
+    color: $primary;
+  }
+
+  &-link.disabled:hover {
+    color: $gray-600;
+  }
+
+  &-outline-primary {
+    color: $primary;
+  }
+
+  &-outline-secondary {
+    color: $secondary;
+  }
+
+  &-outline-success {
+    color: $success;
+  }
+
+  &-outline-info {
+    color: $info;
+  }
+
+  &-outline-warning {
+    color: $warning;
+  }
+
+  &-outline-danger {
+    color: $danger;
+  }
+
+  &-outline-dark {
+    color: $dark;
+  }
+
+  &-outline-light {
+    color: $light;
+  }
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+.table {
+
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+
+  &-primary {
+    &, > th, > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &, > th, > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-light {
+    &, > th, > td {
+      background-color: $light;
+    }
+  }
+
+  &-dark {
+    &, > th, > td {
+      background-color: $dark;
+    }
+  }
+
+  &-success {
+    &, > th, > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &, > th, > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &, > th, > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &, > th, > td {
+      background-color: $warning;
+    }
+  }
+
+  &-active {
+    &, > th, > td {
+      background-color: $table-active-bg;
+    }
+  }
+
+  &-hover {
+
+    .table-primary:hover {
+      &, > th, > td {
+        background-color: darken($primary, 5%);
+      }
+    }
+
+    .table-secondary:hover {
+      &, > th, > td {
+        background-color: darken($secondary, 5%);
+      }
+    }
+
+    .table-light:hover {
+      &, > th, > td {
+        background-color: darken($light, 5%);
+      }
+    }
+
+    .table-dark:hover {
+      &, > th, > td {
+        background-color: darken($dark, 5%);
+      }
+    }
+
+    .table-success:hover {
+      &, > th, > td {
+        background-color: darken($success, 5%);
+      }
+    }
+
+    .table-info:hover {
+      &, > th, > td {
+        background-color: darken($info, 5%);
+      }
+    }
+
+    .table-danger:hover {
+      &, > th, > td {
+        background-color: darken($danger, 5%);
+      }
+    }
+
+    .table-warning:hover {
+      &, > th, > td {
+        background-color: darken($warning, 5%);
+      }
+    }
+
+    .table-active:hover {
+      &, > th, > td {
+        background-color: $table-active-bg;
+      }
+    }
+  }
+
+  .thead-dark th {
+    background-color: $primary;
+    border-color: $table-border-color;
+    font-family: $headings-font-family;
+  }
+}
+
+// Forms =======================================================================
+
+legend {
+  font-family: $headings-font-family;
+}
+
+// Navs ========================================================================
+
+.dropdown-menu {
+  font-family: $font-family-sans-serif;
+}
+
+.breadcrumb {
+  a {
+    color: $navbar-dark-color;
+  }
+
+  a:hover {
+    color: $white;
+    text-decoration: none;
+  }
+}
+
+// Indicators ==================================================================
+
+.alert {
+  color: $white;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+
+  a,
+  .alert-link {
+    color: $white;
+  }
+
+  &-primary {
+    &, > th, > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &, > th, > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-success {
+    &, > th, > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &, > th, > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &, > th, > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &, > th, > td {
+      background-color: $warning;
+    }
+  }
+
+  &-dark {
+    &, > th, > td {
+      background-color: $dark;
+    }
+  }
+
+  &-light {
+    &, > th, > td {
+      background-color: $light;
+    }
+  }
+
+  &-light {
+    &,
+    & a:not(.btn),
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  color: $white;
+
+  &-light {
+    color: $gray-700;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.card,
+.list-group-item {
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+}
+
+.logo-icon {
+  color: $gray-800;
+}