Get an intial skeleton up and running

.gitignore

@@ -1 +1,2 @@
 .hugo_build.lock
+node_modules/

archetypes/default.md

@@ -1,6 +1,8 @@
 ---
-title: "{{ replace .Name "-" " " | title }}"
+title: "{{ replace .File.ContentBaseName "-" " " | title }}"
 date: {{ .Date }}
+tags: []
 draft: true
+hero: false
 ---
 

assets/js/app.js

@@ -0,0 +1,5 @@
+import clickableMaker from "./clickable-maker";
+
+window.addEventListener('load', () => {
+    clickableMaker();
+});

assets/js/clickable-maker.js

@@ -0,0 +1,16 @@
+export default function() {
+    const elements = document.querySelectorAll('[data-href]');
+    
+    elements.forEach(e => {
+        const href = e.dataset.href
+        e.addEventListener('click', () => {
+            window.location.href = href;
+        });
+        e.addEventListener('auxclick', (evt) => {
+            if (evt.button == 1) {
+                // Middle click was pushed
+                window.open(href, '_blank')
+            }
+        })
+    });
+}

assets/jsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}

assets/sass/_base.scss

@@ -0,0 +1,19 @@
+html,
+body {
+  background-color: #162028;
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  color: $text-color;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  transition: color 100ms ease-in-out;
+  color: darken($text-color, 15%);
+
+  &:hover {
+    color: darken($text-color, 5%);
+  }
+}

assets/sass/_blog.scss

@@ -0,0 +1,114 @@
+$article-image-size: 24px;
+
+section.blog-recent {
+  .header {
+    display: flex;
+    justify-content: space-between;
+
+    .all-articles {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      a {
+        text-decoration: none;
+
+        &:after {
+          content: "»";
+        }
+      }
+    }
+  }
+}
+
+section.blog-recent,
+section.blog {
+  .list {
+    .blog-items {
+      list-style: none;
+
+      .blog-item {
+        background-color: $background-lighter;
+        border-radius: 16px;
+        padding: 8px;
+        display: flex;
+        cursor: pointer;
+        user-select: none;
+
+        transition: transform 250ms ease-in-out;
+
+        &:not(:last-child) {
+          margin-bottom: 1rem;
+        }
+
+        &:hover {
+          transform: translateX(2rem);
+
+          @media (max-width: $xl) {
+            transform: translateX(1rem);
+          }
+
+          @media (max-width: $lg) {
+            transform: translateX(0.5rem);
+          }
+        }
+
+        .article-image {
+          max-width: $article-image-size;
+          max-height: $article-image-size;
+
+          margin-right: 1rem;
+        }
+
+        .article-text {
+          .article-title {
+            line-height: $article-image-size;
+            font-size: 1.2rem;
+            margin: 0;
+          }
+
+          .article-desc,
+          .article-date {
+            display: block;
+          }
+
+          .article-date {
+            color: darken($text-color, 15%);
+          }
+        }
+      }
+    }
+  }
+}
+
+section.blog-popular {
+  .popular-items {
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: grid;
+      grid-template-columns: 25px 1fr;
+
+      &:not(:first-child) {
+        margin-bottom: 0.25rem;
+      }
+
+      &:not(:last-child) {
+        margin-top: 0.25rem;
+      }
+
+      .arrow {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 25px;
+      }
+
+      .link {
+        text-decoration: none;
+        font-size: 1.2rem;
+      }
+    }
+  }
+}

assets/sass/_container.scss

@@ -0,0 +1,55 @@
+// Source: https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css
+
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: $sm) {
+  .container-sm,
+  .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: $md) {
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 720px;
+  }
+}
+@media (min-width: $lg) {
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: $xl) {
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: $xxl) {
+  .container-xxl,
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 1320px;
+  }
+}

assets/sass/_fontawesome.scss

@@ -0,0 +1,3 @@
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";

assets/sass/_footer.scss

