Compare commits
No commits in common. "ecb0f1d9c0fc82ce452dc72aab155ab84144b83a" and "9ddd717586ebf290589493436d30e86eb4dda7b5" have entirely different histories.
ecb0f1d9c0
...
9ddd717586
|
|
@ -1 +0,0 @@
|
||||||
/public
|
|
||||||
|
|
@ -7,6 +7,8 @@ compile_sass = true
|
||||||
# Whether to build a search index to be used later on by a JavaScript library
|
# Whether to build a search index to be used later on by a JavaScript library
|
||||||
build_search_index = true
|
build_search_index = true
|
||||||
|
|
||||||
|
theme = "juice"
|
||||||
|
|
||||||
taxonomies = [
|
taxonomies = [
|
||||||
{ name = "tags", paginate_by = 10 },
|
{ name = "tags", paginate_by = 10 },
|
||||||
]
|
]
|
||||||
|
|
@ -15,13 +17,13 @@ taxonomies = [
|
||||||
# Whether to do syntax highlighting
|
# Whether to do syntax highlighting
|
||||||
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
|
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
|
||||||
highlight_code = true
|
highlight_code = true
|
||||||
highlight_theme = "inspired-github"
|
|
||||||
|
|
||||||
[extra]
|
[extra]
|
||||||
juice_logo_name = "penguincoder"
|
juice_logo_name = "penguincoder"
|
||||||
juice_logo_path = "tux.png"
|
juice_logo_path = "tux.png"
|
||||||
juice_exclude_menu = []
|
juice_exclude_menu = []
|
||||||
juice_extra_menu = [
|
juice_extra_menu = [
|
||||||
# { title = "Blog", link = "/blog" },
|
{ title = "Blog", link = "/blog" },
|
||||||
|
{ title = "Resume", link = "/resume" },
|
||||||
]
|
]
|
||||||
repository_url = "https://git.penguincoder.org/penguincoder/penguincoder-org"
|
repository_url = "https://git.penguincoder.org/penguincoder/penguincoder-org"
|
||||||
|
|
@ -1,43 +1,25 @@
|
||||||
+++
|
+++
|
||||||
title = "penguincoder"
|
title = "penguincoder"
|
||||||
description = "About me"
|
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
|
# Social Media
|
||||||
|
|
||||||
<div id="social-media-links">
|
[{{ icon(name="git-alt") }}](https://git.penguincoder.org/penguincoder)
|
||||||
<a href="https://git.penguincoder.org/penguincoder" title="Gitea">
|
[{{ icon(name="github") }}](https://github.com/penguincoder)
|
||||||
<img src="/gitea-logo.svg" alt="Gitea" />
|
[{{ icon(name="stack-overflow") }}](https://stackoverflow.com/users/812879/penguincoder)
|
||||||
</a>
|
[{{ icon(name="keybase") }}](https://keybase.io/penguincoder)
|
||||||
<a href="https://github.com/penguincoder" title="Github">
|
[{{ icon(name="reddit") }}](https://reddit.com/u/therealpenguincoder)
|
||||||
<img src="/icons8-github.svg" alt="Github" />
|
[{{ icon(name="twitter") }}](https://twitter.com/penguincoder)
|
||||||
</a>
|
[{{ icon(name="mastodon") }}](https://hachyderm.io/@penguincoder)
|
||||||
<a href="https://stackoverflow.com/users/812879/penguincoder" title="Stack Overflow">
|
[{{ icon(name="linkedin") }}](https://www.linkedin.com/in/andrew-coleman-1238834/)
|
||||||
<img src="/icons8-stack-overflow.svg" alt="Stack Overflow" />
|
[{{ icon(name="instagram") }}](https://www.instagram.com/penguincoder)
|
||||||
</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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# [Resume](/resume)
|
||||||
|
|
||||||
|
# [Blog](/blog)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
+++
|
|
||||||
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.
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
+++
|
|
||||||
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).
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
+++
|
||||||
|
title = "Resume"
|
||||||
|
description = "A history of professional, educational, and personal interests"
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Technical Skills
|
||||||
|
|
||||||
|
# Work History
|
||||||
|
|
||||||
|
# Education
|
||||||
|
|
||||||
|
# Personal
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
$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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos-absolute {
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-shadow {
|
|
||||||
box-shadow: 0 2px 10px 2px #ddd;
|
|
||||||
}
|
|
||||||
197
sass/juice.scss
197
sass/juice.scss
|
|
@ -1,197 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
.content a span.icon, .content a i {
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content a:hover, .content a i:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
{% 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 %}
|
|
||||||
|
|
@ -1,152 +1,30 @@
|
||||||
{% import "_macros.html" as macros %}
|
{% extends "juice/templates/index.html" %}
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
{% block head %}
|
||||||
<meta charset="UTF-8">
|
<link rel="stylesheet" href="{{ get_url(path="pc.css") }}" />
|
||||||
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" integrity="sha256-AbA177XfpSnFEvgpYu1jMygiLabzPCJCRIBtR5jGc0k=" crossorigin="anonymous">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
{% endblock head %}
|
||||||
{% 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>
|
|
||||||
|
|
||||||
<body>
|
{% block hero %}
|
||||||
{% block header %}
|
<section class="text-center">
|
||||||
|
|
||||||
<header class="pos-absolute" style="background-color: transparent">
|
|
||||||
{{ macros::render_header() }}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="hero">
|
|
||||||
{% block hero %}
|
|
||||||
<section class="text-center">
|
|
||||||
<h1 class="heading-text" style="font-size: 50px;">
|
<h1 class="heading-text" style="font-size: 50px;">
|
||||||
Andrew Coleman
|
Andrew Coleman
|
||||||
</h1>
|
</h1>
|
||||||
<h3 class="title-text">
|
<h3 class="title-text">
|
||||||
An experienced software engineer and architect. <br />
|
An experienced software engineer and architect. <br />Sometimes posting about hobbies and farming, too.
|
||||||
Sometimes posting about hobbies and farming, too.
|
|
||||||
</h3>
|
</h3>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="explore-more text"
|
<div class="explore-more text"
|
||||||
onclick="document.getElementById('overview').scrollIntoView({behavior: 'smooth'})">
|
onclick="document.getElementById('overview').scrollIntoView({behavior: 'smooth'})">
|
||||||
Explore More ⇩
|
Explore More ⇩
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock hero %}
|
||||||
|
|
||||||
<img class="hero-image" style="max-width: 512px;" src="{{ get_url(path="2020-11-11_07-52-28.jpg") }}">
|
{% block footer %}
|
||||||
|
<footer>
|
||||||
<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">
|
<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
|
© 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>
|
</small>
|
||||||
</footer>
|
{% endblock 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>
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,7 @@
|
||||||
{% import "_macros.html" as macros %}
|
{% extends "juice/templates/page.html" %}
|
||||||
{% extends "index.html" %}
|
|
||||||
|
|
||||||
{% block title %}{{ page.title }} | {{ super() }} {% endblock title %}
|
{% 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 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 %}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<span class="capsule">{{ item }}</span>
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fab fa-{{ name }} fa-lg"></i>
|
||||||
|
</span>
|
||||||
Loading…
Reference in New Issue