From c25b73b65328d38c337821d42de861224c382b61 Mon Sep 17 00:00:00 2001
From: Daniele Tortora <daniele.tortora@snyk.io>
Date: Tue, 17 Dec 2024 17:54:02 +0100
Subject: [PATCH] chore: portfolio update

---
 components/molecules/work-section.vue |  1 +
 components/organisms/base-header.vue  |  2 +-
 config/resume-schema.ts               | 56 ++++++++++++++++++++++++---
 pages/resume.vue                      | 51 ++++++++++--------------
 4 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/components/molecules/work-section.vue b/components/molecules/work-section.vue
index a71943a..dab590d 100644
--- a/components/molecules/work-section.vue
+++ b/components/molecules/work-section.vue
@@ -17,6 +17,7 @@
     </div>
     <div class="mt-2 flex w-full justify-center">
       <ul class="flex max-w-3xl list-outside list-disc flex-col gap-y-2">
+        <!-- Albeit unsafely injected - the text content injected in this `<li>` is hard-coded within this repository, and therefore there is concrete risk of XSS -->
         <li
           v-for="desc in entry.description"
           :key="desc"
diff --git a/components/organisms/base-header.vue b/components/organisms/base-header.vue
index 24b95e6..3a93759 100644
--- a/components/organisms/base-header.vue
+++ b/components/organisms/base-header.vue
@@ -8,7 +8,7 @@
       <ul class="flex size-full items-center gap-x-6">
         <li class="text-primary grow">
           <NuxtLink
-            to="https://www.linkedin.com/in/danieletortora/"
+            to="mailto:danieletortora.contact@gmail.com"
             aria-label="Get in touch via LinkedIn"
             class="text-primary animation-appear cursor-pointer opacity-0 hover:text-zinc-200"
           >
diff --git a/config/resume-schema.ts b/config/resume-schema.ts
index f72b0e9..69419e9 100644
--- a/config/resume-schema.ts
+++ b/config/resume-schema.ts
@@ -1,11 +1,14 @@
 import type { ResumeSchema } from "../types/resume";
 
