complete site !

src/App.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import NavBar from "./components/NavBar.vue"
+import Footer from "./components/Footer.vue"
+
+</script>
+
+<template>
+  <NavBar />
+  <router-view />
+  <Footer />
+
+</template>
+
+<style scoped>
+</style>

src/components/Footer.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="footer">
+        <p>Made with ❤️ by Unurled. View source on my <a class="git-link" href="https://git.unurled.me/unurled/site">git</a></p>
+    </div>
+</template>
+
+<style>
+
+.footer {
+    position: absolute;
+    bottom: 5vh;
+}
+
+.git-link {
+    color: var(--dark-accent4);
+}
+
+.git-link:hover {
+    color: var(--dark-accent6);
+}
+
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/components/Home.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+
+defineProps<{ name: string }>()
+
+</script>
+
+<script lang="ts">
+var rotate = document.getElementById("rotate");
+
+if (rotate != null) {
+    rotate.style.animation = "rotate 0.4s linear infinite both";
+}
+</script>
+
+<template>
+    <h1 class="name-logo">{{ name }} <span id="rotate" class="rotate-25-cw">👋</span></h1>
+
+</template>
+
+<style>
+
+.name-logo {
+    color: var(--dark-shade7);
+}
+
+.wave {
+    position: relative;
+    animation-name: wave;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+}
+
+.rotate-25-cw {
+	-webkit-animation: rotate-25-cw 0.4s linear infinite both;
+	        animation: rotate-25-cw 0.4s linear infinite both;
+}
+
+@-webkit-keyframes rotate-25-cw {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(25deg);
+            transform: rotate(25deg);
+  }
+}
+@keyframes rotate-25-cw {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(25deg);
+            transform: rotate(25deg);
+  }
+}
+
+
+@keyframes wave {
+    0% {
+        transform: rotate(25deg);
+    }
+    25% {
+        transform: rotate(-25deg);
+    }
+    50% {
+        transform: rotate(25deg);
+    }
+    75% {
+        transform: rotate(-25deg);
+    }
+    100% {
+        transform: rotate(25deg);
+    }
+}
+
+</style>

src/components/Link.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+
+import { Icon } from '@iconify/vue';
+
+const props = defineProps({
+  isExternal:  { type: Boolean, default: false },
+  href: { type: String, default: '/' },
+  label: { type: String, default: null },
+  icon: { type: String, default: null }
+})
+
+</script>
+
+<template>
+  <div class="display">
+    <a v-if="isExternal" :href="href" target="_blank" class="link">
+    <div class="box"></div>
+    <Icon v-if="icon" :icon="icon" class="text-lg md:text-2xl" />
+    <span v-if="label">{{label}}</span>
+  </a>
+  </div>
+  
+</template>
+
+<style>
+
+.display {
+  display: inline-flex;
+}
+
+.link {
+  padding: .5em;
+  background-color: var(--dark-shade1);
+  -webkit-box-shadow: 0px 0px 20px 10px #2d3139;
+  -moz-box-shadow: 0px 0px 20px 10px #2d3139;
+  box-shadow: 0px 0px 20px 10px #2d3139;
+  text-shadow: 0px 0px 10px var(--dark-accent4);
+  border-radius: 1em;
+  font-size: 2rem;
+  color: var(--dark-accent4);
+  margin-right: 3em;
+  transition: transform .2s;
+}
+
+.link:hover {
+  color: var(--dark-accent1);
+  background-color: var(--dark-accent4);
+  transform: translate(0, 10%);
+}
+
+</style>

