30 changed files with 381 additions and 331 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,11 @@
+_site
+result
+.direnv
+.envrc
+public/
+
+# Generated using tailwindcss
+static/css/index.css
+
+# Zola build output
+public/
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -0,0 +1,16 @@
+steps:
+  build:
+    image: alpine:3.19
+    commands:
+      - apk add --no-cache zola npm
+      - npm install -D tailwindcss @tailwindcss/typography
+      - npx tailwindcss -i input.css -o static/css/index.css --minify
+      - zola build
+  deploy:
+    image: git.polynom.me/papatutuwawa/woodpecker-ssg-deploy@sha256:9cfec13eb8ab1b8920c2f1f00f0258a7bfd159fe4e14e0985328086392c0da34
+    secrets: [ ssh_key ]
+    settings:
+      email: "ci@polynom.me"
+      name: "polynom.me CI system"
+      token_env: "SSH_KEY"
+      output: "public"
--- a/404.html
+++ b/404.html
@ -1,3 +0,0 @@
-<!doctype html>
-<title>404 Not Found</title>
-<h1>404 Not Found</h1>
--- a/code/index.html
+++ b/code/index.html
@ -1,65 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="https://polynom.me/css/index.css" rel="stylesheet" />
-    <link href="https://polynom.me/css/extra.css" rel="stylesheet" />
-
-    
-    <meta property="og:title" content="Code | polynom.me" />
-  	<meta property="og:description" content="Alexander &#x27;PapaTutuWawa&#x27; &#x27;s code repositories." />
-  	<title>Code | polynom.me</title>
-    
-  </head>
-  <body>
-    <div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
-      <!-- Header -->
-      <div class="flex flex-row self-center">
-        <img
-          class="w-12 h-12 md:w-24 md:h-24 rounded-lg"
-          src="/img/avatar.jpg"
-          alt="Profile picture"
-          integrity="sha386-uiNteVXosQ2+o/izp41L1G9VwuwYDYCOPxzFWks058DMUhW7KfQXcipM7WqgSgEZ" />
-        <div class="ml-4 self-center">
-          <a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Website</a>
-
-            <ul class="list-none">
-              <li class="inline mr-8"><a href="https://blog.polynom.me">Blog</a></li>
-              <li class="inline mr-8"><a href="https://polynom.me/code/">Code</a></li>
-              <li class="inline mr-8"><a href="https://polynom.me/contact/">Contact</a></li>
-            </ul>
-        </div>
-      </div>
-
-      
-<div class="flex flex-col pt-8 mx-auto">
-    <p class="prose text-white">
-      I keep my code mostly on my private Gitea instance <a class="text-indigo-400"
-        href="https://git.polynom.me/PapaTutuWawa">here</a>.
-      For purposes of allowing other people to also contribute
-      I try to mirror my code on GitHub and codeberg.
-    </p>
-  
-    <div class="pt-8 w-full">
-      <table class="text-white pt-8 w-full">
-        <tr>
-          <td>GitHub</td>
-          <td><a class="text-indigo-400" href="https://github.com/PapaTutuWawa">PapaTutuWawa</a></td>
-        </tr>
-        <tr>
-          <td>Codeberg</td>
-          <td><a class="text-indigo-400" href="https://codeberg.org/PapaTutuWawa">PapaTutuWawa</a>
-          </td>
-        </tr>
-        <tr>
-          <td>Gitea</td>
-          <td><a class="text-indigo-400" href="https://git.polynom.me/PapaTutuWawa">PapaTutuWawa</a></td>
-        </tr>
-      </table>
-    </div>
-  </div>
-
-    </div>
-  </body>
-</html>
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,46 @@
+base_url = "https://polynom.me"
+
+title = "PapaTutuWawa's Website"
+description = "The personal website of Alexander 'PapaTutuWawa'."
+
+[extra]
+# Code information
+gitea_url = "git.polynom.me"
+gitea_username = "PapaTutuWawa"
+github_username = "PapaTutuWawa"
+codeberg_username = "PapaTutuWawa"
+
+# Contact information
+email_user = "papatutuwawa"
+email_domain = "polynom.me"
+gpg_key_url = "pki.polynom.me/pubkeys/papatutuwawa.pub"
+fediverse_instance = "social.polynom.me"
+fediverse_username = "papatutuwawa"
+
+[[extra.projects]]
+title = "Moxxy"
+description = "A modern XMPP client written in Flutter. Licensed under GPLv3."
+screenshot = "img/moxxy.jpg"
+source_url = "codeberg.org/moxxy/moxxyv2"
+website = "moxxy.org"
+
+[[extra.projects]]
+title = "AniTrack"
+description = "A simple Anime and Manga tracker written in Flutter. Licensed under MIT."
+screenshot = "img/anitrack.jpg"
+source_url = "codeberg.org/PapaTutuWawa/anitrack"
+website = "codeberg.org/PapaTutuWawa/anitrack"
+
+[[extra.projects]]
+title = "xmpp-discord-bridge"
+description = "An XMPP to Discord bridge that attempts to feel as native as possible on each chat platform, written in Python. Licensed under GPLv3."
+screenshot = ""
+source_url = "codeberg.org/PapaTutuWawa/xmpp-discord-bridge.git"
+website = "codeberg.org/PapaTutuWawa/xmpp-discord-bridge.git"
+
+[[extra.projects]]
+title = "mira"
+description = "An XMPP bot framework for persistent subscription services, written in Python. Licensed under GPLv3."
+screenshot = ""
+source_url = "git.polynom.me/PapaTutuWawa/mira"
+website = "git.polynom.me/PapaTutuWawa/mira"
--- a/contact/index.html
+++ b/contact/index.html
@ -1,80 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="https://polynom.me/css/index.css" rel="stylesheet" />
-    <link href="https://polynom.me/css/extra.css" rel="stylesheet" />
-
-    
-    <meta property="og:title" content="Contact | polynom.me" />
-  	<meta property="og:description" content="Contact details for getting in touch with Alexander &#x27;PapaTutuWawa&#x27;." />
-  	<title>Contact | polynom.me</title>
-    
-  </head>
-  <body>
-    <div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
-      <!-- Header -->
-      <div class="flex flex-row self-center">
-        <img
-          class="w-12 h-12 md:w-24 md:h-24 rounded-lg"
-          src="/img/avatar.jpg"
-          alt="Profile picture"
-          integrity="sha386-uiNteVXosQ2+o/izp41L1G9VwuwYDYCOPxzFWks058DMUhW7KfQXcipM7WqgSgEZ" />
-        <div class="ml-4 self-center">
-          <a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Website</a>
-
-            <ul class="list-none">
-              <li class="inline mr-8"><a href="https://blog.polynom.me">Blog</a></li>
-              <li class="inline mr-8"><a href="https://polynom.me/code/">Code</a></li>
-              <li class="inline mr-8"><a href="https://polynom.me/contact/">Contact</a></li>
-            </ul>
-        </div>
-      </div>
-
-      
-<div class="flex flex-col pt-8 mx-auto">
-  <p class="prose text-white">
-    If you have any questions about my projects or just want to talk, feel
-    free to reach out to me.
-  </p>
-
-  <div class="w-full pt-8">
-    <table class="text-white w-full">
-      <tr>
-        <td>Fediverse</td>
-        <td>
-            <a class="text-indigo-400" href="https://social.polynom.me/papatutuwawa">@papatutuwawa@social.polynom.me</a>
-        </td>
-      </tr>
-      <tr>
-        <td>E-Mail</td>
-        <td>papatutuwawa [a with a circle] polynom.me</td>
-      </tr>
-      <tr>
-        <td />
-        <td>
-          Please use my <a class="text-indigo-400" href="https://pki.polynom.me&#x2F;pubkeys&#x2F;papatutuwawa.pub">GPG public key</a>
-        </td>
-      </tr>
-      <tr>
-        <td>GitHub</td>
-        <td><a class="text-indigo-400" href="https://github.com/PapaTutuWawa">PapaTutuWawa</a></td>
-      </tr>
-      <tr>
-        <td>Codeberg</td>
-        <td><a class="text-indigo-400" href="https://codeberg.org/PapaTutuWawa">PapaTutuWawa</a>
-        </td>
-      </tr>
-      <tr>
-        <td>Gitea</td>
-        <td><a class="text-indigo-400" href="https://git.polynom.me/PapaTutuWawa">PapaTutuWawa</a></td>
-      </tr>
-    </table>
-  </div>
-</div>
-
-
-    </div>
-  </body>
-</html>
--- a/content/_index.md
+++ b/content/_index.md
@ -0,0 +1,4 @@
+++
+title = "PapaTutuWawa's Website"
+template = "index.html"
+++
--- a/content/code.md
+++ b/content/code.md
@ -0,0 +1,5 @@
+++
+title = "Code | polynom.me"
+description = "Alexander 'PapaTutuWawa' 's code repositories."
+template = "code.html"
+++
--- a/content/contact.md
+++ b/content/contact.md
@ -0,0 +1,5 @@
+++
+title = "Contact | polynom.me"
+description = "Contact details for getting in touch with Alexander 'PapaTutuWawa'."
+template = "contact.html"
+++
--- a/css/index.css
+++ b/css/index.css
--- a/flake.lock
+++ b/flake.lock
@ -0,0 +1,62 @@
+{
+  "nodes": {
+    "assets": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1672838029,
+        "narHash": "sha256-maczGnXL9zid6l742og7D0KC8LlZqmebWe23AhtWGZg=",
+        "ref": "refs/heads/master",
+        "rev": "e490bf002efc9661b6312bc135f5e809cee8df18",
+        "revCount": 20,
+        "type": "git",
+        "url": "https://git.polynom.me/polynom.me/shared-assets.git"
+      },
+      "original": {
+        "type": "git",
+        "url": "https://git.polynom.me/polynom.me/shared-assets.git"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1638239011,
+        "narHash": "sha256-AjhmbT4UBlJWqxY0ea8a6GU2C2HdKUREkG43oRr3TZg=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "a7ecde854aee5c4c7cd6177f54a99d2c1ff28a31",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "21.11",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1689449371,
+        "narHash": "sha256-sK3Oi8uEFrFPL83wKPV6w0+96NrmwqIpw9YFffMifVg=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "29bcead8405cfe4c00085843eb372cc43837bb9d",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "assets": "assets",
+        "nixpkgs": "nixpkgs_2"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
--- a/flake.nix
+++ b/flake.nix
@ -0,0 +1,31 @@
+{
+  description = "The website hosted at https://polynom.me";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    assets.url = "git+https://git.polynom.me/polynom.me/shared-assets.git";
+  };
+
+  outputs = {
+    self,
+    nixpkgs,
+    assets
+  }: let
+    supportedSystems = [ "x86_64-linux" ];
+    forAllSystems = nixpkgs.lib.attrsets.genAttrs supportedSystems;
+  in {
+    devShell = forAllSystems (system: let
+      pkgs = import nixpkgs { inherit system; };
+      tailwindWithTypography = pkgs.nodePackages.tailwindcss.overrideAttrs (old: {
+        plugins = [
+          pkgs.nodePackages."@tailwindcss/typography"
+        ];
+      });
+
+    in pkgs.mkShell {
+      buildInputs = with pkgs; [
+        tailwindWithTypography zola
+      ];
+    });
+  };
+}
--- a/index.html
+++ b/index.html
@ -1,170 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="https://polynom.me/css/index.css" rel="stylesheet" />
-    <link href="https://polynom.me/css/extra.css" rel="stylesheet" />
-
-    
-    <meta property="og:title" content="PapaTutuWawa&#x27;s Website" />
-  	<meta property="og:description" content="The personal website of Alexander &#x27;PapaTutuWawa&#x27;." />
-  	<title>PapaTutuWawa&#x27;s Website</title>
-    
-  </head>
-  <body>
-    <div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
-      <!-- Header -->
-      <div class="flex flex-row self-center">
-        <img
-          class="w-12 h-12 md:w-24 md:h-24 rounded-lg"
-          src="/img/avatar.jpg"
-          alt="Profile picture"
-          integrity="sha386-uiNteVXosQ2+o/izp41L1G9VwuwYDYCOPxzFWks058DMUhW7KfQXcipM7WqgSgEZ" />
-        <div class="ml-4 self-center">
-          <a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Website</a>
-
-            <ul class="list-none">
-              <li class="inline mr-8"><a href="https://blog.polynom.me">Blog</a></li>
-              <li class="inline mr-8"><a href="https://polynom.me/code/">Code</a></li>
-              <li class="inline mr-8"><a href="https://polynom.me/contact/">Contact</a></li>
-            </ul>
-        </div>
-      </div>
-
-      
-<div class="flex flex-col mx-auto">
-  <p class="text-white prose py-8 self-center">
-    Hello! My online pseudonym is <i>PapaTutuWawa</i> and I am
-    just some random person on the Internet who is passionate about
-    topics like XMPP, federated Internet services and privacy. Linux system
-    administration, Linux tinkering and programming are my favourite things to do.
-  </p>
-
-  <h1 class="prose text-2xl text-indigo-400 self-start">Projects</h1>
-  <p class="prose text-white text-left self-start">This is a small selection of my projects. More are available <a
-      class="text-indigo-400" href="code.html">here.</a></p>
-
-
-<div class="flex flex-row self-start pt-8">
-    
-    <div>
-        <a href="https://moxxy.org" target="_blank">
-          <img
-            class="w-24 md:w-48 max-w-none rounded-lg clickable"
-            src="img&#x2F;moxxy.jpg"
-            alt="Screenshot of Moxxy"
-            integrity="sha386-c4aF6C3eQtEaAm9az1Sr70bxaIq5V9gdLUuvmZ/N9nVSzOLV/QdHs1s5axtvM7kp" />
-        </a>
-    </div>
-    
-    <div class="flex flex-col pl-8">
-      <h2 class="prose text-indigo-400 text-2xl">Moxxy</h2>
-      <p class="prose text-white text-justify">A modern XMPP client written in Flutter. Licensed under GPLv3.</p>
-  
-      <div class="pt-4">
-        <ul>
-            
-            <li>
-                <a class="text-indigo-400" href="https://moxxy.org">Website</a>
-            </li>
-            
-
-            <li><a class="prose text-indigo-400" href="https://codeberg.org&#x2F;moxxy&#x2F;moxxyv2">Code</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-<div class="flex flex-row self-start pt-8">
-    
-    <div>
-        <a href="https://codeberg.org&#x2F;PapaTutuWawa&#x2F;anitrack" target="_blank">
-          <img
-            class="w-24 md:w-48 max-w-none rounded-lg clickable"
-            src="img&#x2F;anitrack.jpg"
-            alt="Screenshot of AniTrack"
-            integrity="sha386-GhIL0ONMvXK4XqjAIBz7ID0WSqzwIsjuyaLjNMPSJ+Zv7hQw+31FOMmRTONR6tt0" />
-        </a>
-    </div>
-    
-    <div class="flex flex-col pl-8">
-      <h2 class="prose text-indigo-400 text-2xl">AniTrack</h2>
-      <p class="prose text-white text-justify">A simple Anime and Manga tracker written in Flutter. Licensed under MIT.</p>
-  
-      <div class="pt-4">
-        <ul>
-            
-            <li>
-                <a class="text-indigo-400" href="https://codeberg.org&#x2F;PapaTutuWawa&#x2F;anitrack">Website</a>
-            </li>
-            
-
-            <li><a class="prose text-indigo-400" href="https://codeberg.org&#x2F;PapaTutuWawa&#x2F;anitrack">Code</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-<div class="flex flex-row self-start pt-8">
-    
-    <div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
-        <a class="prose text-white text-5xl" href="https://codeberg.org&#x2F;PapaTutuWawa&#x2F;xmpp-discord-bridge.git">
-          <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
-            <span class="text-center">#</span>
-          </div>
-        </a>
-      </div>
-    
-    <div class="flex flex-col pl-8">
-      <h2 class="prose text-indigo-400 text-2xl">xmpp-discord-bridge</h2>
-      <p class="prose text-white text-justify">An XMPP to Discord bridge that attempts to feel as native as possible on each chat platform, written in Python. Licensed under GPLv3.</p>
-  
-      <div class="pt-4">
-        <ul>
-            
-            <li>
-                <a class="text-indigo-400" href="https://codeberg.org&#x2F;PapaTutuWawa&#x2F;xmpp-discord-bridge.git">Website</a>
-            </li>
-            
-
-            <li><a class="prose text-indigo-400" href="https://codeberg.org&#x2F;PapaTutuWawa&#x2F;xmpp-discord-bridge.git">Code</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-<div class="flex flex-row self-start pt-8">
-    
-    <div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
-        <a class="prose text-white text-5xl" href="https://git.polynom.me&#x2F;PapaTutuWawa&#x2F;mira">
-          <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
-            <span class="text-center">#</span>
-          </div>
-        </a>
-      </div>
-    
-    <div class="flex flex-col pl-8">
-      <h2 class="prose text-indigo-400 text-2xl">mira</h2>
-      <p class="prose text-white text-justify">An XMPP bot framework for persistent subscription services, written in Python. Licensed under GPLv3.</p>
-  
-      <div class="pt-4">
-        <ul>
-            
-            <li>
-                <a class="text-indigo-400" href="https://git.polynom.me&#x2F;PapaTutuWawa&#x2F;mira">Website</a>
-            </li>
-            
-
-            <li><a class="prose text-indigo-400" href="https://git.polynom.me&#x2F;PapaTutuWawa&#x2F;mira">Code</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-
-</div>
-
-    </div>
-  </body>
-</html>
--- a/input.css
+++ b/input.css
@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    background-color: #212121;
+  }
+
+  html {
+    @apply text-white;
+  }
+
+  a {
+    @apply text-indigo-400 !important;
+  }
+}
--- a/sitemap.xml
+++ b/sitemap.xml
@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-    <url>
-        <loc>https://polynom.me/</loc>
-    </url>
-    <url>
-        <loc>https://polynom.me/code/</loc>
-    </url>
-    <url>
-        <loc>https://polynom.me/contact/</loc>
-    </url>
-</urlset>
--- a/static/.well-known/host-meta
+++ b/static/.well-known/host-meta
--- a/static/.well-known/host-meta.json
+++ b/static/.well-known/host-meta.json
--- a/static/.well-known/openpgpkey/policy
+++ b/static/.well-known/openpgpkey/policy
--- a/static/CNAME
+++ b/static/CNAME
--- a/static/css/extra.css
+++ b/static/css/extra.css
--- a/static/img/anitrack.jpg
+++ b/static/img/anitrack.jpg
--- a/static/img/avatar.jpg
+++ b/static/img/avatar.jpg
--- a/static/img/moxxy.jpg
+++ b/static/img/moxxy.jpg
--- a/static/rio.json
+++ b/static/rio.json
--- a/static/robots.txt
+++ b/static/robots.txt
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,10 @@
+module.exports = {
+    content: [
+        "./templates/*.html",
+    ],
+    theme: {
+    },
+    plugins: [
+        require('@tailwindcss/typography'),
+    ],
+}
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="{{ get_url(path="css/index.css") }}" rel="stylesheet" />
+    <link href="{{ get_url(path="css/extra.css") }}" rel="stylesheet" />
+
+    {% if page %}
+    <meta property="og:title" content="{{ page.title }}" />
+  	<meta property="og:description" content="{{ page.description }}" />
+  	<title>{{ page.title }}</title>
+    {% else %}
+    <meta property="og:title" content="{{ config.title }}" />
+  	<meta property="og:description" content="{{ config.description }}" />
+  	<title>{{ config.title }}</title>
+    {% endif %}
+  </head>
+  <body>
+    <div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
+      <!-- Header -->
+      <div class="flex flex-row self-center">
+        <img
+          class="w-12 h-12 md:w-24 md:h-24 rounded-lg"
+          src="/img/avatar.jpg"
+          alt="Profile picture"
+          integrity="sha386-{{ get_hash(path="img/avatar.jpg", sha_type=384, base64=true) | safe }}" />
+        <div class="ml-4 self-center">
+          <a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Website</a>
+
+            <ul class="list-none">
+              <li class="inline mr-8"><a href="https://blog.polynom.me">Blog</a></li>
+              <li class="inline mr-8"><a href="{{ get_url(path="@/code.md" ) }}">Code</a></li>
+              <li class="inline mr-8"><a href="{{ get_url(path="@/contact.md" ) }}">Contact</a></li>
+            </ul>
+        </div>
+      </div>
+
+      {% block content %}{% endblock %}
+    </div>
+  </body>
+</html>
--- a/templates/code.html
+++ b/templates/code.html
@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="flex flex-col pt-8 mx-auto">
+    <p class="prose text-white">
+      I keep my code mostly on my private Gitea instance <a class="text-indigo-400"
+        href="https://{{ config.extra.gitea_url }}/{{ config.extra.gitea_username }}">here</a>.
+      For purposes of allowing other people to also contribute
+      I try to mirror my code on GitHub and codeberg.
+    </p>
+  
+    <div class="pt-8 w-full">
+      <table class="text-white pt-8 w-full">
+        <tr>
+          <td>GitHub</td>
+          <td><a class="text-indigo-400" href="https://github.com/{{ config.extra.github_username }}">{{ config.extra.github_username }}</a></td>
+        </tr>
+        <tr>
+          <td>Codeberg</td>
+          <td><a class="text-indigo-400" href="https://codeberg.org/{{ config.extra.codeberg_username }}">{{ config.extra.codeberg_username }}</a>
+          </td>
+        </tr>
+        <tr>
+          <td>Gitea</td>
+          <td><a class="text-indigo-400" href="https://{{ config.extra.gitea_url }}/{{ config.extra.gitea_username }}">{{ config.extra.gitea_username }}</a></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+{% endblock %}
--- a/templates/contact.html
+++ b/templates/contact.html
@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="flex flex-col pt-8 mx-auto">
+  <p class="prose text-white">
+    If you have any questions about my projects or just want to talk, feel
+    free to reach out to me.
+  </p>
+
+  <div class="w-full pt-8">
+    <table class="text-white w-full">
+      <tr>
+        <td>Fediverse</td>
+        <td>
+            <a class="text-indigo-400" href="https://{{ config.extra.fediverse_instance}}/{{ config.extra.fediverse_username }}">@{{ config.extra.fediverse_username }}@{{ config.extra.fediverse_instance }}</a>
+        </td>
+      </tr>
+      <tr>
+        <td>E-Mail</td>
+        <td>{{ config.extra.email_user }} [a with a circle] {{ config.extra.email_domain }}</td>
+      </tr>
+      <tr>
+        <td />
+        <td>
+          Please use my <a class="text-indigo-400" href="https://{{ config.extra.gpg_key_url }}">GPG public key</a>
+        </td>
+      </tr>
+      <tr>
+        <td>GitHub</td>
+        <td><a class="text-indigo-400" href="https://github.com/{{ config.extra.github_username }}">{{ config.extra.github_username }}</a></td>
+      </tr>
+      <tr>
+        <td>Codeberg</td>
+        <td><a class="text-indigo-400" href="https://codeberg.org/{{ config.extra.codeberg_username }}">{{ config.extra.codeberg_username }}</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Gitea</td>
+        <td><a class="text-indigo-400" href="https://{{ config.extra.gitea_url }}/{{ config.extra.gitea_username }}">{{ config.extra.gitea_username }}</a></td>
+      </tr>
+    </table>
+  </div>
+</div>
+
+{% endblock %}
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,57 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="flex flex-col mx-auto">
+  <p class="text-white prose py-8 self-center">
+    Hello! My online pseudonym is <i>PapaTutuWawa</i> and I am
+    just some random person on the Internet who is passionate about
+    topics like XMPP, federated Internet services and privacy. Linux system
+    administration, Linux tinkering and programming are my favourite things to do.
+  </p>
+
+  <h1 class="prose text-2xl text-indigo-400 self-start">Projects</h1>
+  <p class="prose text-white text-left self-start">This is a small selection of my projects. More are available <a
+      class="text-indigo-400" href="code.html">here.</a></p>
+
+{% for project in config.extra.projects %}
+<div class="flex flex-row self-start pt-8">
+    {% if project.screenshot != "" %}
+    <div>
+        <a href="https://{{ project.website }}" target="_blank">
+          <img
+            class="w-24 md:w-48 max-w-none rounded-lg clickable"
+            src="{{ project.screenshot }}"
+            alt="Screenshot of {{ project.title }}"
+            integrity="sha386-{{ get_hash(path=project.screenshot, sha_type=384, base64=true) | safe }}" />
+        </a>
+    </div>
+    {% else %}
+    <div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
+        <a class="prose text-white text-5xl" href="https://{{ project.website }}">
+          <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
+            <span class="text-center">#</span>
+          </div>
+        </a>
+      </div>
+    {% endif %}
+    <div class="flex flex-col pl-8">
+      <h2 class="prose text-indigo-400 text-2xl">{{ project.title }}</h2>
+      <p class="prose text-white text-justify">{{ project.description }}</p>
+  
+      <div class="pt-4">
+        <ul>
+            {% if project.website != "" %}
+            <li>
+                <a class="text-indigo-400" href="https://{{ project.website }}">Website</a>
+            </li>
+            {% endif %}
+
+            <li><a class="prose text-indigo-400" href="https://{{ project.source_url }}">Code</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+{% endfor %}
+
+</div>
+{% endblock content %}