About page

src/components/content/GridSection.vue

@@ -14,7 +14,10 @@ const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
 <template>
   <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-24">
     <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
-      <h2 class="text-sm font-semibold" :class="getColor">
+      <h2 class="relative text-sm font-semibold pl-3.5" :class="getColor">
+        <span class="md:hidden absolute inset-y-0 left-0 flex items-center">
+          <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+        </span>
         {{ title }}
       </h2>
       <div class="md:col-span-3">

src/components/resume/DateTag.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps({
+  startDate: String,
+  endDate: {
+    type: String,
+    required: true,
+  },
+})
+
+function formatTodayDate(date: string) {
+  const split = date.split(' ')
+  return date === 'Today' ? 'Today' : `${split[0]} ${split[1]}`
+}
+</script>
+
+<template>
+  <div
+    v-if="startDate !== endDate"
+    class="mb-1 translate-y-px inline-block flex-none rounded bg-zinc-200 p-1 text-xs font-medium leading-none text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+  >
+    {{ formatTodayDate(startDate!.toString()) }} — {{ formatTodayDate(endDate) }}
+  </div>
+  <div
+    v-else
+    class="mb-1 translate-y-px inline-block flex-none rounded bg-zinc-200 p-1 text-xs font-medium leading-none text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+  >
+    {{ formatTodayDate(endDate) }}
+  </div>
+</template>

src/components/resume/Education.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Education } from '~~/types'
+
+defineProps({
+  education: Object as PropType<Education>,
+})
+</script>
+
+<template>
+  <div v-if="education" class="group relative flex flex-col items-start">
+    <div class="flex flex-col">
+      <div>
+        <DateTag :start-date="education.startDate" :end-date="education.endDate" />
+      </div>
+      <h1 class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+        {{ education.title }}
+      </h1>
+    </div>
+    <p class="text-justify leading-5 text-sm text-zinc-600 dark:text-zinc-400">
+      {{ education.location }} — {{ education.description }}
+    </p>
+  </div>
+</template>

src/components/resume/Experience.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { WorkExperience } from '~~/types'
+
+defineProps({
+  experience: Object as PropType<WorkExperience>,
+})
+</script>
+
+<template>
+  <div v-if="experience" class="group relative flex flex-col items-start">
+    <div>
+      <div class="flex flex-col">
+        <div>
+          <DateTag :start-date="experience.startDate" :end-date="experience.endDate" />
+        </div>
+        <UButton
+          v-if="experience.companyLink"
+          :to="experience.companyLink"
+          variant="link"
+          :padded="false"
+          color="white"
+          size="xl"
+          :label="experience.company"
+          class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
+        >
+          <template #trailing>
+            <UIcon name="i-ph-arrow-up-right-bold" color="gray"/>
+          </template>
+        </UButton>
+        <h1 v-else class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+          {{ experience.company }}
+        </h1>
+      </div>
+    </div>
+    <p class="text-justify leading-5 text-sm text-zinc-600 dark:text-zinc-400">
+      {{ experience.title }} — {{ experience.description }}
+    </p>
+  </div>
+</template>

src/components/resume/Skill.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Skill } from '~~/types'
+
+defineProps({
+  skill: Object as PropType<Skill>,
+})
+
+const { $colorMode } = useNuxtApp()
+const isLight = computed(() => $colorMode.value === 'light')
+</script>
+
+<template>
+  <li
+    v-if="skill"
+    class="flex items-center gap-2 rounded-md px-2 py-3 duration-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+  >
+    <div class="flex items-center">
+      <Icon v-if="isLight" :name="skill.icon.light ? skill.icon.light : skill.icon" size="20" />
+      <Icon v-else :name="skill.icon.dark ? skill.icon.dark : skill.icon" size="20" />
+    </div>
+    <span class="text-sm text-subtitle">{{ skill.name }}</span>
+  </li>
+</template>

src/content/educations/baccalaureat.md

