add missing data in home page and fix navbar

msartore · Jul 12, 2024 · 708b3f0 · 708b3f0
1 parent cea8df9
commit 708b3f0
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 58 deletions.
diff --git a/index.html b/index.html
@@ -1,15 +1,50 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.svg" />
+    <meta name="title" content="Massimiliano Sartore - Software Developer" />
+    <meta
+      name="description"
+      content="Massimiliano Sartore, a software developer and tech enthusiast, shares his projects and insights on technology. Explore his work, learn about his journey, and get in touch."
+    />
+    <meta
+      name="keywords"
+      content="Massimiliano Sartore, Software Developer, Tech Enthusiast, Projects, Technology, ATA, ATA-GUI, Ares, Android, Windows"
+    />
+    <meta name="robots" content="index, follow" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="language" content="English" />
+    <meta name="revisit-after" content="90 days" />
+    <meta name="author" content="Massimiliano Sartore" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://msartore.dev/" />
+    <meta
+      property="og:title"
+      content="Massimiliano Sartore - Software Developer"
+    />
+    <meta
+      property="og:description"
+      content="Massimiliano Sartore, a software developer and tech enthusiast, shares his projects and insights on technology. Explore his work, learn about his journey, and get in touch."
+    />
+    <meta property="og:image" content="/src/assets/banner.png" />
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://msartore.dev/" />
+    <meta
+      property="twitter:title"
+      content="Massimiliano Sartore - Software Developer"
+    />
+    <meta
+      property="twitter:description"
+      content="Massimiliano Sartore, a software developer and tech enthusiast, shares his projects and insights on technology. Explore his work, learn about his journey, and get in touch."
+    />
+    <meta property="twitter:image" content="/src/assets/banner.png" />
+
+    <link rel="icon" href="/src/assets/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Element Plus Vite Starter</title>
-    <!-- element css cdn, if you use custom theme, remove it. -->
-    <!-- <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
-    /> -->
+    <title>Massimiliano Sartore - Software Developer</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -1,22 +1,68 @@
 <template>
   <el-config-provider namespace="ep">
-    <el-container>
-      <el-header>
-        <BaseHeader
-          :currentPage="currentPage"
-          :pages="pages"
-          @navigate-to="navigateTo"
-        />
-      </el-header>
+    <div class="common-layout">
       <el-container>
+        <el-header class="navbar">
+          <BaseHeader
+            :currentPage="currentPage"
+            :pages="pages"
+            @navigate-to="navigateTo"
+          />
+        </el-header>
         <el-main class="main-container">
-          <div style="width: 70%">
+          <div style="width: 80%">
             <RouterView :projects="pages[0].items" />
           </div>
         </el-main>
-        <el-footer>Footer</el-footer>
+        <el-footer class="footer">
+          <el-row justify="center">
+            <a href="https://github.com/msartore"
+              ><svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+                /></svg
+            ></a>
+            <a href="https://www.linkedin.com/in/massimilianosartore/"
+              ><svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                fill="currentColor"
+                class="bi bi-linkedin"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
+                /></svg
+            ></a>
+            <a href="https://x.com/msartore_"
+              ><svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                fill="currentColor"
+                class="bi bi-twitter"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"
+                /></svg
+            ></a>
+          </el-row>
+          <el-row>
+            <el-text tag="p" style="text-align: center; width: 100%"
+              >Copyright © 2024 Massimiliano Sartore</el-text
+            >
+          </el-row>
+        </el-footer>
       </el-container>
-    </el-container>
+    </div>
   </el-config-provider>
 </template>
 
