add navbar and portfolio

assets/scss/style.scss

@@ -14,7 +14,8 @@ $min-device-width: 940px;
 	src: url('/fonts/open-sans-v35-latin-regular.woff2') format('woff2');
 }
 
-a {
+
+content a {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -35,7 +36,7 @@ body {
 	font: inherit;
 	vertical-align: baseline;
 	font-family: $main-font-family;
-	font-size: 130%;
+	font-size: 1.4em;
 	line-height: 1.4;
 	margin: 1em auto;
 	max-width: 45em;
@@ -43,16 +44,18 @@ body {
 	color: $body-font-color;
 }
 
-h1 {
+content h1 {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font: inherit;
+	font-size: 1.5em;
 	vertical-align: baseline;
 	line-height: 100%;
 	margin-top: 2rem;
 	margin-bottom: 1rem;
 	color: $heading-font-color;
+	/*
 
 	&:before {
 		content: "# ";
@@ -64,9 +67,10 @@ h1 {
 		content: "-----" / "";
 		display: block;
 	}
+	*/
 }
 
-h2 {
+content h2 {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -83,7 +87,7 @@ h2 {
 	}
 }
 
-h3 {
+content h3 {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -108,15 +112,18 @@ html {
 	vertical-align: baseline;
 }
 
-li {
+content {
+	li {
 		margin: 0;
 		padding: 0;
 		border: 0;
+		padding-left: 10px;
 		font: inherit;
 		vertical-align: baseline;
+	}
 }
 
-p {
+content p {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -131,7 +138,7 @@ p {
 	}
 }
 
-span {
+content span {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -139,7 +146,7 @@ span {
 	vertical-align: baseline;
 }
 
-strong {
+content strong {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -159,7 +166,7 @@ strong {
 	}
 }
 
-u {
+content u {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -167,7 +174,7 @@ u {
 	vertical-align: baseline;
 }
 
-ul {
+content ul {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -185,28 +192,117 @@ ul {
 	}
 }
 
-code {
+content code {
 	font: unset;
 	font-family: $main-font-family;
 	color: $code-font-color;
 }
 
-.special {
+content .special {
 	color: $special-font-color;
 	font-style: normal;
 }
 
+a.disabled {
+	pointer-events: none;
+	text-decoration: none;
+	color: #d66388;
+	padding-left: 15px;
+
+	:hover {
+		text-decoration: none;
+	}
+}
+
 @media (max-width: $min-device-width) {
 	body {
 		padding: 0 15px;
 		line-break: normal;
 	}
 
-	a {
+	content a {
 		line-break: loose;
 	}
 
-	code {
+	content code {
 		line-break: anywhere;
 	}
+
+	nav {
+		.hero-text {
+			text-align: center !important;
+			font-weight: bold;
+		}
+
+		.float-right,
+		.float-left {
+			float: none !important;
+			margin: 0;
+
+			a {
+				text-align: center;
+				margin: 0;
+			}
+		}
+
+		a {
+			float: none;
+			display: block;
+			text-align: left;
+
+			.nav-right {
+				float: none;
+			}
+		}
+	}
+}
+
+nav {
+	font-size: 1.2em;
+	overflow: hidden;
+	border-bottom: 1px solid $body-font-color;
+	margin-bottom: 30px;
+	padding: 0 10px 10px;
+
+	div {
+		margin-left: 15px;
+	}
+
+	a {
+		padding: 0;
+		border: 0;
+		font: inherit;
+	}
+
+	.nav-link {
+		padding-left: 15px;
+		text-decoration: none;
+		color: $link-font-color;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.float-right {
+		float: right;
+	}
+
+	.float-left {
+		float: left;
+	}
+
+	.hero-text {
+		font-size: 1.5em;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		text-decoration: none;
+
+		a {
+			color: $special-font-color;
+			font-weight: 800;
+			padding-left: 0;
+		}
+	}
 }

content/_index.md

@@ -1,5 +1,5 @@
 ---
-date: 2023-08-07T08:58:15+02:00
+date: 2023-08-30T16:58:15+02:00
 ---
 
 Hi, my name is `Laura Kalb` and I (literally) do things on the internet.
@@ -11,25 +11,14 @@ reliability engineer. Now I'm responsible for the network infrastructure at a bi
 primarily working on network automation and our internal network infrastructure, and I'm playing a lot with the Golang
 programming language =).
 
+You can find a list of projects that I've already worked on [in my Portfolio](/portfolio).
+
 
 ## Some nice stuff
 A list of **tools**, **projects** and **fun stuff** that I already 
-have worked on or that I want to work on in the future.
+have worked on or that I want to work on in the future:
 
-- [A list of awesome stuff curated by me!](/interesting-stuff)
+[A list of awesome stuff curated by me!](/interesting-stuff)
-- building my own IPAM with [Go](https://go.dev/). Source: [https://codeberg.org/lauralani/ipam](https://codeberg.org/lauralani/ipam)
-- My own URL Shortener with Go. Source: [https://codeberg.org/lauralani/go-urlsh](https://codeberg.org/lauralani/go-urlsh)
-- hosting my own mail with [mailcow](https://mailcow.email/)
-- managing my public domains via Infrastructure as Code with Git, CI/CD and [OctoDNS](https://github.com/octodns/octodns)
-- wrote my own [DynDNS-Tool](https://codeberg.org/lauralani/dyndns-script) in Python (supports Azure DNS and OVH)
-- Automated my home WIFI with radius assigned VLANs via Freeradius and custom frontend (Will be open sourced soon)
-- Some minor other projects:
-    - [OVH ApiKey Manager](https://codeberg.org/lauralani/ovh-apikey-manager)
-
-
-Notepad
-My list of awesome technologies I want to implement soon:
-- [Garage](https://garagehq.deuxfleurs.fr/): A S3-compatible storage (for selfhosting static websites like this one)
 
 ## Books
 I always loved to read as many books as I can. So here I'm listing the books I've read since I
@@ -55,4 +44,4 @@ This page was last updated at {{< last-updated >}}
   
 Copyright (c) Laura Kalb 2021-{{< copyright-date >}}
 
-[Impressum und Datenschutzerklärung](/impressum.html)
+[Impressum und Datenschutzerklärung](/impressum)

content/erisi.md

@@ -7,6 +7,7 @@ title: "Erisi: A self-hosted static site server"
 
 ## Implementation Ideas
 The main service will consist of a Caddy instance (maybe later replaced with own application loogic for subdomain handling, TLS termination and ACME) that serves as a HTTPS entry point and host for static website data.
+
 The `erisi` server will serve a registration/configuration page, where you can add new websites (like with netlify) and see what you need to do (in terms of CNAMEs and CAA-Records) to enable custom domains. It will then create directories per user and within per repository/website (think `/base-dir/user-guid/project-guid` as the path) and communicate (custom) domain to caddy.  
 
 There should also be a `erisi` cli application for deploying websites to the server. Maybe it should compress a given folder, hash it and send it to the server, handling authentication in the progress.

content/portfolio.md

@@ -0,0 +1,42 @@
+---
+title: "Portfolio"
+---
+
+Here you can find a list of projects I worked on:
+
+## IPAM
+Source: [https://codeberg.org/lauralani/ipam](https://codeberg.org/lauralani/ipam)
+
+A cli based IP Address Management tool written in Go with PowerDNS integration.
+
+## go-urlsh
+Source: [https://codeberg.org/lauralani/go-urlsh](https://codeberg.org/lauralani/go-urlsh)
+
+Go based URL shortener. Hosted via Docker and utilizing PostgreSQL.
+
+## Humble-Bot
+Source: [https://codeberg.org/lauralani/humble-bot](https://codeberg.org/lauralani/humble-bot)
+
+A Go Fediverse Bot that posts new [Humble Bundles](https://humblebundle.com)
+
+## erisi
+project idea: [Erisi](/erisi/)
+
+`erisi` is planned to be a self-hosted alternative to Netlify/Vercel/Github Pages/etc... written in Go and utilizing [Caddy](https://caddyserver.com) and it's ACME capabilities.
+
+
+## Small side projects
+### ovh-apikey-manager
+Source: [https://codeberg.org/lauralani/ovh-apikey-manager](https://codeberg.org/lauralani/ovh-apikey-manager)
+
+Tiny CLI tool to manage OVH APi Keys
+
+### dyndns-script
+Source: [https://codeberg.org/lauralani/dyndns-script](https://codeberg.org/lauralani/dyndns-script)
+
+Python based DynDNS client that can edit records managed by OVH and Azure
+
+### Misceallenous
+- Automated my home WIFI with radius assigned VLANs via Freeradius and custom frontend (Will be open sourced soon)
+- Manage my own DNS via OctoDNS as Code
+- Host my own mail since 2020

hugo.yaml

@@ -1,3 +1,12 @@
 baseURL: http://example.org/
 languageCode: en-us
 title: Lauras Website <3
+
+menu:
+  main:
+    - name: Portfolio
+      pageRef: /portfolio
+      weight: 2
+    - name: Interesting Stuff
+      pageRef: /interesting-stuff
+      weight: 3

layouts/_default/baseof.html

@@ -8,6 +8,8 @@
     {{ partial "head/sharing.html" . }}
   </head>
   <body>
+    {{ partial "body/nav.html" . }}
+
     {{ block "page" . }}{{ end }}
   </body>
 </html>

layouts/_default/single.html

@@ -1,7 +1,9 @@
 {{ define "page" }}
 <article class="container">
-  <a href="javascript:history.back()">⇠ go back</a>
+  <content>
     <h1>{{ .Title }}</h1>
+    <br/>
     {{ .Content }}
+  </content>
 </article>
 {{ end }}

layouts/home.html

@@ -9,8 +9,10 @@
 </head>
 
 <body>
-  <h1>{{ .Site.Title }}</h1>
+  {{ partial "body/nav.html" . }}
+  <content>
     {{ .Content }}
+  </content>
 </body>
 
 </html>

layouts/partials/body/nav.html

@@ -0,0 +1,15 @@
+<nav>
+  <div class="hero-text float-left"><a href="/" class="nav-link special">{{ .Site.Title }}</a></div>
+  <div class="float-right">
+    {{ $currentPage := . }}
+    {{- range site.Menus.main -}}
+      {{- $menu_item_url := .URL -}}
+      {{- $page_url:= $currentPage.RelPermalink -}}
+      {{- if eq $menu_item_url $page_url -}}
+        <a href="{{ .URL }}" class="disabled" aria-current="page">{{ .Name }}</a>
+      {{- else -}}
+        <a href="{{ .URL }}" class="nav-link">{{ .Name }}</a>
+      {{- end -}}
+    {{- end }}
+  </div>
+</nav>