src/components/NavBar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+import Link from './Link.vue';
+
+</script>
+
+<template>
+    <div class="nav">
+        <div class="links">
+            <Link href="https://unurled.me" :isExternal="true" label="Website"  icon="mdi:web" />
+            <Link href="https://github.com/unurled" :isExternal="true" label="Github"  icon="feather:github"/>
+            <Link href="https://git.unurled.me/unurled" :isExternal="true" label="Git"  icon="mdi:git"/>
+        </div>
+    </div>
+
+</template>
+
+<style>
+.nav {
+    display: flex;
+    position: fixed;
+    top: 2vh;
+    left: 40%; 
+    align-items: center;
+    justify-content: center;
+}
+
+.links {
+    
+}
+
+</style>

src/components/Project.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  name:  { type: String, default: "" },
+  description: { type: String, default: "" },
+  link: { type: String, default: null },
+  icon: { type: String, default: null }
+})
+
+</script>
+
+<template>
+    <a  class="card" :href="link">
+        <h1 class="name">{{ name }}</h1>
+        <p class="description">{{ description }}</p>
+        <img :src="icon" >
+    </a>
+</template>
+
+<style>
+
+.card {
+    width: 25%;
+    color: var(--dark-accent2);
+    border: solid;
+    border-radius: 15px;
+    border-color: var(--dark-accent1);
+    margin-bottom: 10px;
+    transition: .5s transform;
+    max-height: 25%;
+}
+
+.card:hover {
+    color: var(--dark-accent3);
+    transform: translate(0, -8%);
+    color: var(--dark-accent4);
+}
+
+.card:hover .project-link {
+    color: var(--dark-accent3);
+}
+
+</style>

src/hex.css

@@ -0,0 +1,74 @@
+
+:root {
+  --dark-shade0: #282c34;
+
+  --dark-shade0-1: #292d35;
+  --dark-shade0-2: #2a2e36;
+  --dark-shade0-3: #2b2f37;
+  --dark-shade0-4: #2d3139;
+  --dark-shade0-5: #2e323a;
+  
+  
+
+  --dark-shade1: #393e48;
+
+  --dark-shade2: #4b515c;
+
+  --dark-shade3: #5c6370;
+
+  --dark-shade4: #636d83;
+
+  --dark-shade5: #828997;
+
+  --dark-shade6: #979eab;
+
+  --dark-shade7: #abb2bf;
+
+  --dark-accent0: #e06c75;
+
+  --dark-accent1: #d19a66;
+
+  --dark-accent2: #e5c07b;
+
+  --dark-accent3: #98c379;
+
+  --dark-accent4: #56b6c2;
+
+  --dark-accent5: #61afef;
+
+  --dark-accent6: #c678dd;
+
+  --dark-accent7: #be5046;
+
+  --light-shade0: #fafafa;
+
+  --light-shade1: #cdced1;
+
+  --light-shade2: #a0a1a7;
+
+  --light-shade3: #9d9d9f;
+
+  --light-shade4: #83858b;
+
+  --light-shade5: #696c77;
+
+  --light-shade6: #51535d;
+
+  --light-shade7: #383a42;
+
+  --light-accent0: #e45649;
+
+  --light-accent1: #986801;
+
+  --light-accent2: #c18401;
+
+  --light-accent3: #50a14f;
+
+  --light-accent4: #0184bc;
+
+  --light-accent5: #4078f2;
+
+  --light-accent6: #a626a4;
+
+  --light-accent7: #ca1243;
+}

src/hsl.css

