feat(home): page d'accueil étoffée

frontend/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
 import StarrySky from "@/components/StarrySky.vue";
+import Projects from "@/components/Projects.vue";
 </script>
 
 <template>
@@ -10,7 +11,7 @@ import StarrySky from "@/components/StarrySky.vue";
       <div class="wrapper">
         <nav>
           <RouterLink to="/" class="nav-li">Home</RouterLink>
-          <RouterLink to="/about" class="nav-li">About</RouterLink>
+          <RouterLink to="/about" class="nav-li">About me</RouterLink>
         </nav>
       </div>
     </header>
@@ -25,17 +26,19 @@ import StarrySky from "@/components/StarrySky.vue";
   @use "sass:map";
   @use "sass:math";
 
-
+  html {
-  body {
-    height: 3000px;
     background: #000000;
+  }
+  
+  body {
+    height: 100%;
+    color: map.get(map.get(base.$themes, "dark"), "text");
     background: linear-gradient(
-    to top,
+            to top,
             #000000 0%,
             #000000 50%,
             map.get(map.get(base.$themes, "dark"), "background") 100%,
-    );
+    ) no-repeat;
-    color: map.get(map.get(base.$themes, "dark"), "text");
     font-family: Consolas, sans-serif;
   }
 

frontend/src/assets/_base.scss

@@ -13,4 +13,31 @@ $themes: (
    secondary: #7f5be1,
    accent: #9747cd,
  ),
-);
+);
+
+ .center {
+   align-items: center;
+   text-align: center;
+ }
+
+ .margin {
+   margin-left: 10%;
+   margin-right: 10%;
+
+ }
+
+ .cell {
+   @extend .margin;
+   border-radius: 15px;
+   padding: 30px;
+   background: rgba(0,0,0,0.2)
+ }
+
+ .flex {
+    display: flex;
+    flex-flow: wrap;
+  }
+ 
+ .font-bigger {
+   font-size: x-large;
+ }

frontend/src/components/88x31.vue

@@ -3,6 +3,7 @@
 </script>
 
 <template>
+  <h3 class="center">There, have cool old-fashioned 88x31 buttons</h3>
   <div class="wrapper flex">
     <a href="https://tralala.fr.eu.org" title="tralala.fr.eu.org"><img src="../components/icons/tralala-88x31.gif" alt="tralala.fr.eu.org" height="31" width="88"></a>
     <a href=""><img src="../components/icons/estrogen-88x31.gif" alt="" height="31" width="88"></a>
@@ -44,10 +45,6 @@
 </template>
 
 <style scoped lang="scss">
-  .flex {
-    display: flex;
-    flex-flow: wrap;
-  }
   .wrapper {
     padding: 10px;
     display: flex;

frontend/src/components/Projects.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <h3 class="center">Projects</h3>
+  <div class="center flex">
+    <a href="https://github.com/Akomry/makeyourownapp-jam">
+      <img class="rounded" src="../components/icons/Illustration3.png" alt="makeyourownapp-jam" width="300">
+      <br><span>Make your own app! game jam</span>
+    </a>
+    <a href="https://github.com/Akomry/sae302-chat"><img class="rounded" src="" alt="sae302-chat" width="300"></a>
+    <a href="https://github.com/Akomry/website"><img class="rounded" src="" alt="website" width="300"></a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  a {
+    padding: 10px;
+  }
+
+  .rounded {
+    border-radius: 15px;
+  }
+</style>

frontend/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import AboutView from '../views/AboutView.vue'
+import DashboardView from '../views/DashboardView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,6 +15,11 @@ const router = createRouter({
       path: '/about',
       name: 'about',
       component: AboutView,
+    },
+    {
+      path: '/dashboard',
+      name: 'dashboard',
+      component: DashboardView,
     }
   ],
 })

frontend/src/views/DashboardView.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>

frontend/src/views/HomeView.vue

@@ -1,31 +1,36 @@
 <script setup lang="ts">
 import buttons from "@/components/88x31.vue";
+import Projects from "@/components/Projects.vue";
+import StarrySky from "@/components/StarrySky.vue";
+function scrollToProjects() {
+  const projectsRect = document.querySelector('#section-projects > .section-title')!.getBoundingClientRect();
+  window.scrollTo({ behavior: 'smooth', top: projectsRect.top - projectsRect.height });
+}
 </script>
 
 <template>
   <div class="centerdown">
-    <div class="center">Welcome on my website !</div>
+
-    <hr class="margin">
+
+    <!-- Welcome text -->
+    <br style="margin-top: 8%">
+    <pre class="center font-bigger">
+┌─────────────────────────────────────────────┐
+│                  _  _              __       │
+│  ___  _ __ ___  (_)| | __ ___     / _| _ __ │
+│ / _ \| '_ ` _ \ | || |/ // _ \   | |_ | '__|│
+│|  __/| | | | | || ||   <| (_) |_ |  _|| |   │
+│ \___||_| |_| |_||_||_|\_\\___/(_)|_|  |_|   │
+└─────────────────────────────────────────────┘</pre>
+    <div class="center"><h1>Welcome to my website !</h1></div>
+      <hr class="margin" style="margin-top: 24%">
+
+    <!-- 88x31 buttons -->
+    <div class="cell" id="projects"><projects /></div>
+    <br>
     <div class="cell"><buttons /></div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .center {
-    align-items: center;
-    text-align: center;
-  }
-
-  .margin {
-    margin-left: 10%;
-    margin-right: 10%;
-
-  }
-
-  .cell {
-    @extend .margin;
-    border-radius: 15px;
-    padding: 10px;
-    background: rgba(0,0,0,0.2)
-  }
 </style>