@@ -0,0 +1,7 @@
+---
+title: Baccalaureate
+description: Specializations Mathematics and Physics-CHemistry, Final Grade +15/20 (French grading system)
+location: La Salle Passy-Buzenval High School, Rueil-Malmaison (France)
+startDate: September 2020
+endDate: July 2021
+---

src/content/educations/brevet.md

@@ -0,0 +1,7 @@
+---
+title: Diplôme National du Brevet
+description: Final Grade +17/20 (French grading system)
+location: College La Salle Passy-Buzenval, Rueil-Malmaison (France)
+startDate: September 2017
+endDate: July 2018
+---

src/content/educations/degree.md

@@ -0,0 +1,7 @@
+---
+title: Mathematics Degree
+description: 2nd year of degree
+location: Faculty of Sciences of Paris-Saclay University, Orsay (France)
+startDate: September 2021
+endDate: Today
+---

src/content/educations/self-taught.md

@@ -0,0 +1,7 @@
+---
+title: Self-taught learning
+description: Learning programming languages (TypeScript, Rust, Java, Python...) and technologies (VueJS, AdonisJs, Tauri...)
+location: Bedroom (Remote)
+startDate: August 2015
+endDate: Today
+---

src/content/experiences/autoentrepreneur.md

@@ -0,0 +1,9 @@
+---
+title: FullStack Web and Software Development
+description: Development, design and illustration of personal computer projects. Learning new technologies and programming languages.
+company: ArtDanjProduction
+companyLink: https://www.arthurdanjou.fr
+location: Rueil-Malmaison, France
+startDate: September 2015
+endDate: Today
+---

src/content/experiences/erisium.md

@@ -0,0 +1,9 @@
+---
+title: Junior Developer
+description: Development and realization of IT projects designed by the Design team. Maintaining and updating projects in production. Fixed bugs present.
+company: Erisium
+companyLink: https://www.erisium.com/
+location: Remote
+startDate: February 2019
+endDate: November 2020
+---

src/content/experiences/idemia.md

@@ -0,0 +1,9 @@
+---
+title: Internship observation
+description: Discovery of the IT sector information technology and Datacenter. Discovery of different professions of the company.
+company: Idemia
+companyLink: https://idemia.com
+location: Courbevoie France
+startDate: June 2020
+endDate: June 2020
+---

src/content/experiences/la-salle-a-manger.md

@@ -0,0 +1,8 @@
+---
+title: Internship discovery
+description: Room cleaning and preparation, customer reception, order taking and room services.
+company: La Salle à manger
+location: Boulogne-Billancourt, France
+startDate: April 2018
+endDate: April 2018
+---

src/content/skills.json

