fix nav bar and set home page base

src/App.vue

@@ -8,9 +8,11 @@
           @navigate-to="navigateTo"
         />
       </el-header>
-      <el-container style="max-width: 100em">
-        <el-main>
-          <RouterView :projects="pages[0].items" />
+      <el-container>
+        <el-main class="main-container">
+          <div style="width: 70%">
+            <RouterView :projects="pages[0].items" />
+          </div>
         </el-main>
         <el-footer>Footer</el-footer>
       </el-container>
@@ -34,20 +36,26 @@ const pages = ref([
         label: "ATA-GUI",
         path: "/projects/ata-gui",
         index: "0",
-        img: "/src/assets/banner3.png",
+        img: "/src/assets/banner1.png",
       },
       {
         label: "Ares",
         path: "/projects/ares",
         index: "1",
-        img: "/src/assets/banner3.png",
+        img: "/src/assets/banner4.png",
       },
       {
         label: "ATA",
         path: "/projects/ata",
         index: "2",
         img: "/src/assets/banner3.png",
       },
+      {
+        label: "Material Gallery",
+        path: "/projects/material-gallery",
+        index: "3",
+        img: "/src/assets/banner2.png",
+      },
     ],
   },
   { index: "2", label: "Contact", path: "/contact" },
@@ -77,6 +85,7 @@ function navigateTo(index) {
 }
 
 .main-container {
-  height: calc(100vh - var(--ep-menu-item-height) - 3px);
+  display: flex;
+  justify-content: center;
 }
 </style>

src/components.d.ts

@@ -9,28 +9,21 @@ declare module 'vue' {
   export interface GlobalComponents {
     BaseHeader: typeof import('./components/BaseHeader.vue')['default']
     BaseSide: typeof import('./components/BaseSide.vue')['default']
-    ElAside: typeof import('element-plus/es')['ElAside']
-    ElButton: (typeof import("element-plus/es"))["ElButton"]
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDatePicker: (typeof import("element-plus/es"))["ElDatePicker"]
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
-    ElInput: (typeof import("element-plus/es"))["ElInput"]
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTag: (typeof import("element-plus/es"))["ElTag"]
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/BaseHeader.vue

@@ -10,20 +10,18 @@
       <img style="width: 30px" src="../assets/favicon.png" alt="Element logo" />
     </el-menu-item>
     <div class="flex-grow" />
-    <div v-for="page in props.pages">
-      <el-menu-item v-if="page.items == undefined" :index="page.index">
-        {{ page.label }}
+    <el-sub-menu v-for="page in ps_i" :index="page.index">
+      <template #title>{{ page.label }}</template>
+      <el-menu-item
+        v-for="subpage in page.items"
+        :index="`${page.index}-${subpage.index}`"
+      >
+        {{ subpage.label }}
       </el-menu-item>
-      <el-sub-menu v-else :index="page.index">
-        <template #title>{{ page.label }}</template>
-        <el-menu-item
-          v-for="subpage in page.items"
-          :index="`${page.index}-${subpage.index}`"
-        >
-          {{ subpage.label }}
-        </el-menu-item>
-      </el-sub-menu>
-    </div>
+    </el-sub-menu>
+    <el-menu-item v-for="page in ps_n" :index="page.index">
+      {{ page.label }}
+    </el-menu-item>
     <el-menu-item @click="changeDark">
       <el-switch
         v-model="dark"
@@ -44,6 +42,9 @@ const props = defineProps({
   pages: Array,
   currentPage: String,
 });
+
+const ps_n = props.pages.filter((it) => it.items == undefined);
+const ps_i = props.pages.filter((it) => it.items != undefined);
 const emit = defineEmits(["navigateTo"]);
 const dark = ref(isDark.value);
 const activeIndex = ref(props.currentPage);
@@ -64,12 +65,13 @@ function changeDark() {
   flex-grow: 1;
 }
 
-.ep-menu-item {
+.ep-menu-item,
+ep-sub-menu {
   margin-right: 0px;
+  height: 100%;
 }
 
 .is-active {
   border-bottom: 2px solid var(--ep-menu-active-color);
-  height: 100%;
 }
 </style>

src/router/index.js

@@ -1,7 +1,6 @@
 import { createMemoryHistory, createRouter } from "vue-router";
 
 import Home from "../views/Home.vue";
-import Projects from "../views/Projects.vue";
 import Contact from "../views/Contact.vue";
 import Atagui from "../views/projects/ATA-GUI.vue";
 import Ata from "../views/projects/ATA.vue";
@@ -10,7 +9,6 @@ import Ares from "../views/projects/Ares.vue";
 const routes = [
   { path: "/", component: Home },
   { path: "/contact", component: Contact },
-  { path: "/projects", component: Projects },
   { path: "/projects/ata-gui", component: Atagui },
   { path: "/projects/ata", component: Ata },
   { path: "/projects/ares", component: Ares },

src/views/Home.vue

@@ -1,32 +1,33 @@
 <template>
   <el-row class="home-content">
     <el-col>
-      <el-row>
-        <div slot="header" class="clearfix">
-          <h1>About Me</h1>
-        </div>
-      </el-row>
       <el-row>
         <div class="about">
-          <p style="text-align: justify">
-            Hello and thank you for visiting my website. My name is Massimiliano
-            Sartore and I am a software developer from Italy. I have a passion
-            for mobile development and creating innovative solutions for
-            different platforms. I have a solid foundation in software
-            engineering and industry 4.0, as I graduated from ITS-ICT as a
-            Higher technician in 2021. I am also pursuing a degree in computer
-            science to expand my knowledge and skills in this field. I love
-            learning new technologies and applying them to real-world challenges
-            that can make a positive impact. On this website, you can find out
-            more about me and my projects, as well as contact me if you are
-            interested in working with me or collaborating on something
-            exciting.
-          </p>
-          <el-image
-            class="profile-image"
-            src="https://avatars.githubusercontent.com/u/56435388?v=4"
-            lazy
-          />
+          <div class="p_name">
+            <el-image
+              class="profile-image"
+              src="/src/assets/p_picture.jpg"
+              lazy
+            />
+            <b>Massimiliano Sartore</b>
+          </div>
+          <div>
+            <b>Bio</b>
+            <p>
+              Hello and thank you for visiting my website. My name is
+              Massimiliano Sartore and I am a software developer from Italy. I
+              have a passion for mobile development and creating innovative
+              solutions for different platforms. I have a solid foundation in
+              software engineering and industry 4.0, as I graduated from ITS-ICT
+              as a Higher technician in 2021. I am also pursuing a degree in
+              computer science to expand my knowledge and skills in this field.
+              I love learning new technologies and applying them to real-world
+              challenges that can make a positive impact. On this website, you
+              can find out more about me and my projects, as well as contact me
+              if you are interested in working with me or collaborating on
+              something exciting.
+            </p>
+          </div>
         </div>
       </el-row>
     </el-col>
@@ -57,16 +58,26 @@ const props = defineProps({
 
 <style>
 .about {
+  text-align: justify;
   display: flex;
+  margin-bottom: 10%;
+  margin-top: 5%;
 }
 
 .profile-image {
-  height: 50%;
-  width: 50%;
+  width: 100%;
   border-radius: 100%;
+  max-height: 200px;
+  max-width: 200px;
 }
 
 .ep-carousel__mask {
   background-color: transparent;
 }
+
+.p_name {
+  padding-right: 10%;
+  justify-content: center;
+  text-align: center;
+}
 </style>