@@ -0,0 +1,162 @@
+
+:root {
+  --dark-shade0: hsl(220, 13%, 18%);
+  --dark-shade0-h: 220;
+  --dark-shade0-s: 13%;
+  --dark-shade0-l: 18%;
+
+  --dark-shade1: hsl(220, 12%, 25%);
+  --dark-shade1-h: 220;
+  --dark-shade1-s: 12%;
+  --dark-shade1-l: 25%;
+
+  --dark-shade2: hsl(219, 10%, 33%);
+  --dark-shade2-h: 219;
+  --dark-shade2-s: 10%;
+  --dark-shade2-l: 33%;
+
+  --dark-shade3: hsl(219, 10%, 40%);
+  --dark-shade3-h: 219;
+  --dark-shade3-s: 10%;
+  --dark-shade3-l: 40%;
+
+  --dark-shade4: hsl(221, 14%, 45%);
+  --dark-shade4-h: 221;
+  --dark-shade4-s: 14%;
+  --dark-shade4-l: 45%;
+
+  --dark-shade5: hsl(220, 9%, 55%);
+  --dark-shade5-h: 220;
+  --dark-shade5-s: 9%;
+  --dark-shade5-l: 55%;
+
+  --dark-shade6: hsl(219, 11%, 63%);
+  --dark-shade6-h: 219;
+  --dark-shade6-s: 11%;
+  --dark-shade6-l: 63%;
+
+  --dark-shade7: hsl(219, 14%, 71%);
+  --dark-shade7-h: 219;
+  --dark-shade7-s: 14%;
+  --dark-shade7-l: 71%;
+
+  --dark-accent0: hsl(355, 65%, 65%);
+  --dark-accent0-h: 355;
+  --dark-accent0-s: 65%;
+  --dark-accent0-l: 65%;
+
+  --dark-accent1: hsl(29, 54%, 61%);
+  --dark-accent1-h: 29;
+  --dark-accent1-s: 54%;
+  --dark-accent1-l: 61%;
+
+  --dark-accent2: hsl(39, 67%, 69%);
+  --dark-accent2-h: 39;
+  --dark-accent2-s: 67%;
+  --dark-accent2-l: 69%;
+
+  --dark-accent3: hsl(95, 38%, 62%);
+  --dark-accent3-h: 95;
+  --dark-accent3-s: 38%;
+  --dark-accent3-l: 62%;
+
+  --dark-accent4: hsl(187, 47%, 55%);
+  --dark-accent4-h: 187;
+  --dark-accent4-s: 47%;
+  --dark-accent4-l: 55%;
+
+  --dark-accent5: hsl(207, 82%, 66%);
+  --dark-accent5-h: 207;
+  --dark-accent5-s: 82%;
+  --dark-accent5-l: 66%;
+
+  --dark-accent6: hsl(286, 60%, 67%);
+  --dark-accent6-h: 286;
+  --dark-accent6-s: 60%;
+  --dark-accent6-l: 67%;
+
+  --dark-accent7: hsl(5, 48%, 51%);
+  --dark-accent7-h: 5;
+  --dark-accent7-s: 48%;
+  --dark-accent7-l: 51%;
+
+  --light-shade0: hsl(0, 0%, 98%);
+  --light-shade0-h: 0;
+  --light-shade0-s: 0%;
+  --light-shade0-l: 98%;
+
+  --light-shade1: hsl(225, 4%, 81%);
+  --light-shade1-h: 225;
+  --light-shade1-s: 4%;
+  --light-shade1-l: 81%;
+
+  --light-shade2: hsl(231, 4%, 64%);
+  --light-shade2-h: 231;
+  --light-shade2-s: 4%;
+  --light-shade2-l: 64%;
+
+  --light-shade3: hsl(240, 1%, 62%);
+  --light-shade3-h: 240;
+  --light-shade3-s: 1%;
+  --light-shade3-l: 62%;
+
+  --light-shade4: hsl(225, 3%, 53%);
+  --light-shade4-h: 225;
+  --light-shade4-s: 3%;
+  --light-shade4-l: 53%;
+
+  --light-shade5: hsl(227, 6%, 44%);
+  --light-shade5-h: 227;
+  --light-shade5-s: 6%;
+  --light-shade5-l: 44%;
+
+  --light-shade6: hsl(230, 7%, 34%);
+  --light-shade6-h: 230;
+  --light-shade6-s: 7%;
+  --light-shade6-l: 34%;
+
+  --light-shade7: hsl(228, 8%, 24%);
+  --light-shade7-h: 228;
+  --light-shade7-s: 8%;
+  --light-shade7-l: 24%;
+
+  --light-accent0: hsl(5, 74%, 59%);
+  --light-accent0-h: 5;
+  --light-accent0-s: 74%;
+  --light-accent0-l: 59%;
+
+  --light-accent1: hsl(41, 99%, 30%);
+  --light-accent1-h: 41;
+  --light-accent1-s: 99%;
+  --light-accent1-l: 30%;
+
+  --light-accent2: hsl(41, 99%, 38%);
+  --light-accent2-h: 41;
+  --light-accent2-s: 99%;
+  --light-accent2-l: 38%;
+
+  --light-accent3: hsl(119, 34%, 47%);
+  --light-accent3-h: 119;
+  --light-accent3-s: 34%;
+  --light-accent3-l: 47%;
+
+  --light-accent4: hsl(198, 99%, 37%);
+  --light-accent4-h: 198;
+  --light-accent4-s: 99%;
+  --light-accent4-l: 37%;
+
+  --light-accent5: hsl(221, 87%, 60%);
+  --light-accent5-h: 221;
+  --light-accent5-s: 87%;
+  --light-accent5-l: 60%;
+
+  --light-accent6: hsl(301, 63%, 40%);
+  --light-accent6-h: 301;
+  --light-accent6-s: 63%;
+  --light-accent6-l: 40%;
+
+  --light-accent7: hsl(344, 84%, 43%);
+  --light-accent7-h: 344;
+  --light-accent7-s: 84%;
+  --light-accent7-l: 43%;
+}

