diff --git a/.eslintrc.js b/.eslintrc.js
index 6c18c60..f216217 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,7 +14,8 @@ module.exports = {
     "@moritzruth/eslint-config/vue"
   ],
   rules: {
-    "no-unused-vars": "warn"
+    "no-unused-vars": "warn",
+    "vue/no-unused-components": "warn"
   },
   "settings": {
     "import/resolver": {
diff --git a/assets/icons/email.svg b/assets/icons/email.svg
index 2609b66..c589cf1 100644
--- a/assets/icons/email.svg
+++ b/assets/icons/email.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
diff --git a/assets/icons/instagram.svg b/assets/icons/instagram.svg
index a117827..89c17d3 100644
--- a/assets/icons/instagram.svg
+++ b/assets/icons/instagram.svg
@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
diff --git a/assets/icons/arrow_right.svg b/assets/icons/pointer-right.svg
similarity index 100%
rename from assets/icons/arrow_right.svg
rename to assets/icons/pointer-right.svg
diff --git a/assets/icons/twitter.svg b/assets/icons/twitter.svg
index 23a6ddf..323d316 100644
--- a/assets/icons/twitter.svg
+++ b/assets/icons/twitter.svg
@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
diff --git a/assets/media/MyLogo.svg b/assets/media/MyLogo.svg
deleted file mode 100644
index 7f94f41..0000000
--- a/assets/media/MyLogo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="76.75 182.661 358.5 146.679" width="358.5pt" height="146.679pt"><g><g><path d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/><path d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/></g><g><path d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z " fill-rule="evenodd" fill="currentColor"/><path d=" M 390.537 329.339 L 345.25 182.837 L 435.25 182.661 L 390.537 329.339 Z " fill-rule="evenodd" fill="currentColor"/></g></g></svg>
diff --git a/assets/styles/_colors.scss b/assets/styles/_colors.scss
index 54c3a82..ecbb2f7 100644
--- a/assets/styles/_colors.scss
+++ b/assets/styles/_colors.scss
@@ -4,3 +4,5 @@ $pink: #BB2081;
 $pink-c: white;
 $blue: #14AAD8;
 $blue-c: white;
+$green: #00ff64;
+$green-c: black;
diff --git a/assets/styles/_content.scss b/assets/styles/_content.scss
index f3bb0b1..2317dfb 100644
--- a/assets/styles/_content.scss
+++ b/assets/styles/_content.scss
@@ -1,5 +1,5 @@
 @mixin content($padding: 20px) {
-  $width: 800px;
+  $width: 1000px;
 
   max-width: calc(100vw - #{$padding} * 2);
   width: $width;
diff --git a/assets/styles/formatted/_link.scss b/assets/styles/formatted/_link.scss
index e9e9a7a..3f9b8d3 100644
--- a/assets/styles/formatted/_link.scss
+++ b/assets/styles/formatted/_link.scss
@@ -1,11 +1,13 @@
+@use "../colors";
+
 %link {
-  color: var(--colors-link);
+  color: colors.$blue;
   text-decoration: none;
 
   transition: 100ms linear opacity;
   opacity: 1;
 
   &:hover {
-    opacity: 0.8;
+    opacity: 0.9;
   }
 }
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 151c0dc..60b1739 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -38,7 +38,7 @@ html, body {
   @include content.content();
 }
 
-.link {
+.underlined-link {
   position: relative;
 
   text-decoration: none;
diff --git a/components/AnimatedLogo.vue b/components/AnimatedLogo.vue
index c8ecaef..9c819ab 100644
--- a/components/AnimatedLogo.vue
+++ b/components/AnimatedLogo.vue
@@ -33,28 +33,34 @@
 </template>
 
 <style scoped lang="scss">
+  @use "~@/assets/styles/colors";
+
   $scale-up-duration: 800ms;
   $slide-duration: 1000ms;
   $slide-delay: $scale-up-duration / 2;
   $fade-duration: 400ms;
   $fade-delay: $slide-delay + 300ms;
   $slide-length: 37.5%;
+  $border-show-delay: $fade-delay + $fade-duration;
 
   .animated-logo {
     width: 300px;
     max-width: 60vw;
+    padding: 40px 40px 30px;
 
-    animation: scaleUp $scale-up-duration ease-out both;
+    background: transparentize(colors.$background, 0.5);
+    color: colors.$background-c;
   }
 
   .animated-logo__svg {
     width: 100%;
 
-    margin-bottom: 40px;
+    margin-bottom: 20px;
+    animation: scaleUp $scale-up-duration ease-out both;
   }
 
   .animated-logo__name {
-    font-size: 2.3rem;
+    font-size: 2rem;
     animation: fadeIn $slide-duration $scale-up-duration ease both;
     text-align: center;
   }
diff --git a/components/ExternalLink.vue b/components/ExternalLink.vue
index e4a0ca6..71e71d2 100644
--- a/components/ExternalLink.vue
+++ b/components/ExternalLink.vue
@@ -18,7 +18,7 @@
 <style scoped lang="scss">
   .external-link {
     padding-right: 2px;
-    overflow-wrap: break-word;
+    white-space: nowrap;
   }
 
   .external-link__icon {
diff --git a/components/MyButton.vue b/components/MyButton.vue
new file mode 100644
index 0000000..b078e03
--- /dev/null
+++ b/components/MyButton.vue
@@ -0,0 +1,234 @@
+<style scoped lang="scss">
+  @use "~@/assets/styles/colors";
+
+  .my-button {
+    position: relative;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    padding: 8px 15px;
+    border-radius: 4px;
+
+    height: 30px;
+
+    background-color: transparent;
+    border: none;
+    text-decoration: none;
+    font: inherit;
+    color: inherit;
+    cursor: default;
+
+    transition: 140ms ease background-color;
+    &:hover, &:focus {
+      &:not(.my-button--disabled) {
+        background: transparentize(colors.$blue, 0.85);
+      }
+    }
+
+    &.my-button--disabled, &.my-button--loading {
+      &::before {
+        pointer-events: auto;
+        opacity: 0.6;
+      }
+    }
+
+    &.my-button--loading {
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    &.my-button--center {
+      justify-content: center;
+    }
+  }
+
+  .my-button::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    pointer-events: none;
+    background-color: colors.$background;
+
+    opacity: 0;
+    transition: 100ms linear opacity;
+  }
+
+  .my-button::after {
+    $size: 20px;
+
+    pointer-events: none;
+    opacity: 0;
+    transition: 100ms linear opacity;
+
+    content: "";
+    position: absolute;
+    top: calc(50% - #{$size} / 2 + 2px);
+    left: calc(50% - #{$size} / 2);
+    width: $size;
+    height: $size;
+
+    border: 2px solid var(--colors-background-c);
+    border-left-color: transparent;
+    border-radius: 50%;
+
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0)
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .my-button__text {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+
+  .my-button__prefix {
+    display: inline-flex;
+    margin-right: 10px;
+    margin-left: -5px;
+
+    justify-content: center;
+
+    & > * {
+      height: 20px;
+    }
+  }
+
+  .my-button__suffix {
+    display: inline-flex;
+    margin-left: 10px;
+
+    justify-content: center;
+
+    & > * {
+      height: 20px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name: "MyButton",
+    props: {
+      to: {
+        type: String,
+        default: ""
+      },
+      href: {
+        type: String,
+        default: ""
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      isSubmit: {
+        type: Boolean,
+        default: false
+      },
+      center: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      isExternalLink: vm => Boolean(vm.href),
+      isInternalLink: vm => Boolean(vm.to)
+    },
+    methods: {
+      onClick(event) {
+        if (!this.disabled && !this.loading) {
+          this.$emit("click", event);
+        }
+      }
+    },
+    render(h) {
+      const children = [];
+
+      if (this.$slots.prefix) {
+        children.push(h("div", {
+          class: "my-button__prefix"
+        }, this.$slots.prefix));
+      }
+
+      children.push(h("div", {
+        class: "my-button__text"
+      }, this.$slots.default));
+
+      if (this.$slots.suffix) {
+        h("div", {
+          class: "my-button__suffix"
+        }, this.$slots.suffix);
+      }
+
+      const baseOptions = {
+        class: ["my-button", {
+          "my-button--loading": this.loading,
+          "my-button--disabled": this.disabled,
+          "my-button--center": this.center
+        }],
+        on: {
+          click: this.onClick
+        },
+        directives: [
+          {
+            name: "ripple",
+            modifiers: {
+              click: true,
+              400: true
+            },
+            value: "rgba(255, 255, 255, 0.2)"
+          }
+        ],
+        attrs: {
+          tabindex: this.disabled || this.loading ? "-1" : "0"
+        }
+      };
+
+      if (this.isInternalLink) {
+        return h("nuxt-link", {
+          ...baseOptions,
+          props: {
+            to: this.to
+          }
+        }, children);
+      } else if (this.isExternalLink) {
+        return h("a", {
+          ...baseOptions,
+          attrs: {
+            ...baseOptions.attrs,
+            href: this.href,
+            rel: "noopener"
+          }
+        }, children);
+      }
+
+      return h("button", {
+        ...baseOptions,
+        attrs: {
+          ...baseOptions.attrs,
+          disabled: this.disabled,
+          type: this.isSubmit ? "submit" : "button"
+        }
+      }, children);
+    }
+  };
+</script>
diff --git a/components/MyFooter.vue b/components/MyFooter.vue
index 7e4f93c..09f9836 100644
--- a/components/MyFooter.vue
+++ b/components/MyFooter.vue
@@ -2,7 +2,7 @@
   <footer class="my-footer">
     <nuxt-link
       v-for="item in $options.items"
-      class="my-footer__link link"
+      class="my-footer__link underlined-link"
       :key="item.label"
       :to="item.to"
       @click.native.passive="open = false"
@@ -30,9 +30,15 @@
   }
 
   @include screenSize.mobile {
+
+    .my-footer {
+      flex-direction: column;
+      margin-bottom: 10px;
+    }
+
     .my-footer__link:not(:last-child) {
       margin-right: 0;
-      margin-bottom: 20px;
+      margin-bottom: 10px;
     }
   }
 </style>
diff --git a/components/NavigationBar.vue b/components/NavigationBar.vue
index 40ba155..3a15998 100644
--- a/components/NavigationBar.vue
+++ b/components/NavigationBar.vue
@@ -110,7 +110,9 @@
   }
 
   .navigation-bar__title {
-    font-size: 1.4rem;
+    font-size: 2rem;
+    text-transform: uppercase;
+    font-weight: bold;
     display: block;
 
     opacity: 0;
@@ -190,7 +192,7 @@
     display: block;
     color: colors.$background-c;
     text-decoration: none;
-    font-size: 1.4rem;
+    font-size: 2rem;
 
     background: black;
     padding: 10px;
@@ -254,12 +256,18 @@
       pointer-events: auto;
 
       flex-direction: row;
+
+      background: transparent;
     }
 
     .navigation-bar__link-container:not(:last-child) {
       margin-bottom: 0;
       margin-right: 40px;
     }
+
+    .navigation-bar__link {
+      font-size: 1.3rem;
+    }
   }
 </style>
 
diff --git a/components/pages/projects/MyProject.vue b/components/pages/projects/MyProject.vue
new file mode 100644
index 0000000..2f5fe04
--- /dev/null
+++ b/components/pages/projects/MyProject.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="my-project">
+    <h2 class="my-project__title">
+      {{ title }}
+    </h2>
+    <span class="my-project__kind">{{ kind }}</span>
+    <div class="my-project__description">
+      <slot/>
+    </div>
+    <div class="my-project__links" v-if="github || npm || url">
+      <MyButton
+        v-if="url !== ''"
+        class="my-project__link"
+        :href="url"
+      >
+        <template v-slot:prefix>
+          <PointerRightIcon class="my-project__link-icon"/>
+        </template>
+        Open
+      </MyButton>
+      <MyButton
+        v-if="github !== ''"
+        class="my-project__link"
+        :href="`https://github.com/${github}`"
+      >
+        <template v-slot:prefix>
+          <GitHubIcon class="my-project__link-icon"/>
+        </template>
+        GitHub
+      </MyButton>
+      <MyButton
+        v-if="npm !== ''"
+        class="my-project__link"
+        :href="`https://npmjs.com/${npm}`"
+      >
+        <template v-slot:prefix>
+          <NPMIcon class="my-project__link-icon"/>
+        </template>
+        NPM
+      </MyButton>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+  @use "~@/assets/styles/colors";
+  @use "~@/assets/styles/screenSize";
+
+  .my-project {
+    background: #090909;
+    border: 1px solid colors.$green;
+    padding: 20px;
+    margin: 10px;
+    font-size: 1.1rem;
+    width: 400px;
+    flex-grow: 1;
+
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+
+    &:nth-child(3n+1) {
+      border-color: colors.$blue;
+    }
+
+    &:nth-child(3n+2) {
+      border-color: colors.$pink;
+    }
+  }
+
+  .my-project__title {
+    margin: 0;
+
+    font-weight: bold;
+    font-size: 1.8rem;
+  }
+
+  .my-project__kind {
+    display: block;
+    font-size: 1rem;
+
+    margin-top: 5px;
+    margin-bottom: 20px;
+  }
+
+  .my-project__links {
+    flex-grow: 1;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+
+    margin-top: 10px;
+  }
+
+  .my-project__link {
+    height: 30px;
+    margin: 2px;
+  }
+
+  .my-project__link-icon {
+    height: 25px!important;
+  }
+
+  @include screenSize.mobile {
+    .my-project__links {
+      flex-direction: column;
+      justify-content: stretch;
+      align-items: stretch;
+    }
+  }
+</style>
+
+<script>
+  import MyButton from "@/components/MyButton";
+  import GitHubIcon from "@/assets/icons/github.svg";
+  import NPMIcon from "@/assets/icons/npm.svg";
+  import PointerRightIcon from "@/assets/icons/pointer-right.svg";
+
+  export default {
+    name: "MyProject",
+    components: { MyButton, GitHubIcon, NPMIcon, PointerRightIcon },
+    props: {
+      title: {
+        type: String,
+        required: true
+      },
+      kind: {
+        type: String,
+        required: true
+      },
+      npm: {
+        type: String,
+        default: ""
+      },
+      github: {
+        type: String,
+        default: ""
+      },
+      url: {
+        type: String,
+        default: ""
+      }
+    }
+  };
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 13f496e..bda97c8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,9 +2,35 @@
   <div class="index-page">
     <NavigationBar background-after-scroll title="Start"/>
     <canvas class="index-page__background" ref="canvas"/>
-    <div class="index-page__content">
+    <main class="index-page__content">
       <AnimatedLogo/>
-    </div>
+      <div class="index-page__socials">
+        <a
+          class="index-page__social"
+          href="https://instagram.com/moritzruth_dev"
+          title="Instagram"
+        ><InstagramIcon class="index-page__social-icon"/></a>
+        <a
+          class="index-page__social"
+          href="https://twitter.com/moritzruth_dev"
+          title="Twitter"
+        ><TwitterIcon class="index-page__social-icon"/></a>
+        <a
+          class="index-page__social"
+          href="https://npmjs.org/~moritzruth"
+          title="NPM"
+        ><NPMIcon class="index-page__social-icon"/></a>
+        <a
+          class="index-page__social"
+          href="https://github.com/moritzruth"
+          title="GitHub"
+        ><GitHubIcon class="index-page__social-icon"/></a>
+        <a
+          class="index-page__social"
+          href="mailto:dev@moritz-ruth.de"
+        ><EmailIcon class="index-page__social-icon"/></a>
+      </div>
+    </main>
     <footer class="index-page__footer">
       <nuxt-link
         v-for="item in $options.footerItems"
@@ -24,7 +50,8 @@
   @use "~@/assets/styles/colors";
 
   .index-page {
-    background: black;
+    background: colors.$background;
+    color: colors.$background-c;
     width: 100vw;
   }
 
@@ -40,8 +67,59 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
+    position: relative;
 
-    height: calc(100vh - var(--navigation-bar-height));
+    height: calc(90vh - var(--navigation-bar-height));
+  }
+
+  .index-page__socials {
+    margin-top: 20px;
+
+    padding: 20px;
+    background: transparentize(colors.$background, 0.5);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .index-page__social {
+    text-decoration: none;
+    position: relative;
+
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
+
+    &:hover, &:focus-within {
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      background: linear-gradient(-135deg, colors.$blue, colors.$pink 80%);
+      pointer-events: none;
+      mix-blend-mode: multiply;
+
+      opacity: 0;
+      transition: 200ms opacity ease;
+    }
+  }
+
+  .index-page__social-icon {
+    color: colors.$background-c;
+    height: 40px;
+    margin-right: 10px;
   }
 
   .index-page__footer {
@@ -52,7 +130,7 @@
 
     padding: 20px;
 
-    opacity: 0.5;
+    opacity: 0.8;
     transition: 200ms linear opacity;
 
     &:hover {
@@ -70,7 +148,9 @@
   }
 
   @include screenSize.mobile {
-
+    .index-page__social-icon {
+      height: 30px;
+    }
   }
 </style>
 
@@ -79,6 +159,11 @@
   import AnimatedLogo from "@/components/AnimatedLogo";
   import NavigationBar from "@/components/NavigationBar";
   import { footerItems } from "@/assets/js/footerItems";
+  import InstagramIcon from "@/assets/icons/instagram.svg";
+  import TwitterIcon from "@/assets/icons/twitter.svg";
+  import NPMIcon from "@/assets/icons/npm.svg";
+  import GitHubIcon from "@/assets/icons/github.svg";
+  import EmailIcon from "@/assets/icons/email.svg";
 
   const COLORS = [
     "#BB2081",
@@ -114,7 +199,7 @@
   export default {
     name: "IndexPage",
     layout: "empty",
-    components: { NavigationBar, AnimatedLogo },
+    components: { NavigationBar, AnimatedLogo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
     mounted() {
       let configIndex = 0;
 
diff --git a/pages/projects.vue b/pages/projects.vue
new file mode 100644
index 0000000..3501195
--- /dev/null
+++ b/pages/projects.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="projects-page">
+    <NavigationBar title="Projects"/>
+    <main class="content">
+      <h1 class="heading--1 projects-page__heading">
+        Projects
+      </h1>
+      <div class="projects-page__projects">
+        <MyProject
+          title="shaped.js"
+          kind="JavaScript Library"
+          github="moritzruth/shaped.js"
+          npm="shaped.js"
+        >
+          Generate amazing animated backgrounds using only a canvas element.
+          <nuxt-link to="/" class="link">See it in action on the home page.</nuxt-link>
+        </MyProject>
+        <MyProject
+          title="Schweredruck-Simulation"
+          kind="Web App (german)"
+          github="moritzruth/schweredruck-simulation"
+          url="https://app.moritz-ruth.de/schweredruck-simulation/"
+        >
+          Calculate and visualize the hydrostatic pressure in different liquids.
+        </MyProject>
+        <MyProject
+          title="log-groups"
+          kind="Node.js Package"
+          github="moritzruth/log-groups"
+          npm="log-groups"
+        >
+          Print console log messages in groups.
+        </MyProject>
+        <MyProject
+          title="node-enttec-open-dmx-usb"
+          kind="Node.js Package"
+          github="moritzruth/node-enttec-open-dmx-usb"
+          npm="enttec-open-dmx-usb"
+        >
+          Use the Enttec Open DMX USB Interface with Node.js.
+        </MyProject>
+        <MyProject
+          title="eslint-config"
+          kind="ESLint Configuration"
+          github="moritzruth/eslint-config"
+          npm="@moritzruth/eslint-config"
+        >
+          My personal ESLint configuration.
+        </MyProject>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style lang="scss">
+  @use "~@/assets/styles/colors";
+
+  .projects-page__heading {
+    margin-top: 0;
+  }
+
+  .projects-page__projects {
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>
+
+<script>
+  import NavigationBar from "@/components/NavigationBar";
+  import MyProject from "@/components/pages/projects/MyProject";
+
+  export default {
+    name: "ProjectsPage",
+    components: { MyProject, NavigationBar }
+  };
+</script>