diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c354a0e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,42 @@
+# Ignore docs files
+/_site/
+# Hugo files
+/resources/
+/.hugo_build.lock
+
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.log
+*.orig
+*.rej
+*.swo
+*.swp
+*.vi
+*.zip
+*~
+
+# OS or Editor folders
+._*
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+Thumbs.db
+/.vscode/
+# Local Netlify folder
+.netlify
+
+# Komodo
+.komodotools
+*.komodoproject
+
+# Folders to ignore
+/js/coverage/
+/node_modules/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b1dd05f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,28 @@
+# README
+
+This project uses the [Hugo](https://gohugo.io/) framework and [Tailwind](https://tailwindcss.com/) css for as CSS library.
+
+## For local development
+
+**Hugo**
+
+See the Hugo development commands https://gohugo.io/getting-started/usage/#develop-and-test-your-site
+
+**Tailwind**
+
+As (for now) we are not using any node npm packages for the frontend that's why we are using the [Standalone CLI](https://tailwindcss.com/blog/standalone-cli) of Tailwind.
+If it turns out we need more packages we might switch to npm, but for now we are trying to avoid it.
+
+To use Tailwind Standalone CLI please follow [these instructions](https://tailwindcss.com/blog/standalone-cli#get-started).
+It depends on your OS what executable you need to download.
+
+(If we need to switch to NPM checkout this setup: https://github.com/arthaud-proust-pro/hugo-tailwind)
+
+**All together**
+
+There is a bash script to run all local development scripts.
+
+You might need to give the file permission first with `chmod +x ./dev.hs`.
+
+Then run `bash dev.hs`.
+This fires up the local Hugo server and Tailwind.
diff --git a/archetypes/default.md b/archetypes/default.md
new file mode 100644
index 0000000..00e77bd
--- /dev/null
+++ b/archetypes/default.md
@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+
diff --git a/assets/css/compiled/output.css b/assets/css/compiled/output.css
new file mode 100644
index 0000000..c2babc6
--- /dev/null
+++ b/assets/css/compiled/output.css
@@ -0,0 +1,1189 @@
+/* TailwindCSS base styles */
+
+/* see https://tailwindcss.com/docs/functions-and-directives#tailwind */
+
+/* ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: currentColor;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+html {
+  font-family: Inter;
+  font-weight: 400;
+  background-color: red !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Inter;
+  font-weight: 500;
+}
+
+#TableOfContents li {
+  padding-bottom: 14px;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.prose {
+  color: #0A4D50;
+}
+
+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1rem;
+  line-height: 22.4px;
+}
+
+.prose :where(h1):not(:where([class~="not-prose"] *)) {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 28px;
+  line-height: 130%;
+  margin-bottom: 14px;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"] *)) {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 130%;
+  margin-bottom: 10px;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"] *)) {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  margin-bottom: 8px;
+}
+
+.relative {
+  position: relative;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.col-span-8 {
+  grid-column: span 8 / span 8;
+}
+
+.col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
+.col-start-2 {
+  grid-column-start: 2;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mt-9 {
+  margin-top: 2.25rem;
+}
+
+.mt-7 {
+  margin-top: 1.75rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.inline-grid {
+  display: inline-grid;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
+.h-28 {
+  height: 7rem;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-28 {
+  width: 7rem;
+}
+
+.w-72 {
+  width: 18rem;
+}
+
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.min-w-fit {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-14 {
+  gap: 3.5rem;
+}
+
+.gap-16 {
+  gap: 4rem;
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-\[1px\] {
+  border-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-forest {
+  --tw-border-opacity: 1;
+  border-color: rgb(10 77 80 / var(--tw-border-opacity));
+}
+
+.border-salmon {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 118 91 / var(--tw-border-opacity));
+}
+
+.bg-\[\#ffffff\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-forest {
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 77 80 / var(--tw-bg-opacity));
+}
+
+.bg-salmon {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 118 91 / var(--tw-bg-opacity));
+}
+
+.bg-grayish {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-3\.5 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
+.pt-9 {
+  padding-top: 2.25rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pt-2\.5 {
+  padding-top: 0.625rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pr-72 {
+  padding-right: 18rem;
+}
+
+.pb-9 {
+  padding-bottom: 2.25rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.leading-10 {
+  line-height: 2.5rem;
+}
+
+.leading-loose {
+  line-height: 2;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.leading-7 {
+  line-height: 1.75rem;
+}
+
+.leading-snug {
+  line-height: 1.375;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.text-forest {
+  --tw-text-opacity: 1;
+  color: rgb(10 77 80 / var(--tw-text-opacity));
+}
+
+.text-salmon {
+  --tw-text-opacity: 1;
+  color: rgb(250 118 91 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-almost-white {
+  --tw-text-opacity: 1;
+  color: rgb(245 245 245 / var(--tw-text-opacity));
+}
+
+.\!text-salmon {
+  --tw-text-opacity: 1 !important;
+  color: rgb(250 118 91 / var(--tw-text-opacity)) !important;
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.hover\:bg-forest:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 77 80 / var(--tw-bg-opacity));
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-salmon:hover {
+  --tw-text-opacity: 1;
+  color: rgb(250 118 91 / var(--tw-text-opacity));
+}
+
+.focus\:outline:focus {
+  outline-style: solid;
+}
+
+.focus\:outline-1:focus {
+  outline-width: 1px;
+}
+
+.focus\:outline-offset-2:focus {
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .md\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+}
+
+/* FONT */
+
+/* inter-regular - latin */
+
+@font-face {
+  font-family: 'Inter';
+
+  font-style: normal;
+
+  font-weight: 400;
+
+  src: url('/fonts/inter-v12-latin-regular.eot');
+
+  /* IE9 Compat Modes */
+
+  src: local(''),
+         url('/fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('/fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('/fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
+         url('/fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('/fonts/inter-v12-latin-regular.svg#Inter') format('svg');
+
+  /* Legacy iOS */
+}
+
+/* inter-500 - latin */
+
+@font-face {
+  font-family: 'Inter';
+
+  font-style: normal;
+
+  font-weight: 500;
+
+  src: url('/fonts/inter-v12-latin-500.eot');
+
+  /* IE9 Compat Modes */
+
+  src: local(''),
+            url('/fonts/inter-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+            url('/fonts/inter-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+            url('/fonts/inter-v12-latin-500.woff') format('woff'), /* Modern Browsers */
+            url('/fonts/inter-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+            url('/fonts/inter-v12-latin-500.svg#Inter') format('svg');
+
+  /* Legacy iOS */
+}
+
+/* Site Specific */
+
+/* put site specific css styles here using the @layer directive */
+
+/* see https://tailwindcss.com/docs/functions-and-directives#layer */
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..edbcdf3
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,61 @@
+/* TailwindCSS base styles */
+/* see https://tailwindcss.com/docs/functions-and-directives#tailwind */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+/* FONT */
+/* inter-regular - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local(''),
+         url('/fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('/fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('/fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
+         url('/fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('/fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
+}
+  
+  /* inter-500 - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/inter-v12-latin-500.eot'); /* IE9 Compat Modes */
+    src: local(''),
+            url('/fonts/inter-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+            url('/fonts/inter-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+            url('/fonts/inter-v12-latin-500.woff') format('woff'), /* Modern Browsers */
+            url('/fonts/inter-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+            url('/fonts/inter-v12-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
+}
+  
+
+/* Site Specific */
+/* put site specific css styles here using the @layer directive */
+/* see https://tailwindcss.com/docs/functions-and-directives#layer */
+@layer components {
+    .welcome-headline {
+        @apply border-r-4;
+    }
+}
+
+@layer base {
+    html {
+        font-family: Inter;
+        font-weight: 400;
+        background-color: red !important;
+    }
+    h1, h2, h3, h4, h5, h6 {
+        font-family: Inter;
+        font-weight: 500;
+    }
+
+    #TableOfContents li {
+        padding-bottom: 14px;
+    }
+}
\ No newline at end of file
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..be2d714
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,32 @@
+baseURL = 'http://localhost:1313/'
+languageCode = 'en-us'
+title = 'My New Hugo Site'
+theme = "main-theme"
+paginate = 4
+# watchIgnoreFiles = ["assets/css/styles.css"]
+
+[menu]
+[[menu.main]]
+  identifier = 'about'
+  name = 'About'
+  pageref = '/about/'
+  url = '/about/'
+  weight = 1
+[[menu.main]]
+  identifier = 'blog'
+  name = 'Blog'
+  pageref = '/blog/'
+  url = '/blog/'
+  weight = 2
+[[menu.main]]
+  identifier = 'development'
+  name = 'Development'
+  pageref = '/#/'
+  url = '/#/'
+  weight = 3
+[[menu.main]]
+  identifier = 'documentation'
+  name = 'Documentation'
+  pageref = '/projects/channeler'
+  url = '/projects/channeler'
+  weight = 4
\ No newline at end of file
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..318ded2
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Homepage"
+---
+index file
\ No newline at end of file
diff --git a/content/about.md b/content/about.md
new file mode 100644
index 0000000..a892e90
--- /dev/null
+++ b/content/about.md
@@ -0,0 +1,4 @@
+---
+type: "page"
+layout: "about"
+---
\ No newline at end of file
diff --git a/content/blog/_index.md b/content/blog/_index.md
new file mode 100644
index 0000000..e69de29
diff --git a/content/blog/my-first-post-copy-copy-copy copy 2.md b/content/blog/my-first-post-copy-copy-copy copy 2.md
new file mode 100644
index 0000000..75313b1
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy 2.md	
@@ -0,0 +1,13 @@
+---
+title: "My First Post copy announcements"
+date: 2022-11-23T20:45:49+02:00
+draft: false
+categories: ['announcements']
+tags: ['test']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy copy 3.md b/content/blog/my-first-post-copy-copy-copy copy 3.md
new file mode 100644
index 0000000..c47273e
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy 3.md	
@@ -0,0 +1,12 @@
+---
+title: "My First Post copy announcements"
+date: 2022-11-13T20:45:49+02:00
+draft: false
+categories: ['announcements']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy copy 4.md b/content/blog/my-first-post-copy-copy-copy copy 4.md
new file mode 100644
index 0000000..46a96ce
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy 4.md	
@@ -0,0 +1,13 @@
+---
+title: "My First Post copy announcements"
+date: 2022-11-11T20:45:49+02:00
+draft: false
+categories: ['announcements']
+tags: ['test']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy copy 5.md b/content/blog/my-first-post-copy-copy-copy copy 5.md
new file mode 100644
index 0000000..d69f310
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy 5.md	
@@ -0,0 +1,13 @@
+---
+title: "My First Post copy announcements"
+date: 2022-11-19T20:45:49+02:00
+draft: false
+categories: ['announcements']
+tags: ['test']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy copy 6.md b/content/blog/my-first-post-copy-copy-copy copy 6.md
new file mode 100644
index 0000000..36f1b3a
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy 6.md	
@@ -0,0 +1,13 @@
+---
+title: "My First Post copy announcements"
+date: 2022-11-18T20:45:49+02:00
+draft: false
+categories: ['announcements']
+tags: ['test']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy copy 7.md b/content/blog/my-first-post-copy-copy-copy copy 7.md
new file mode 100644
index 0000000..3b3b732
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy 7.md	
@@ -0,0 +1,13 @@
+---
+title: "My First Post copy announcements"
+date: 2022-11-17T20:45:49+02:00
+draft: false
+categories: ['announcements']
+tags: ['test']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy copy 8.md b/content/blog/my-first-post-copy-copy-copy copy 8.md
new file mode 100644
index 0000000..0cb2795
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy 8.md	
@@ -0,0 +1,13 @@
+---
+title: "My First Post copy announcements"
+date: 2022-11-16T20:45:49+02:00
+draft: false
+categories: ['announcements']
+tags: ['test']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy copy.md b/content/blog/my-first-post-copy-copy-copy copy.md
new file mode 100644
index 0000000..0ab131e
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy copy.md	
@@ -0,0 +1,12 @@
+---
+title: "My First Post copy announcements"
+date: 2022-10-15T20:45:49+02:00
+draft: false
+categories: ['announcements']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy-copy.md b/content/blog/my-first-post-copy-copy-copy.md
new file mode 100644
index 0000000..a483131
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy-copy.md
@@ -0,0 +1,12 @@
+---
+title: "My First Post copy announcements"
+date: 2022-09-15T20:45:49+02:00
+draft: false
+categories: ['announcements']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy-copy.md b/content/blog/my-first-post-copy-copy.md
new file mode 100644
index 0000000..6f30fca
--- /dev/null
+++ b/content/blog/my-first-post-copy-copy.md
@@ -0,0 +1,12 @@
+---
+title: "My First Post copy copy Dev diary"
+date: 2022-08-18T20:45:49+01:00
+draft: false
+categories: ['Dev diary']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post-copy.md b/content/blog/my-first-post-copy.md
new file mode 100644
index 0000000..092d02b
--- /dev/null
+++ b/content/blog/my-first-post-copy.md
@@ -0,0 +1,12 @@
+---
+title: "My First Post copy announcements"
+date: 2022-06-15T20:45:49+02:00
+draft: false
+categories: ['Dev diary']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/blog/my-first-post.md b/content/blog/my-first-post.md
new file mode 100644
index 0000000..5bba77e
--- /dev/null
+++ b/content/blog/my-first-post.md
@@ -0,0 +1,12 @@
+---
+title: "My First Post announcements"
+date: 2022-01-15T20:45:49+01:00
+draft: false
+categories: ['Dev diary']
+---
+
+Blog pour-over narwhal cray pickled swag vinyl ethical cloud bread VHS before they sold out meditation. Swag vape banh mi before they sold out, keffiyeh kale chips snackwave forage synth kogi. Plaid stumptown wolf paleo lo-fi tattooed. Authentic cloud bread vexillologist adaptogen dreamcatcher shabby chic vegan austin. Pitchfork wayfarers messenger bag tumblr meh selfies actually snackwave roof party normcore. Lo-fi actually next level direct trade semiotics.
+
+PBR&B salvia umami, tumblr tumeric synth pork belly tattooed. Fingerstache try-hard tbh godard vexillologist helvetica meditation quinoa literally austin butcher bitters edison bulb man braid mustache. Twee live-edge bitters jean shorts you probably haven't heard of them man bun banjo. Yr meditation hella hashtag coloring book.
+
+Paleo iceland raclette vaporware pork belly pug hexagon banjo gastropub occupy actually. Ennui truffaut viral microdosing bushwick chia flannel actually succulents irony. Pop-up glossier church-key selvage brunch humblebrag tumblr stumptown. Copper mug microdosing banjo, YOLO shaman kombucha before they sold out. Cardigan art party biodiesel messenger bag actually DIY. Craft beer farm-to-table kitsch, whatever slow-carb meh intelligentsia copper mug butcher cardigan truffaut af flannel snackwave trust fund.
\ No newline at end of file
diff --git a/content/projects/_index.md b/content/projects/_index.md
new file mode 100644
index 0000000..e69de29
diff --git a/content/projects/channeler.md b/content/projects/channeler.md
new file mode 100644
index 0000000..54916f3
--- /dev/null
+++ b/content/projects/channeler.md
@@ -0,0 +1,19 @@
+---
+title: Channeler
+---
+
+## Introduction
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices. Nunc feugiat dolor nisi, sit amet condimentum ante placerat id. Maecenas nec sem pellentesque, venenatis nisl vitae, rhoncus nunc. Praesent fringilla vulputate magna eget imperdiet. Cras ipsum nibh, convallis sed pellentesque non, euismod at sem. Fusce semper tincidunt nisl. Suspendisse vel turpis libero. Ut egestas porta orci nec rhoncus. Aliquam varius diam non mauris commodo dapibus. Quisque imperdiet auctor ultrices. 
+
+## Frequently asked questions
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
+
+## Project strategy
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
+
+## Managed hosting
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
diff --git a/content/projects/liberate.md b/content/projects/liberate.md
new file mode 100644
index 0000000..7bc5375
--- /dev/null
+++ b/content/projects/liberate.md
@@ -0,0 +1,19 @@
+---
+title: Liberate
+---
+
+## Introduction
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices. Nunc feugiat dolor nisi, sit amet condimentum ante placerat id. Maecenas nec sem pellentesque, venenatis nisl vitae, rhoncus nunc. Praesent fringilla vulputate magna eget imperdiet. Cras ipsum nibh, convallis sed pellentesque non, euismod at sem. Fusce semper tincidunt nisl. Suspendisse vel turpis libero. Ut egestas porta orci nec rhoncus. Aliquam varius diam non mauris commodo dapibus. Quisque imperdiet auctor ultrices. 
+
+## Frequently asked questions
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
+
+## Project strategy
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
+
+## Managed hosting
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
diff --git a/content/projects/packeteer.md b/content/projects/packeteer.md
new file mode 100644
index 0000000..2a53d51
--- /dev/null
+++ b/content/projects/packeteer.md
@@ -0,0 +1,19 @@
+---
+title: Packeteer
+---
+
+## Introduction
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices. Nunc feugiat dolor nisi, sit amet condimentum ante placerat id. Maecenas nec sem pellentesque, venenatis nisl vitae, rhoncus nunc. Praesent fringilla vulputate magna eget imperdiet. Cras ipsum nibh, convallis sed pellentesque non, euismod at sem. Fusce semper tincidunt nisl. Suspendisse vel turpis libero. Ut egestas porta orci nec rhoncus. Aliquam varius diam non mauris commodo dapibus. Quisque imperdiet auctor ultrices. 
+
+## Frequently asked questions
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
+
+## Project strategy
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
+
+## Managed hosting
+
+Sed ac pharetra metus. Pellentesque varius accumsan orci, ullamcorper ultrices nulla maximus eget. Nunc vestibulum pulvinar arcu, in aliquam augue eleifend nec. Donec turpis erat, varius non enim ac, pharetra eleifend ante. Vivamus malesuada nec felis id auctor. Duis mollis sed urna eget ultrices.
diff --git a/dev.sh b/dev.sh
new file mode 100755
index 0000000..ebaa61e
--- /dev/null
+++ b/dev.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+trap "exit" INT TERM ERR
+trap "killall hugo && killall tailwindcss" EXIT
+
+hugo server --noHTTPCache &
+./tailwindcss -i assets/css/styles.css -o assets/css/compiled/output.css --watch
+
+wait
+
+echo "Hugo and Tailwind running"
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..8eccf22
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,97 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./themes/**/layouts/**/*.html",
+    "./content/**/layouts/**/*.html",
+    "./layouts/**/*.html",
+    "./content/**/*.html",
+  ],
+  theme: {
+    fontFamily: {
+      custom: ["Inter", "sans-serif"],
+    },
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      salmon: "#FA765B",
+      forest: "#0A4D50",
+      "almost-white": "#F5F5F5",
+      grayish: "#F5F5F5",
+      white: "#FFFFFF",
+      black: "#000000",
+    },
+    maxWidth: {
+      "4xl": "960",
+    },
+    maxWidth: ({ theme, breakpoints }) => ({
+      none: "none",
+      0: "0rem",
+      xs: "20rem",
+      sm: "24rem",
+      md: "28rem",
+      lg: "32rem",
+      xl: "36rem",
+      "2xl": "42rem",
+      "3xl": "48rem",
+      "4xl": "60rem",
+      "5xl": "64rem",
+      "6xl": "72rem",
+      "7xl": "80rem",
+      full: "100%",
+      min: "min-content",
+      max: "max-content",
+      fit: "fit-content",
+      prose: "65ch",
+      ...breakpoints(theme("screens")),
+    }),
+    typography: (theme) => ({
+      DEFAULT: {
+        css: {
+          color: theme("colors.forest"),
+          p: {
+            "margin-bottom": "1rem",
+            "line-height": "22.4px",
+          },
+          h1: {
+            "font-style": "normal",
+            "font-weight": 500,
+            "font-size": "28px",
+            "line-height": "130%",
+            "margin-bottom": "14px",
+          },
+          h2: {
+            "font-style": "normal",
+            "font-weight": 500,
+            "font-size": "24px",
+            "line-height": "130%",
+            "margin-bottom": "10px",
+          },
+          h3: {
+            "font-style": "normal",
+            "font-weight": 500,
+            "font-size": "20px",
+            "line-height": "120%",
+            "margin-bottom": "8px",
+          },
+        },
+      },
+    }),
+    extend: {},
+  },
+  "container-small": {
+    // you can configure the container to be centered
+    center: true,
+
+    // or have default horizontal padding
+    padding: "1rem",
+
+    // default breakpoints but with 40px removed
+    screens: {
+      sm: "600px",
+      md: "728px",
+      lg: "984px",
+      xl: "1140px",
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};
diff --git a/tailwindcss b/tailwindcss
new file mode 100755
index 0000000..c622711
Binary files /dev/null and b/tailwindcss differ
diff --git a/themes/main-theme/LICENSE b/themes/main-theme/LICENSE
new file mode 100644
index 0000000..147d594
--- /dev/null
+++ b/themes/main-theme/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 YOUR_NAME_HERE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/themes/main-theme/archetypes/default.md b/themes/main-theme/archetypes/default.md
new file mode 100644
index 0000000..ac36e06
--- /dev/null
+++ b/themes/main-theme/archetypes/default.md
@@ -0,0 +1,2 @@
++++
++++
diff --git a/themes/main-theme/layouts/404.html b/themes/main-theme/layouts/404.html
new file mode 100644
index 0000000..e69de29
diff --git a/themes/main-theme/layouts/_default/baseof.html b/themes/main-theme/layouts/_default/baseof.html
new file mode 100644
index 0000000..737a035
--- /dev/null
+++ b/themes/main-theme/layouts/_default/baseof.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+{{- partial "head.html" . -}}
+
+<body class="bg-[#ffffff] flex flex-col min-h-screen">
+    {{- partial "header.html" . -}}
+    <main class="flex-1 flex flex-col py-6">
+        {{ block "main" . }}
+        {{ end }}
+    </main>
+    {{- partial "footer.html" . -}}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/_default/home.html b/themes/main-theme/layouts/_default/home.html
new file mode 100644
index 0000000..17f8b30
--- /dev/null
+++ b/themes/main-theme/layouts/_default/home.html
@@ -0,0 +1,74 @@
+{{ define "main" }}
+<div class="w-full">
+    <div class="container m-auto">
+        <div class="grid grid-cols-12 gap-14">
+            <div class="col-span-8 col- md:col-span-6">
+                <h1 class="text-5xl leading-10 font-normal text-forest mb-16">Towards a human-centric,<br />
+                    next generation Internet.</h1>
+
+                <p class="w-64 h-8 text-2xl font-medium leading-loose text-salmon mb-4">Latest from the blog</p>
+                <div class="max-w-lg">
+                    {{ range last 1 (where site.RegularPages "Type" "blog").ByDate }}
+                    {{ partial "cards/blog-item" . }}
+                    {{ end }}
+                </div>
+
+            </div>
+            <div class="col-span-4 md:col-span-6 max-w-xl">
+                <div class="inline-flex flex-col space-y-6">
+                    <p class="w-64 h-8 text-2xl font-semibold leading-loose text-forest">What is Interpeer?</p>
+                    <p class="text-lg leading-relaxed text-forest">The Interpeer
+                        Project’s objective is to empower a human centric internet. In practice, this currently takes
+                        the
+                        form of a technological initiative with the goal of providing a secure and efficient
+                        peer-to-peer
+                        networking stack, bypassing the protocols of the past. </p>
+                    <h2 class="pt-8 font-normal text-5xl leading-10 text-forest">The future is fully distributed.</h2>
+                    <p class="text-lg leading-relaxed text-forest">This initiative
+                        is home to a growing number of projects, that can be explored in detail on this website. The
+                        project's technical documentation is also available and regularly updated.
+                        <br />
+                    </p>
+                    <div class="py-5 px-4 bg-forest w-full">
+                        <div class="relative">
+                            <p class="text-xl leading-7 text-white">Interested in supporting this
+                                project? <a href="#"
+                                    class="text-xl font-medium leading-7 underline text-white uppercase">
+                                    donate</a></p>
+
+                        </div>
+                    </div>
+
+
+
+
+
+
+
+
+
+
+
+
+                </div>
+            </div>
+        </div>
+        <div class="py-12 lg:py-20 flex justify-center align-middle">
+            {{ partial "mail-subscription" . }}
+        </div>
+    </div>
+</div>
+
+<!-- Towards a human-centric, next generation Internet.
+
+What is Interpeer?
+The Interpeer Project’s objective is to empower a human centric internet. In practice, this currently takes the
+form of a technological initiative with the goal of providing a secure and efficient peer-to-peer networking
+stack, bypassing the protocols of the past.
+
+The future is fully distributed.
+This initiative is home to a growing number of projects, that can be explored in detail on this website. The
+project's technical documentation is also available and regularly updated.
+
+Interested in supporting this project? -->
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/layouts/_default/list.html b/themes/main-theme/layouts/_default/list.html
new file mode 100644
index 0000000..c252611
--- /dev/null
+++ b/themes/main-theme/layouts/_default/list.html
@@ -0,0 +1,33 @@
+{{ define "main" }}
+<div class="container mx-auto">
+
+    <div class="inline-flex mb-8">
+        <a href="/blog/"
+            class="inline-flex items-center px-4 py-3 border border-forest text-forest hover:bg-forest hover:text-white">
+            <span class="flex-1 h-full text-xl font-medium leading-7 text-center">All</span>
+        </a>
+        {{$currentpage := .Page.Data.Term}}
+        {{ range .Site.Taxonomies.categories }}
+        {{ if eq $currentpage .Page.Title}}
+        <a href="{{ .Page.Permalink }}" class="inline-flex items-center px-4 py-3 border bg-forest border-forest">
+            <span class="h-full text-xl font-medium leading-7 text-center  text-white">{{ .Page.Title }}</span>
+        </a>
+        {{ else }}
+        <a href="{{ .Page.Permalink }}"
+            class="inline-flex items-center px-4 py-3 border border-forest text-forest hover:bg-forest hover:text-white">
+            <span class="h-full text-xl font-medium leading-7 text-center">{{ .Page.Title }}</span>
+        </a>
+        {{ end }}
+        {{ end }}
+    </div>
+
+    {{ $paginator := .Paginate (where .Pages "Type" "blog") }}
+    <div class="grid grid-cols-2 gap-16">
+        {{ range $paginator.Pages }}
+        {{ partial "cards/blog-item" . }}
+        {{ end }}
+    </div>
+    {{ template "partials/pagination.html" . }}
+
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/layouts/_default/single.html b/themes/main-theme/layouts/_default/single.html
new file mode 100644
index 0000000..e69de29
diff --git a/themes/main-theme/layouts/blog/list.html b/themes/main-theme/layouts/blog/list.html
new file mode 100644
index 0000000..32892e3
--- /dev/null
+++ b/themes/main-theme/layouts/blog/list.html
@@ -0,0 +1,28 @@
+{{ define "main" }}
+<div class="container mx-auto">
+
+    <div class="inline-flex mb-8">
+        <a href="/blog/" class="inline-flex items-center justify-center w-24 flex-1 pl-4 pr-5 py-3 bg-forest">
+            <span class="flex-1 h-full text-xl font-medium leading-7 text-center text-white">All</span>
+        </a>
+        {{ range .Site.Taxonomies.categories }}
+        <a href="{{ .Page.Permalink }}"
+            class="inline-flex items-center px-4 py-3 border border-forest text-forest hover:bg-forest hover:text-white">
+            <span class="h-full text-xl font-medium leading-7 text-center">{{ .Page.Title }}</span>
+        </a>
+        {{ end }}
+    </div>
+
+
+    {{ $paginator := .Paginate (where .Pages "Type" "blog") }}
+    <div class="grid grid-cols-2 gap-16">
+        {{ range $paginator.Pages }}
+        {{ partial "cards/blog-item" . }}
+        {{ end }}
+    </div>
+    {{ template "partials/pagination.html" . }}
+
+
+
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/layouts/blog/single.html b/themes/main-theme/layouts/blog/single.html
new file mode 100644
index 0000000..0fef9a1
--- /dev/null
+++ b/themes/main-theme/layouts/blog/single.html
@@ -0,0 +1,21 @@
+{{ define "main" }}
+<div class="max-w-2xl mx-auto">
+    <h1 class="text-2xl font-medium leading-loose text-forest">{{ .Title }}</h1>
+    {{ with .Params.categories }}
+    <ul id="tags">
+        {{ range . }}
+        <li> <a class="underline text-salmon mr-1" href=" {{ " categories/" | absURL }}{{ . | urlize }}">{{ . }}</a>
+        </li>
+        {{ end }}
+    </ul>
+    {{ end }}
+
+    <section class="prose mt-5">
+        <article>
+            {{ .Content }}
+        </article>
+    </section>
+    <hr class="text-forest">
+    <p class="text-forest">Published on {{ .Date | time.Format ":date_short" }}</p>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/layouts/page/about.html b/themes/main-theme/layouts/page/about.html
new file mode 100644
index 0000000..842b7e6
--- /dev/null
+++ b/themes/main-theme/layouts/page/about.html
@@ -0,0 +1,86 @@
+{{ define "main" }}
+<div class="relative grid grid-cols-2 gap-16 pt-9 container mx-auto mb-12">
+    <div class="border border-salmon">
+        <div class="inline-flex items-center justify-start pl-8 pt-2.5 pb-2 left-0 top-0 bg-salmon w-full">
+            <p class="flex-1 h-full text-2xl font-medium leading-loose text-almost-white">Why Interpeer?</p>
+        </div>
+        <div class="prose pt-4 px-8">
+            <p class="text-base leading-snug text-forest">
+                The Interpeer Project was born out of a deeply
+                critical perspective of the contemporary state of human-computer interaction and the Internet.</p>
+            <p class="text-base leading-snug text-forest">
+                Computers have become ubiquitous. However, the most
+                popular protocol connecting users to remote machines, HTTP, follows an obsolete philosophy. User data
+                does
+                not
+                need to be arbitrated by and traverse third party machines.
+                <br />
+            </p>
+            <p class="text-base leading-snug text-forest">
+                We need an Internet that fits contemporary usage
+                patterns.</p>
+            <p class="text-base leading-snug text-forest">
+                The Interpeer Project was developed to address these
+                topics, with the goal of helping build a human-centric internet.
+                <br />
+            </p>
+            <p class="text-base leading-snug text-red-400 text-salmon">An Internet where people own
+                their data and can share it between devices and contacts without the need for intermediaries.
+            </p>
+        </div>
+        <div class="border-t border-salmon prose px-8 pt-4">
+            <p class="text-base leading-snug text-red-400 text-salmon">Where cryptography allows
+                users to securely delegate trust to any number of devices, even those they don’t know directly.
+            </p>
+        </div>
+        <div class="border-t border-salmon prose px-8 pt-4">
+            <p class="text-base leading-snug text-red-400 text-salmon">A peer-to-peer networking
+                technology that enables trust delegated machines to share data directly and efficiently.
+            </p>
+            <p class="text-base leading-snug text-red-400">The Interpeer Project was developed to address these topics,
+                with the goal of helping build a human-centric internet.
+            </p>
+        </div>
+    </div>
+    <div>
+        <div class="border border-forest">
+            <div class="inline-flex items-center justify-start pl-8 pt-2.5 pb-2 left-0 top-0 bg-forest w-full">
+                <p class="flex-1 h-full text-2xl font-medium leading-loose text-almost-white">On “Human-centric”</p>
+            </div>
+            <div class="prose pt-4 px-8">
+                <p class="text-base leading-snug text-forest">
+                    It's important to provide a clear definition of what "human-centric" means in the context of this
+                    project.
+                </p>
+                <p class="text-base leading-snug text-forest">
+                    For the purposes of this project, "Human" opposes the artificial, data-harvesting, centralised
+                    market logic of the main communication platforms in contemporary society.
+                </p>
+                <p class="text-base leading-snug text-forest">
+                    It also acknowledges the human experiences as a small part of what constitutes nature, and is in now
+                    way superior or more important than any other life form or living consciousness.
+                </p>
+            </div>
+        </div>
+        <div class="border border-forest mt-10">
+            <div class="inline-flex items-center justify-start pl-8 pt-2.5 pb-2 left-0 top-0 bg-forest w-full">
+                <p class="flex-1 h-full text-2xl font-medium leading-loose text-almost-white">On “Human-centric”</p>
+            </div>
+            <div class="prose pt-4 px-8">
+                <p class="text-base leading-snug text-forest">
+                    It's important to provide a clear definition of what "human-centric" means in the context of this
+                    project.
+                </p>
+                <p class="text-base leading-snug text-forest">
+                    For the purposes of this project, "Human" opposes the artificial, data-harvesting, centralised
+                    market logic of the main communication platforms in contemporary society.
+                </p>
+                <p class="text-base leading-snug text-forest">
+                    It also acknowledges the human experiences as a small part of what constitutes nature, and is in now
+                    way superior or more important than any other life form or living consciousness.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/card.html b/themes/main-theme/layouts/partials/card.html
new file mode 100644
index 0000000..e07955c
--- /dev/null
+++ b/themes/main-theme/layouts/partials/card.html
@@ -0,0 +1,10 @@
+<div class="border border-forest">
+    <div class="inline-flex items-center justify-start pl-8 pr-72 pt-2.5 pb-2 left-0 top-0 bg-forest w-full">
+        <p class="flex-1 h-full text-2xl font-medium leading-loose text-almost-white">{{.cardTitle}}</p>
+    </div>
+    <div class="prose pt-4 px-8">
+        <p class="text-base leading-snug text-forest">
+            {{.cardSummary}}
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/cards/blog-item.html b/themes/main-theme/layouts/partials/cards/blog-item.html
new file mode 100644
index 0000000..9b9b80f
--- /dev/null
+++ b/themes/main-theme/layouts/partials/cards/blog-item.html
@@ -0,0 +1,14 @@
+<div class="border border-salmon">
+    <div class="inline-flex items-center justify-start px-8 pt-2.5 pb-2 bg-salmon w-full">
+        <p class="flex-1 w-full text-2xl font-medium leading-loose text-almost-white">{{.Title}}</p>
+    </div>
+    <div class="prose pt-4 px-8">
+        <p class="text-base leading-snug text-salmon">
+            {{.Summary}}
+        </p>
+    </div>
+    <div class="inline-flex items-center justify-start px-8 pt-2.5 pb-2 bg-salmon w-full">
+        {{ if .Title }} <a class="flex-1 w-full text-xl underline font-normal leading-loose text-almost-white"
+            href="{{ .Permalink }}">Read more</a> {{ end }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/footer.html b/themes/main-theme/layouts/partials/footer.html
new file mode 100644
index 0000000..3257def
--- /dev/null
+++ b/themes/main-theme/layouts/partials/footer.html
@@ -0,0 +1,16 @@
+<footer class="bg-grayish inline-grid grid-cols-3 pt-8 pb-9">
+    <div class="m-auto min-w-fit flex flex-col justify-center col-start-2">
+        <img src="/interpeer-logo-small.svg" class="h-6 mb-6 w-fit m-auto " alt="Logo Interpeer small">
+        <div class="relative flex w-fit">
+            <p class="w-28 h-5 text-base leading-tight underline text-center text-salmon">
+                Codeberg</p>
+            <p class="w-28 h-5 text-base leading-tight underline text-center text-salmon">
+                Mastodon</p>
+        </div>
+    </div>
+    <div class="items-end mt-auto">
+        <p class="w-72 h-9 text-base leading-tight text-right text-forest">The Interpeer Project was created and
+            maintained by <a href="#" class="text-salmon">Jens
+                Finkhauser.</a></p>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/head.html b/themes/main-theme/layouts/partials/head.html
new file mode 100644
index 0000000..45437fa
--- /dev/null
+++ b/themes/main-theme/layouts/partials/head.html
@@ -0,0 +1,10 @@
+<head>
+    <!-- <link rel='stylesheet' type='text/css' href='/style.css'> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="index, follow">
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/styles.css">
+    {{ $css := resources.Get "css/compiled/output.css" }}
+    {{ $style := $css | resources.Minify }}
+    <link type="text/css" rel="stylesheet" href="{{ $style.RelPermalink }}" />
+</head>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/header.html b/themes/main-theme/layouts/partials/header.html
new file mode 100644
index 0000000..ad7476f
--- /dev/null
+++ b/themes/main-theme/layouts/partials/header.html
@@ -0,0 +1,8 @@
+<header class="header-background">
+    <div class="h-28 w-full flex items-center justify-between container mx-auto">
+        <a href="/">
+            <img src="/logo.svg" class="h-9" alt="Logo Interpeer">
+        </a>
+        {{- partial "nav.html" . -}}
+    </div>
+</header>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/mail-subscription.html b/themes/main-theme/layouts/partials/mail-subscription.html
new file mode 100644
index 0000000..c3369c3
--- /dev/null
+++ b/themes/main-theme/layouts/partials/mail-subscription.html
@@ -0,0 +1,12 @@
+<div class="relative max-w-md border-[1px] border-forest">
+    <div class="inline-flex items-center justify-center px-4 py-3.5 bg-forest w-full">
+        <p class="flex-1 h-full text-xl font-medium leading-7 text-center text-white">Join the mailing list</p>
+    </div>
+    <form class="relative border border-forest flex flex-row py-4 px-4">
+        <input class="border-b text-base leading-tight border-forest text-gray-400 mr-4" type="text"
+            placeholder="Email address">
+        <input
+            class="text-xl border-b border-forest leading-7 text-forest cursor-pointer focus:outline-1 focus:outline focus:outline-offset-2"
+            type="submit" value="Subscribe">
+    </form>
+</div>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/nav.html b/themes/main-theme/layouts/partials/nav.html
new file mode 100644
index 0000000..1429ecb
--- /dev/null
+++ b/themes/main-theme/layouts/partials/nav.html
@@ -0,0 +1,13 @@
+<nav>
+    <ul class="flex">
+        {{ $currentPage := . }}
+        {{ range .Site.Menus.main }}
+        <li class="px-4">
+            <a href="{{ .URL }}" class="font-medium uppercase text-almost-white underline hover:text-salmon{{ if $currentPage.IsMenuCurrent "main" . }} !text-salmon{{ end }}">
+                {{ .Pre }}
+                <span>{{ .Name }}</span>
+            </a>
+        </li>
+        {{ end }}
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/themes/main-theme/layouts/partials/pagination.html b/themes/main-theme/layouts/partials/pagination.html
new file mode 100644
index 0000000..1045974
--- /dev/null
+++ b/themes/main-theme/layouts/partials/pagination.html
@@ -0,0 +1,48 @@
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<nav class="pagination w-full flex justify-center py-10">
+<ul class="flex w-max items-center space-x-2">
+    {{ with $pag.First }}
+        <li>
+            <a href="{{ .URL }}" class="pagination-link text-salmon" disabled aria-label="First">
+                <span aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18"><g fill="none" fill-rule="evenodd" stroke="#FA765B" stroke-width="2"><path d="M16 17 8 9l8-8"/><path d="M10 17 2 9l8-8"/></g></svg>
+                </span>
+            </a>
+        </li>
+    {{ end }}
+    <li>
+        <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" class="pagination-link" {{ if not $pag.HasPrev }} disabled{{ end }} aria-label="Previous"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="18"><g fill="none" fill-rule="evenodd" stroke="#FA765B" stroke-width="2"><path d="M10 17 2 9l8-8"/></g></svg></a>
+    </li>
+    {{ $ellipsed := false }}
+    {{ $shouldEllipse := false }}
+    {{ range $pag.Pagers }}
+    {{ $right := sub .TotalPages .PageNumber }}
+    {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }}
+    {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add $pag.PageNumber 2)))  }}
+    {{ if $showNumber }}
+        {{ $ellipsed = false }}
+        {{ $shouldEllipse = false }}
+    {{ else }}
+        {{ $shouldEllipse = not $ellipsed }}
+        {{ $ellipsed = true }}
+    {{ end }}
+    {{ if $showNumber }}
+    <li><a class="pagination-link text-xl leading-normal {{ if eq . $pag }}text-salmon underline{{ end }}" href="{{ .URL }}">{{ .PageNumber }}</a></li>
+    {{ else if $shouldEllipse }}
+    <li class="pagination-link" disabled><span aria-hidden="true">&nbsp;&hellip;&nbsp;</span></li>
+    {{ end }}
+    {{ end }}
+    <li>
+    <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" class="pagination-link" {{ if not $pag.HasNext }}disabled{{ end }} aria-label="Next"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" fill="none"><path stroke="#FA765B" stroke-width="2" d="m1 1 8 8-8 8"/></svg></a>
+    </li>
+    {{ with $pag.Last }}
+    <li>
+        <a class="flex" href="{{ .URL }}" class="pagination-link" {{ if not $pag.HasNext }}disabled{{ end }} aria-label="Last">
+            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18"><g fill="none" fill-rule="evenodd" stroke="#FA765B" stroke-width="2"><path d="m1 1 8 8-8 8"/><path d="m7 1 8 8-8 8"/></g></svg>
+        </a>
+    </li>
+    {{ end }}
+</ul>
+</nav>
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/layouts/projects/list.html b/themes/main-theme/layouts/projects/list.html
new file mode 100644
index 0000000..45cd64a
--- /dev/null
+++ b/themes/main-theme/layouts/projects/list.html
@@ -0,0 +1,12 @@
+{{ define "main" }}
+<div class="container mx-auto">
+    {{ $paginator := .Paginate (where .Pages "Type" "projects") }}
+    <div class="grid grid-cols-2 gap-16">
+        {{ range $paginator.Pages }}
+        {{ partial "cards/blog-item" . }}
+        {{ end }}
+    </div>
+    {{ template "partials/pagination.html" . }}
+
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/layouts/projects/single.html b/themes/main-theme/layouts/projects/single.html
new file mode 100644
index 0000000..c138b54
--- /dev/null
+++ b/themes/main-theme/layouts/projects/single.html
@@ -0,0 +1,74 @@
+{{ define "main" }}
+<div class="container mx-auto">
+    <p class="text-2xl font-medium leading-loose text-forest mb-1">List of projects</p>
+    <div class="inline-flex mb-8">
+        {{$currentpage := .Page.Title}}
+        {{ $section := "projects" }}
+        {{ range (where .Site.RegularPages.ByTitle "Section" $section ) }}
+        {{ if eq $currentpage .Page.Title}}
+        <a href="{{ .Permalink }}" class="inline-flex items-center px-4 py-3 border bg-forest border-forest">
+            <span class="h-full text-xl font-medium leading-7 text-center  text-white">{{ .Params.title | humanize |
+                title }}</span>
+        </a>
+        {{ else }}
+        <a href="{{ .Permalink }}"
+            class="inline-flex items-center px-4 py-3 border border-forest text-forest hover:bg-forest hover:text-white">
+            <span class="h-full text-xl font-medium leading-7 text-center">{{ .Params.title | humanize | title }}</span>
+        </a>
+        {{ end }}
+        {{ end }}
+    </div>
+    <div class="flex mt-9">
+        <aside>
+            <div class="underline text-xl leading-7 text-forest mt-7">
+                {{ .Page.TableOfContents }}
+            </div>
+        </aside>
+        <div class="max-w-2xl mx-auto">
+            <div class="inline-flex items-center justify-start px-8 py-4 mb-4 bg-salmon w-full">
+                <h1 class="flex-1 w-full text-2xl font-medium leading-loose text-almost-white">{{.Title}}</h1>
+            </div>
+
+            <section class="prose prose-lg">
+                <div>
+                    <article>
+                        {{ .Content }}
+                    </article>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>
+
+
+<aside id="meta">
+    <div>
+        <section>
+            <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
+            <h5 id="wordcount"> {{ .WordCount }} Words </h5>
+        </section>
+        {{ with .Params.topics }}
+        <ul id="topics">
+            {{ range . }}
+            <li><a href="{{ " topics" | absURL}}{{ . | urlize }}">{{ . }}</a> </li>
+            {{ end }}
+        </ul>
+        {{ end }}
+        {{ with .Params.tags }}
+        <ul id="tags">
+            {{ range . }}
+            <li> <a href="{{ " tags" | absURL }}{{ . | urlize }}">{{ . }}</a> </li>
+            {{ end }}
+        </ul>
+        {{ end }}
+    </div>
+    <div>
+        {{ with .PrevInSection }}
+        <a class="previous" href="{{.Permalink}}"> {{.Title}}</a>
+        {{ end }}
+        {{ with .NextInSection }}
+        <a class="next" href="{{.Permalink}}"> {{.Title}}</a>
+        {{ end }}
+    </div>
+</aside>
+{{ end }}
\ No newline at end of file
diff --git a/themes/main-theme/theme.toml b/themes/main-theme/theme.toml
new file mode 100644
index 0000000..d7b402f
--- /dev/null
+++ b/themes/main-theme/theme.toml
@@ -0,0 +1,21 @@
+# theme.toml template for a Hugo theme
+# See https://github.com/gohugoio/hugoThemes#themetoml for an example
+
+name = "Main Theme"
+license = "MIT"
+licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE"
+description = ""
+homepage = "http://example.com/"
+tags = []
+features = []
+min_version = "0.41.0"
+
+[author]
+  name = ""
+  homepage = ""
+
+# If porting an existing theme
+[original]
+  name = ""
+  homepage = ""
+  repo = ""