+export const headline =
+  "Experienced Software Engineer with over 8 years in the industry, specializing in full-stack development and cloud technologies. Proven track record of building interactive and performant user interfaces, platform and development tooling, data-intensive applications, robust APIs and scalable distributed services.";
+
 export const resumeSchema: ResumeSchema = {
   work: [
     {
       companyName: "Snyk",
       title: "Software Engineer",
-      location: "Zurich, Switzerland",
+      location: "Zurich, Switzerland - Hybrid",
       startDate: "May 2024",
       endDate: "Present",
       description: [
@@ -18,7 +21,7 @@ export const resumeSchema: ResumeSchema = {
     {
       companyName: "Frontiers",
       title: "Technical Lead",
-      location: "Zurich, Switzerland",
+      location: "Zurich, Switzerland - Hybrid",
       startDate: "Feb 2023",
       endDate: "May 2024",
       description: [
@@ -30,7 +33,7 @@ export const resumeSchema: ResumeSchema = {
     {
       companyName: "Meta (Facebook)",
       title: "Frontend Engineer",
-      location: "Zurich, Switzerland",
+      location: "Zurich, Switzerland - Hybrid",
       startDate: "Jun 2022",
       endDate: "Feb 2023",
       isContract: true,
@@ -44,7 +47,7 @@ export const resumeSchema: ResumeSchema = {
     {
       companyName: "Tundra",
       title: "Senior Frontend Engineer",
-      location: "Zurich, Switzerland",
+      location: "Zurich, Switzerland - Hybrid",
       startDate: "Nov 2021",
       endDate: "Jun 2022",
       description: [
@@ -55,7 +58,7 @@ export const resumeSchema: ResumeSchema = {
     {
       companyName: "Tray.ai",
       title: "Senior Frontend Engineer",
-      location: "Remote",
+      location: "London, UK - Remote",
       startDate: "Jan 2021",
       endDate: "Oct 2021",
       description: [
@@ -65,7 +68,7 @@ export const resumeSchema: ResumeSchema = {
     {
       companyName: "OVO Energy | Noble Ltd | London Borough of Hackney",
       title: "Software Developer",
-      location: "London, United Kingdom",
+      location: "London, UK - Hybrid",
       startDate: "Sep 2016",
       endDate: "Jan 2021",
       description: [
@@ -76,3 +79,44 @@ export const resumeSchema: ResumeSchema = {
     },
   ],
 };
+
+export const skillGroups: Array<{ groupName: string; skills: string[] }> = [
+  {
+    groupName: "Programming Languages",
+    skills: ["TypeScript", "JavaScript", "Node.js", "Go", "Golang", "PHP"],
+  },
+  {
+    groupName: "Web Technologies",
+    skills: [
+      "React",
+      "Next.js",
+      "Vue",
+      "Nuxt",
+      "Angular",
+      "HTML",
+      "CSS",
+      "Tailwind",
+    ],
+  },
+  {
+    groupName: "DevOps Tools",
+    skills: ["Docker", "Kubernetes", "CircleCI", "GitHub Actions", "Jenkins"],
+  },
+  {
+    groupName: "Database Systems",
+    skills: ["PostgreSQL", "MongoDB", "Redis"],
+  },
+  {
+    groupName: "Cloud Platforms",
+    skills: ["AWS", "Google Cloud Platform"],
+  },
+  {
+    groupName: "Soft Skills",
+    skills: [
+      "Communication",
+      "Problem-solving",
+      "Team Collaboration",
+      "Mentoring",
+    ],
+  },
+] as const;
diff --git a/pages/resume.vue b/pages/resume.vue
index 7a9ad99..ba7274b 100644
--- a/pages/resume.vue
+++ b/pages/resume.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { resumeSchema } from "../config/resume-schema";
+  import { headline, resumeSchema, skillGroups } from "../config/resume-schema";
   import WorkSection from "../components/molecules/work-section.vue";
 
   useHead({
@@ -39,7 +39,7 @@
   const contactLinks = [
     {
       icon: "ant-design:mail-outlined",
-      href: "mailto:tortora87@gmail.com",
+      href: "mailto:danieletortora.contact@gmail.com",
       label: "Email",
     },
     {
@@ -58,24 +58,6 @@
       label: "Zurich, Switzerland",
     },
   ];
-
-  const skills = [
-    "TypeScript",
-    "React",
-    "Vue",
-    "Node.js",
-    "REST",
-    "GraphQL",
-    "gRPC",
-    "Microservices",
-    "PostgreSQL",
-    "Redis",
-    "Kubernetes",
-    "Docker",
-    "AWS",
-    "CI/CD",
-    "DevOps",
-  ];
 </script>
 
 <template>
@@ -111,17 +93,9 @@
         <div class="grid place-items-center text-sm">
           <div class="max-w-[45rem]">
             <p class="mb-2">
-              Software Engineer with 8+ years of experience in frontend
-              architecture and full-stack development, designing scalable UI
-              component libraries, building data-intensive applications,
-              developing distributed microservices, designing APIs (REST,
-              GraphQL, gRPC), and deploying cloud-native solutions with
-              Kubernetes and AWS.
+              {{ headline }}
             </p>
           </div>
-          <p class="text-xs">
-            <span class="font-bold">Skills: </span>{{ skills.join(", ") }}
-          </p>
         </div>
       </section>
 
@@ -139,7 +113,7 @@
         />
       </section>
       <!-- EDUCATION SECTION -->
-      <section>
+      <section class="mb-2">
         <h3 class="mb-2 border-b border-b-gray-800 font-bold uppercase">
           Education
         </h3>
@@ -171,6 +145,23 @@
           </div>
         </div>
       </section>
+      <!-- Skills -->
+      <section>
+        <h3 class="mb-2 border-b border-b-gray-800 font-bold uppercase">
+          Skills
+        </h3>
+        <ul class="text-xs grid grid-cols-2 gap-1">
+          <li
+            v-for="{ groupName, skills } in skillGroups"
+            :key="groupName"
+          >
+            <p>
+              <span class="font-bold">{{ groupName }}</span
+              >: {{ skills.join(", ") }}
+            </p>
+          </li>
+        </ul>
+      </section>
     </main>
   </div>
 </template>