@@ -79,13 +125,31 @@ function navigateTo(index) {
 </script>
 
 <style>
+.navbar {
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
+  background-color: var(--ep-bg-color);
+}
+
 #app {
-  text-align: center;
-  color: var(--ep-text-color-primary);
+  background-color: var(--ep-bg-color);
 }
 
 .main-container {
   display: flex;
   justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.footer {
+  margin-top: 10%;
+  width: 100%;
+}
+
+.footer a {
+  color: var(--ep-text-color-primary);
+  margin: 8px;
 }
 </style>
diff --git a/...ompany/associazione_italiana_per_linformatica_ed_il_calcolo_automatico_logo.jpg b/...ompany/associazione_italiana_per_linformatica_ed_il_calcolo_automatico_logo.jpg
diff --git a/src/assets/company/cambridge_university_press_assessment_english_logo.jpg b/src/assets/company/cambridge_university_press_assessment_english_logo.jpg
diff --git a/src/assets/company/cisco_networking_academy1_logo.jpg b/src/assets/company/cisco_networking_academy1_logo.jpg
diff --git a/src/assets/company/its.jpg b/src/assets/company/its.jpg
diff --git a/src/assets/company/nextage.jpg b/src/assets/company/nextage.jpg
diff --git a/src/assets/company/uoc.jpg b/src/assets/company/uoc.jpg
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -21,9 +21,13 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
@@ -49,9 +49,7 @@ const emit = defineEmits(["navigateTo"]);
 const dark = ref(isDark.value);
 const activeIndex = ref(props.currentPage);
 const handleSelect = (key, keyPath) => {
-  console.log(key);
   emit("navigateTo", key);
-  console.log("test1");
 };
 
 function changeDark() {

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,13 +1,13 @@
 // import dark theme
 @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
 
 // :root {
 //   --ep-color-primary: red;
 // }
 
 body {
-  font-family: Inter, system-ui, Avenir, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-family: "Open Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: 0;

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,39 +1,39 @@
 <template>
-  <el-row class="home-content">
+  <el-row>
+    <h2>About</h2>
     <el-col>
       <el-row>
-        <div class="about">
-          <div class="p_name">
+        <el-row style="width: 100%" justify="space-between">
+          <el-col :span="6" style="align-content: center">
             <el-image
-              class="profile-image"
+              class="profile-image grid-content"
               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-col>
+          <el-col :span="18">
+            <h1 style="width: 100%" class="name">Massimiliano Sartore</h1>
+          </el-col>
+        </el-row>
+        <el-text tag="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.
+        </el-text>
       </el-row>
     </el-col>
   </el-row>
   <el-row>
-    <el-col style="justify-content: center">
+    <h2>Projects</h2>
+    <el-col style="text-align: center">
       <el-carousel
         :motion-blur="true"
         :interval="4000"
@@ -49,26 +49,97 @@
       </el-carousel>
     </el-col>
   </el-row>
+  <el-row>
+    <h2>Education & Work Experience</h2>
+    <div class="life">
+      <el-timeline>
+        <el-timeline-item
+          center
+          v-for="item in ew_list"
+          :key="item.course_name"
+          :timestamp="item.date"
+          placement="top"
+        >
+          <el-card>
+            <div class="flex">
+              <img class="company_logo" :src="item.logo" />
+              <h3 style="width: 100%; text-align: center">
+                {{ item.company_name }}
+              </h3>
+            </div>
+            <h4>{{ item.course_name }}</h4>
+            <el-text tag="p">{{ item.description }}</el-text>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </el-row>
 </template>
 
 <script setup>
 const props = defineProps({
   projects: Array,
 });
+
+const ew_list = [
+  {
+    company_name: "Universitat Oberta de Catalunya",
+    course_name:
+      "Bachelor's degree in Techniques for Software Application Development",
+    description:
+      "Bachelor's Degree in Techniques for Software Development, equipped me with the skills to create usable, efficient, and error-free software for various applications. I manage the software creation process through all stages of its life cycle, from requirement definition and design to implementation, maintenance, and upgrades. I excel in communicating and collaborating within development teams, employing agile methods to achieve functionality, quality, and timely delivery. My expertise includes a thorough understanding of the programming languages, tools, and technologies essential for building software across different platforms. Additionally, I am proficient in administering systems, networks, and applications, both locally and in the cloud.",
+    logo: "/src/assets/company/uoc.jpg",
+    date: "Feb 2022 - Feb 2025",
+  },
+  {
+    company_name: "Nextage S.R.L.",
+    course_name: "Mobile Android Developer · Intership",
+    description:
+      "As a Mobile Android Developer in the medical area, I was responsible for designing and developing mobile applications for the Android ecosystem. My role involved working closely with cross-functional teams to create user-friendly and efficient apps that met the needs of healthcare professionals. I utilized my knowledge of Kotlin, Java and experience with third-party libraries and APIs to create robust and high-performing applications. I also contributed to the testing, releasing, and support of these applications to ensure their continued success. During my time in this position, I gained valuable experience working in the healthcare industry.",
+    logo: "/src/assets/company/nextage.jpg",
+    date: "Apr 2021 - Dec 2021",
+  },
+  {
+    company_name:
+      "Istituto Tecnico Superiore per le Tecnologie dell’Informazione e della Comunicazione",
+    course_name: "Development of software systems for industry 4.0",
+    description:
+      "As a highly technological professional, I specialize in analyzing, designing, developing, and managing software and hardware systems to support Industry 4.0. My training includes comprehensive technical and design skills, covering all phases of the process from client briefings and programming activities to testing and release. Additionally, I am adept at implementing application security and data protection, ensuring robust management and safeguarding of data.",
+    logo: "/src/assets/company/its.jpg",
+    date: "2019 - 2021",
+  },
+];
 </script>
 
 <style>
+.name {
+  font-size: 5vw;
+  text-align: end;
+}
+
+.company_logo {
+  width: 48px;
+  height: 48px;
+  box-sizing: border-box;
+  background-clip: content-box;
+}
+
 .img_carousel {
   object-fit: contain;
   height: 100%;
   width: 70%;
 }
 
-.about {
-  text-align: justify;
+.flex {
   display: flex;
-  margin-bottom: 10%;
-  margin-top: 5%;
+}
+
+p {
+  text-align: justify;
+}
+
+h2 {
+  margin-top: 10%;
 }
 
 .profile-image {
@@ -82,9 +153,9 @@ const props = defineProps({
   background-color: transparent;
 }
 
-.p_name {
-  padding-right: 10%;
-  justify-content: center;
-  text-align: center;
+.life {
+  width: 100%;
+  display: grid;
+  justify-items: center;
 }
 </style>