src/main.ts

@@ -0,0 +1,11 @@
+import './style.css'
+import './hex.css'
+import { createApp } from 'vue'
+import { router } from './router/index'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

src/rgb.css

@@ -0,0 +1,162 @@
+
+:root {
+  --dark-shade0: rgb(40, 44, 52);
+  --dark-shade0-r: 40;
+  --dark-shade0-g: 44;
+  --dark-shade0-b: 52;
+
+  --dark-shade1: rgb(57, 62, 72);
+  --dark-shade1-r: 57;
+  --dark-shade1-g: 62;
+  --dark-shade1-b: 72;
+
+  --dark-shade2: rgb(75, 81, 92);
+  --dark-shade2-r: 75;
+  --dark-shade2-g: 81;
+  --dark-shade2-b: 92;
+
+  --dark-shade3: rgb(92, 99, 112);
+  --dark-shade3-r: 92;
+  --dark-shade3-g: 99;
+  --dark-shade3-b: 112;
+
+  --dark-shade4: rgb(99, 109, 131);
+  --dark-shade4-r: 99;
+  --dark-shade4-g: 109;
+  --dark-shade4-b: 131;
+
+  --dark-shade5: rgb(130, 137, 151);
+  --dark-shade5-r: 130;
+  --dark-shade5-g: 137;
+  --dark-shade5-b: 151;
+
+  --dark-shade6: rgb(151, 158, 171);
+  --dark-shade6-r: 151;
+  --dark-shade6-g: 158;
+  --dark-shade6-b: 171;
+
+  --dark-shade7: rgb(171, 178, 191);
+  --dark-shade7-r: 171;
+  --dark-shade7-g: 178;
+  --dark-shade7-b: 191;
+
+  --dark-accent0: rgb(224, 108, 117);
+  --dark-accent0-r: 224;
+  --dark-accent0-g: 108;
+  --dark-accent0-b: 117;
+
+  --dark-accent1: rgb(209, 154, 102);
+  --dark-accent1-r: 209;
+  --dark-accent1-g: 154;
+  --dark-accent1-b: 102;
+
+  --dark-accent2: rgb(229, 192, 123);
+  --dark-accent2-r: 229;
+  --dark-accent2-g: 192;
+  --dark-accent2-b: 123;
+
+  --dark-accent3: rgb(152, 195, 121);
+  --dark-accent3-r: 152;
+  --dark-accent3-g: 195;
+  --dark-accent3-b: 121;
+
+  --dark-accent4: rgb(86, 182, 194);
+  --dark-accent4-r: 86;
+  --dark-accent4-g: 182;
+  --dark-accent4-b: 194;
+
+  --dark-accent5: rgb(97, 175, 239);
+  --dark-accent5-r: 97;
+  --dark-accent5-g: 175;
+  --dark-accent5-b: 239;
+
+  --dark-accent6: rgb(198, 120, 221);
+  --dark-accent6-r: 198;
+  --dark-accent6-g: 120;
+  --dark-accent6-b: 221;
+
+  --dark-accent7: rgb(190, 80, 70);
+  --dark-accent7-r: 190;
+  --dark-accent7-g: 80;
+  --dark-accent7-b: 70;
+
+  --light-shade0: rgb(250, 250, 250);
+  --light-shade0-r: 250;
+  --light-shade0-g: 250;
+  --light-shade0-b: 250;
+
+  --light-shade1: rgb(205, 206, 209);
+  --light-shade1-r: 205;
+  --light-shade1-g: 206;
+  --light-shade1-b: 209;
+
+  --light-shade2: rgb(160, 161, 167);
+  --light-shade2-r: 160;
+  --light-shade2-g: 161;
+  --light-shade2-b: 167;
+
+  --light-shade3: rgb(157, 157, 159);
+  --light-shade3-r: 157;
+  --light-shade3-g: 157;
+  --light-shade3-b: 159;
+
+  --light-shade4: rgb(131, 133, 139);
+  --light-shade4-r: 131;
+  --light-shade4-g: 133;
+  --light-shade4-b: 139;
+
+  --light-shade5: rgb(105, 108, 119);
+  --light-shade5-r: 105;
+  --light-shade5-g: 108;
+  --light-shade5-b: 119;
+
+  --light-shade6: rgb(81, 83, 93);
+  --light-shade6-r: 81;
+  --light-shade6-g: 83;
+  --light-shade6-b: 93;
+
+  --light-shade7: rgb(56, 58, 66);
+  --light-shade7-r: 56;
+  --light-shade7-g: 58;
+  --light-shade7-b: 66;
+
+  --light-accent0: rgb(228, 86, 73);
+  --light-accent0-r: 228;
+  --light-accent0-g: 86;
+  --light-accent0-b: 73;
+
+  --light-accent1: rgb(152, 104, 1);
+  --light-accent1-r: 152;
+  --light-accent1-g: 104;
+  --light-accent1-b: 1;
+
+  --light-accent2: rgb(193, 132, 1);
+  --light-accent2-r: 193;
+  --light-accent2-g: 132;
+  --light-accent2-b: 1;
+
+  --light-accent3: rgb(80, 161, 79);
+  --light-accent3-r: 80;
+  --light-accent3-g: 161;
+  --light-accent3-b: 79;
+
+  --light-accent4: rgb(1, 132, 188);
+  --light-accent4-r: 1;
+  --light-accent4-g: 132;
+  --light-accent4-b: 188;
+
+  --light-accent5: rgb(64, 120, 242);
+  --light-accent5-r: 64;
+  --light-accent5-g: 120;
+  --light-accent5-b: 242;
+
+  --light-accent6: rgb(166, 38, 164);
+  --light-accent6-r: 166;
+  --light-accent6-g: 38;
+  --light-accent6-b: 164;
+
+  --light-accent7: rgb(202, 18, 67);
+  --light-accent7-r: 202;
+  --light-accent7-g: 18;
+  --light-accent7-b: 67;
+}

