add new nuxt build

README.md

@@ -8,7 +8,29 @@ With GitHub you can Present yourself easily and without a fee, as you can setup
 
 People love it when something moves and changes it's shape, so use the power of CSS and JS to create an interactive and rememberable portfolio.
 
-# Techniques
+
+## Vue
+The new Version is build with VUE. Very similar to Angular you will get easy into it.
+
+Synthwave design based on https://codepen.io/inegoita/pen/BgdXMw?editors=1000
+
+### Build Setup
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn generate
+$ yarn start
+
+# generate static project
+$ yarn generate
+```
+
 ## Angular
 This page is completely build in [Angular 9](https://angular.io). Even if you are new to programming or webdevelopment this is a realy easy start to get to simple goals really fast. All development files for this static site are in the "source" folder. Install all necassaries you need for Angular and start an command line tool to start up. Here's a list of commands:
   - `ng serve`: Starts the development server on your localhost machine. Wait for compiling and navigate to `http://localhost:4200/` on your machine. The app will automatically reload if you change any of the source files.
@@ -16,14 +38,11 @@ This page is completely build in [Angular 9](https://angular.io). Even if you ar
   - `ng generate component component-name`: run to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
   - `ng help`: To get more help on the Angular CLI or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
-## Angular Material
+### Angular Material
 [Material Design](https://material.angular.io) components for Angular. Fully tested across modern browsers. Built by the Angular team to integrate seamlessly with Angular.
 
-## Bootstrap (with jQuery)
+### Bootstrap (with jQuery)
 Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. [Website](https://getbootstrap.com)
 
 
 Ask if you have questions and have fun!
-
-Notice: No Commercial use allowed!
-

nuxt/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

nuxt/.gitignore

@@ -0,0 +1,87 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

nuxt/README.md

@@ -0,0 +1,20 @@
+# wieerwill.github.io
+
+Get to know Wieerwill at Github.io
+
+
+## Build Setup
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+
+# build for production and launch server
+$ yarn build
+$ yarn start
+
+# generate static project
+$ yarn generate
+```

nuxt/assets/global.css

@@ -0,0 +1,758 @@
+@import url(https://fonts.googleapis.com/css?family=Montserrat:700,900|Dancing+Script);
+
+/* #### Generated By: http://www.cufonfonts.com #### */
+@font-face {
+  font-family: "RoadRage";
+  font-style: normal;
+  font-weight: normal;
+  src: local("RoadRage"),
+    url("http://coding-dude.com/wp/wp-content/uploads/Road_Rage.woff")
+      format("woff");
+}
+
+:root {
+  font-size: 3vw;
+}
+
+.grid {
+  background-attachment: fixed;
+  position: fixed;
+  bottom: -30%;
+  left: 0;
+  margin-left: -50%;
+  width: 200%;
+  height: 100%;
+  background-position-y: 0px;
+  background-image: repeating-linear-gradient(
+      90deg,
+      var(--grid-color, black) 0%,
+      transparent calc(1px + var(--grid-blur, 0px)),
+      transparent var(--grid-size),
+      var(--grid-color, black)
+        calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
+    ),
+    repeating-linear-gradient(
+      180deg,
+      var(--grid-color, black) 0%,
+      transparent calc(1px + var(--grid-blur, 0px)),
+      transparent var(--grid-size),
+      var(--grid-color, black)
+        calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
+    );
+  transform: perspective(50vh) rotateX(60deg) translateZ(10px);
+  animation: moving-grid 0.5s infinite linear;
+  z-index: -1;
+}
+
+@keyframes moving-grid {
+  0% {
+    transform: perspective(50vh) rotateX(60deg) translateZ(10px)
+      translateY(-var(--grid-size));
+  }
+
+  100% {
+    transform: perspective(50vh) rotateX(60deg) translateZ(10px)
+      translateY(var(--grid-size));
+  }
+}
+
+.sun {
+  background-attachment: fixed;
+  position: fixed;
+  width: 200px;
+  height: 200px;
+  border-radius: 100%;
+  background-color: yellow;
+  left: calc(50%);
+  bottom: 40%;
+  transform: translateX(-50%);
+  background-image: linear-gradient(red, yellow), linear-gradient(black, white);
+  clip-path: polygon(
+    -50% 0px,
+    150% -50%,
+    150% 55%,
+    -50% 55%,
+    -50% 62%,
+    150% 62%,
+    150% 70%,
+    0 70%,
+    -50% 75%,
+    150% 75%,
+    150% 80%,
+    0 80%,
+    -50% 82%,
+    150% 82%,
+    150% 85%,
+    0 85%,
+    -50% 87%,
+    150% 87%,
+    150% 90%,
+    0 90%,
+    -50% 92%,
+    150% 92%,
+    150% 95%,
+    0 95%,
+    -50% 96%,
+    150% 96%,
+    150% 150%,
+    0 150%
+  );
+  box-shadow: rgba(255, 128, 0, 0.7) 0px 0 20px;
+}
+
+.mountain {
+  background-attachment: fixed;
+  position: fixed;
+  content: "";
+  bottom: 35%;
+  left: calc(50% + var(--mountain-offset, 0px));
+  border-left: calc(var(--mountain-base) / 2) solid transparent;
+  border-bottom: var(--mountain-height, 100px) solid
+    var(--mountain-color1, white);
+  border-top: 0px solid transparent;
+  border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
+  transform-origin: bottom;
+  transform: skewX(var(--mountain-tilt, 0deg));
+}
+
+.mountain:after {
+  content: "";
+  border-left: calc(var(--mountain-base) / 2) solid transparent;
+  border-bottom: var(--mountain-height, 100px) solid
+    var(--mountain-color2, black);
+  border-top: 0px solid transparent;
+  border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
+  transform: translate(-50%) scale(0.98);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background-attachment: fixed;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-image: repeating-linear-gradient(
+    rgba(0, 0, 0, 0.3) 0,
+    transparent 1px,
+    transparent 2px,
+    rgba(0, 0, 0, 0.3) 3px
+  );
+  pointer-events: none;
+}
+
+.background-80s {
+  background: linear-gradient(
+      to bottom,
+      #010310 0,
+      #0c1142 24%,
+      #45125e 45%,
+      #d53567 60%,
+      #f0c3d9 65%,
+      #0c1142 65%
+    )
+    fixed;
+  background-size: 100% var(--background-height, 100vh);
+  overflow: hidden;
+  background-attachment: fixed;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: var(--background-height, 100vh);
+  z-index: -2;
+}
+
+.animated-clouds:before {
+  filter: url(#synth-filter);
+}
+
+.background-80s:before {
+  content: "";
+  background: linear-gradient(
+      to bottom,
+      #010310 0,
+      #0c1142 24%,
+      #45125e 45%,
+      #d53567 60%,
+      #f0c3d9 65%,
+      #0c1142 65%
+    )
+    fixed;
+  width: 100%;
+  height: 55%;
+  background-attachment: fixed;
+  position: fixed;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  opacity: 0.2;
+}
+
+/*stars*/
+.stars:after {
+  transform: translateY(-40%);
+  content: " ";
+  border-radius: 100%;
+  width: 3px;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  box-shadow: 5vw 15vh 2px white, 1vw 33vh 0px white, 2vw 25vh 2px white,
+    10vw 10vh 2px white, 12vw 20vh 0px white, 30vw 15vh 2px white,
+    16vw 5vh 2px white, 24vw 10vh 0px white, 32vw 40vh 0px white,
+    33vw 35vh 2px white, 12vw 38vh 2px white, 24vw 10vh 0px white,
+    33vw 5vh 2px white, 20vw 10vh 0px white, 80vw 10vh 2px white,
+    62vw 20vh 0px white, 60vw 15vh 2px white, 70vw 7vh 0px white,
+    62vw 50vh 0px white, 65vw 35vh 2px white, 64vw 10vh 0px white,
+    85vw 2vh 0px white, 92vw 40vh 0px white, 75vw 35vh 2px white,
+    90vw 10vh 0px white;
+  opacity: 0.3;
+  animation: glitter 2s infinite;
+}
+
+@keyframes glitter {
+  0% {
+    opacity: 0.5;
+  }
+
+  50% {
+    opacity: 0.9;
+  }
+
+  100% {
+    opacity: 0.5;
+  }
+}
+
+.titleview {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+}
+
+.titleview a {
+  text-decoration: none;
+  color: white;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  top: 15%;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+}
+
+.buttonrow {
+  position: absolute;
+  left: 50%;
+  bottom: 20%;
+  text-align: center;
+  transform: translate(-50%, 0%);
+  white-space: nowrap;
+}
+
+.buttonrow a{
+  display: inline-block;
+}
+
+.footer{
+  position: fixed;
+  z-index: 5;
+  left: 0;
+  bottom: 5px;
+  width: 100%;
+  color: white;
+  text-align: center;
+  white-space: nowrap;
+  transform: translate(0%, 0%);
+}
+.footer a{
+  margin: 0 20px 0 20px;
+}
+@media screen and (max-width: 600px) {
+  .footer a {
+    margin: auto 5px;
+  }
+}
+.navbutton{
+  margin: 5px 10px 5px 10px;
+  padding: 10px;
+  background-color: black;
+  border-radius: 15%;
+}
+
+a {
+  color: #09ff00;
+  text-decoration: none;
+}
+
+button, .button {
+  border: 5px solid #b533b3;
+  background-color: #a684cb;
+  color: white;
+  border-radius: 20px;
+  padding: 5px 20px 5px 20px;
+  animation: border-flicker 2s linear infinite;
+}
+.button:nth-child(1) { animation-duration: 2s; }
+.button:nth-child(2) { animation-delay: 1s; animation-duration: 4s; }
+.button:nth-child(3) { animation-duration: 3s; }
+
+button span {
+  font-family: "Montserrat";
+  font-weight: 900;
+  font-size: calc(10px + 1vh);
+  letter-spacing: 5px;
+  animation: text-flicker 3s linear infinite;
+}
+
+button #offset {
+  animation: letter-flicker 4s linear infinite;
+}
+
+@keyframes text-flicker {
+  0% {
+    opacity: 0.1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  2% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  8% {
+    opacity: 0.1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  9% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  12% {
+    opacity: 0.1;
+    text-shadow: 0px 0px rgba(242, 22, 22, 1);
+  }
+
+  20% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  25% {
+    opacity: 0.3;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  30% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  70% {
+    opacity: 0.7;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  72% {
+    opacity: 0.2;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  77% {
+    opacity: 0.9;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  100% {
+    opacity: 0.9;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+}
+
+@keyframes border-flicker {
+  0% {
+    opacity: 0.1;
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+  }
+
+  2% {
+    opacity: 1;
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+  }
+
+  4% {
+    opacity: 0.1;
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+  }
+
+  8% {
+    opacity: 1;
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+  }
+
+  70% {
+    opacity: 0.7;
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+  }
+}
+
+@keyframes background-flicker {
+  0% {
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
+  }
+
+  2% {
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.178);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.178);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.178);
+  }
+
+  4% {
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.685);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.685);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.685);
+  }
+
+  8% {
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.486);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.486);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.486);
+  }
+
+  70% {
+    -webkit-box-shadow: 0px 0px 78px 4px rgb(16, 135, 232);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232);
+  }
+
+  100% {
+    -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.658);
+    -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.658);
+    box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.658);
+  }
+}
+
+@keyframes letter-flicker {
+  0% {
+    opacity: 0.1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  2% {
+    opacity: 0.1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  4% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  19% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  21% {
+    opacity: 0.1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  23% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  80% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  83% {
+    opacity: 0.4;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+
+  87% {
+    opacity: 1;
+    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
+  }
+}
+
+.outrun {
+  font-family: "Road Rage";
+  font-weight: normal;
+  font-size: calc(30px + 3vh);
+}
+.outrun.small {
+  font-family: "Road Rage";
+  font-weight: normal;
+  font-size: calc(30px + 1vh);
+}
+@media screen and (max-width: 600px) {
+  .outrun {
+    font-family: "Road Rage";
+    font-weight: normal;
+    font-size: calc(20px + 3vh);
+  }
+  .outrun.small {
+    font-family: "Road Rage";
+    font-weight: normal;
+    font-size: calc(10px + 1vh);
+  }
+}
+
+.glow {
+  color: #fff;
+  text-align: center;
+  -webkit-animation: glow 1s ease-in-out infinite alternate;
+  -moz-animation: glow 1s ease-in-out infinite alternate;
+  animation: glow 1s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
+      0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+  }
+
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
+      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+  }
+}
+
+@-moz-keyframes glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
+      0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+  }
+
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
+      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+  }
+}
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
+      0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+  }
+
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
+      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+  }
+}
+
+.chrome {
+  font-family: "Montserrat";
+  font-weight: 900;
+  background-image: linear-gradient(
+    #2989cc 0%,
+    #d3e5ec 50%,
+    #592451 51%,
+    #b3628d 55%,
+    #592451 59%,
+    #b3628d 65%,
+    #ac86a6 75%,
+    #b3628d 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: rgba(255, 255, 255, 0.4);
+  position: relative;
+}
+.chrome.large {
+  font-size: calc(30px + 15vh);
+  font-size: 100%;
+  font-size: 15vw;
+}
+.chrome.medium {
+  font-size: calc(30px + 10vh);
+  font-size: 100%;
+  font-size: 10vw;
+}
+.chrome.small {
+  font-size: calc(30px+7vh);
+  font-size: 100%;
+  font-size: 5vw;
+}
+@media screen and (max-width: 850px) {
+  .chrome.large {
+    font-size: calc(20px + 5vh);
+  }
+  .chrome.medium {
+    font-size: calc(20px + 3vh);
+  }
+  .chrome.small {
+    font-size: calc(20px + 1vh);
+  }
+}
+
+.chrome:before {
+  content: attr(data-text);
+  text-shadow: -1px -1px 1px #2989cc, -2px -2px 1px #2989cc,
+    -3px -3px 1px #2989cc, 1px 1px 1px #000, 0px -1px 2px #000,
+    -1px -2px 2px #000, 0 0 5px rgba(255, 255, 255, 1);
+  opacity: 1;
+  position: absolute;
+  z-index: -1;
+}
+
+.shine:after {
+  content: attr(data-text);
+  background-image: linear-gradient(
+    225deg,
+    transparent 53%,
+    white 55%,
+    transparent 58%
+  );
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  z-index: 999;
+  background-size: 400% 400%;
+  animation: shine 10s ease infinite;
+  animation-delay: var(--shine-delay, 0s);
+}
+
+@keyframes shine {
+  0% {
+    background-position: 0% 51%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 51%;
+  }
+}
+
+.spark {
+  margin-top: calc(4vh);
+  margin-left: -0.3em;
+  line-height: 0;
+  position: absolute;
+  width: 37px;
+  height: 45px;
+  z-index: 999;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='120 250 1700 1200' width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='402' width='182' y='-1' x='-1'/%3E%3Cg display='none' overflow='visible' y='0' x='0' height='100%25' width='100%25' id='canvasGrid'%3E%3Crect fill='url(%23gridpattern)' stroke-width='0' y='0' x='0' height='100%25' width='100%25'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cellipse ry='183' rx='5' id='svg_2' cy='197.0375' cx='274.5' stroke-width='0' stroke='%23000' fill='%23fff'/%3E%3Cellipse transform='rotate(90 274.50000000000006,197.03750610351565) ' ry='183' rx='5' id='svg_3' cy='197.0375' cx='274.5' stroke-width='0' stroke='%23000' fill='%23fff'/%3E%3Cellipse stroke='%23000' transform='rotate(126.69925689697266 276.19342041015625,195.4363708496094) ' ry='90.194158' rx='3.223029' id='svg_4' cy='195.43637' cx='276.193439' stroke-width='0' fill='%23fff'/%3E%3Cellipse stroke='%23000' transform='rotate(-134.6077117919922 276.19342041015625,195.43637084960938) ' ry='90.194158' rx='3.223029' id='svg_5' cy='195.43637' cx='276.193439' stroke-width='0' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
+  filter: blur(0.5px);
+  transform: scale(0);
+  animation: blip 5s infinite;
+  animation-timing-function: ease-in-out;
+}
+
+.chrome:last-of-type .spark {
+  animation-delay: -2.5s;
+}
+
+@keyframes blip {
+  0% {
+    transform: scale(0);
+  }
+
+  5% {
+    transform: scale(1.2) rotate(0deg);
+  }
+
+  6% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  8% {
+    transform: scale(1) rotate(180deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(180deg);
+  }
+}
+
+@-moz-keyframes blip {
+  0% {
+    transform: scale(0);
+  }
+
+  5% {
+    transform: scale(1.2) rotate(0deg);
+  }
+
+  6% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  8% {
+    transform: scale(1) rotate(180deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(180deg);
+  }
+}
+
+@-webkit-keyframes blip {
+  0% {
+    transform: scale(0);
+  }
+
+  5% {
+    transform: scale(1.2) rotate(0deg);
+  }
+
+  6% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  8% {
+    transform: scale(1) rotate(180deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(180deg);
+  }
+}

nuxt/dist/200.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
+  <head>
+    <title>wieerwill.github.io - wieerwill.github.io</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="get to know Wieerwill at Github.io"><meta data-n-head="1" name="format-detection" content="telephone=no"><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="Get to know Wieerwill at Github.io"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/wieerwill.github.io/_nuxt/icons/icon_64x64.1b075a.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/wieerwill.github.io/_nuxt/icons/icon_512x512.1b075a.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/wieerwill.github.io/_nuxt/manifest.778b3ec0.json" data-hid="manifest"><base href="/wieerwill.github.io/"><link rel="preload" href="/wieerwill.github.io/_nuxt/af6a028.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/82ba492.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/79426d5.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/05417a1.js" as="script">
+  </head>
+  <body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/wieerwill.github.io/",assetsPath:"/wieerwill.github.io/_nuxt/",cdnURL:null}}}</script>
+  <script src="/wieerwill.github.io/_nuxt/af6a028.js"></script><script src="/wieerwill.github.io/_nuxt/82ba492.js"></script><script src="/wieerwill.github.io/_nuxt/79426d5.js"></script><script src="/wieerwill.github.io/_nuxt/05417a1.js"></script></body>
+</html>

nuxt/dist/_nuxt/4eef369.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{247:function(t,e,l){"use strict";l.r(e);var r={head:{title:"Welcome"}},n=l(29),component=Object(n.a)(r,(function(){var t=this,e=t.$createElement,l=t._self._c||e;return l("div",[t._m(0),l("div",{staticClass:"buttonrow"},[l("NuxtLink",{attrs:{to:"/profile"}},[l("button",[l("span",{attrs:{id:"offset"}},[t._v("St")]),l("span",[t._v("art")])])])],1)])}),[function(){var t=this,e=t.$createElement,l=t._self._c||e;return l("div",{staticClass:"titleview"},[l("div",{staticClass:"outrun glow"},[l("a",{attrs:{href:"https://github.com/wieerwill"}},[t._v("GitHub.io")])]),l("div",{staticClass:"chrome large shine",attrs:{"data-text":"Wieerwill"}},[t._v("Wie"),l("span",{staticClass:"spark"}),t._v("erwill")])])}],!1,null,null,null);e.default=component.exports}}]);

nuxt/dist/_nuxt/LICENSES

@@ -0,0 +1,34 @@
+/*!
+ * vue-client-only v0.0.0-semantic-release
+ * (c) 2021-present egoist <0x142857@gmail.com>
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-no-ssr v1.1.1
+ * (c) 2018-present egoist <0x142857@gmail.com>
+ * Released under the MIT License.
+ */
+
+
+/*!
+  * vue-router v3.5.2
+  * (c) 2021 Evan You
+  * @license MIT
+  */
+
+/*!
+ * Vue.js v2.6.14
+ * (c) 2014-2021 Evan You
+ * Released under the MIT License.
+ */
+
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

nuxt/dist/_nuxt/af6a028.js

@@ -0,0 +1 @@
+!function(e){function r(data){for(var r,n,l=data[0],f=data[1],d=data[2],i=0,h=[];i<l.length;i++)n=l[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(v&&v(data);h.length;)h.shift()();return c.push.apply(c,d||[]),t()}function t(){for(var e,i=0;i<c.length;i++){for(var r=c[i],t=!0,n=1;n<r.length;n++){var f=r[n];0!==o[f]&&(t=!1)}t&&(c.splice(i--,1),e=l(l.s=r[0]))}return e}var n={},o={7:0},c=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var c,script=document.createElement("script");script.charset="utf-8",script.timeout=120,l.nc&&script.setAttribute("nonce",l.nc),script.src=function(e){return l.p+""+{2:"0d00b48",3:"4eef369",4:"81c4974",5:"57a9832",6:"41cc1a5",9:"e1afa3b",10:"445b7ee"}[e]+".js"}(e);var f=new Error;c=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+c+")",f.name="ChunkLoadError",f.type=n,f.request=c,t[1](f)}o[e]=void 0}};var d=setTimeout((function(){c({type:"timeout",target:script})}),12e4);script.onerror=script.onload=c,document.head.appendChild(script)}return Promise.all(r)},l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},l.p="/wieerwill.github.io/_nuxt/",l.oe=function(e){throw console.error(e),e};var f=window.webpackJsonp=window.webpackJsonp||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var i=0;i<f.length;i++)r(f[i]);var v=d;t()}([]);

nuxt/dist/_nuxt/manifest.778b3ec0.json

@@ -0,0 +1,53 @@
+{
+  "name": "wieerwill.github.io",
+  "short_name": "wieerwill.github.io",
+  "description": "Get to know Wieerwill at Github.io",
+  "icons": [
+    {
+      "src": "/wieerwill.github.io/_nuxt/icons/icon_64x64.1b075a.png",
+      "sizes": "64x64",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/wieerwill.github.io/_nuxt/icons/icon_120x120.1b075a.png",
+      "sizes": "120x120",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/wieerwill.github.io/_nuxt/icons/icon_144x144.1b075a.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/wieerwill.github.io/_nuxt/icons/icon_152x152.1b075a.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/wieerwill.github.io/_nuxt/icons/icon_192x192.1b075a.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/wieerwill.github.io/_nuxt/icons/icon_384x384.1b075a.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/wieerwill.github.io/_nuxt/icons/icon_512x512.1b075a.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": "/wieerwill.github.io/?standalone=true",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "lang": "en"
+}

nuxt/dist/certification/index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
+  <head>
+    <title>wieerwill.github.io - wieerwill.github.io</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="get to know Wieerwill at Github.io"><meta data-n-head="1" name="format-detection" content="telephone=no"><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="Get to know Wieerwill at Github.io"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/wieerwill.github.io/_nuxt/icons/icon_64x64.1b075a.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/wieerwill.github.io/_nuxt/icons/icon_512x512.1b075a.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/wieerwill.github.io/_nuxt/manifest.778b3ec0.json" data-hid="manifest"><base href="/wieerwill.github.io/"><link rel="preload" href="/wieerwill.github.io/_nuxt/af6a028.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/82ba492.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/79426d5.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/05417a1.js" as="script">
+  </head>
+  <body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/wieerwill.github.io/",assetsPath:"/wieerwill.github.io/_nuxt/",cdnURL:null}}}</script>
+  <script src="/wieerwill.github.io/_nuxt/af6a028.js"></script><script src="/wieerwill.github.io/_nuxt/82ba492.js"></script><script src="/wieerwill.github.io/_nuxt/79426d5.js"></script><script src="/wieerwill.github.io/_nuxt/05417a1.js"></script></body>
+</html>

nuxt/dist/icons/readme.md

@@ -0,0 +1 @@
+i own no pictures here

nuxt/dist/index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
+  <head>
+    <title>wieerwill.github.io - wieerwill.github.io</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="get to know Wieerwill at Github.io"><meta data-n-head="1" name="format-detection" content="telephone=no"><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="Get to know Wieerwill at Github.io"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/wieerwill.github.io/_nuxt/icons/icon_64x64.1b075a.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/wieerwill.github.io/_nuxt/icons/icon_512x512.1b075a.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/wieerwill.github.io/_nuxt/manifest.778b3ec0.json" data-hid="manifest"><base href="/wieerwill.github.io/"><link rel="preload" href="/wieerwill.github.io/_nuxt/af6a028.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/82ba492.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/79426d5.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/05417a1.js" as="script">
+  </head>
+  <body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/wieerwill.github.io/",assetsPath:"/wieerwill.github.io/_nuxt/",cdnURL:null}}}</script>
+  <script src="/wieerwill.github.io/_nuxt/af6a028.js"></script><script src="/wieerwill.github.io/_nuxt/82ba492.js"></script><script src="/wieerwill.github.io/_nuxt/79426d5.js"></script><script src="/wieerwill.github.io/_nuxt/05417a1.js"></script></body>
+</html>

nuxt/dist/profile/index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
+  <head>
+    <title>wieerwill.github.io - wieerwill.github.io</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="get to know Wieerwill at Github.io"><meta data-n-head="1" name="format-detection" content="telephone=no"><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="Get to know Wieerwill at Github.io"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/wieerwill.github.io/_nuxt/icons/icon_64x64.1b075a.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/wieerwill.github.io/_nuxt/icons/icon_512x512.1b075a.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/wieerwill.github.io/_nuxt/manifest.778b3ec0.json" data-hid="manifest"><base href="/wieerwill.github.io/"><link rel="preload" href="/wieerwill.github.io/_nuxt/af6a028.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/82ba492.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/79426d5.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/05417a1.js" as="script">
+  </head>
+  <body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/wieerwill.github.io/",assetsPath:"/wieerwill.github.io/_nuxt/",cdnURL:null}}}</script>
+  <script src="/wieerwill.github.io/_nuxt/af6a028.js"></script><script src="/wieerwill.github.io/_nuxt/82ba492.js"></script><script src="/wieerwill.github.io/_nuxt/79426d5.js"></script><script src="/wieerwill.github.io/_nuxt/05417a1.js"></script></body>
+</html>

nuxt/dist/projects/index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
+  <head>
+    <title>wieerwill.github.io - wieerwill.github.io</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="get to know Wieerwill at Github.io"><meta data-n-head="1" name="format-detection" content="telephone=no"><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="Get to know Wieerwill at Github.io"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/wieerwill.github.io/_nuxt/icons/icon_64x64.1b075a.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/wieerwill.github.io/_nuxt/icons/icon_512x512.1b075a.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/wieerwill.github.io/_nuxt/manifest.778b3ec0.json" data-hid="manifest"><base href="/wieerwill.github.io/"><link rel="preload" href="/wieerwill.github.io/_nuxt/af6a028.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/82ba492.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/79426d5.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/05417a1.js" as="script">
+  </head>
+  <body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/wieerwill.github.io/",assetsPath:"/wieerwill.github.io/_nuxt/",cdnURL:null}}}</script>
+  <script src="/wieerwill.github.io/_nuxt/af6a028.js"></script><script src="/wieerwill.github.io/_nuxt/82ba492.js"></script><script src="/wieerwill.github.io/_nuxt/79426d5.js"></script><script src="/wieerwill.github.io/_nuxt/05417a1.js"></script></body>
+</html>

nuxt/dist/skills/index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
+  <head>
+    <title>wieerwill.github.io - wieerwill.github.io</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="get to know Wieerwill at Github.io"><meta data-n-head="1" name="format-detection" content="telephone=no"><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="wieerwill.github.io"><meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="Get to know Wieerwill at Github.io"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/wieerwill.github.io/_nuxt/icons/icon_64x64.1b075a.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/wieerwill.github.io/_nuxt/icons/icon_512x512.1b075a.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/wieerwill.github.io/_nuxt/manifest.778b3ec0.json" data-hid="manifest"><base href="/wieerwill.github.io/"><link rel="preload" href="/wieerwill.github.io/_nuxt/af6a028.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/82ba492.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/79426d5.js" as="script"><link rel="preload" href="/wieerwill.github.io/_nuxt/05417a1.js" as="script">
+  </head>
+  <body>
+    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/wieerwill.github.io/",assetsPath:"/wieerwill.github.io/_nuxt/",cdnURL:null}}}</script>
+  <script src="/wieerwill.github.io/_nuxt/af6a028.js"></script><script src="/wieerwill.github.io/_nuxt/82ba492.js"></script><script src="/wieerwill.github.io/_nuxt/79426d5.js"></script><script src="/wieerwill.github.io/_nuxt/05417a1.js"></script></body>
+</html>

nuxt/jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

nuxt/layouts/default.vue

@@ -0,0 +1,274 @@
+<template>
+  <div>
+    <div
+      class="background-80s animated-clouds stars"
+      style="--background-height: 100vh"
+    >
+      <div class="sun"></div>
+      <div
+        class="grid"
+        style="
+          --grid-color: rgba(115, 59, 139, 0.7);
+          --grid-size: 50px;
+          --grid-blur: 1px;
+        "
+      ></div>
+      <!--big left mountain-->
+      <div
+        class="mountain"
+        style="
+          --mountain-tilt: -32deg;
+          --mountain-color1: #a684cb;
+          --mountain-color2: #150030;
+          --mountain-base: 10vw;
+          --mountain-height: 20vw;
+          --mountain-offset: -50vw;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+      --mountain-tilt:0deg
+      --mountain-color1:#a684cb;
+      --mountain-color2:#2a025d;
+      --mountain-base:15vw;
+      --mountain-height:20vw;
+      --mountain-offset:-40vw;"
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-tilt: 32.5deg;
+          --mountain-color1: #a684cb;
+          --mountain-color2: #681e6b;
+          --mountain-base: 10vw;
+          --mountain-height: 20vw;
+          --mountain-offset: -25vw;
+        "
+      ></div>
+      <!--big right mountain 2-->
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #681e6b;
+          --mountain-base: 12vw;
+          --mountain-height: 10vw;
+          --mountain-tilt: -56deg;
+          --mountain-offset: 15vw;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #2a025d;
+          --mountain-base: 10vw;
+          --mountain-height: 10vw;
+          --mountain-tilt: -20deg;
+          --mountain-offset: 27vw;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #150030;
+          --mountain-base: 10vw;
+          --mountain-height: 10vw;
+          --mountain-tilt: 32.5deg;
+          --mountain-offset: 37vw;
+        "
+      ></div>
+      <!--small right mountain 1-->
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #b533b3;
+          --mountain-base: 10vw;
+          --mountain-height: 5vw;
+          --mountain-offset: 10vw;
+          --mountain-tilt: -20deg;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #681e6b;
+          --mountain-base: 10vw;
+          --mountain-height: 5vw;
+          --mountain-tilt: 59deg;
+          --mountain-offset: 20vw;
+        "
+      ></div>
+      <!--small right mountain 2-->
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #b533b3;
+          --mountain-base: 8vw;
+          --mountain-height: 4vw;
+          --mountain-offset: 20vw;
+          --mountain-tilt: -20deg;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #681e6b;
+          --mountain-base: 3vw;
+          --mountain-height: 4vw;
+          --mountain-tilt: 45deg;
+          --mountain-offset: 28vw;
+        "
+      ></div>
+      <!--small left mountain 1-->
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #681e6b;
+          --mountain-base: 5vw;
+          --mountain-height: 5vw;
+          --mountain-offset: -40vw;
+          --mountain-tilt: -20deg;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #b533b3;
+          --mountain-base: 5vw;
+          --mountain-height: 5vw;
+          --mountain-tilt: 33deg;
+          --mountain-offset: -35vw;
+        "
+      ></div>
+      <!--small left mountain 2-->
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #b533b3;
+          --mountain-base: 10vw;
+          --mountain-height: 5vw;
+          --mountain-offset: -20vw;
+          --mountain-tilt: -20deg;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #681e6b;
+          --mountain-base: 10vw;
+          --mountain-height: 5vw;
+          --mountain-tilt: 59deg;
+          --mountain-offset: -10vw;
+        "
+      ></div>
+      <!--big right mountain 1-->
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #b533b3;
+          --mountain-base: 5vw;
+          --mountain-height: 5vw;
+          --mountain-tilt: -62deg;
+          --mountain-offset: -5vw;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #681e6b;
+          --mountain-base: 10vw;
+          --mountain-height: 5vw;
+          --mountain-tilt: -20deg;
+        "
+      ></div>
+      <div
+        class="mountain"
+        style="
+          --mountain-color1: #a684cb;
+          --mountain-color2: #150030;
+          --mountain-base: 10vw;
+          --mountain-height: 5vw;
+          --mountain-tilt: 59deg;
+          --mountain-offset: 10vw;
+        "
+      ></div>
+
+      <div class="road-off"></div>
+    </div>
+    <div class="overlay"></div>
+    <Nuxt />
+
+    <svg width="0" height="0">
+      <filter id="synth-filter">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency=".01"
+          numOctaves="10"
+          id="fractalNoise"
+        />
+        <feDisplacementMap
+          id="displacementMap"
+          in="SourceGraphic"
+          scale="120"
+        />
+      </filter>
+      <animate
+        xlink:href="#displacementMap"
+        id="animclouds1"
+        begin="0; animclouds2.end"
+        attributeName="scale"
+        from="50"
+        to="180"
+        dur="3s"
+        fill="freeze"
+      />
+      <animate
+        xlink:href="#displacementMap"
+        id="animclouds2"
+        begin="animclouds1.end"
+        attributeName="scale"
+        from="180"
+        to="50"
+        dur="3s"
+        fill="freeze"
+      />
+      <animate
+        xlink:href="#fractalNoise"
+        id="animclouds3"
+        begin="0;animclouds4.end"
+        attributeName="baseFrequency"
+        from="0.03"
+        to="0.01"
+        dur="30s"
+        fill="freeze"
+      />
+      <animate
+        xlink:href="#fractalNoise"
+        id="animclouds4"
+        begin="animclouds3.end"
+        attributeName="baseFrequency"
+        from="0.01"
+        to="0.03"
+        dur="30s"
+        fill="freeze"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>

nuxt/layouts/error.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+div
+  .titleview
+    .outrun.glow(v-if="error.statusCode === 404") {{ pageNotFound }}
+    .outrun.glow(v-else) {{ otherError }}
+  .buttonrow
+    NuxtLink(to="/")
+      button
+        span Home page
+</template>
+
+<script>
+export default {
+  layout: 'empty',
+  props: {
+    error: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      pageNotFound: '404 Not Found',
+      otherError: 'An error occurred'
+    }
+  },
+  head () {
+    const title =
+      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
+    return {
+      title
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  font-size: 20px;
+}
+</style>

nuxt/nuxt.config.js

@@ -0,0 +1,65 @@
+export default {
+  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
+  ssr: false,
+
+  // Target: https://go.nuxtjs.dev/config-target
+  target: 'static',
+  router: {
+    base: '/wieerwill.github.io/'
+  },
+
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    titleTemplate: '%s - wieerwill.github.io',
+    title: 'wieerwill.github.io',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'get to know Wieerwill at Github.io' },
+      { name: 'format-detection', content: 'telephone=no' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+    "@/assets/global.css"
+  ],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+  ],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+    //https://image.nuxtjs.org/
+    '@nuxt/image',
+  ],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+    // https://go.nuxtjs.dev/pwa
+    '@nuxtjs/pwa',
+    'nuxt-material-design-icons'
+  ],
+
+  // PWA module configuration: https://go.nuxtjs.dev/pwa
+  pwa: {
+    manifest: {
+      lang: 'en'
+    }
+  },
+
+  image: {
+    // Options
+  },
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {},
+
+}

nuxt/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "wieerwill.github.io",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxt/content": "^1.14.0",
+    "@nuxtjs/pwa": "^3.3.5",
+    "core-js": "^3.15.1",
+    "nuxt": "^2.15.7",
+    "nuxt-material-design-icons": "^1.0.4",
+    "pug": "^3.0.2",
+    "pug-plain-loader": "^1.1.0",
+    "sass": "^1.35.1"
+  },
+  "devDependencies": {
+    "@nuxt/image": "^0.5.0"
+  }
+}

nuxt/pages/certification.vue

@@ -0,0 +1,232 @@
+<template lang="pug">
+div 
+  .title
+    .outrun.small.glow show me what you got
+    .chrome.medium.shine(data-text="Certifications") Certifications
+
+  .container
+    em &laquo;What is a piece of paper else a note in time?&raquo;
+    .gallery
+      article(v-for="cert in certification", :key="cert.title")
+        h4 {{ cert.title }}
+        p(v-for="text in cert.text") {{ text }}
+  .footer
+    NuxtLink.navbutton(to="/") Home
+    NuxtLink.navbutton(to="/profile") Profile
+    NuxtLink.navbutton(to="/skills") Skills
+    NuxtLink.navbutton(to="/projects") Projects
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Certification'
+  },
+  data() {
+    return {
+      show: false,
+      certification: [
+        {
+          title: "FullStack Web Developer",
+          text: [
+            "Frontend with Angular, Vue and more",
+            "Backend with NodeJS, C++ and more",
+          ],
+        },
+        {
+          title: "Software Developer",
+          text: ["Trained C/C++ Dev with agil and unified approach"],
+        },
+        {
+          title: "Data Protection Officer",
+          text: ["trained & qualified specialist", "BDSG & GDPR"],
+        },
+        {
+          title: "SixSigma Yellow Belt",
+          text: [
+            "trained project management, improvment and quality ensurance",
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
+
+
+<style scoped>
+.container {
+  color: white;
+  width: 80%;
+  margin: auto;
+  margin-top: 25vh;
+  text-align: center;
+}
+.container em {
+  margin: 20px;
+}
+.gallery {
+  margin: 100px 0;
+}
+.gallery article {
+  width: 60%;
+  margin: 30px auto;
+  min-height: 60px;
+  background: linear-gradient(
+    95deg,
+    #343a80de 0%,
+    #3d4a75de 13%,
+    #6668aade 18%,
+    #0092dbde 39%,
+    #e1217bde 54%,
+    #a20e69de 63%,
+    #670558de 83%,
+    #27034bde 100%
+  );
+  border-radius: 60px 60px 60px 60px;
+  animation: scanner 2s ease-in-out alternate both infinite;
+}
+.gallery article:nth-child(2) {
+  animation-delay: 1s;
+}
+.gallery article:nth-child(3) {
+  animation-delay: 0.5s;
+}
+.gallery article:nth-child(4) {
+  animation-delay: 1.5s;
+}
+@keyframes scanner {
+  0% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 0%,
+      #6668aade 5%,
+      #e1217bde 10%,
+      #a20e69de 15%,
+      #670558de 50%,
+      #27034bde 100%
+    );
+  }
+  15% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 5%,
+      #6668aade 10%,
+      #e1217bde 15%,
+      #a20e69de 20%,
+      #670558de 60%,
+      #27034bde 100%
+    );
+  }
+  25% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 10%,
+      #6668aade 20%,
+      #e1217bde 25%,
+      #a20e69de 35%,
+      #670558de 70%,
+      #27034bde 100%
+    );
+  }
+  40% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 10%,
+      #6668aade 35%,
+      #e1217bde 40%,
+      #a20e69de 45%,
+      #670558de 75%,
+      #27034bde 100%
+    );
+  }
+  50% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 20%,
+      #6668aade 45%,
+      #e1217bde 50%,
+      #a20e69de 55%,
+      #670558de 80%,
+      #27034bde 100%
+    );
+  }
+  60% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 35%,
+      #6668aade 55%,
+      #e1217bde 60%,
+      #a20e69de 65%,
+      #670558de 85%,
+      #27034bde 100%
+    );
+  }
+  75% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 25%,
+      #6668aade 70%,
+      #e1217bde 75%,
+      #a20e69de 80%,
+      #670558de 90%,
+      #27034bde 100%
+    );
+  }
+  85% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 35%,
+      #6668aade 80%,
+      #e1217bde 85%,
+      #a20e69de 90%,
+      #670558de 95%,
+      #27034bde 100%
+    );
+  }
+  100% {
+    background: linear-gradient(
+      90deg,
+      #343a80de 0%,
+      #3d4a75de 50%,
+      #6668aade 85%,
+      #e1217bde 90%,
+      #a20e69de 95%,
+      #670558de 100%,
+      #27034bde 100%
+    );
+  }
+}
+article h4 {
+  padding: 10px auto 0 auto;
+  margin: 10px auto;
+}
+article p {
+  width: 80%;
+  font-size: 20px;
+  padding-top: 0;
+  margin: 0 auto;
+}
+@media screen and (max-width: 600px) {
+  .gallery {
+    margin: 10px 0;
+  }
+  .gallery article {
+    width: 100%;
+  }
+  article h4 {
+    font-size: 15px;
+  }
+  article p {
+    font-size: 10px;
+  }
+}
+</style>

nuxt/pages/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+div
+  .titleview
+    .outrun.glow
+      a(href="https://github.com/wieerwill") GitHub.io
+    .chrome.large.shine(data-text="Wieerwill") Wie
+      span.spark
+      | erwill
+  .buttonrow
+    NuxtLink(to="/profile")
+      button
+        span#offset St
+        span art
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Welcome'
+  },
+}
+</script>

nuxt/pages/profile.vue

@@ -0,0 +1,165 @@
+<template lang="pug">
+div 
+  .title
+    .outrun.small.glow Inventor &middot; Entrepreneur &middot; Student
+    .chrome.medium.shine(data-text="Robert Jeutter") Robert Jeutter
+
+  .container
+    .siderow
+      nuxt-img.card-image(src="pic.png")
+      ul.card-list
+        li
+          a(href="mailto:jeutter@northscorp.de", target="_blank")
+            span.material-icons mail
+            span Mail
+        li
+          a(href="http://www.github.com/wieerwill", target="_blank")
+            span.material-icons code
+            span GitHub
+        li
+          a(href="http://www.northscorp.de", target="_blank")
+            span.material-icons language
+            span NorthScorp
+        li
+          a(href="http://www.tu-ilmenau.de", target="_blank")
+            span.material-icons account_balance
+            span TU Ilmenau
+        li
+          a(href="https://www.udemy.com/user/robert-jeutter/", target="_blank")
+            span.material-icons school
+            span Udemy
+        li
+          a(
+            href="https://www.freecodecamp.org/robert-jeutter",
+            target="_blank"
+          )
+            span.material-icons local_library
+            span CodeCamp
+    .card-text
+      p Welcome to my Card,
+        br
+        | currently I am studying at&nbsp;
+        i
+          a(href="http://www.tu-ilmenau.de") Technical University of Ilmenau&nbsp;
+        | in the fields of Computer Sience and Biomechatronics.&nbsp;
+        | In addition i am an active member of the&nbsp;
+        a(href="https://www.bi-club.de") student club
+        | ,
+        a(href="https://ingenieure-ohne-grenzen.org/") &nbsp;Engineers without Borders&nbsp;
+        |
+        | and building up my own business&nbsp;
+        a(href="https://www.northscorp.de") NorthScorp
+        | .&nbsp;
+        br
+        | My Hobbies include Programming, building Robots ever since my&nbsp;
+        a(href="https://www.robocup.org/") RoboCup&nbsp;
+        | Qualifications and electromechanical Machines.
+
+  .footer
+    NuxtLink.navbutton(to="/") Home
+    NuxtLink.navbutton(to="/skills") Skills
+    NuxtLink.navbutton(to="/projects") Projects
+    NuxtLink.navbutton(to="/certification") Certification
+</template>
+
+<script>
+export default {
+  head: {
+    title: 'Profile'
+  },
+}
+</script>
+
+<style scoped>
+.container {
+  width: 80%;
+  margin: auto;
+  margin-top: 25vh;
+  padding: 20px;
+  border-radius: 20px;
+  background: linear-gradient(
+    172deg,
+    #e1217bde 0%,
+    #670558de 23%,
+    #343a80de 39%,
+    #0092dbde 59%,
+    #6668aade 62%,
+    #3d4a75de 77%,
+    #a20e69de 86%,
+    #27034bde 100%
+  );
+  color: white;
+  font-size: calc(20px + 1vh);
+  text-align: center;
+  animation: background-flicker 5s linear infinite;
+}
+.siderow {
+  width: 25%;
+  height: 100%;
+  display: inline-block;
+}
+.siderow .card-image {
+  margin: auto;
+  padding: auto;
+  max-width: 90%;
+  height: auto;
+  animation: letter-flicker 7s linear infinite;
+  display: block;
+  border-radius: 20%;
+  border-style: solid;
+}
+.siderow .card-image:hover {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+.siderow ul {
+  margin: 0;
+  padding: 0;
+}
+.siderow .card-list,
+.card-list a {
+  text-align: left;
+  text-decoration: none;
+  list-style: none;
+  color: white;
+}
+.siderow .card-list a span {
+  padding-left: 5px;
+  font-size: 15px;
+}
+.card-text {
+  width: 75%;
+  height: 100%;
+  display: inline-block;
+}
+.card-text p {
+  text-align: left;
+  padding: 0 0 0 15px;
+  margin: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 85%;
+    font-size: calc(10px + 1vh);
+  }
+  .siderow {
+    margin: auto;
+    width: 90%;
+    display: block;
+  }
+  .siderow .card-image {
+    width: 90%;
+    margin: auto;
+    padding: 4px;
+  }
+  .siderow li {
+    text-align: center;
+  }
+  .card-text {
+    display: block;
+    margin: 20px 0 20px 0;
+    width: 100%;
+  }
+}
+</style>

nuxt/pages/projects.vue

@@ -0,0 +1,223 @@
+<template lang="pug">
+div 
+  .title
+    .outrun.small.glow work and stuff
+    .chrome.medium.shine(data-text="Projects") Projects
+
+  .container
+    em &laquo;Do what you love and work is a hobby&raquo;
+    #timeline
+      .timeline-item(
+        v-for="(project, i) in projects",
+        :key="i",
+        :datetime="project.datetime"
+      )
+        h2 {{ project.title }}
+        p {{ project.description }}
+        a.button(v-if="project.link", :href="project.link") more infos
+      .timeline-item(datetime="today")
+        h2 more is coming soon
+        p be sure to check my github page
+
+  .footer
+    NuxtLink.navbutton(to="/") Home
+    NuxtLink.navbutton(to="/profile") Profile
+    NuxtLink.navbutton(to="/skills") Skills
+    NuxtLink.navbutton(to="/certification") Certification
+</template>
+
+
+<style scoped>
+.container {
+  color: white;
+  width: 80%;
+  margin: auto;
+  margin-top: 25vh;
+  padding: auto;
+  text-align: center;
+}
+.container em {
+  margin: 20px;
+}
+#timeline {
+  max-width: 1600px;
+  margin: 50px auto;
+}
+.timeline-item {
+  padding: 3em 2em 2em;
+  position: relative;
+  color: rgba(0, 0, 0, 0.7);
+  border-left: 6px solid rgba(0, 0, 0, 0.4);
+}
+.timeline-item h2 {
+  background: linear-gradient(
+    32deg,
+    #e1217bde 0%,
+    #670558de 23%,
+    #343a80de 39%,
+    #0092dbde 59%,
+    #6668aade 62%,
+    #3d4a75de 77%,
+    #a20e69de 86%,
+    #27034bde 100%
+  );
+  color: rgb(211, 255, 253);
+  padding: 10px 0 10px 0;
+  margin: 0 0 0 0;
+  border-radius: 15px 15px 0 0;
+  animation: background-flicker 6s linear infinite;
+}
+.timeline-item p {
+  text-align: left;
+  margin: 0 0 20px 0;
+  padding: 15px;
+  font-size: calc(15px + 1vh);
+  background-color: rgba(231, 231, 231, 0.9);
+  border-radius: 0 0 15px 15px;
+}
+.timeline-item::before {
+  content: attr(datetime);
+  position: absolute;
+  left: 1em;
+  top: 1em;
+  display: block;
+  font-weight: 700;
+  font-size: 0.785rem;
+  color: black;
+  background-color: white;
+  padding: 2px 7px;
+  border-radius: 0 10% 10% 0;
+}
+.timeline-item::after {
+  width: 10px;
+  height: 10px;
+  display: block;
+  top: 1em;
+  position: absolute;
+  left: -7px;
+  border-radius: 10px;
+  content: "";
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  background: white;
+}
+.timeline-item:last-child {
+  border-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.3) 60%,
+      rgba(0, 0, 0, 0)
+    )
+    1 100%;
+}
+</style>
+
+<script>
+export default {
+  head: {
+    title: 'Projects'
+  },
+  data() {
+    return {
+      projects: [
+        {
+          datetime: "2012 - 2016",
+          title: "RoboCup participants",
+          description:
+            "With a team up to four we build and programmed multiple robots to play football against each other or 2v2.With much fun and learning we worked together for several years and remain our friendships.",
+          link: "https://robocupgermanopen.de/de/junior/soccer",
+        },
+        {
+          datetime: "2016 - 2019",
+          title: "UNIKAT",
+          description:
+            "My first club at University of Ilmenau: UNIKAT, the makerspace for students and scholars.Here i worked for nearly three years on 3d - printers, CNC - milling - machines and much more.Each semester we also made a workshop week and gave our knowledge to further students.I retired at the end of 2019 but am still visiting and sometimes working there.",
+          link: "https://www.tu-ilmenau.de/unikat",
+        },
+        {
+          datetime: "2018 - today",
+          title: "Robocup Volunteer",
+          description:
+            "After school my university didn't have a robotics contest so i am currently volunteering as referee and helping hand for the organizers.",
+          link: "https://robocupgermanopen.de/de",
+        },
+        {
+          datetime: "2018 - today",
+          title: "Engineers without borders ",
+          description:
+            "Who are we? Engineering students! What are we doing ? Helping other people! As some of us are planning and working on projects down in africa i am responsible for the repair cafe to keep things running.",
+          link: "https://ingenieure-ohne-grenzen.org/de/ilmenau",
+        },
+        {
+          datetime: "2018",
+          title: "Python Intro",
+          description:
+            "I am programming for many years now and want to start making cheatsheets and introductions to several programming languages. Python wasn't my first language but i think is for most the easiest to begin with. Therefor i started this Project on Github.",
+          link: "https://github.com/wieerwill/Python-Intro",
+        },
+        {
+          datetime: "2018 - today",
+          title: "BI Student Club",
+          description:
+            "Mainly because of the music i joined this club on my campus.With good old (and new) metal and rock we got some of the hardest partys and best members you can imagine. After some time i am one of our head technicans was responsible for our cultural programm and association communication.",
+          link: "http://www.bi-club.de",
+        },
+        {
+          datetime: "2019",
+          title: "Project management",
+          description:
+            "Working with a team you get to know that nobody has that much of a overview what tools you can use to work and participate. This bilingual sheet is a short overview of tools and programms to make your cooperations and projects easier.",
+          link: "https://github.com/wieerwill/Project-Management",
+        },
+        {
+          datetime: "2019 - today",
+          title: "GitHub Showcard",
+          description:
+            "You want to be seen and show people what you do? This page is an example of my business card project. Feel free to use it for your own. A description on how to get free webspace included.",
+          link: "https://github.com/wieerwill/wieerwill.github.io",
+        },
+        {
+          datetime: "2019 - today",
+          title: "Informatik",
+          description:
+            "Ever been interested what they teach at university? Need help or are lost? Take a look at my notes from university that i and my commilitones write down during our studies.",
+          link: "https://github.com/wieerwill/informatik",
+        },
+        {
+          datetime: "2020",
+          title: "NodeJS Boilerplate",
+          description:
+            "Start your NodeJS Project today with my simple but structured boilerplate. Don't get anything confused with this organized project map and documentation.",
+          link: "https://github.com/wieerwill/nodejs-boilerplate",
+        },
+        {
+          datetime: "2020",
+          title: "DSGVO Templates",
+          description:
+            "Want to make use of your privacy rights? Use my templates for free and get all you need with little work.",
+          link: "https://github.com/wieerwill/dsgvo-templates",
+        },
+        {
+          datetime: "2020",
+          title: "Wandern bringt Wissen",
+          description:
+            "In collaboration with Engineers without Borders, this website is a fundraiser to encourage regional companies to support the 'Water for Nyamache' project and many other.",
+          link: "",
+        },
+        {
+          datetime: "2020",
+          title: "Ilmenauer Studentenclub e.V.",
+          description:
+            "After being active in one of the sections for several years, I was elected to the board of the association. In this position, I manage, organise and plan four student clubs and a student café with three other board members in close cooperation with the individual sections. This work is more exciting than before in other associations, especially because of the Corona situation.",
+          link: "http://il-sc.de",
+        },
+        {
+          datetime: "2021",
+          title: "CocktailShaker App",
+          description:
+            "This App works on the web, iOS and Android and lets you discover new and interesting drinks. It's build on Ionic, Vue and the CocktailDB. This App is part of a university project.",
+          link: "https://github.com/wieerwill/CocktailShaker-App",
+        },
+      ],
+    };
+  },
+};
+</script>

nuxt/pages/skills.vue

@@ -0,0 +1,437 @@
+<template lang="pug">
+div 
+  .title
+    .outrun.small.glow all you need
+    .chrome.medium.shine(data-text="Skills & Tools") Skills & Tools
+
+  .container
+    em &laquo;With the right tools, everything is possible&raquo;
+
+    .row.skills
+      h3.chrome.small.shine(data-text="Hire me to get") Hire me to get
+      .progress-bar(v-for="skill in skills", :key="skill.title")
+        .skill-bar
+          .progress(v-bind:style="{ width: skill.progress + '%' }")
+        h4 {{ skill.title }}
+
+    .row
+      .chrome.small.shine(data-text="my Tools") my Tools
+      .column(v-for="tool of tools", :key="tool.name", :class="tool.kategory")
+        a.card(:href="tool.link")
+          nuxt-img(:src="`icons/${tool.logo}`")
+  .footer
+    NuxtLink.navbutton(to="/") Home
+    NuxtLink.navbutton(to="/profile") Profile
+    NuxtLink.navbutton(to="/projects") Projects
+    NuxtLink.navbutton(to="/certification") Certification
+</template>
+
+<script>
+export default {
+  head: {
+    title: "Skills",
+  },
+  data() {
+    return {
+      kategorys: ["Design", "WebDev", "Programming", "Divers"],
+      skills: [
+        {
+          title:
+            "Solid background and advanced knowledge in computer development software including C++, Python and JavaScript",
+          progress: 90,
+        },
+        {
+          title:
+            "Skilled in working with big databases and database management tools such as MySQL and MongoDB",
+          progress: 70,
+        },
+        {
+          title:
+            "Highly organized with exceptional commitment to task completion and quality assurance",
+          progress: 80,
+        },
+        {
+          title:
+            "Committed to delivering company objectives to projects and improving each version of software I engage with",
+          progress: 60,
+        },
+        {
+          title:
+            "Ability to solve complex problems successfully with minimal guidance or help using a logical reasoning technique and a strong attention to detail",
+          progress: 80,
+        },
+        {
+          title:
+            "Leading teams and creating a proactive selforganising structure",
+          progress: 90,
+        },
+        { title: "Creativity involved in each project", progress: 100 },
+        { title: "Motivation to gain more", progress: 100 },
+      ],
+      tools: [
+        {
+          name: "Adobe Photoshop",
+          kategory: "Design",
+          logo: "photoshop.jpg",
+          link: "https://www.adobe.com/de/products/photoshop.html",
+          description:
+            "Adobe Photoshop is an image processing program for pixel graphics from the US software house Adobe Inc. In the field of image processing and pre-press, the program is the world market leader and dominates the market.",
+        },
+        {
+          name: "Angular",
+          kategory: "Frontend",
+          logo: "angular.png",
+          link: "https://angular.io",
+          description:
+            "Angular is a TypeScript-based front-end web application framework. Achieve the maximum speed possible on the Web platform today and take it to the next level with the help of Web workers and server-side rendering.",
+        },
+        {
+          name: "Anime.js",
+          kategory: "Design",
+          logo: "animejs.gif",
+          link: "https://animejs.com",
+          description:
+            "Anime.js is a lightweight JavaScript animation library with a simple but powerful API. With the help of CSS properties, SVG, DOM attributes and Javascript objects, complex web pages, animations and moving graphics can be created quickly.",
+        },
+        {
+          name: "Blender",
+          kategory: "Design",
+          logo: "blender.png",
+          link: "https://www.blender.org",
+          description:
+            "Blender is one of the best among the open source programs, because it leaves hardly any wishes unfulfilled. Designing and modeling 3D objects and animations is no problem, so Blender can be used for videos, pictures or games. Blender's features include object and figure sculpting, modeling with N-gon and script support, rigging for figure movement, animation with sound synchronization and automatically or individually defined movements. Complex particle simulations, a complete game engine and a video editing and effects tool complete this.",
+        },
+        {
+          name: "Bootstrap",
+          kategory: "Frontend",
+          logo: "bootstrap.jpg",
+          link: "https://getbootstrap.com",
+          description:
+            "Bootstrap, a comprehensive yet lightweight mobile first frond end framework for easier and faster development on the web.",
+        },
+        {
+          name: "C",
+          kategory: "Programming",
+          logo: "code_c.png",
+          link: "https://de.wikipedia.org/wiki/C_(Programmiersprache)",
+          description:
+            "C is an imperative and procedural programming language developed by computer scientist Dennis Ritchie at Bell Laboratories in the early 1970s. Since then it has become one of the most widely used programming languages.",
+        },
+        {
+          name: "C++",
+          kategory: "Programming",
+          logo: "cpp.png",
+          link: "https://de.wikipedia.org/wiki/C%2B%2B",
+          description:
+            "C++ enables both efficient and machine-oriented programming and programming at a high level of abstraction. The standard also defines a standard library for which various implementations exist.",
+        },
+        {
+          name: "C#",
+          kategory: "Programming",
+          logo: "code_csharp.jpg",
+          link: "https://de.wikipedia.org/wiki/C-Sharp",
+          description:
+            "C# is a type-safe, object-oriented general-purpose programming language. The language is platform-independent in itself, but was developed within the framework of the .NET strategy, is optimized for it and is usually found in its context.",
+        },
+        {
+          name: "CSS",
+          kategory: "Websites",
+          logo: "css.png",
+          link: "https://de.wikipedia.org/wiki/Cascading_Style_Sheets",
+          description:
+            "Cascading Style Sheets, or CSS for short, is a stylesheet language for electronic documents and, together with HTML and DOM, one of the core languages of the World Wide Web.",
+        },
+        {
+          name: "Django",
+          kategory: "Backend",
+          logo: "django.png",
+          link: "https://www.djangoproject.com",
+          description:
+            "Django is a high-level Python web framework that promotes rapid development and clean, pragmatic design. Developed by experienced programmers, it takes care of much of the hassle of web development, so we can focus on writing your app without having to reinvent the wheel. It is free and open source.",
+        },
+        {
+          name: "GatsbyJS",
+          kategory: "Backend",
+          logo: "gatsby.png",
+          link: "https://www.gatsbyjs.org",
+          description:
+            "GatsbyJS was born in May 2015 as an easy way to create a website with React. Over the past three years, tens of thousands of developers have used Gatsby to create websites from blogs and portfolio pages to corporate homepages and e-commerce applications.",
+        },
+        {
+          name: "GIMP",
+          kategory: "Design",
+          logo: "gimp.jpg",
+          link: "https://www.gimp.org",
+          description:
+            "GIMP (GNU Image Manipulation Program) is a pixel-based graphics program that includes functions for image processing and digital painting of raster graphics. GIMP supports more than thirty file formats.",
+        },
+        {
+          name: "HTML",
+          kategory: "Websites",
+          logo: "html.png",
+          link: "https://de.wikipedia.org/wiki/Hypertext_Markup_Language",
+          description:
+            "The Hypertext Markup Language, abbreviated HTML, is a text-based markup language for structuring electronic documents such as texts with hyperlinks, images and other content. HTML documents are the basis of the World Wide Web and are displayed by web browsers.",
+        },
+        {
+          name: "Inkscape",
+          kategory: "Design",
+          logo: "incscape.jpg",
+          link: "https://inkscape.org",
+          description:
+            "The Vector graphics program Inkscape is an open source drawing program with which logos, banners, posters and much more can be designed. The program is compatible with the SVG format, but can also import EPS, Postscript, JPG, PNG, BMP or TIF images and export them to PNG or other vector-based formats. Even direct editing of XML codes in the XML editor is possible.",
+        },
+        {
+          name: "Java",
+          kategory: "Programming",
+          logo: "java.jpg",
+          link: "https://de.wikipedia.org/wiki/Java_(Programmiersprache)",
+          description:
+            "Within the Java technology, the programming language Java is mainly used to formulate programs. The Java compiler, which is part of the development tool, translates the source code of the program into the machine-understandable Java byte code for later execution.",
+        },
+        {
+          name: "JavaScript",
+          kategory: "Websites",
+          logo: "javascript.png",
+          link: "https://de.wikipedia.org/wiki/JavaScript",
+          description:
+            "JavaScript is a scripting language originally developed in 1995 by Netscape for dynamic HTML in web browsers to evaluate user interactions, modify, reload or generate content and thus extend the possibilities of HTML and CSS. Today, JavaScript is also used outside browsers, for example on servers and in microcontrollers.",
+        },
+        {
+          name: "Magento",
+          kategory: "Shop",
+          logo: "magento.jpg",
+          link: "https://magento.com",
+          description:
+            "Magento is an online shop software and was released in 2008 as an open source e-commerce platform. Magento is used on 1.3% of all websites and is therefore the most widely used pure online shop software.",
+        },
+        {
+          name: "Markdown",
+          kategory: "Websites",
+          logo: "markdown.png",
+          link: "https://markdown.de",
+          description:
+            "Markdown is a simple syntax for generating HTML code from text documents, similar to the formatting of plain text email. One goal of Markdown is that the original form is already easily readable without further conversion.",
+        },
+        {
+          name: "Materialize",
+          kategory: "Frontend",
+          logo: "materialize.jpg",
+          link: "https://materializecss.com",
+          description:
+            "A modern responsive front-end framework based on material design",
+        },
+        {
+          name: "MongoDB",
+          kategory: "Backend",
+          logo: "mongodb.png",
+          link: "https://www.mongodb.com",
+          description:
+            "MongoDB is a document-oriented NoSQL database written in the programming language C++. Because the database is document-oriented, it can manage collections of JSON-like documents.",
+        },
+        {
+          name: "NodeJs",
+          kategory: "Backend",
+          logo: "nodejs.jpg",
+          link: "https://nodejs.org",
+          description:
+            "Node.js is a server-side platform in software development for operating network applications. In particular, web servers can be realized with it.",
+        },
+        {
+          name: "OpenCart",
+          kategory: "Shop",
+          logo: "opencart.jpg",
+          link: "https://www.opencart.com",
+          description:
+            "The OpenCart marketplace offers over 13000 modules and themes to start, grow and expand your shop. Here you will find nice topics for almost every industry, service integrations, payment providers, shipping methods, social media, marketing, accounting, reporting, sales and language packs.",
+        },
+        {
+          name: "OpenSCAD",
+          kategory: "Design",
+          logo: "openscad.jpg",
+          link: "http://openscad.org",
+          description:
+            "In the free CAD software, 3D models are created with a text-based description language. The objects consist of simple geometric basic bodies and are combined with transformations and modifications to a complex 3D model. The modelling is based on CSG technology. Animations can also be realized with OpenSCAD.",
+        },
+        {
+          name: "PayPal",
+          kategory: "Shop",
+          logo: "paypal.png",
+          link: "https://paypal.com",
+          description:
+            "PayPal is a listed operator of an online payment service that can be used for the payment of medium and small amounts, for example when buying and selling in online commerce.",
+        },
+        {
+          name: "PHP",
+          kategory: "Backend",
+          logo: "php.png",
+          link: "https://php.net",
+          description:
+            "PHP is a scripting language with a syntax similar to C and Perl, which is mainly used to create dynamic websites or web applications. PHP is distributed as free software under the PHP license. NorthScorp uses both PHP version 5 and version 7 and, in addition to self-developed frameworks, Laravel.",
+        },
+        {
+          name: "Phyton",
+          kategory: "Programming",
+          logo: "phyton.jpg",
+          link: "https://www.python.org",
+          description:
+            "Python is a dynamic, object-oriented programming language for scripts and rapid application development. Python offers extensive support for the integration of other languages as well as tools and contains numerous standard libraries.",
+        },
+        {
+          name: "React",
+          kategory: "Frontend",
+          logo: "react.png",
+          link: "https://reactjs.org",
+          description:
+            "React is a JavaScript software library that provides a basic framework for the output of user interface components of web pages.",
+        },
+        {
+          name: "Semantic UI",
+          kategory: "Frontend",
+          logo: "semantic.png",
+          link: "https://semantic-ui.com",
+          description:
+            "Semantic is a development framework that helps to create beautiful and appealing layouts with human friendly HTML. Concise HTML classes use syntax from natural languages such as noun/modifier relationships, word order and plurality to intuitively connect concepts.",
+        },
+        {
+          name: "SQL",
+          kategory: "Backend",
+          logo: "sql.png",
+          link: "https://de.wikipedia.org/wiki/SQL",
+          description:
+            "SQL is a database language for the definition of data structures in relational databases as well as for processing and querying data sets based on them. MySQL and NoSQL are two of the most common relational database management systems in the world.",
+        },
+        {
+          name: "Woo Commerce",
+          kategory: "Shop",
+          logo: "woo.png",
+          link: "https://woocommerce.com/",
+          description:
+            "WooCommerce is a free plug-in for WordPress, which adds the functionality of an online shop to the content management system. It has been downloaded more than 15 million times.",
+        },
+        {
+          name: "Vue",
+          kategory: "Frontend",
+          logo: "Vue.png",
+          link: "https://vuejs.org",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.skills h3.chrome {
+  margin-bottom: 0;
+  padding-bottom: 5px;
+}
+.skills {
+  margin-bottom: 100px;
+}
+.progress-bar {
+  text-align: left;
+  width: 80%;
+  margin: 30px auto;
+  padding: 0;
+}
+.skill-bar {
+  width: 20%;
+  height: 20px;
+  background-color: rgba(126, 117, 115, 0.6);
+  display: inline-block;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  margin: 0 auto;
+  padding: 5px;
+}
+.progress {
+  margin: 4px;
+  padding: 0;
+  min-width: 1%;
+  max-width: 99%;
+  height: 12px;
+  animation: progress 3s linear infinite;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  background-image: linear-gradient(
+    -45deg,
+    #92ce72 25%,
+    #70c542 25%,
+    #70c542 50%,
+    #92ce72 50%,
+    #92ce72 75%,
+    #70c542 75%,
+    #70c542
+  );
+  background-size: 20px 20px;
+}
+.progress-bar h4 {
+  font-size: 15px;
+  width: 70%;
+  padding: 0 15px;
+  margin: 0;
+  display: inline-block;
+  background-color: rgba(76, 0, 130, 0.3);
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+}
+@keyframes progress {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 20px 20px;
+  }
+}
+
+.container {
+  color: white;
+  width: 80%;
+  margin: auto;
+  margin-top: 25vh;
+  padding: auto;
+  text-align: center;
+}
+.container em {
+  margin: 20px;
+}
+.column {
+  float: left;
+  width: 10%;
+  min-height: 100px;
+  padding: 2%;
+}
+.card img {
+  padding: 8px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 15%;
+  height: 50px;
+  max-width: 100%;
+  border-radius: 10%;
+  -webkit-box-shadow: 0px 0px 28px 4px rgba(113, 22, 218, 0.705);
+  -moz-box-shadow: 0px 0px 28px 4px rgba(113, 22, 218, 0.705);
+  box-shadow: 0px 0px 28px 4px rgba(113, 22, 218, 0.705);
+}
+
+@media screen and (max-width: 600px) {
+  .column {
+    width: 40%;
+    display: block;
+    margin: auto auto 10px auto;
+    min-height: 100px;
+  }
+  .skills .progress-bar {
+    text-align: center;
+  }
+}
+</style>