@@ -0,0 +1,52 @@
+$icon-size: 2rem;
+
+footer {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $sm) {
+    flex-direction: column;
+
+    .credits {
+      text-align: center;
+    }
+  }
+
+  .credits {
+    p {
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .social-links {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    ul {
+      display: flex;
+      list-style: none;
+      justify-content: center;
+      padding: 0;
+
+      li {
+        a {
+          text-decoration: none;
+          color: $text-color;
+          margin: 0.5rem;
+
+          &:hover {
+            color: darken($text-color, 10%);
+          }
+
+          i {
+            line-height: $icon-size;
+            font-size: $icon-size;
+          }
+        }
+      }
+    }
+  }
+}

assets/sass/_header.scss

@@ -0,0 +1,78 @@
+$brand-height: 64px;
+
+header {
+  display: flex;
+  justify-content: space-between;
+
+  .brand {
+    display: flex;
+    text-decoration: none;
+    color: $text-color;
+    user-select: none;
+
+    .brand-logo {
+      width: auto;
+      height: $brand-height;
+    }
+
+    .brand-name {
+      line-height: $brand-height;
+      vertical-align: middle;
+      font-size: 28px;
+
+      margin-left: 2rem;
+
+      @media (max-width: $sm) {
+        font-size: 20px;
+        margin-left: 1rem;
+      }
+    }
+  }
+
+  .site-nav {
+    flex-grow: 1;
+    max-width: 200px;
+
+    .nav-items {
+      display: flex;
+      justify-content: space-between;
+      list-style: none;
+      padding: 0;
+
+      .nav-item {
+        text-align: center;
+
+        a {
+          text-decoration: none;
+          font-size: 1.1rem;
+          color: $text-color;
+
+          &:hover {
+            color: darken($text-color, 15%);
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: $md) {
+    flex-direction: column;
+
+    .site-nav {
+      flex-grow: unset;
+      max-width: unset;
+
+      .nav-items {
+        justify-content: unset;
+
+        .nav-item {
+          flex-basis: 100%;
+        }
+      }
+    }
+  }
+}
+
+body > .header {
+  margin-bottom: 1rem;
+}

assets/sass/_hero.scss

@@ -0,0 +1,30 @@
+section.hero {
+  max-width: 60%;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+
+  @media (max-width: $lg) {
+    max-width: 75%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  @media (max-width: $md) {
+    max-width: 100%;
+    margin-top: 1rem;
+  }
+
+  h1 {
+    color: $primary;
+    font-size: 2.5rem;
+
+    @media (max-width: $md) {
+      font-size: 1.5rem;
+    }
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 2;
+  }
+}

assets/sass/_home.scss

@@ -0,0 +1,56 @@
+.split-content {
+  display: flex;
+
+  main {
+    margin-right: 4rem;
+    width: 75%;
+  }
+
+  aside {
+    width: 25%;
+  }
+
+  @media (max-width: $lg) {
+    flex-direction: column;
+
+    main,
+    aside {
+      width: 100%;
+    }
+  }
+}
+
+.home-header {
+  position: relative;
+  background-color: rgba($black, 0.5);
+  padding-bottom: 90px;
+  padding-top: 45px;
+
+  @media (max-width: $md) {
+    padding-top: 30px;
+  }
+
+  .wave {
+    overflow: hidden;
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 90px;
+    transform: translateY(1px);
+    z-index: 3;
+
+    svg {
+      position: absolute;
+      left: -3%;
+      right: -3%;
+      bottom: 0;
+      width: 106%;
+      min-width: 600px;
+
+      fill: $background;
+    }
+  }
+}

assets/sass/_variables.scss

@@ -0,0 +1,32 @@
+// Typography
+$font-family-sans-serif: "Nunito", sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+// Base colors
+$white: #ffffff;
+$black: #000000;
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66d9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;
+
+// Theme colors
+$background: #162028;
+$background-lighter: #1c2d35;
+$background-darker: #0f171d;
+$primary: #a1fab3;
+$text-color: #ecf8ff;
+
+// Breakpoints
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+$xxl: 1400px;

assets/sass/app.scss

@@ -0,0 +1,18 @@
+// Reusable variables
+@import "variables";
+
+// Plugins
+@import "fontawesome";
+
+// Base styling
+@import "base";
+
+// Generic styling
+@import "container";
+
+// Component specific styling
+@import "header";
+@import "hero";
+@import "blog";
+@import "footer";
+@import "home";

content/_index.md

@@ -0,0 +1,7 @@
+---
+hero: true
+# HTML allowed in the following two fields
+heroMain: I'm Daniel, junior software engineer
+heroSub: I  am a student pursuing a Bachelor's in Computer Science, with a software engineering specialization.<br/>I have a love for discovering new technologies and inventing unique solutions to complex problems.
+---
+

content/snippets/filler-1.md

@@ -0,0 +1,7 @@
+---
+title: "Filler 1"
+date: 2022-04-16T08:45:13Z
+draft: false
+---
+
+Filler 1

content/snippets/filler-2.md

@@ -0,0 +1,7 @@
+---
+title: "Filler 2"
+date: 2022-04-17T08:45:13Z
+draft: false
+---
+
+Filler 2

content/snippets/filler-3.md

@@ -0,0 +1,7 @@
+---
+title: "Filler 3"
+date: 2022-04-18T08:45:13Z
+draft: false
+---
+
+Filler 3

content/snippets/filler-4.md

@@ -0,0 +1,7 @@
+---
+title: "Filler 4"
+date: 2022-04-19T08:45:13Z
+draft: false
+---
+
+Filler 4

docker-compose.yml

@@ -11,3 +11,12 @@ services:
             - ./:/code
         working_dir: /code
         tty: true
+
+    node:
+        image: node:18
+        volumes:
+            - ./:/code
+        working_dir: /code
+        tty: true
+        user: node
+        command: yarn

layouts/_default/baseof.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    {{/* Format: "[page title] | [site title]" */}}
+    <title>{{ block "title" . }}{{ with .Params.Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+
+    {{ $sassOptions := (dict "targetPath" "app.css" "outputStyle" "compressed" "enableSourceMap" true) }}
+    {{ $appStyle := resources.Get "sass/app.scss" | resources.ToCSS $sassOptions }}
+    {{/* We fingerprint in production for cache busting purposes */}}
+    {{ if eq (getenv "HUGO_ENV") "production" }}
+        {{ $appStyle = $appStyle | fingerprint }}
+    {{ end }}
+    <link rel="stylesheet" href="{{ $appStyle.Permalink }}">
+</head>
+
+<body class="page-home">
+    {{ partial "header" . }}
+
+    <div class="container">
+        <div class="split-content">
+            <main>
+                {{ block "main" . }}{{ end }}
+            </main>
+            <aside>
+                {{ block "aside" . }}{{ end }}
+            </aside>
+        </div>
+
+        {{ partial "footer" . }}
+    </div>
+
+    {{ $jsOptions := (dict "targetPath" "app.js" "minify" true) }}
+    {{ $appJs := resources.Get "js/app.js" | js.Build $jsOptions }}
+    {{/* We fingerprint in production for cache busting purposes */}}
+    {{ if eq (getenv "HUGO_ENV") "production" }}
+        {{ $appJs = $appJs | fingerprint }}
+    {{ end }}
+    <script src="{{ $appJs.Permalink }}" type="application/javascript"></script>
+</body>
+
+</html>

layouts/index.html

@@ -0,0 +1,51 @@
+{{ define "main" }}
+<section class="blog-recent">
+    <div class="header">
+        <h3>Latest Articles</h3>
+        <div class="all-articles">
+            <a href="javascript:void(0)">All articles</a>
+        </div>
+    </div>
+    <div class="list">
+        <ul class="blog-items">
+            {{ range ( first 3 (where .Site.RegularPages "Type" "snippets").ByDate.Reverse ) }}
+                <li class="blog-item" data-href="{{ .Permalink }}">
+                    <img class="article-image" src="//via.placeholder.com/128" alt="Article Topic">
+                    <div class="article-text">
+                        <h4 class="article-title">{{ .Title }}</h4>
+                        <span class="article-date">{{ .Date.Format "January 2, 2006" }}</span>
+                    </div>
+                </li>
+            {{ end }}
+        </ul>
+    </div>
+</section>
+{{ end }}
+
+{{ define "aside" }}
+<section class="blog-popular">
+    <h3>Popular content</h3>
+    <ul class="popular-items">
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+        <li>
+            <span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
+            <a class="link" href="#">Lorem ipsum dolor sit, amet consectetur adipisicing.</a>
+        </li>
+    </ul>
+</section>
+{{ end }}

layouts/partials/footer.html

@@ -0,0 +1,13 @@
+<footer>
+    <div class="credits">
+        <p>Designed and developed by Daniel de Cloet.</p>
+        <p>Built with <a href="https://vuejs.org/">Vue.js</a>. Iconset provided by <a href="https://fontawesome.com/">Font Awesome</a>.</p>
+    </div>
+    <div class="social-links">
+        <ul>
+            <li><a href="javascript:void(0)"><i class="fab fa-github"></i></a></li>
+            <li><a href="javascript:void(0)"><i class="fab fa-gitlab"></i></a></li>
+            <li><a href="javascript:void(0)"><i class="fab fa-linkedin"></i></a></li>
+        </ul>
+    </div>
+</footer>

layouts/partials/header.html

@@ -0,0 +1,28 @@
+<div class="home-header">
+    <div class="container">
+        <header>
+            <a class="brand" href="/">
+                <img class="brand-logo" src="//via.placeholder.com/256" alt="Brand Logo">
+                <span class="brand-name">Daniel de Cloet</span>
+            </a>
+            <nav class="site-nav">
+                <ul class="nav-items">
+                    <li class="nav-item"><a href="/snippets">Snippets</a></li>
+                </ul>
+            </nav>
+        </header>
+
+        {{ if $.Params.hero }}
+            <section class="hero">
+                <h1>{{ safeHTML $.Params.heroMain }}</h1>
+                <p>{{ safeHTML $.Params.heroSub }}</p>
+            </section>
+        {{ end }}
+    </div>
+
+    {{ if $.Params.hero }}
+        <div class="wave">
+            <svg preserveAspectRatio="none" width="1440" height="74" viewBox="0 0 1440 74"><path d="M456.464 0.0433865C277.158 -1.70575 0 50.0141 0 50.0141V74H1440V50.0141C1440 50.0141 1320.4 31.1925 1243.09 27.0276C1099.33 19.2816 1019.08 53.1981 875.138 50.0141C710.527 46.3727 621.108 1.64949 456.464 0.0433865Z"></path></svg>
+        </div>
+    {{ end }}
+</div>

package.json

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "name": "personal-site",
+  "version": "1.0.0",
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^6.1.1"
+  }
+}

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@fortawesome/fontawesome-free@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz#bf5d45611ab74890be386712a0e5d998c65ee2a1"
+  integrity sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==