diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9c8ca10
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+_site/
+.sass-cache/
+.jekyll-cache/
+.jekyll-metadata
+# Ignore folders generated by Bundler
+.bundle/
+vendor/
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..fa9b860
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+gem "jekyll"
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+ gem "tzinfo", "~> 1.2"
+ gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+
+gem "webrick", "~> 1.7"
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..85a8bc4
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,78 @@
+GEM
+ remote: https://rubygems.org/
+ specs:
+ addressable (2.8.0)
+ public_suffix (>= 2.0.2, < 5.0)
+ colorator (1.1.0)
+ concurrent-ruby (1.1.9)
+ em-websocket (0.5.3)
+ eventmachine (>= 0.12.9)
+ http_parser.rb (~> 0)
+ eventmachine (1.2.7-x64-mingw32)
+ ffi (1.15.5-x64-mingw32)
+ forwardable-extended (2.6.0)
+ http_parser.rb (0.8.0)
+ i18n (1.8.11)
+ concurrent-ruby (~> 1.0)
+ jekyll (4.2.1)
+ addressable (~> 2.4)
+ colorator (~> 1.0)
+ em-websocket (~> 0.5)
+ i18n (~> 1.0)
+ jekyll-sass-converter (~> 2.0)
+ jekyll-watch (~> 2.0)
+ kramdown (~> 2.3)
+ kramdown-parser-gfm (~> 1.0)
+ liquid (~> 4.0)
+ mercenary (~> 0.4.0)
+ pathutil (~> 0.9)
+ rouge (~> 3.0)
+ safe_yaml (~> 1.0)
+ terminal-table (~> 2.0)
+ jekyll-sass-converter (2.1.0)
+ sassc (> 2.0.1, < 3.0)
+ jekyll-watch (2.2.1)
+ listen (~> 3.0)
+ kramdown (2.3.1)
+ rexml
+ kramdown-parser-gfm (1.1.0)
+ kramdown (~> 2.0)
+ liquid (4.0.3)
+ listen (3.7.1)
+ rb-fsevent (~> 0.10, >= 0.10.3)
+ rb-inotify (~> 0.9, >= 0.9.10)
+ mercenary (0.4.0)
+ pathutil (0.16.2)
+ forwardable-extended (~> 2.6)
+ public_suffix (4.0.6)
+ rb-fsevent (0.11.0)
+ rb-inotify (0.10.1)
+ ffi (~> 1.0)
+ rexml (3.2.5)
+ rouge (3.27.0)
+ safe_yaml (1.0.5)
+ sassc (2.4.0-x64-mingw32)
+ ffi (~> 1.9)
+ terminal-table (2.0.0)
+ unicode-display_width (~> 1.1, >= 1.1.1)
+ thread_safe (0.3.6)
+ tzinfo (1.2.9)
+ thread_safe (~> 0.1)
+ tzinfo-data (1.2021.5)
+ tzinfo (>= 1.0.0)
+ unicode-display_width (1.8.0)
+ wdm (0.1.1)
+ webrick (1.7.0)
+
+PLATFORMS
+ x64-mingw32
+
+DEPENDENCIES
+ jekyll
+ tzinfo (~> 1.2)
+ tzinfo-data
+ wdm (~> 0.1.1)
+ webrick (~> 1.7)
+
+BUNDLED WITH
+ 2.3.5
diff --git a/_data/navigation.yml b/_data/navigation.yml
new file mode 100644
index 0000000..b853f9b
--- /dev/null
+++ b/_data/navigation.yml
@@ -0,0 +1,10 @@
+- name: Home
+ link: /
+- name: Services
+ link: /services.html
+- name: Kontakt
+ link: /kontakt.html
+- name: Social
+ link: /social.html
+- name: DO NOT CLICK!
+ link: https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1
\ No newline at end of file
diff --git a/_includes/navigation.html b/_includes/navigation.html
new file mode 100644
index 0000000..6cad9ce
--- /dev/null
+++ b/_includes/navigation.html
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/_layouts/defaults.html b/_layouts/defaults.html
new file mode 100644
index 0000000..30a3112
--- /dev/null
+++ b/_layouts/defaults.html
@@ -0,0 +1,31 @@
+---
+---
+
+
+
+
+
+ Hiajen - {{ page.title }}
+
+
+
+
+
+
+ {% include navigation.html %}
+
+
+
{{ page.title }}
+
{{ content | markdownify }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/_sass/colours_drakula.scss b/_sass/colours_drakula.scss
new file mode 100644
index 0000000..b792211
--- /dev/null
+++ b/_sass/colours_drakula.scss
@@ -0,0 +1,7 @@
+:root {
+ --gray0: #282a36; /*background, font-colour*/
+ --gray1: #282a36; /*current menu*/
+ --gray2: #44475a; /*header, footer, menu*/
+ --gray3: #6272a4; /*hover, links*/
+ --background: #f8f8f2 /*container background, font-colour on dark*/
+}
\ No newline at end of file
diff --git a/_sass/colours_solarized.scss b/_sass/colours_solarized.scss
new file mode 100644
index 0000000..9638147
--- /dev/null
+++ b/_sass/colours_solarized.scss
@@ -0,0 +1,7 @@
+:root {
+ --gray0: #002b36; /*background, font-colour*/
+ --gray1: #073642; /*current menu*/
+ --gray2: #586e75; /*header, footer, menu*/
+ --gray3: #93a1a1; /*hover*/
+ --background: #eee8d5 /*container background, font-colour on dark*/
+}
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
new file mode 100644
index 0000000..420fe4f
--- /dev/null
+++ b/_sass/main.scss
@@ -0,0 +1,126 @@
+* {
+ box-sizing: border-box;
+ color: var(--gray0);
+}
+
+a {
+ color: var(--gray3);
+}
+
+div {
+ background-color: var(--background);
+}
+
+.row::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+[class*="col-"] {
+ float: left;
+ padding: 15px;
+}
+
+html {
+ font-family: "Lucida Sans", sans-serif;
+ background-color: var(--gray0);
+}
+
+.header {
+ background-color: var(--gray2);
+ padding: 15px;
+}
+
+.header * {
+ color: var(--background);
+}
+
+.menu ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.menu ul a {
+ text-decoration: none;
+}
+
+.menu a li {
+ padding: 8px;
+ margin-bottom: 7px;
+ background-color: var(--gray2);
+ color: var(--background);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.menu a li:hover {
+ background-color: var(--gray3);
+}
+
+.menu a li.current {
+ background-color: var(--gray1);
+}
+
+.aside {
+ background-color: #33b5e5;
+ padding: 15px;
+ color: var(--background);
+ text-align: center;
+ font-size: 14px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.footer {
+ background-color: var(--gray2);
+ color: #ffffff;
+ text-align: center;
+ font-size: 12px;
+ padding: 15px;
+}
+
+.footer * {
+ color: var(--background);
+}
+
+/* For mobile phones: */
+[class*="col-"] {
+ width: 100%;
+}
+
+@media only screen and (min-width: 600px) {
+ /* For tablets: */
+ .col-s-1 {width: 8.33%;}
+ .col-s-2 {width: 16.66%;}
+ .col-s-3 {width: 25%;}
+ .col-s-4 {width: 33.33%;}
+ .col-s-5 {width: 41.66%;}
+ .col-s-6 {width: 50%;}
+ .col-s-7 {width: 58.33%;}
+ .col-s-8 {width: 66.66%;}
+ .col-s-9 {width: 75%;}
+ .col-s-10 {width: 83.33%;}
+ .col-s-11 {width: 91.66%;}
+ .col-s-12 {width: 100%;}
+}
+@media only screen and (min-width: 768px) {
+ /* For desktop: */
+ .col-1 {width: 8.33%;}
+ .col-2 {width: 16.66%;}
+ .col-3 {width: 25%;}
+ .col-4 {width: 33.33%;}
+ .col-5 {width: 41.66%;}
+ .col-6 {width: 50%;}
+ .col-7 {width: 58.33%;}
+ .col-8 {width: 66.66%;}
+ .col-9 {width: 75%;}
+ .col-10 {width: 83.33%;}
+ .col-11 {width: 91.66%;}
+ .col-12 {width: 100%;}
+ .main-container {
+ width: 768px;
+ margin-left: auto;
+ margin-right: auto;
+ clear: both;
+ }
+}
\ No newline at end of file
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
new file mode 100644
index 0000000..49bf89b
--- /dev/null
+++ b/assets/css/styles.scss
@@ -0,0 +1,5 @@
+---
+---
+@import "colours_drakula";
+@import "main";
+
diff --git a/img/avatar.png b/assets/images/avatar.png
similarity index 100%
rename from img/avatar.png
rename to assets/images/avatar.png
diff --git a/home.md b/home.md
new file mode 100644
index 0000000..b18811a
--- /dev/null
+++ b/home.md
@@ -0,0 +1,4 @@
+---
+layout: defaults
+title: Home
+---
\ No newline at end of file
diff --git a/index.html b/index.html
index 8a17f84..d0e003b 100644
--- a/index.html
+++ b/index.html
@@ -1,35 +1,11 @@
-
-
-
-
-
- Hiajens Infrastructure
-
-
+---
+layout: defaults
+title: Home
+---
-
-
-
Hiajens Infrastructure
- >> Start <<
-
-
-
-
-
-
-
Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul. Also hier mein Avatar.
-
-
-
-
-
-
-
\ No newline at end of file
+Halloa, Ansgar oder im Neuland auch Hiajen hier. Wer sich beides nicht merken kann, einfach Meep.
+
+Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul mir was sinnvolles auszudenken.
+Also hier mein Avatar.
+
+![Avatar of Hiajen](assets/images/avatar.png "Avatar of Hiajen")
\ No newline at end of file
diff --git a/kontakt.html b/kontakt.html
deleted file mode 100644
index 7369fbf..0000000
--- a/kontakt.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
- Hiajens Infrastructure
-
-
-
-
-
-
Hiajens Infrastructure
- >> Kontakt <<
-
-
-
-
-
-
-
Du findest mich fast überall unter dem Nutzername Hiajen hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/kontakt.md b/kontakt.md
new file mode 100644
index 0000000..d728040
--- /dev/null
+++ b/kontakt.md
@@ -0,0 +1,9 @@
+---
+layout: defaults
+title: Kontakt
+---
+Du findest mich fast überall unter dem Nutzername `Hiajen` hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:
+* Matrix: [@hiajen:matrix.hiajen.de](https://matrix.to/#/@hiajen:matrix.hiajen.de){:target="_blank"}
+* E-Mail: [info (at) hiajen (dot) de](https://keyserver.ubuntu.com/pks/lookup?search=info%40hiajen.de&fingerprint=on&op=index){:target="_blank"}
+ * Fingerprint: `F81D 5DA5 B1D3 6D7D 863B 6EE0 D2F7 7DED D818 7A01`
+
diff --git a/services.html b/services.html
deleted file mode 100644
index c9e36b4..0000000
--- a/services.html
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-
-
-
- Hiajens Infrastructure
-
-
-
-
-
-
Hiajens Infrastructure
- >> Services <<
-
-
-
-
-
-
-
- Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
-
-
-
- Accountverwaltung (LDAP):
- Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
-
-
- Jenkins:
- Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
-
-
- BigBlueButton:
- OpenSource Videokonferenz-Tool
-
-
- GIT (Gitea):
- OpenSource Versionsverwaltungstool für deinen Quellcode
-
-
- Matrix:
- OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client Element . Die Home-Server URL lautet: matrix.hiajen.de
-
-
Matrix-Bots via: MauBot
-
- CryptPad:
- OpenSource online Tool zur kollaborativen Zusammenarbeit
-
-
- Cloud (NextCloud):
- OpenSource Cloud-Speicher
-
-
- UnifiedPush / Gothify:
- OpenSource PUSH service
-
-
- Knowledgebase / Wiki:
- OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/services.md b/services.md
new file mode 100644
index 0000000..8b3d3c5
--- /dev/null
+++ b/services.md
@@ -0,0 +1,25 @@
+---
+layout: defaults
+title: Services
+---
+
+Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
+
+* ~~Accountverwaltung (LDAP):~~ Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
+
+* ~~Jenkins:~~ Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
+
+* **[BigBlueButton](https://bbb.hiajen.de){:target="_blank"}:** OpenSource Videokonferenz-Tool
+
+* **[GIT (Gitea)](https://git.hiajen.de){:target="_blank"}:** OpenSource Versionsverwaltungstool für deinen Quellcode
+
+* **Matrix:** OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client Element. Die Home-Server URL lautet: `matrix.hiajen.de`
+ * Matrix-Bots via: [MauBot](https://github.com/maubot/maubot){:target="_blank"}
+
+* **[CryptPad](https://cryptpad.hiajen.de){:target="_blank"}:** OpenSource online Tool zur kollaborativen Zusammenarbeit
+
+* **[Cloud (NextCloud)](https://cloud.hiajen.de){:target="_blank"}:** OpenSource Cloud-Speicher
+
+* ~~UnifiedPush / Gothify:~~ OpenSource PUSH service
+
+* **[Knowledgebase / Wiki](https://wiki.hiajen.de){:target="_blank"}:** OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen
diff --git a/social.md b/social.md
new file mode 100644
index 0000000..23f886a
--- /dev/null
+++ b/social.md
@@ -0,0 +1,8 @@
+---
+layout: defaults
+title: Social
+---
+
+Ich betreibe folgende Social-Media Kanäle:
+* Mastodon: [@Hiajen@chaos.social](https://chaos.social/@Hiajen){:target="_blank"}
+* Pixelfed: [@hiajen](https://pixelfed.de/Hiajen){:target="_blank"}
\ No newline at end of file
diff --git a/style/main.css b/style/main.css
deleted file mode 100644
index 39cb88d..0000000
--- a/style/main.css
+++ /dev/null
@@ -1,111 +0,0 @@
-* {
- font-family: Arial, serif;
- color: #002b36;
-}
-
-div {
- background-color: #eee8d5;
-}
-
-p {
- padding: 20px 20px;
-}
-
-#main-container h1, h2{
- text-align: center;
- margin: auto;
- padding-top: 12px;
-}
-
-.clearfix::after {
- content: "";
- clear: both;
- display: block;
-}
-
-.content {
- padding: 0 25px;
-}
-
-ul.menu {
- padding-inline: 20px;
- #display: block;
-}
-
-.menu li {
- list-style-type: none;
- text-align: center;
-
- #display: inline-block;
-
- padding: 8px;
- margin-bottom: 8px;
- background-color: #586e75;
- color: #eee8d5;
-}
-
-.menu li:hover {
- background-color: #93a1a1;
-
-}
-
-.menu li a {
- display: block;
- color: inherit;
- text-decoration: none;
- height: 100%;
- width: 100%;
-}
-
-#main-container {
- width: 800px;
- #height: 90%;
- margin-left: auto;
- margin-right: auto;
- #background-color: aqua;
- clear: both;
- #box-shadow: 1px 1px 10px 5px #eee8d5;
-
-}
-
-#head-container{
- background-color: #586e75;
- width: 100%;
- height: 100px;
- clear: both;
-}
-
-#wrapper-container {
- height: 600px;
-}
-
-#left-container{
- #background-color: blueviolet;
- height: 100%;
- width: 25%;
- float: left;
-}
-
-#right-container{
- #background-color: brown;
- height: 100%;
- width: 75%;
- float: right;
-}
-
-#right-container p {
- margin: 0;
- padding: 25px 0 0 0;
-}
-
-#right-container a {
- text-decoration: #859900;
- color: #859900;
-}
-
-#footer-container{
- background-color: #586e75;
- padding-top: 20px;
- height: 50px;
- width: 100%;
-}
\ No newline at end of file