@@ -2,134 +2,109 @@
   "body": [
     {
       "name": "TypeScript",
-      "icon": "skill-icons:typescript",
-      "color": "sky-500"
+      "icon": "skill-icons:typescript"
     },
     {
       "name": "Python",
       "icon": {
         "dark": "skill-icons:python-dark",
         "light": "skill-icons:python-light"
-      },
-      "color": "amber-500"
+      }
     },
     {
       "name": "Java",
       "icon": {
         "dark": "skill-icons:java-dark",
         "light": "skill-icons:java-light"
-      },
-      "color": "blue-400"
+      }
     },
     {
       "name": "Rust",
-      "icon": "skill-icons:rust",
-      "color": "orange-600"
+      "icon": "skill-icons:rust"
     },
     {
       "name": "HTML5",
-      "icon": "skill-icons:html",
-      "color": "orange-500"
+      "icon": "skill-icons:html"
     },
     {
       "name": "CSS3",
-      "icon": "skill-icons:css",
-      "color": "blue-500"
+      "icon": "skill-icons:css"
     },
     {
       "name": "Sass",
-      "icon": "skill-icons:sass",
-      "color": "rose-500"
+      "icon": "skill-icons:sass"
     },
     {
       "name": "VueJS 3",
       "icon": {
         "dark": "skill-icons:vuejs-dark",
         "light": "skill-icons:vuejs-light"
-      },
-      "color": "emerald-500"
+      }
     },
     {
       "name": "NuxtJS 3",
       "icon": {
         "dark": "skill-icons:nuxtjs-dark",
         "light": "skill-icons:nuxtjs-light"
-      },
-      "color": "emerald-500"
+      }
     },
     {
       "name": "TailwindCSS",
       "icon": {
         "dark": "skill-icons:tailwindcss-dark",
         "light": "skill-icons:tailwindcss-light"
-      },
-      "color": "cyan-300"
+      }
     },
     {
       "name": "ViteJS",
       "icon": {
         "dark": "skill-icons:vite-dark",
         "light": "skill-icons:vite-light"
-      },
-      "color": "amber-500"
+      }
     },
     {
       "name": "AdonisJS",
-      "icon": "skill-icons:adonis",
-      "color": "purple-500"
+      "icon": "skill-icons:adonis"
     },
     {
       "name": "MySQL",
       "icon": {
         "dark": "skill-icons:mysql-dark",
         "light": "skill-icons:mysql-light"
-      },
-      "color": "sky-300"
+      }
     },
     {
       "name": "Redis",
       "icon": {
         "dark": "skill-icons:redis-dark",
         "light": "skill-icons:redis-light"
-      },
-      "color": "red-500"
+      }
     },
     {
       "name": "RabbitMQ",
       "icon": {
         "dark": "skill-icons:rabbitmq-dark",
         "light": "skill-icons:rabbitmq-light"
-      },
-      "color": "orange-500"
+      }
     },
     {
       "name": "Docker",
-      "icon": "skill-icons:docker",
-      "color": "blue-600"
-    },
-    {
-      "name": "Kubernetes",
-      "icon": "skill-icons:kubernetes",
-      "color": "blue-600"
+      "icon": "skill-icons:docker"
     },
     {
       "name": "Git",
-      "icon": "skill-icons:git",
-      "color": "orange-500"
+      "icon": "skill-icons:git"
     },
     {
       "name": "Prisma.io",
-      "icon": "skill-icons:prisma",
-      "color": "sky-600"
+      "icon": "skill-icons:prisma"
     },
     {
       "name": "Supabase",
       "icon": {
         "dark": "skill-icons:supabase-dark",
         "light": "skill-icons:supabase-light"
-      },
-      "color": "green-500"
+      }
     }
   ]
-
 }

src/error.vue

@@ -2,10 +2,6 @@
 const error = useError()
 const appConfig = useAppConfig()
 const getColor = computed(() => appConfig.ui.primary)
-
-definePageMeta({
-  layout: 'default',
-})
 </script>
 
 <template>

src/pages/about.vue

@@ -1,5 +1,11 @@
-<script setup>
+<script setup lang="ts">
+useHead({
+  title: 'About me • Arthur Danjou',
+})
 
+const { data: skills } = await useSkills()
+const { data: educations } = await useEducations()
+const { data: experiences } = await useWorkExperiences()
 </script>
 
 <template>
@@ -33,6 +39,21 @@
           In addition to my studies and programming, I go to the gym every day to relax and stay in shape. Sport allows me to recharge my batteries and move on to other things.
         </GridSlot>
       </GridSection>
+      <GridSection v-if="skills" title="Skills">
+        <div class="grid grid-cols-3 md:grid-cols-4 gap-2">
+          <Skill
+            v-for="skill in skills.body"
+            :key="skill.name"
+            :skill="skill"
+          />
+        </div>
+      </GridSection>
+      <GridSection v-if="experiences" title="Work Experiences">
+        <Experience v-for="experience in experiences" :key="experience.title" :experience="experience" />
+      </GridSection>
+      <GridSection v-if="educations" title="Educations">
+        <Education v-for="education in educations" :key="education.title" :education="education" />
+      </GridSection>
     </div>
   </section>
 </template>