feat: début AboutView.vue

frontend/src/App.vue

@@ -25,9 +25,9 @@ import HeaderNav from "@/components/HeaderNav.vue"
   :root * {
     color: #e0e0e0;
   }
-  
+
   .background {
-    height: 250%;
+    height: 100%;
     width: 100%;
     position:absolute;
     top:0;
@@ -38,9 +38,14 @@ import HeaderNav from "@/components/HeaderNav.vue"
             #000000 50%,
             map.get(map.get(base.$themes, "dark"), "background") 100%,
     ) no-repeat;
+    resize: both;
     font-family: "YaHei Consolas Hybrid", Consolas, Inconsolata, sans-serif;
   }
 
+  body {
+    background: black
+  }
+
   .nav-li {
     padding: 10px;
   }

frontend/src/components/Projects.vue

@@ -7,7 +7,7 @@
 
     <div>
       <a href="https://github.com/Akomry/makeyourownapp-jam" target="_blank" rel="external nofllow noopener">
-        <img class="rounded card" src="../components/icons/Illustration3.png" alt="makeyourownapp-jam" width="300">
+        <img class="rounded card img" src="../components/icons/Illustration3.png" alt="makeyourownapp-jam">
       </a>
       <br>
       <span>Make your own app! game jam</span>
@@ -41,7 +41,7 @@
 
   .card-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(24rem, auto));
+    grid-template-columns: repeat(auto-fill, minmax(10rem, auto));
     gap: 2rem;
   }
 
@@ -61,4 +61,8 @@
   .rounded {
     border-radius: 15px;
   }
+
+  .img {
+    width: 200px;
+  }
 </style>

frontend/src/views/AboutView.vue

@@ -3,11 +3,29 @@
 </script>
 
 <template>
-  <div class="centerdown">
+  <div class="">
+    <div class="center">
+      <h1>Who am I ?</h1>
+    </div>
+    <div class="margin">
+      <div class="flex">
+        Heya ! Ako here. <img src="../components/icons/wave.webp" alt="wave" class="emote">
+      </div>
+      <div>
+        I'm a 19-year-old proud transfem and programming passionate. I develop softwares, scripts and maintain my own
+        server infrastructure in my free time.
+      </div>
+      <div>
 
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+  @use '@/assets/base';
+  .emote {
+    height: 3rem;
+  }
 
 </style>

frontend/src/views/HomeView.vue

@@ -15,7 +15,7 @@ import { Icon } from '@iconify/vue'
     <div style="min-height: 100vh;">
       <!-- Welcome text -->
       <br style="margin-top: 8%">
-      <pre class="center font-bigger">
+      <pre class="center screen-width">
 ┌─────────────────────────────────────────────┐
 │                  _  _              __       │
 │  ___  _ __ ___  (_)| | __ ___     / _| _ __ │
@@ -53,4 +53,10 @@ import { Icon } from '@iconify/vue'
     }
   }
 
-</style>
+  @media screen and (min-width: 1600px) {
+    body {
+      font-size: 30px;
+    }
+  }
+
+</style>