src/router/index.ts

@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from './routes'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+router.beforeEach((to, from, next) => {
+  next()
+})
+
+export { router }

src/router/routes.ts

@@ -0,0 +1,16 @@
+import Home from '../views/Home.vue'
+import NotFound from '../views/NotFound.vue'
+
+/** @type {import('vue-router').RouterOptions['routes']} */
+export const routes = [
+  {
+    path: '/', 
+    name: 'home',
+    component: Home, 
+    meta: { title: 'Home' } 
+  }, { 
+    path: '/:path(.*)', 
+    name: 'not-found',
+    component: NotFound 
+  },
+]

src/style.css

@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: var(--dark-shade7);
+  background-color: var(--dark-shade0);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/views/Home.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+
+import { onMounted, ref } from 'vue'
+
+import Project from '../components/Project.vue'
+
+const isShowing = ref(false)
+onMounted(() => {
+  // setup animations to start when on mount
+  isShowing.value = true
+})
+
+</script>
+
+<template>
+  <div class="name-logo">
+    <h1>
+      Unurled 
+      <div class="item-group">👋</div>
+    </h1>
+  </div>
+  <div class="main-content">
+    <div class="infos">
+      <h2>Hallo ! <br/> I'm unurled a French developper, I program with Java, Rust, JavaScript, Python, Scala.</h2>
+      <h3>You can contact me via email at <a href="mailto:unurled@unurled.me">unurled@unurled.me</a> <br/> or via discord at <a href="https://discordapp.com/users/369482919988690956">@unurled#0149</a></h3>
+    </div>  
+    <div class="separator"></div>
+    <div class="projects">
+      <Project name="Raxen" description="A minecraft plugin" link="https://git.unurled.me/Elixium/Raxen" icon=""/>
+      <Project name="Lymel" description="A minecraft mod" link="https://git.unurled.me/Elixium/Lymel" icon=""/>
+      <Project name="Obsidian Color Text" description="color text with a command (and using html)" link="https://git.unurled.me/unurled/obsidian-color-text" icon=""/>
+      <Project name="Capes" description="A hacky way to get a custom cape with optifine without paying" link="https://git.unurled.me/unurled/capes" icon=""/>
+      <Project name="url-shortener" description="A shortening url service" link="https://git.unurled.me/unurled/url-shortener" icon=""/>
+      <Project name="text-display" description="A text displaying server" link="https://git.unurled.me/unurled/text-display" icon=""/>
+    </div>
+  </div>
+
+</template>
+
+<style>
+
+.main-content {
+  display: flex;
+  animation: appear 5s ease-in-out;
+  animation-iteration-count: 1;
+  opacity: 1;
+  gap: 3em;
+  align-items: center;
+}
+
+.infos {
+  position: absolute;
+  width: 15em;
+  left: 5em;
+  margin-top: 4.5%;
+  flex-grow: 1;
+}
+
+.separator {
+  position: absolute;
+  left: 25rem;
+  margin-top: 4.5%;
+  height: 60vh;
+  width: 5px;
+  border-radius: 150000px;
+  background-color: var(--dark-shade7);
+  flex-grow: 5;
+}
+
+.projects {
+  position: absolute;
+  left: 30rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(-15deg);
+  }
+  50% {
+    transform: rotate(15deg);
+  }
+  100% {
+    transform: rotate(-15deg);
+  }
+}
+
+.item-group {
+    display: inline-block;
+    animation: spin 1s infinite ease-in-out;
+  }
+
+
+.name-logo {
+  position: fixed;
+  color: var(--dark-shade7);
+  animation: logo 2s ease-in-out;
+  animation-iteration-count: 1;
+  top: 5vh; left: 7.5vw;
+}
+
+@keyframes logo {
+  0% {
+    top: 45vh; 
+    left: 45vw;
+    opacity: 0;
+  }
+  100% {
+    top: 5vh; left: 7.5vw;
+    opacity: 1;
+  }
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+</style>

src/views/NotFound.vue

@@ -0,0 +1,6 @@
+<template>
+    <div>
+      <span>¯\_(ツ)_/¯</span>
+      <span>Sorry...can't find this page!</span>
+    </div>
+  </template>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />