secondary pages and highlighted projects

lorenzopalaia · Dec 4, 2023 · dfdd7c2 · dfdd7c2
1 parent 94cc40b
commit dfdd7c2
Show file tree

Hide file tree

Showing 10 changed files with 419 additions and 62 deletions.
diff --git a/src/assets/personalInfo.json b/src/assets/personalInfo.json
@@ -7,8 +7,7 @@
       "github": "https://www.github.com/lorenzopalaia",
       "linkedin": "https://www.linkedin.com/in/lorenzopalaia",
       "mail": "lorenzopalaia53@gmail.com"
-    },
-    "footer": "Made with ❤️ by Lorenzo Palaia. Loosely coded in Visual Studio Code by yours truly. Built with Vue and Tailwind CSS, deployed with GitHub Pages"
+    }
   },
   "about": "Hello fellow Earthlings! 🌍 I'm Lorenzo, your friendly neighborhood Software Engineer. When I'm not coding, you can find me exploring the vast realms of programming, diving deep into the mysteries of artificial intelligence, and navigating the blockchain universe. I've got a knack for finance, and I love to embark on adventures around the globe. Let's create some magic with code!",
   "workExperience": [
@@ -21,40 +20,50 @@
       "role": "Software Engineer",
       "location": "Rome, Italy",
       "badges": ["Python", "HTML"],
-      "url": ""
+      "url": "https://www.github.com/lorenzopalaia"
     }
   ],
-  "projects": [],
+  "showedProjects": [
+    "Neural-Style-Transfer-and-Genre-Classification",
+    "Arduino-Oscilloscope",
+    "Blocktracr"
+  ],
   "education": [
     {
-      "degree": "Computer and Automatic Engineering - Sapienza University of Rome",
+      "date": "Sep 2019 - Mar 2024",
+      "degree": "Computer and Automatic Engineering",
+      "school": "Sapienza University of Rome",
       "description": [
         "Best Marks: Operative Systems, Functional Programming, Programming Techniques 4.0 GPA cum laude, Data Structures & Algorithms, Software Design, Parallel Computing, Electronics, Web Development 4.0 GPA"
       ],
-      "date": "Sep 2019 - Mar 2024",
+      "location": "Rome, Italy",
       "url": "https://www.uniroma1.it"
     }
   ],
   "extraActivities": [
     {
+      "date": "Mar 2023",
       "name": "Randstad <Code.Your.Future> AI Hackathon",
+      "role": "",
       "description": [
         "Guided the development of a job description neural network in a team of 5 using Tensorflow in a 4 hour challenge",
         "Secured the 2nd spot out of 8 contenders, reached an F1 score of 75%, explored both Bag of Words and Word2Vec solutions"
       ],
-      "date": "Mar 2023",
+      "location": "Rome, Italy",
       "badges": ["Python", "Tensorflow"],
       "url": "https://www.github.com/lorenzopalaia/Randstad-AI-Hackathon"
     },
     {
+      "date": "Sep 2021 - Oct 2022",
       "name": "Sapienza Flight Team - AUVSI SUAS competition",
+      "role": "Computer Vision Software Engineer",
       "description": [
         "Implemented the object detection and terrain mapping systems of a UAV, trained YOLOv5/EfficientNet models with custom datasets",
         "Designed the communication protocols between UAV and Ground Station from scratch via endpoints using Flask, restructured the labeling GUI",
         "Worked in a subteam of 5 and collaborated frequently with 60 people in other sumteams, migrated the entire Flight Team workflow to Slack",
         "Earned a 15th position out of 71 entries for the Technical Design Paper in the AUVSI SUAS competition"
       ],
-      "date": "Sep 2021 - Oct 2022",
+      "location": "Rome, Italy",
       "badges": ["Python", "Tensorflow"],
       "url": "https://www.sasa-aerospace.it/flight-team"
     }
@@ -76,5 +85,6 @@
     { "name": "Italian", "value": 100 },
     { "name": "English", "value": 80 },
     { "name": "French", "value": 25 }
-  ]
+  ],
+  "footer": "Made with ❤️ by Lorenzo Palaia. Loosely coded in Visual Studio Code by yours truly. Built with Vue and Tailwind CSS, deployed with GitHub Pages"
 }
diff --git a/src/components/Education.vue b/src/components/Education.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="container mx-auto my-auto">
+    <div class="flex flex-col mx-8">
+      <article class="prose">
+        <router-link to="/" class="no-underline">
+          <h4 class="mt-16 text-primary">
+            <font-awesome-icon icon="fa-solid fa-arrow-left" class="mr-2" />
+            Lorenzo Palaia
+          </h4>
+        </router-link>
+        <h1 class="mb-16">Education</h1>
+      </article>
+      <table class="table">
+        <thead class="sticky top-0 backdrop-blur">
+          <tr class="border-b-neutral-800">
+            <th class="text-neutral-200 font-bold table-cell">Period</th>
+            <th class="text-neutral-200 font-bold table-cell">Degree</th>
+            <th class="text-neutral-200 font-bold table-cell">School</th>
+            <th class="text-neutral-200 font-bold hidden lg:table-cell">
+              Location
+            </th>
+            <th class="text-neutral-200 font-bold hidden md:table-cell">
+              Link
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="edu in education"
+            :key="edu"
+            class="border-b-neutral-800"
+          >
+            <td class="text-neutral-400 font-light table-cell">
+              {{ edu.date }}
+            </td>
+            <td class="text-neutral-200 font-bold table-cell">
+              {{ edu.degree }}
+            </td>
+            <td class="text-neutral-400 font-light table-cell">
+              {{ edu.school }}
+            </td>
+            <td class="text-neutral-400 font-light hidden lg:table-cell">
+              {{ edu.location }}
+            </td>
+            <td class="text-neutral-400 font-light hidden md:table-cell group">
+              <a
+                :href="edu.url"
+                target="_blank"
+                class="group-hover:text-primary transition duration-250 ease-in-out"
+              >
+                {{ edu.url.replace(/^(https?:\/\/)?(www\.)?/i, '') }}
+                <font-awesome-icon
+                  v-if="edu.url"
+                  icon="fa-solid fa-arrow-right"
+                  class="ml-2"
+                />
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import personalInfo from "../assets/personalInfo.json";
+
+export default {
+  data: () => ({
+    education: personalInfo.education,
+  }),
+
+  mounted() {
+    document.title = "Projects | Lorenzo Palaia";
+    window.scrollTo(0, 0);
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/ExtraActivities.vue b/src/components/ExtraActivities.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="container mx-auto my-auto">
+    <div class="flex flex-col mx-8">
+      <article class="prose">
+        <router-link to="/" class="no-underline">
+          <h4 class="mt-16 text-primary">
+            <font-awesome-icon icon="fa-solid fa-arrow-left" class="mr-2" />
+            Lorenzo Palaia
+          </h4>
+        </router-link>
+        <h1 class="mb-16">Extra Activities</h1>
+      </article>
+      <table class="table">
+        <thead class="sticky top-0 backdrop-blur">
+          <tr class="border-b-neutral-800">
+            <th class="text-neutral-200 font-bold table-cell">Period</th>
+            <th class="text-neutral-200 font-bold table-cell">Activty</th>
+            <th class="text-neutral-200 font-bold table-cell">Role</th>
+            <th class="text-neutral-200 font-bold hidden lg:table-cell">
+              Location
+            </th>
+            <th class="text-neutral-200 font-bold hidden lg:table-cell">
+              Technologies
+            </th>
+            <th class="text-neutral-200 font-bold hidden md:table-cell">
+              Link
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="activity in extraActivities"
+            :key="activity"
+            class="border-b-neutral-800"
+          >
+            <td class="text-neutral-400 font-light table-cell">
+              {{ activity.date }}
+            </td>
+            <td class="text-neutral-200 font-bold table-cell">
+              {{ activity.name }}
+            </td>
+            <td class="text-neutral-400 font-light table-cell">
+              {{ activity.role }}
+            </td>
+            <td class="text-neutral-400 font-light hidden lg:table-cell">
+              {{ activity.location }}
+            </td>
+            <td class="hidden lg:table-cell">
+              <div
+                v-for="badge in activity.badges"
+                :key="badge"
+                class="badge badge-lg badge-secondary m-1"
+              >
+                <p class="text-primary font-light">{{ badge }}</p>
+              </div>
+            </td>
+            <td class="text-neutral-400 font-light hidden md:table-cell group">
+              <a
+                :href="activity.url"
+                target="_blank"
+                class="group-hover:text-primary transition duration-250 ease-in-out"
+              >
+                {{ activity.url.replace(/^(https?:\/\/)?(www\.)?/i, "") }}
+                <font-awesome-icon
+                  v-if="activity.url"
+                  icon="fa-solid fa-arrow-right"
+                  class="ml-2"
+                />
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import personalInfo from "../assets/personalInfo.json";
+
+export default {
+  data: () => ({
+    extraActivities: personalInfo.extraActivities,
+  }),
+
+  mounted() {
+    document.title = "Work activity | Lorenzo Palaia";
+    window.scrollTo(0, 0);
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
@@ -77,6 +77,7 @@
                       v-if="work.url"
                     />
                   </h4>
+                  <p>{{ work.role }}</p>
                   <p
                     v-for="description in work.description"
                     :key="description"
@@ -109,7 +110,10 @@
 
           <!-- projects -->
           <section id="projects">
-            <div class="group">
+            <div v-if="projects && projects.length === 0">
+              <div v-for="times in showedProjects.length" :key="times" class="skeleton w-full h-48 mb-8"></div>
+            </div>
+            <div v-else class="group">
               <div
                 class="flex flex-col lg:flex-row group-hover:opacity-50 hover:bg-white/5 hover:!opacity-100 mb-8 rounded-md group/inside hover:border-t border-white/10 transition ease-in-out duration-250"
                 :class="project.url ? 'cursor-pointer' : ''"
@@ -184,6 +188,7 @@
                       v-if="degree.url"
                     />
                   </h4>
+                  <p>{{ degree.school }}</p>
                   <p
                     v-for="description in degree.description"
                     :key="description"
@@ -229,6 +234,7 @@
                       v-if="activity.url"
                     />
                   </h4>
+                  <p>{{ activity.role }}</p>
                   <p
                     v-for="description in activity.description"
                     :key="description"
@@ -301,7 +307,7 @@
           </section>
 
           <!-- footer -->
-          <p class="mt-32 mb-16 mx-4">{{ info.footer }}</p>
+          <p class="mt-32 mb-16 mx-4">{{ footer }}</p>
         </article>
       </div>
     </div>
@@ -320,6 +326,8 @@ export default {
     extraActivities: personalInfo.extraActivities,
     skills: personalInfo.skills,
     languages: personalInfo.languages,
+    footer: personalInfo.footer,
+    showedProjects: personalInfo.showedProjects,
     projects: [],
     /*
     nav: [
@@ -341,14 +349,8 @@ export default {
         "https://api.github.com/users/lorenzopalaia/repos"
       );
       const data = await response.json();
-      data.sort((a, b) => new Date(b.pushed_at) - new Date(a.pushed_at));
-      for (let i = 0; i < data.length; i++) {
-        const response = await fetch(data[i].languages_url);
-        const languages = await response.json();
-        data[i].languages = Object.keys(languages);
-      }
-      //console.log(data);
-      this.projects = data;
+      //filter by showedProjects
+      this.projects = data.filter((repo) => this.showedProjects.includes(repo.name));
     },
     redirectToExternalLink(url) {
       if (url) window.open(url, "_blank");
@@ -372,7 +374,7 @@ export default {
   computed: {
     // view of repos with only the first 3 entries
     latest_projects() {
-      return this.projects.slice(0, 3);
+      return this.projects.slice(0, this.latestProjecttsLength);
     },
   },
 };