update project base and home page UI

src/App.vue

@@ -2,18 +2,18 @@
   <el-config-provider namespace="ep">
     <div class="common-layout">
       <el-container>
-        <el-header class="navbar">
+        <header class="navbar">
           <BaseHeader
             :currentPage="currentPage"
             :pages="pages"
             @navigate-to="navigateTo"
           />
-        </el-header>
-        <el-main class="main-container">
-          <div style="width: 80%">
+        </header>
+        <main>
+          <div style="max-width: 1000px">
             <RouterView :projects="pages[0].items" />
           </div>
-        </el-main>
+        </main>
         <el-footer class="footer">
           <el-row justify="center">
             <a href="https://github.com/msartore"
@@ -96,12 +96,6 @@ const pages = ref([
         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" },
@@ -124,23 +118,23 @@ function navigateTo(index) {
 }
 </script>
 
-<style>
+<style lang="scss">
+main {
+  margin: 50px;
+  margin-top: 100px;
+  display: flex;
+  justify-content: center;
+}
+
 .navbar {
   position: fixed;
   width: 100%;
   z-index: 1000;
   background-color: var(--ep-bg-color);
 }
 
-#app {
-  background-color: var(--ep-bg-color);
-}
-
-.main-container {
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
+p {
+  text-align: justify;
 }
 
 .footer {

src/components.d.ts

@@ -9,12 +9,15 @@ declare module 'vue' {
   export interface GlobalComponents {
     BaseHeader: typeof import('./components/BaseHeader.vue')['default']
     BaseSide: typeof import('./components/BaseSide.vue')['default']
+    CommonProject: typeof import('./components/CommonProject.vue')['default']
+    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']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElImage: typeof import('element-plus/es')['ElImage']

src/components/BaseHeader.vue

@@ -10,16 +10,17 @@
       <img style="width: 30px" src="../assets/favicon.png" alt="Element logo" />
     </el-menu-item>
     <div class="flex-grow" />
-    <el-sub-menu v-for="page in ps_i" :index="page.index">
+    <el-sub-menu v-for="page in ps_i" :index="page.index" :key="page.index">
       <template #title>{{ page.label }}</template>
       <el-menu-item
         v-for="subpage in page.items"
+        :key="subpage.index"
         :index="`${page.index}-${subpage.index}`"
       >
         {{ subpage.label }}
       </el-menu-item>
     </el-sub-menu>
-    <el-menu-item v-for="page in ps_n" :index="page.index">
+    <el-menu-item v-for="page in ps_n" :index="page.index" :key="page.index">
       {{ page.label }}
     </el-menu-item>
     <el-menu-item @click="changeDark">