Implement new deployment mechanism for new server

I accidentally save this post in the wrong location

.github/workflows/hugo_cd.yml

@@ -0,0 +1,62 @@
+name: Hugo CD
+
+on:
+  push:
+    branches:
+      - "master"
+
+defaults:
+  run:
+    working-directory: ./
+
+jobs:
+  build:
+    timeout-minutes: 6
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup hugo
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: "latest"
+          extended: true
+
+      - name: Build
+        run: hugo --minify
+
+      - name: Upload deployment
+        uses: actions/upload-artifact@v4
+        with:
+          name: public-html
+          path: ./public
+
+  deploy:
+    timeout-minutes: 6
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: production
+      url: https://maik.dev/
+    steps:
+      - name: Download deployment
+        uses: actions/download-artifact@v4
+        with:
+          name: public-html
+          path: ./public-html
+
+      - name: Setup SSH config for remote server
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+          echo "${{ secrets.SSH_HOST }} ssh-ed25519 ${{ secrets.SSH_HOST_KEY }}" > ~/.ssh/known_hosts
+          chmod 600 ~/.ssh/id_ed25519
+          eval "$(ssh-agent -s)"
+          ssh-add ~/.ssh/id_ed25519
+
+      - name: Transfer deployment to remote server
+        run: |
+          rsync -avh --delete-after ./public-html/ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:~/maik.dev

.github/workflows/hugo_ci.yml

@@ -0,0 +1,34 @@
+name: Hugo CI
+
+on:
+  push:
+    branches:
+      - "*"
+      - "*/*"
+      - "**"
+      - "!master"
+  pull_request:
+    branches:
+      - "master"
+
+defaults:
+  run:
+    working-directory: ./
+
+jobs:
+  ci:
+    timeout-minutes: 5
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup hugo
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: "latest"
+          extended: true
+
+      - name: Build
+        run: hugo -D -F

.gitignore

@@ -1,2 +1,9 @@
-# All old/unused files
+# Hugo default output directory
+public/
+resources/_gen/
+.hugo_build.lock
+
+.vscode/
+
+*.bak
 *.old

README.md

@@ -1,2 +1,50 @@
-# Personal-Website
+# Personal Website
-Repo for my website
+
+Link: <https://maik.dev>
+
+## Goals
+
+The goal of this website is mainly to post [CTF](https://ctftime.org/ctf-wtf/) writeups.
+
+Besides that, its also made for the enjoyment of creating this website. To wit, I also set some technical goals for this website.
+
+### Development goals
+
+The website must comply with at least the following:
+
+- The website is fully usable with JavaScript disabled.
+  - JavaScript may only be used for graphical enhancements.
+  - Where possible, JavaScript should be avoided.
+- The website must have a usable Dark Theme.
+  - This means all text and images are still readable, and the look and feel is the same are the regular theme (but dark ofcourse).
+- The website must have a working RSS feed,
+- The website must be static.
+  - Self-hosted, dynamic components (like a comment system) can be used, but the main content is static. (see the first goal)
+- All assets, libraries, whatever, must be hosted locally.
+  - With the exception of Google Analytics. I am planning to replace this in the future.
+
+## Installation
+
+### Install Hugo
+
+This website is made using the [Hugo static site generator](https://gohugo.io/).
+
+On Arch Linux this is as easy as running the following:
+
+```sh
+pacman -S hugo
+```
+
+### Running locally
+
+To see a preview of new posts, you can run the hugo development server.
+
+```sh
+hugo -DF server
+```
+
+The `-D` and `-F` flags are for building draft and future posts respectively.
+
+## Publish
+
+When a commit is pushed to the `master` branch, the new version of the website will automatically be deployed using GitHub Actions.

assets/images/logo.svg

@@ -1,68 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-	<style type="text/css">
-		.st0 {
-			clip-path: url(#SVGID_2_);
-		}
-
-		.st1 {
-			fill: #02A8F4;
-		}
-
-		.st2 {
-			fill: #FFFFFF;
-		}
-
-		.st3 {
-			fill: #F2504D;
-		}
-
-		.st4 {
-			fill: #E5E4E9;
-		}
-
-		.st5 {
-			fill: #FF0000;
-		}
-
-		.st6 {
-			fill: #FFFF00;
-		}
-
-		.st7 {
-			fill: #00FF00;
-		}
-
-		.st8 {
-			fill-opacity: 0;
-		}
-
-	</style>
-	<g>
-		<defs>
-			<rect id="SVGID_1_" width="512" height="512" />
-		</defs>
-		<clipPath id="SVGID_2_">
-			<use xlink:href="#SVGID_1_" style="overflow:visible;" />
-		</clipPath>
-		<g class="st0">
-			<path class="st1" d="M58.7,256L58.7,256C58.7,147,147,58.7,256,58.7l0,0c52.3,0,102.5,20.8,139.5,57.8s57.8,87.2,57.8,139.5l0,0
-			c0,109-88.3,197.3-197.3,197.3l0,0C147,453.3,58.7,365,58.7,256z" />
-			<path class="st2" d="M149.2,161.9L149.2,161.9c0-7,5.7-12.7,12.7-12.7h188.2c3.4,0,6.6,1.3,8.9,3.7c2.4,2.4,3.7,5.6,3.7,8.9v188.2
-			c0,7-5.7,12.7-12.7,12.7H161.9c-7,0-12.7-5.7-12.7-12.7V161.9z" />
-			<path class="st3" d="M166,202.4H346v133.6H166V202.4z" />
-			<path class="st4" d="M154.2,149.2h203.6c1.3,0,2.6,0.5,3.5,1.5c0.9,0.9,1.5,2.2,1.5,3.5v24.9c0,0,0,0,0,0l-213.5,0l0,0
-			c0,0,0,0,0,0l0-24.9l0,0C149.2,151.5,151.5,149.2,154.2,149.2z" />
-			<path class="st5" d="M158.7,164.2L158.7,164.2c0-4,3.2-7.2,7.2-7.2l0,0c1.9,0,3.7,0.8,5.1,2.1c1.4,1.4,2.1,3.2,2.1,5.1l0,0
-			c0,4-3.2,7.2-7.2,7.2l0,0C162,171.4,158.7,168.2,158.7,164.2z" />
-			<path class="st6" d="M179.2,164.2L179.2,164.2c0-4,3.2-7.2,7.2-7.2l0,0c1.9,0,3.7,0.8,5.1,2.1c1.4,1.4,2.1,3.2,2.1,5.1l0,0
-			c0,4-3.2,7.2-7.2,7.2l0,0C182.4,171.4,179.2,168.2,179.2,164.2z" />
-			<path class="st7" d="M199.6,164.2L199.6,164.2c0-4,3.2-7.2,7.2-7.2l0,0c1.9,0,3.7,0.8,5.1,2.1c1.4,1.4,2.1,3.2,2.1,5.1l0,0
-			c0,4-3.2,7.2-7.2,7.2l0,0C202.8,171.4,199.6,168.2,199.6,164.2z" />
-			<path class="st8" d="M166,202.4H346v133.6H166V202.4z" />
-			<path class="st2" d="M241.1,291.4l-39.3-17.1v-9.5l39.3-17v11.1l-27.4,10.5l27.4,10.9V291.4z M244.8,298.9l14.2-59.2h8.3
-			l-14.3,59.2H244.8z M270.8,291.5v-11.1l27.4-10.8L270.8,259v-11l39.3,17v9.4L270.8,291.5z" />
-		</g>
-	</g>
-</svg>

assets/images/nav_toggle.svg

@@ -1,40 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="124px" height="124px" viewBox="0 0 124 124" style="enable-background:new 0 0 124 124;" xml:space="preserve">
-	<g>
-		<path d="M112,6H12C5.4,6,0,11.4,0,18s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,6,112,6z" />
-		<path d="M112,50H12C5.4,50,0,55.4,0,62c0,6.6,5.4,12,12,12h100c6.6,0,12-5.4,12-12C124,55.4,118.6,50,112,50z" />
-		<path d="M112,94H12c-6.6,0-12,5.4-12,12s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,94,112,94z" />
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-</svg>

assets/images/project_placeholder.svg

@@ -1,2 +0,0 @@
-<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
-	<rect x="2" y="2" width="296" height="296" style="fill:#DEDEDE;stroke:#555555;stroke-width:2" /><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555555">300&#215;300</text></svg>

assets/styles/styles.css

@@ -1,732 +0,0 @@
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	font-family: 'Roboto', sans-serif;
-	background: #060612;
-
-	overflow-x: hidden;
-}
-
-@font-face {
-	font-family: 'Roboto';
-	font-style: normal;
-	font-display: fallback;
-	font-weight: 400;
-	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-}
-
-@media screen and (max-width: 480px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 12pt;
-	}
-}
-
-@media screen and (max-width: 480px) {
-
-	html,
-	body {
-		min-width: 320px;
-	}
-}
-
-@media screen and (max-width: 736px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 12pt;
-	}
-}
-
-/*
-@media screen and (max-width: 736px) {
-
-	html,
-	body {
-		overflow-x: hidden;
-	}
-}
-*/
-
-@media screen and (max-width: 980px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 12pt;
-	}
-}
-
-@media screen and (max-width: 1280px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 11.5pt;
-	}
-}
-
-@media screen and (max-width: 1680px) {
-
-	body,
-	input,
-	select,
-	textarea {
-		font-size: 13pt;
-	}
-}
-
-.parallax::after {
-	/* Display and position the pseudo-element */
-	content: " ";
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-
-	/* Move the pseudo-element back away from the camera,
-   * then scale it back up to fill the viewport.
-   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
-	transform: translateZ(-1px) scale(1.5);
-}
-
-.hidden {
-	display: none !important;
-}
-
-.nocroll {
-	overflow: hidden !important;
-}
-
-.content {
-	display: grid;
-	grid-template-rows: auto;
-	grid-column-gap: 0;
-	grid-row-gap: 0;
-
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-areas:
-		"nav nav nav"
-		"header header header"
-		"projects projects projects"
-		"contact contact contact"
-		"footer footer footer";
-
-	overflow-x: hidden;
-	overflow-y: auto;
-	perspective: 2px;
-	height: 100vh;
-	scroll-behavior: smooth;
-}
-
-@media only screen and (max-width: 980px) {
-	.content {
-		grid-template-columns: 1fr 1fr;
-		grid-template-areas:
-			"nav nav"
-			"header header"
-			"projects projects"
-			"contact contact"
-			"footer footer";
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content {
-		grid-template-columns: 1fr;
-		grid-template-areas:
-			"nav"
-			"header"
-			"projects"
-			"contact"
-			"footer";
-	}
-}
-
-.content > * {
-	background: white;
-}
-
-.content > nav {
-	grid-area: nav;
-	position: absolute;
-	background: transparent;
-	color: #ffffff;
-	width: 100%;
-	height: 3.5em;
-	line-height: 3.5em;
-	z-index: 10;
-	user-select: none;
-}
-
-.content > nav > .mobile_menu {
-	position: absolute;
-	width: 100vw;
-	height: calc(100vh - 3.5em);
-	z-index: 100;
-	top: 3.5em;
-	left: 0;
-	background-color: #060612;
-}
-
-.content > nav > .mobile_menu > .container {
-	position: relative;
-}
-
-.content > nav > .mobile_menu > .container > .list {}
-
-.content > nav > .mobile_menu > .container > .list > .item {
-	display: block;
-	background-color: #1a1233;
-	width: 100%;
-	text-decoration: none;
-	font-weight: 900;
-	color: #ffffff;
-	line-height: 4em;
-	font-size: 1.25em;
-	padding-left: 1em;
-	position: relative;
-	cursor: pointer;
-}
-
-.content > nav > .mobile_menu > .container > .list > .active {
-	background: #480070;
-}
-
-.content > nav > .mobile_menu > .container > .list > .language > .subitem {
-	display: block;
-	width: 100%;
-	text-decoration: none;
-	color: #ffffff;
-	background-color: #9535fc;
-	position: absolute;
-	left: 0;
-	padding-left: 3em;
-}
-
-.content > nav > .mobile_menu > .container > .list > .item > .subitem:nth-child(2n) {
-	margin-top: 4em;
-}
-
-.content > nav > .nav_toggle {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: #9535fc;
-	width: 3.5em;
-	height: 3.5em;
-	cursor: pointer;
-	display: none;
-}
-
-.content > nav > .nav_toggle > .button_container {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-53%, -46%);
-	margin: 0;
-	text-decoration: none;
-	color: #aa5bff;
-	font-weight: 900;
-	font-size: 2em;
-}
-
-.content > nav > .logo {
-	text-decoration: none;
-	color: #ffffff;
-	margin-left: 1.5em;
-}
-
-.content > nav > .list {
-	cursor: default;
-	user-select: none;
-	float: right;
-	margin-right: 1em;
-}
-
-.content > nav > .list > .item {
-	display: inline-block;
-	padding: 0 1em;
-	text-decoration: none;
-	color: #ffffff;
-	position: relative;
-	cursor: pointer;
-}
-
-.content > nav > .list > .item > .subitem {
-	display: block;
-	padding: 0 1em;
-	right: 0;
-	text-decoration: none;
-	color: #ffffff;
-	background: #1a1233;
-	position: absolute;
-}
-
-.content > nav > .list > .item > .subitem:nth-child(2n) {
-	margin-top: 4em;
-}
-
-.content > nav > .list > .active {
-	color: #9535fc;
-}
-
-@media only screen and (max-width: 736px) {
-	.content > nav {
-		background: rgba(6, 6, 18, 0.95);
-		user-select: none;
-	}
-
-	.content > nav > .logo {
-		margin: 0;
-		text-align: center;
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%)
-	}
-
-	.content > nav > .list {
-		display: none;
-	}
-
-	.content > nav > .nav_toggle {
-		display: block;
-	}
-}
-
-.content > header {
-	grid-area: header;
-	min-height: 100vh;
-	box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
-	background: rgba(6, 6, 18, 0.95);
-}
-
-.content > header {
-	min-height: 35em;
-	height: 100vh;
-	position: relative;
-
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.content > header::after {
-	background-size: cover;
-	background-image: url("../images/banner.webp");
-	z-index: -1;
-}
-
-.content > header > .container {
-	user-select: none;
-}
-
-.content > header > .container > .text {
-	display: inline-block;
-	user-select: text;
-}
-
-.content > header > .container > .text > .container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.content > header > .container > .text > .container > h1 {
-	font-size: 2.5em;
-	line-height: 1.5em;
-	color: #ffffff;
-	margin: 0;
-	padding: 0;
-}
-
-.content > header > .container > .text > .container > span {
-	font-size: 1.25em;
-	line-height: 1.75em;
-	text-align: right;
-	color: #ffffff;
-}
-
-.content > header > .container > .logo {
-	user-select: none;
-}
-
-.content > header > .container > .logo > img {
-	width: 18em;
-	height: 18em;
-	margin-left: 3em;
-	display: inline-block;
-	vertical-align: middle;
-	position: relative;
-}
-
-.content > header > .container > .filler {
-	display: block;
-	height: 2em;
-}
-
-.content > header > .scroll_arrow {
-	position: absolute;
-	bottom: 1.25em;
-	z-index: 8;
-	user-select: none;
-}
-
-.content > header > .scroll_arrow > a {
-	text-decoration: none;
-	color: #ffffff;
-	font-size: 4em;
-	padding: 1em 1em 0.25em 1em;
-}
-
-@media only screen and (max-width: 980px) {
-	.content > header > .container > .logo > img {
-		margin: 0;
-		display: block;
-		margin: 0 auto;
-	}
-
-	.content > header > .container > .text {
-		display: block;
-	}
-
-	.content > header > .container > .text > .container > span,
-	.content > header > .container > .text > .container > h1 {
-		text-align: center;
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > header > .container > .text > .container > h1 {
-		font-size: 1.5em;
-	}
-
-	.content > header > .container > .text > .container > span {
-		font-size: 1em;
-	}
-
-	.content > header > .container > .logo > img {
-		width: 9em;
-		height: 9em;
-	}
-}
-
-.content > .projects {
-	grid-area: projects;
-	background-color: #060612;
-	text-align: center;
-	color: #ffffff;
-	width: 100%;
-	margin-bottom: 1.25em;
-}
-
-.content > .projects > .container {
-	margin: 1em 2em;
-	display: grid;
-	grid-template-rows: auto;
-	grid-column-gap: 0;
-	grid-row-gap: 0;
-
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-	grid-template-areas:
-		"description description description description description description"
-		"watchtogether watchtogether superbot superbot toyneuralnet toyneuralnet"
-		". invoicegenerator invoicegenerator ctf ctf ."
-}
-
-.content > .projects > .container > .description {
-	grid-area: description;
-	margin: 1em auto;
-	width: 85%;
-	max-width: 78em;
-}
-
-.content > .projects > .container > .description > h1 {
-	font-size: 2em;
-}
-
-.content > .projects > .container > .description > hr {
-	width: 60%;
-	margin: 1em auto 1em;
-	border-color: #9535fc;
-	border-width: .1em;
-}
-
-.content > .projects > .container > .project {
-	display: block;
-	margin: .75em auto;
-	width: 80%;
-	/*	background-color: white;*/
-}
-
-.content > .projects > .container > .project > .icon {
-	background-color: #1a1233;
-	height: 6em;
-	width: 6em;
-	position: relative;
-	border-radius: 100%;
-	margin: auto;
-	user-select: none;
-}
-
-.content > .projects > .container > .project > .icon > img {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	height: 2.25em;
-	width: 2.25em;
-}
-
-.content > .projects > .container > .project > h1 {
-	font-size: 1.35em;
-	line-height: 1.5em;
-}
-
-.content > .projects > .container > .project > p {}
-
-.content > .projects p {
-	font-size: 1.25em;
-	line-height: 1.75em;
-}
-
-.content > .projects p > a {
-	text-decoration: underline;
-	color: #9535fc;
-}
-
-.content > .projects > .container > .watchtogether {
-	grid-area: watchtogether;
-}
-
-.content > .projects > .container > .superbot {
-	grid-area: superbot;
-}
-
-.content > .projects > .container > .toyneuralnet {
-	grid-area: toyneuralnet;
-}
-
-.content > .projects > .container > .invoicegenerator {
-	grid-area: invoicegenerator;
-}
-
-.content > .projects > .container > .ctf {
-	grid-area: ctf;
-}
-
-@media only screen and (max-width: 980px) {
-	.content > .projects > .container {
-		grid-template-columns: 1fr 1fr 1fr 1fr;
-		grid-template-areas:
-			"description description description description"
-			"watchtogether watchtogether superbot superbot"
-			"toyneuralnet toyneuralnet invoicegenerator invoicegenerator"
-			". ctf ctf ."
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > .projects > .container {
-		grid-template-columns: 1fr;
-		grid-template-areas:
-			"description"
-			"watchtogether"
-			"superbot"
-			"toyneuralnet"
-			"invoicegenerator"
-			"ctf"
-	}
-
-	.content > .projects > .container > .description > h1 {
-		font-size: 1.5em;
-	}
-
-	.content > .projects p {
-		font-size: 1em;
-	}
-
-	.content > .projects > .container > .project > h1 {
-		font-size: 1.2em;
-	}
-}
-
-.content > .contact {
-	grid-area: contact;
-	background-color: #9535fc;
-	text-align: center;
-	color: #ffffff;
-}
-
-.content > .contact > .container {
-	margin: 9em auto;
-	width: 70%;
-}
-
-.content > .contact > .container > h1 {
-	font-size: 2em;
-	line-height: 1.5em;
-	/*	letter-spacing: -0.025em;*/
-}
-
-.content > .contact > .container > p {
-	font-size: 1.25em;
-	line-height: 1.75em;
-	margin-top: -0.75em;
-}
-
-.content > .contact > .container > p > a {
-	color: #ffffff;
-	/*	text-decoration: none;*/
-}
-
-@media only screen and (max-width: 980px) {
-	.content > .contact > .container {
-		margin: 7em auto;
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > .contact > .container {
-		margin: 6.75em auto;
-	}
-
-	.content > .contact > .container > h1 {
-		font-size: 1.5em;
-	}
-
-	.content > .contact > .container > p {
-		font-size: 1em;
-	}
-}
-
-.content > footer {
-	grid-area: footer;
-	background-color: #060612;
-	color: #ffffff;
-}
-
-.content > footer > .container {
-	margin: 8em auto 0;
-	padding-bottom: 7em;
-	width: 80%;
-	position: relative;
-}
-
-.content > footer > .container > .social {
-	user-select: none;
-	margin: 1.75em auto;
-	width: 80%;
-	text-align: center
-}
-
-.content > footer > .container > .social > a {
-	color: #9535fc;
-	margin: .25em;
-}
-
-.content > footer > .container > .social > a > svg {
-	fill: #9535fc;
-	width: 2.5em;
-	height: 2.5em;
-	margin: 0 0.25em;
-}
-
-.content > footer > .container > .social > a > svg:hover {
-	-moz-transform: scale(1.1);
-	-webkit-transform: scale(1.1);
-	tansform: scale(1.1);
-}
-
-.content > footer > .container > .copyright {
-	user-select: none;
-	margin: 1em auto;
-	text-align: center
-}
-
-.content > footer > .container > .copyright > p {
-	display: inline-block;
-	user-select: text;
-	margin: 0;
-	line-height: 1.75em;
-	font-size: 1.1em;
-}
-
-.content > footer > .container > .copyright > span {
-	user-select: none;
-	margin: 0 1.25em;
-}
-
-.content > footer > .container > .scroll_up {
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
-	bottom: 0;
-	z-index: 8;
-	user-select: none;
-}
-
-.content > footer > .container > .scroll_up > a {
-	text-decoration: none;
-	color: #ffffff;
-	font-size: 4em;
-	padding: .25em 1.25em 0.25em 1.25em;
-}
-
-@media only screen and (max-width: 1680px) {
-	.content > footer > .container > .copyright > .second_span {
-		display: none;
-	}
-
-	.content > footer > .container > .copyright > .trademarks {
-		display: block;
-	}
-}
-
-@media only screen and (max-width: 980px) {
-	.content > footer > .container {
-		margin: 7em auto 0;
-		padding-bottom: 6em;
-	}
-
-	.content > footer > .container > .social > a > svg {
-		width: 2.25em;
-		height: 2.25em;
-	}
-
-	.content > footer > .container > .copyright > span {
-		display: none;
-	}
-
-	.content > footer > .container > .copyright > p {
-		display: block;
-	}
-}
-
-@media only screen and (max-width: 736px) {
-	.content > footer > .container > .social > a > svg {
-		width: 1.75em;
-		height: 1.75em;
-	}
-
-	.content > footer > .container > .social > a > svg:hover {
-		transform: none;
-	}
-
-	.content > footer > .container > .copyright > p {
-		font-size: 0.9em;
-	}
-}

config/_default/hugo.toml

@@ -0,0 +1,194 @@
+baseURL = "http://localhost:1313/"
+title = "Maik de Kruif"
+languageCode = "en-us"
+theme = "maik-blog"
+
+copyright = "© Maik de Kruif (maik_dev). All rights reserved."
+
+PygmentsCodeFences = true
+pygmentsUseClasses = true
+PygmentsStyle = "monokai"
+
+archetypeDir = "archetypes"
+contentDir   = "content"
+dataDir      = "data"
+layoutDir    = "layouts"
+publishDir   = "public"
+
+buildDrafts  = false
+buildFuture  = false
+buildExpired = false
+canonifyURLs = true
+
+enableRobotsTXT = true
+enableGitInfo   = true
+enableEmoji     = true
+
+[permalinks]
+  [permalinks.page]
+    posts = "/posts/:title/"
+    writeups = "/:sections/:title/"
+    # writeups = "/writeups/:title/"
+    portfolio = "/portfolio/:title/"
+
+[outputs]
+  home = ["HTML", "RSS"]
+  page = ["HTML", "RSS"]
+
+[pagination]
+  pagerSize  = 12
+
+[params]
+  dateform        = "Jan 2, 2006"
+  dateformShort   = "Jan 2"
+  dateformNum     = "2006-01-02"
+  dateformNumTime = "2006-01-02 15:04 -0700"
+
+  # Metadata mostly used in document's head
+  description = "Hey there, my name is Maik de Kruif, I create websites, bots and other kinds of software. At the moment, I'm still studying computer science at Avans University of Applied Sciences. I am also a big fan of open-source software, which is why you'll find many of my projects on Github. And last but not least, I love playing around with cyber-security related stuff."
+  keywords = "Devloper, Software Engineer, Software Developer, Maik, Computer Science, Portfolio, Blog, Maik de Kruif"
+  images = [""]
+
+  genre = "Blog"
+
+  rssLimit  = 15
+
+  showReadingTimeInList = false
+
+  homeSubtitle = "Software Engineering, Linux and Cyber Security"
+
+  # Prefix of link to the git commit detail page. GitInfo must be enabled.
+  gitUrl = "https://github.com/maikka39/Personal-Website/commit/"
+
+  # Set disableReadOtherPosts to true in order to hide the links to other posts.
+  disableReadOtherPosts = false
+
+  # Sharing buttons
+  # There are a lot of buttons preconfigured. If you want to change them,
+  # generate the buttons here: https://sharingbuttons.io
+  # and add them into your own `layouts/partials/sharing-buttons.html`
+  # Preconfigured: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, telegram
+  enableSharingButtons = true
+  sharingButtons = ["twitter", "email", "linkedin", "reddit", "whatsapp", "telegram"]
+
+  # Integrate Javascript files or stylesheets by adding the url to the external assets or by
+  # linking local files with their path relative to the static folder, e.g. "css/styles.css"
+  customCSS = []
+  customJS  = []
+
+  # Toggle this option need to rebuild SCSS, requires extended version of Hugo
+  justifyContent = false  # Set "text-align: justify" to .post-content.
+
+  # Default theme "light" or "dark"
+  defaultTheme = "light"
+  themeColor = "#252627"
+
+  # Colors for favicons
+  [params.favicon.color]
+    mask = "#252627"
+    msapplication = "#252627"
+    theme = "#252627"
+
+  [params.logo]
+    logoText     = "$ cd /home/"
+    logoHomeLink = "/"
+
+  # Uncomment this if you want a portrait on your start page
+  [params.portrait]
+    path     = "/img/home/portrait.png"
+    alt      = "Portrait"
+    size = "175px"
+
+  [params.author]
+    name = "Maik de Kruif"
+    email = "maik@maik.dev"
+    twitter = "@maik_dev"
+    image = "/img/home/portrait.png"
+
+  [params.general]
+    twitter = "@maik_dev"
+
+  # Wallets
+  [[params.wallets]]
+    name = "XMR"
+    address = "83cfsXGHPaW81hKJtAPYZEgbfFqANMTXXRwghsBpjf5oTDRV3BnCC4jFno8tLTnF4C6gJzGjPEmpvjntXaiGBB7kVitkDKi"
+
+  # Social icons
+  [[params.social]]
+    name = "email"
+    url  = "mailto:maik@maik.dev"
+
+  [[params.social]]
+    name = "github"
+    url  = "https://github.com/maikka39"
+
+  [[params.social]]
+    name = "linkedin"
+    url  = "https://www.linkedin.com/in/maikdekruif/"
+
+  [[params.social]]
+    name = "twitter"
+    url  = "https://twitter.com/maik_dev"
+
+  [[params.social]]
+    name = "discord"
+    url  = "https://discord.gg/wXCMdzCDcH"
+
+  [[params.social]]
+    name = "instagram"
+    url  = "https://www.instagram.com/maik.dev/"
+
+  [[params.social]]
+    name = "stackoverflow"
+    url  = "https://stackoverflow.com/users/9146982/maik-de-kruif"
+
+  # [[params.social]]
+  #   name = "rss"
+  #   url  = "posts/index.xml"
+
+  # [[params.social]]
+  #   name = "hackerrank"
+  #   url  = "https://www.hackerrank.com/maik_dev"
+
+  # [[params.social]]
+  #   name = "medium"
+  #   url  = "https://medium.com/@maikka39"
+
+  [[params.social]]
+    name = "steam"
+    url  = "https://steamcommunity.com/id/maikka39"
+
+  [[params.social]]
+    name = "reddit"
+    url  = "https://www.reddit.com/user/maikka39"
+
+  # [[params.social]]
+  #   name = "lbry"
+  #   url  = "https://lbry.tv/@Maik:c"
+
+  [[params.social]]
+    name = "youtube"
+    url  = "https://www.youtube.com/channel/UCepNO6s7q0Kcyn8cc3rZNFA"
+
+[languages]
+  [languages.en]
+    weight    = 1
+    copyright = "© Maik de Kruif (maik_dev). All rights reserved."
+
+[menu]
+  [[menu.main]]
+    identifier = "about"
+    name       = "About"
+    url        = "about/"
+  [[menu.main]]
+    identifier = "portfolio"
+    name       = "Portfolio"
+    url        = "portfolio/"
+  [[menu.main]]
+    identifier = "posts"
+    name       = "Posts"
+    url        = "posts/"
+  [[menu.main]]
+    identifier = "writeups"
+    name       = "Writeups"
+    url        = "writeups/"

config/production/hugo.toml

@@ -0,0 +1,5 @@
+baseURL = "https://maik.dev/"
+
+[services]
+  [services.googleAnalytics]
+    id = "UA-136337666-1"

content/about.md

@@ -0,0 +1,21 @@
++++
+author = "Maik de Kruif"
+title = "About"
+date = 2021-11-19T12:26:01+01:00
+description = "Ever since I was a little kid, I've loved coding. From the moment of writing my first program in Python and manipulating it to produce the desired output, I have been obsessed with the idea of writing software to solve practical problems. Programming is like a never-ending puzzle where you continuously have to come up with a new way to solve it."
+images = []
+tags = [
+    "aboutme",
+]
+categories = [
+    "me",
+]
++++
+
+Ever since I was a little kid, I've loved coding. From the moment of writing my first program in Python and manipulating it to produce the desired output, I have been obsessed with the idea of writing software to solve practical problems. Programming is like a never-ending puzzle where you continuously have to come up with a new way to solve it.
+
+Outside of my job, I run a small business with a couple of friends where we develop drone shows. I'm responsible for both designing and writing the control software as well as creating and designing the actual drones.
+
+When I get home after work/school, I tend to either continue writing code for some personal side-projects, or play around with cyber-security related stuff. This is what keeps me up at night, a never-ending thirst to create beautiful, powerful things and share them with the world.
+
+Skills/Interests: Python, Java, Scala, JavaScript, Node, CSS, HTML, Git, SQL, MongoDB, Apache, Nginx, Docker.

content/portfolio/_index.md

@@ -0,0 +1,9 @@
++++
+author = "Maik de Kruif"
+title = "Portfolio"
+description = "Over the years I have developed various pieces of software and accomplished many goals. Most of them can be found on my GitHub, but I have also listed some here with a bit of extra information."
++++
+
+Over the years I have developed various pieces of software and accomplished many goals.
+
+Most of them can be found on [my GitHub](https://github.com/maikka39/), but I have also listed some here with a bit of extra information.

content/portfolio/learn-to-program.md

@@ -0,0 +1,17 @@
++++
+author = "Maik de Kruif"
+title = "Learn-to-Program"
+start_date = 2019-09-03
+end_date = 2019-10-21
+company_name = "Personal"
+company_url = "https://maik.dev"
+cover = "img/portfolio/learn-to-program/screenshot.png"
+description = "This website was created for a school assignment. It was created with HTML and CSS only and no frameworks were used."
+skills = [
+    "Pure HTML and CSS",
+]
++++
+
+This website was created for a school assignment. It was created with HTML and CSS only and no frameworks were used.
+
+[Github](https://github.com/maikka39/Learn-to-Program)

content/portfolio/superbot.md

@@ -0,0 +1,22 @@
++++
+author = "Maik de Kruif"
+title = "SuperBot"
+start_date = 2018-08-17
+end_date = 2021-04-24
+company_name = "Personal"
+company_url = "https://maik.dev"
+description = "A Discord bot I wrote for my own server so that I could manage the server better and listen to music in voice channels."
+skills = [
+    "Python",
+    "Asynchronous programming",
+    "Input validation",
+]
++++
+
+An amazing Discord bot with lots of functionalities!
+
+A Discord bot I wrote for my own server so that I could manage the server better and listen to music in voice channels.
+
+SuperBot is the solution to your crowded and chaotic Discord server!
+
+[Github](https://github.com/maikka39/SuperBot)

content/portfolio/toy-neural-network-py.md

@@ -0,0 +1,19 @@
++++
+author = "Maik de Kruif"
+title = "Toy-Neural-Network-Py"
+start_date = 2019-03-02
+end_date = 2019-04-16
+company_name = "Personal"
+company_url = "https://maik.dev"
+description = "Neural Network Python library for experimenting with Machine Learning"
+skills = [
+    "Machine Learning",
+    "Neural Networks",
+    "Matrix calculations",
+    "Overheating hardware",
+]
++++
+
+Neural Network Python library for experimenting with Machine Learning
+
+[Github](https://github.com/maikka39/Toy-Neural-Network-Py)