nice secondary pages template

lorenzopalaia · Dec 2, 2023 · 94cc40b · 94cc40b
1 parent 28c6dc4
commit 94cc40b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/src/assets/personalInfo.json b/src/assets/personalInfo.json
@@ -13,11 +13,13 @@
   "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": [
     {
-      "company": "Freelance Developer",
+      "date": "2019 - Present",
+      "company": "Freelance",
       "description": [
         "Developed websites and applications for more than 5 private and corporate clients including landing pages, bots and trackers"
       ],
-      "date": "2019 - Present",
+      "role": "Software Engineer",
+      "location": "Rome, Italy",
       "badges": ["Python", "HTML"],
       "url": ""
     }

diff --git a/src/components/WorkExperience.vue b/src/components/WorkExperience.vue
@@ -1,41 +1,43 @@
 <template>
   <div class="container mx-auto my-auto">
-    <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">Work Experiences</h1>
+    <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">Work Experiences</h1>
+      </article>
       <div class="overflow-x-auto">
         <table class="table">
           <thead>
             <tr>
-              <th>Period</th>
-              <th>Company</th>
-              <th>Role</th>
-              <th>Location</th>
-              <th>Technologies</th>
-              <th>Link</th>
+              <th class="table-cell">Period</th>
+              <th class="table-cell">Company</th>
+              <th class="table-cell">Role</th>
+              <th class="hidden md:table-cell">Location</th>
+              <th class="hidden md:table-cell">Technologies</th>
+              <th class="hidden md:table-cell">Link</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="experience in workExperience" :key="experience">
-              <td>{{ experience.date }}</td>
-              <td>{{ experience.company }}</td>
-              <td>{{ experience.role }}</td>
-              <td>{{ experience.location }}</td>
-              <td>
+              <td class="table-cell">{{ experience.date }}</td>
+              <td class="table-cell">{{ experience.company }}</td>
+              <td class="table-cell">{{ experience.role }}</td>
+              <td class="hidden md:table-cell">{{ experience.location }}</td>
+              <td class="hidden md:table-cell">
                 <div
                   v-for="badge in experience.badges"
                   :key="badge"
-                  class="badge badge-lg badge-secondary mr-2 mb-8"
+                  class="badge badge-lg badge-secondary mr-2 mb-2"
                 >
                   <p class="text-primary">{{ badge }}</p>
                 </div>
               </td>
-              <td>
+              <td class="hidden md:table-cell">
                 <a :href="experience.link" target="_blank">
                   {{ experience.link }}
                 </a>
@@ -44,7 +46,7 @@
           </tbody>
         </table>
       </div>
-    </article>
+    </div>
   </div>
 </template>