Temporarily remove blog link as that part is not finished

.gitignore

@@ -0,0 +1 @@
+/public

config.toml

@@ -7,8 +7,6 @@ compile_sass = true
 # Whether to build a search index to be used later on by a JavaScript library
 build_search_index = true
 
-theme = "juice"
-
 taxonomies = [
   { name = "tags", paginate_by = 10 },
 ]
@@ -17,13 +15,13 @@ taxonomies = [
 # Whether to do syntax highlighting
 # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
 highlight_code = true
+highlight_theme = "inspired-github"
 
 [extra]
 juice_logo_name = "penguincoder"
 juice_logo_path = "tux.png"
 juice_exclude_menu = []
 juice_extra_menu = [
-  { title = "Blog", link = "/blog" },
-  { title = "Resume", link = "/resume" },
+#  { title = "Blog", link = "/blog" },
 ]
 repository_url = "https://git.penguincoder.org/penguincoder/penguincoder-org"

content/_index.md

@@ -1,25 +1,43 @@
 +++
 title = "penguincoder"
 description = "About me"
+sort_by = "weight"
 +++
 
+This is my personal site. Check out my [resume](/resume) if you need an experienced software engineer. You can also read about the software and open-source licenses I used to produce this site on the [about](/about) page.
+
 # Social Media
 
-[{{ icon(name="git-alt") }}](https://git.penguincoder.org/penguincoder)
-[{{ icon(name="github") }}](https://github.com/penguincoder)
-[{{ icon(name="stack-overflow") }}](https://stackoverflow.com/users/812879/penguincoder)
-[{{ icon(name="keybase") }}](https://keybase.io/penguincoder)
-[{{ icon(name="reddit") }}](https://reddit.com/u/therealpenguincoder)
-[{{ icon(name="twitter") }}](https://twitter.com/penguincoder)
-[{{ icon(name="mastodon") }}](https://hachyderm.io/@penguincoder)
-[{{ icon(name="linkedin") }}](https://www.linkedin.com/in/andrew-coleman-1238834/)
-[{{ icon(name="instagram") }}](https://www.instagram.com/penguincoder)
+<div id="social-media-links">
+    <a href="https://git.penguincoder.org/penguincoder" title="Gitea">
+        <img src="/gitea-logo.svg" alt="Gitea" />
+    </a>
+    <a href="https://github.com/penguincoder" title="Github">
+        <img src="/icons8-github.svg" alt="Github" />
+    </a>
+    <a href="https://stackoverflow.com/users/812879/penguincoder" title="Stack Overflow">
+        <img src="/icons8-stack-overflow.svg" alt="Stack Overflow" />
+    </a>
+    <a href="https://keybase.io/penguincoder" title="Keybase">
+        <img src="/icons8-keybase2.svg" alt="Keybase" />
+    </a>
+    <a href="https://reddit.com/u/therealpenguincoder" title="Reddit">
+        <img src="/icons8-reddit.svg" alt="Reddit" />
+    </a>
+    <a href="https://twitter.com/penguincoder" title="Twitter">
+        <img src="/icons8-twitter-circled.svg" alt="Twitter" />
+    </a>
+    <a href="https://hachyderm.io/@penguincoder" title="Mastodon">
+        <img src="/icons8-mastodon.svg" alt="Mastodon" />
+    </a>
+    <a href="https://www.linkedin.com/in/andrew-coleman-1238834/" title="LinkedIn">
+        <img src="/icons8-linkedin.svg" alt="LinkedIn" />
+    </a>
+    <a href="https://www.instagram.com/penguincoder" title="Instagram">
+        <img src="/icons8-instagram.svg" alt="Instagram" />
+    </a>
+</div>
 
 # Github Activity
 
 ![Github Activity](https://github-readme-stats.vercel.app/api?username=penguincoder&count_private=true&theme=transparent&show_icons=true)
-
-# [Resume](/resume)
-
-# [Blog](/blog)
-

content/about.md

@@ -0,0 +1,44 @@
++++
+title = "About"
+description = "About"
+weight = 10
++++
+
+# Juice
+
+**[Juice](https://juice.huhu.io/)** is an intuitive, elegant, and responsive Zola theme for product sites.
+Built by [Huhu.io](https://huhu.io), adopted by a several product sites.
+
+Juice is released under the MIT license.
+
+<pre>
+MIT License
+
+Copyright (c) 2020 Huhu
+
+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.
+</pre>
+
+# Zola
+
+[Zola](https://www.getzola.org) is a fast static site generator in a single binary with everything built-in.
+
+# icons8
+
+We use several [icons8](https://icons8.com) images throughout the site.

content/resume.md

@@ -0,0 +1,84 @@
++++
+title = "Resume"
+description = "A history of professional, educational, and personal interests"
+weight = 1
++++
+
+# Summary
+
+I am a polyglot developer with considerable experience in Ruby and Rails and bash. I excel at documenting critical technical processes for other engineers, being a force multiplier, and mentoring other developers. I am very passionate about finding new and creative ways to automate deployments in cloud environments so that business value can be delivered quickly and efficiently.
+
+# Work History
+
+## OysterHR, Remote
+
+### Tech Lead & Staff Software Engineer
+
+September 2021 - 20 January 2023
+
+* Designed and implemented a reproducible and identical local stack across Linux and macOS using `nix`, `direnv`, `just`, and `supervisord`
+    * Single-handedly reduced new engineer onboarding time to about 2 hours
+* Supported the entire engineering department with the local development environment in both Linux and macOS
+* Rewrote the git-hosted markdown documentation into a complete tutorial and walkthrough to onboard new developers using Notion
+* Designed complex data structures for use in all countries serviced by Oyster
+* Developed policies and best practices for features across multiple teams and stakeholders, including product
+* Participated in many technical interviews, resulting in hiring many new engineers including other Staff level engineers
+
+## Consolo Services / WellSky, Remote
+
+### Principal Software Architect
+
+June 2006 - August 2021
+
+* Founding engineer of the team; one of four initial employees
+* Led product from a tiny startup of about 7 customers to over 30 M requests / month
+* Led migration of the core application from pre-beta Ruby on Rails all the way to Kubernetes deployments using Helm charts first in AWS and later in GCP
+* Implemented one of the most sophisticated billing systems for hospice and Medicare
+* Spearheaded a platform-wide documentation project to share knowledge
+* Designed benchmarks to improve system response times across the entire platform
+* Committed bug fixes to `vagrant`, the open source development tool
+* We sold the Consolo IP to WellSky in 2019 at a $50M valuation
+* Contributed in some way to each of the 20+ microservices
+* Fostered new developers
+
+## Performance Support, Montgomery, AL
+
+### Systems Operator
+
+October 2004 - June 2006
+
+* Maintained an interim Secret clearance
+* Managed Department of Defense computer systems at Maxwell Air Force base
+* Developed tools to automate system maintenance tasks and shift duties
+    * Reduced a process from 3 hours per shift to an automated email every 15 minutes
+* Administered machines running HP-UX on PA-RISC processors
+
+# Technologies
+
+{{ capsule(item="Ruby") }} {{ capsule(item="Ruby-on-Rails") }} {{ capsule(item="Rust") }} {{ capsule(item="Kubernetes") }} {{ capsule(item="Helm") }} {{ capsule(item="Cloud infrastructure (AWS & GCP)") }} {{ capsule(item="Github Actions") }} {{ capsule(item="Google Cloud Build") }} {{ capsule(item="Heroku") }} {{ capsule(item="DataDog") }} {{ capsule(item="NewRelic") }} {{ capsule(item="Prometheus") }} {{ capsule(item="Alertmanager") }} {{ capsule(item="Grafana") }} {{ capsule(item="Nix") }} {{ capsule(item="Docker") }} {{ capsule(item="Podman") }} {{ capsule(item="Terraform") }} {{ capsule(item="Ansible") }} {{ capsule(item="bash / sh scripting") }} {{ capsule(item="JavaScript") }} {{ capsule(item="TypeScript") }} {{ capsule(item="Notion") }} {{ capsule(item="mdbook") }} {{ capsule(item="Erlang") }} {{ capsule(item="Elixir") }} {{ capsule(item="PostgreSQL") }} {{ capsule(item="SQLite") }} {{ capsule(item="Linux") }} {{ capsule(item="FreeBSD") }} {{ capsule(item="GNU Make") }} {{ capsule(item="just") }} {{ capsule(item="nginx") }} {{ capsule(item="caddy") }} {{ capsule(item="JSON") }} {{ capsule(item="YAML") }} {{ capsule(item="TOML") }} {{ capsule(item="REST") }} {{ capsule(item="GraphQL") }} {{ capsule(item="HTTP(S)") }} 
+
+# Education
+
+## Tennessee Tech University
+
+### Computer Science, B.S.
+
+August 2001 - December 2009
+
+# Personal
+
+* I am the cook of the house.
+    * I make most meals in the house and I can also make some killer baked goods.
+* I enjoy overlanding, offroading, and camping.
+* My family has a farm.
+    * A _real_ farm with more than 75 animals.
+* I do not need a gym membership: I have a farm. It is hard work, but rewarding.
+* My partner grows cut flowers professionally.
+* My tractor is more expensive than my truck.
+* I self-host most of the services I use online (but not email).
+* I enjoy playing video games.
+* I learn new programming languages that seem interesting.
+    * My favorite method is to use the [Advent of Code](https://adventofcode.com) puzzles.
+* My family recently developed a shared interest in Pokemon TCG (Trading Card Game).
+* My partner and I have travelled to Japan 5 times together.
+    * COVID has been hard on travel, hopefully the price of the tickets will come down now that the borders are open to tourists again (2023-01-12).

content/resume/_index.md

@@ -1,12 +0,0 @@
-+++
-title = "Resume"
-description = "A history of professional, educational, and personal interests"
-+++
-
-# Technical Skills
-
-# Work History
-
-# Education
-
-# Personal

sass/_containers.scss

@@ -0,0 +1,40 @@
+.container {
+  max-width: ($breakpoint-xl - $grid-gutter * 2);
+  padding-left: $grid-gutter;
+  padding-right: $grid-gutter;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@include breakpoint(m) {
+  .container-m {
+    width: ($breakpoint-m - $grid-gutter * 2);
+    max-width: auto;
+    padding-left: $grid-gutter;
+    padding-right: $grid-gutter;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@include breakpoint(l) {
+  .container-l {
+    width: ($breakpoint-l - $grid-gutter * 2);
+    max-width: auto;
+    padding-left: $grid-gutter;
+    padding-right: $grid-gutter;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@include breakpoint(xl) {
+  .container-xl {
+    width: ($breakpoint-xl - $grid-gutter * 2);
+    max-width: auto;
+    padding-left: $grid-gutter;
+    padding-right: $grid-gutter;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

sass/_markdown.scss

@@ -0,0 +1,45 @@
+.content {
+  padding: 0 40px;
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+}
+
+.content pre {
+  overflow-x: auto;
+  padding: 1.25em 1.5em;
+  white-space: pre;
+  word-wrap: normal;
+  background-color: white;
+  color: #4a4a4a;
+  font-size: .875em;
+  font-family: monospace;
+}
+
+.content code {
+  background-color: white;
+  color: #4a4a4a;
+  font-size: .875em;
+  font-weight: normal;
+  padding: 0.25em 0.5em;
+  font-family: monospace;
+}
+
+.content pre code {
+  padding: 0;
+}
+
+.content a {
+  color: var(--primary-link-color);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.content blockquote {
+  border-left: #e2dede 8px solid;
+  margin: 0;
+  background-color: #f2f1f0;
+  padding: 0 20px;
+}

sass/_mixins.scss

@@ -0,0 +1,38 @@
+$breakpoint-m:  768px !default;
+$breakpoint-l:  980px !default;
+$breakpoint-xl: 1200px !default;
+
+$grid-gutter: 16px !default;
+
+// Mixins
+
+// Breakpoints
+// Example: .component { @include breakpoint(m) { background: red; } };
+// Output: .component { @media only screen and (min-width: 720px) { background: red; } }
+@mixin breakpoint($bp) {
+  @if $bp == xl {
+    @media only screen and (min-width: $breakpoint-xl) { @content ; }
+  }
+  @else if $bp == l {
+    @media only screen and (min-width: $breakpoint-l) { @content ; }
+  }
+  @else if $bp == m {
+    @media only screen and (min-width: $breakpoint-m) { @content ; }
+  }
+}
+
+// Background Color with Opacity
+// Example: .element { @include background-rgba(#000000, .5); }}
+// Output: .element { background: rgba(0, 0, 0, .5); }
+@mixin background-rgba($color, $alpha) {
+  background-color: $color;
+  background-color: rgba($color, $alpha);
+}
+
+// Animations
+// Example: .fade { @mixin animate(1s); }
+// Output: .fade { animation-duration: 1s; animation-fill-mode: both; }
+@mixin animate($duration: 1s) {
+  animation-duration: $duration;
+  animation-fill-mode: both;
+}

sass/_penguincoder.scss

@@ -0,0 +1,9 @@
+.capsule {
+    background-color: var(--primary-color);
+    color: var(--primary-text-color);
+    border-radius: 6px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border: 1px solid var(--primary-text-color);
+    white-space: pre;
+}

sass/_text.scss

@@ -0,0 +1,39 @@
+.heading-text {
+  font-family: "Fira Sans", sans-serif;
+  font-size: 32px;
+  font-weight: 600;
+  padding: 10px 0 25px 0;
+  color: var(--primary-text-color);
+}
+
+h1, .title-text {
+  font-family: "Fira Sans", sans-serif;
+  font-size: 25px;
+  font-weight: 500;
+  color: var(--primary-text-color);
+  border-left: var(--primary-color) 8px solid;
+  padding-left: 10px;
+}
+
+h2, .subtitle-text {
+  font-family: "Fira Sans", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--primary-text-color);
+}
+
+.text {
+  font-family: "Fira Sans", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 26px;
+  letter-spacing: 0.2px;
+  color: var(--primary-text-color);
+}
+
+.subtext {
+  font-family: "Fira Sans", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.1px;
+}

sass/_utility.scss

@@ -0,0 +1,13 @@
+.text-center {
+  text-align: center;
+}
+
+.pos-absolute {
+  right: 0;
+  left: 0;
+  position: absolute;
+}
+
+.box-shadow {
+  box-shadow: 0 2px 10px 2px #ddd;
+}

sass/juice.scss

@@ -0,0 +1,197 @@
+@import "_utility.scss";
+@import "_text.scss";
+@import "_markdown.scss";
+@import "_penguincoder.scss";
+@import "_mixins.scss";
+@import "_containers.scss";
+
+body {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  background-color: var(--secondary-color);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+a {
+  text-decoration: none;
+}
+
+ul {
+  margin-top: 0.5rem;
+}
+
+ul > li {
+  padding: 0.3rem 0;
+}
+
+p > img {
+  width: 100%;
+  height: auto;
+}
+
+header {
+  background-color: var(--primary-color);
+  color: black;
+  padding: 20px 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  font-family: "Alfa Slab One", serif;
+  font-size: 32px;
+  color: var(--primary-text-color);
+  display: flex;
+  align-items: center;
+  margin: 0 40px;
+
+  img {
+    width: 60px;
+    margin: 0 25px;
+  }
+}
+
+.nav-item {
+  margin: 0 10px;
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: bold;
+
+  &:hover {
+    color: #000;
+    text-decoration: underline;
+  }
+}
+
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 100vh;
+  background-color: var(--primary-color);
+  overflow-x: hidden;
+  padding: 0 40px;
+
+  .explore-more {
+    position: absolute;
+    bottom: 20px;
+    cursor: pointer;
+  }
+}
+
+main {
+  display: flex;
+  padding: 50px 100px;
+  flex-grow: 1;
+
+  .toc {
+    max-width: 260px;
+    min-width: 240px;
+  }
+
+  .toc-item {
+    padding: 10px 20px;
+    color: #424242;
+  }
+
+  .toc-item a, .toc-item-child a {
+    color: var(--secondary-text-color);
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  .toc-item a.active, .toc-item-child a.active {
+    color: var(--toc-highlight-text-color);
+  }
+
+  .toc-item-child {
+    padding: 0 30px 5px;
+    color: #424242;
+  }
+
+}
+
+.toc-sticky {
+  border-radius: 3px;
+  border-top: 5px solid var(--primary-color);
+  background-color: white;
+  position: sticky;
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: -ms-sticky;
+  position: -o-sticky;
+  top: 10px;
+  padding: 10px 0 20px;
+  max-height: 100vh;
+  overflow: auto;
+}
+
+footer {
+  padding: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #202020;
+  color: #fcfcfc;
+
+  a {
+    color: #fcfcfc;
+    text-decoration: underline;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .content {
+    max-width: 60%;
+    min-width: 800px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  header {
+    padding: 10px 30px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logo {
+    font-size: 28px;
+    margin: 10px;
+
+    img {
+      width: 45px;
+      margin: 0 10px 0 0;
+    }
+  }
+
+  .nav-item {
+    margin: 0 5px;
+    font-size: 14px;
+  }
+
+  .hero {
+    padding: 40px 30px;
+  }
+
+  main {
+    padding: 30px;
+  }
+
+  .content {
+    padding: 0;
+  }
+
+  .explore-more, .toc {
+    display: none;
+  }
+
+}

sass/pc.scss

@@ -1,7 +0,0 @@
-.content a span.icon, .content a i {
-  color: var(--primary-text-color);
-}
-
-.content a:hover, .content a i:hover {
-  text-decoration: none;
-}

templates/_macros.html

@@ -0,0 +1,22 @@
+{% macro render_header() %}
+{% set section = get_section(path="_index.md") %}
+<a href="{{ section.permalink | safe }}">
+    <div class="logo">
+        <img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo">
+        {{ config.extra.juice_logo_name }}
+    </div>
+</a>
+
+<nav>
+    {% for page in section.pages %}
+    {% if config.extra.juice_exclude_menu is not containing(page.title) %}
+    <a class="nav-item subtitle-text" href="{{ page.permalink | safe }}">{{ page.title }}</a>
+    {% endif %}
+    {% endfor %}
+    {% if config.extra.juice_extra_menu %}
+        {% for menu in config.extra.juice_extra_menu %}
+        <a class="nav-item subtitle-text" href="{{ menu.link | safe }}">{{ menu.title }}</a>
+        {% endfor %}
+    {% endif %}
+</nav>
+{% endmacro render_header %}

templates/index.html

@@ -1,30 +1,152 @@
-{% extends "juice/templates/index.html" %}
+{% import "_macros.html" as macros %}
+<!DOCTYPE html>
+<html lang="en">
 
-{% block head %}
-<link rel="stylesheet" href="{{ get_url(path="pc.css") }}" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" integrity="sha256-AbA177XfpSnFEvgpYu1jMygiLabzPCJCRIBtR5jGc0k=" crossorigin="anonymous">
-{% endblock head %}
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}{{ config.title }}{% endblock title %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    {% block favicon %}
+    <link rel="icon" sizes="16x16 32x32" type="image/png" href="/icons8-developer-ddara-lineal-color-32.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/icons8-developer-ddara-lineal-color-76.png">
+    {% endblock favicon %}
+    {% include "_variables.html" %}
+    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/normalize.css">
+    <link rel="stylesheet" href="{{ get_url(path="juice.css") }}">
+    {% block head %}
+    {% endblock head %}
+</head>
 
-{% block hero %}
-<section class="text-center">
-  <h1 class="heading-text" style="font-size: 50px;">
-    Andrew Coleman
-  </h1>
-  <h3 class="title-text">
-    An experienced software engineer and architect. <br />Sometimes posting about hobbies and farming, too.
-  </h3>
-</section>
+<body>
+  {% block header %}
 
-<div class="explore-more text"
-     onclick="document.getElementById('overview').scrollIntoView({behavior: 'smooth'})">
-     Explore More ⇩
-</div>
-{% endblock hero %}
+  <header class="pos-absolute" style="background-color: transparent">
+      {{ macros::render_header() }}
+  </header>
 
-{% block footer %}
-<footer>
-  <small class="subtext text-center">
-    © Andrew Coleman 2023 <br />
-    Made with ❤️  using <a href="https://juice.huhu.io">Juice</a> and <a href="ihttps://www.getzola.org">Zola</a>.
-  </small>
-{% endblock footer %}
+  <div class="hero">
+      {% block hero %}
+      <section class="text-center">
+        <h1 class="heading-text" style="font-size: 50px;">
+          Andrew Coleman
+        </h1>
+        <h3 class="title-text">
+          An experienced software engineer and architect. <br />
+          Sometimes posting about hobbies and farming, too.
+        </h3>
+      </section>
+      
+      <div class="explore-more text"
+           onclick="document.getElementById('overview').scrollIntoView({behavior: 'smooth'})">
+           Explore More ⇩
+      </div>
+
+      <img class="hero-image" style="max-width: 512px;" src="{{ get_url(path="2020-11-11_07-52-28.jpg") }}">
+
+      <div class="explore-more text"
+          onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
+          Explore More ⇩
+      </div>
+      <style>
+          .hero section {
+              padding: 0 5rem;
+          }
+
+          @media screen and (max-width: 768px) {
+              .hero section {
+                  padding: 0 2rem;
+              }
+
+              .hero-image {
+                display: none;
+              }
+          }
+
+          #social-media-links img {
+            width: 32px;
+            height: 32px;
+          }
+
+          #social-media-links a, #social-media-links a:hover {
+            text-decoration: none;
+          }
+      </style>
+      {% endblock hero %}
+  </div>
+
+  {% endblock header %}
+
+  <main>
+      {% block toc %}
+      {% if section.toc %}
+      {% set toc = section.toc %}
+      {% elif page.toc %}
+      {% set toc = page.toc %}
+      {% endif %}
+      {% if toc %}
+      <div class="toc">
+          <div class="toc-sticky">
+              {% for h in toc %}
+              <div class="toc-item">
+                  <a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a>
+              </div>
+              {% if h.children %}
+              {% for h2 in h.children %}
+              <div class="toc-item-child">
+                  <a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a>
+              </div>
+              {% endfor %}
+              {% endif %}
+              {% endfor %}
+          </div>
+      </div>
+      {% endif %}
+      {% endblock toc %}
+
+      <div class="content text">
+          {% block content %}
+          <div id="features" class="heading-text">Overview</div>
+          {{ section.content | safe }}
+          {% endblock content %}
+      </div>
+
+      {% block sidebar %}
+      {% endblock sidebar %}
+  </main>
+
+  {% block footer %}
+  <footer>
+    <small class="subtext text-center">
+      Made with <img src="/icons8-code-16.png" alt="Code" /> and <img src="/icons8-heart-16.png" alt="heart" /> © Andrew Coleman 2023
+    </small>
+  </footer>
+  {% endblock footer %}
+</body>
+<script>
+  const scrollHandler = entries => {
+      // Find the first entry which intersecting and ratio > 0.9 to highlight.
+      let entry = entries.find(entry => {
+          return entry.isIntersecting && entry.intersectionRatio > 0.9;
+      });
+      if (!entry) return;
+
+      document.querySelectorAll(".toc a").forEach((item) => {
+          item.classList.remove("active");
+      });
+
+      // let url = new URL(`#${entry.target.id}`);
+      let link = document.querySelector(`.toc a[href$="${decodeURIComponent(`#${entry.target.id}`)}"]`)
+      if (link) {
+          link.classList.add("active");
+          link.scrollIntoView({ behavior: "auto", block: "nearest" });
+      }
+  };
+  // Set -100px root margin to improve highlight experience.
+  const observer = new IntersectionObserver(scrollHandler, { threshold: 1 });
+  let items = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
+  items.forEach(item => observer.observe(item));
+</script>
+
+</html>

templates/page.html

@@ -1,7 +1,15 @@
-{% extends "juice/templates/page.html" %}
+{% import "_macros.html" as macros %}
+{% extends "index.html" %}
 
-{% block head %}
-<link rel="stylesheet" href="{{ get_url(path="pc.css") }}" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" integrity="sha256-AbA177XfpSnFEvgpYu1jMygiLabzPCJCRIBtR5jGc0k=" crossorigin="anonymous">
-{% endblock head %}
+{% block title %}{{ page.title }} | {{ super() }} {% endblock title %}
 
+{% block header %}
+<header class="box-shadow">
+    {{ macros::render_header() }}
+</header>
+{% endblock header %}
+
+{% block content %}
+<div class="heading-text">{{ page.description }}</div>
+{{ page.content | safe }}
+{% endblock content %}

templates/shortcodes/capsule.html

@@ -0,0 +1 @@
+<span class="capsule">{{ item }}</span>

templates/shortcodes/icon.html

@@ -1,3 +0,0 @@
-<span class="icon">
-  <i class="fab fa-{{ name }} fa-lg"></i>
-</span>