From e69cc1d91f431e41f49c76f6fbf146eccccf2ddc Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Fri, 18 Aug 2023 15:33:31 +0200
Subject: [PATCH] About page

---
 nuxt.config.ts                               |  2 +
 package.json                                 |  1 +
 src/components/content/GridSection.vue       |  5 +-
 src/components/resume/DateTag.vue            | 29 +++++++++
 src/components/resume/Education.vue          | 23 +++++++
 src/components/resume/Experience.vue         | 39 ++++++++++++
 src/components/resume/Skill.vue              | 23 +++++++
 src/content/educations/baccalaureat.md       |  7 +++
 src/content/educations/brevet.md             |  7 +++
 src/content/educations/degree.md             |  7 +++
 src/content/educations/self-taught.md        |  7 +++
 src/content/experiences/autoentrepreneur.md  |  9 +++
 src/content/experiences/erisium.md           |  9 +++
 src/content/experiences/idemia.md            |  9 +++
 src/content/experiences/la-salle-a-manger.md |  8 +++
 src/content/skills.json                      | 63 ++++++--------------
 src/error.vue                                |  4 --
 src/pages/about.vue                          | 23 ++++++-
 yarn.lock                                    | 15 +++++
 19 files changed, 240 insertions(+), 50 deletions(-)
 create mode 100644 src/components/resume/DateTag.vue
 create mode 100644 src/components/resume/Education.vue
 create mode 100644 src/components/resume/Experience.vue
 create mode 100644 src/components/resume/Skill.vue
 create mode 100644 src/content/educations/baccalaureat.md
 create mode 100644 src/content/educations/brevet.md
 create mode 100644 src/content/educations/degree.md
 create mode 100644 src/content/educations/self-taught.md
 create mode 100644 src/content/experiences/autoentrepreneur.md
 create mode 100644 src/content/experiences/erisium.md
 create mode 100644 src/content/experiences/idemia.md
 create mode 100644 src/content/experiences/la-salle-a-manger.md

diff --git a/nuxt.config.ts b/nuxt.config.ts
index def85e7..17eef67 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,6 +16,7 @@ export default defineNuxtConfig({
     '@nuxt/devtools',
     '@vueuse/nuxt',
     '@nuxt/content',
+    'nuxt-icon',
   ],
 
   colorMode: {
@@ -28,6 +29,7 @@ export default defineNuxtConfig({
   components: [
     'components/',
     'components/header',
+    'components/resume',
   ],
 
   tailwindcss: {
diff --git a/package.json b/package.json
index bd4fd0f..7199263 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@vueuse/nuxt": "10.3.0",
     "eslint": "8.47.0",
     "nuxt": "3.6.5",
+    "nuxt-icon": "^0.5.0",
     "prisma": "5.1.1",
     "typescript": "5.1.6"
   }
diff --git a/src/components/content/GridSection.vue b/src/components/content/GridSection.vue
index dc20277..7509de2 100644
--- a/src/components/content/GridSection.vue
+++ b/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">
diff --git a/src/components/resume/DateTag.vue b/src/components/resume/DateTag.vue
new file mode 100644
index 0000000..d0a1eb8
--- /dev/null
+++ b/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>
diff --git a/src/components/resume/Education.vue b/src/components/resume/Education.vue
new file mode 100644
index 0000000..775d7d8
--- /dev/null
+++ b/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>
diff --git a/src/components/resume/Experience.vue b/src/components/resume/Experience.vue
new file mode 100644
index 0000000..2359733
--- /dev/null
+++ b/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>
diff --git a/src/components/resume/Skill.vue b/src/components/resume/Skill.vue
new file mode 100644
index 0000000..fbd862c
--- /dev/null
+++ b/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>
diff --git a/src/content/educations/baccalaureat.md b/src/content/educations/baccalaureat.md
new file mode 100644
index 0000000..6be8c8c
--- /dev/null
+++ b/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
+---
diff --git a/src/content/educations/brevet.md b/src/content/educations/brevet.md
new file mode 100644
index 0000000..53bd7fb
--- /dev/null
+++ b/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
+---
diff --git a/src/content/educations/degree.md b/src/content/educations/degree.md
new file mode 100644
index 0000000..24439ab
--- /dev/null
+++ b/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
+---
diff --git a/src/content/educations/self-taught.md b/src/content/educations/self-taught.md
new file mode 100644
index 0000000..7963eda
--- /dev/null
+++ b/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
+---
diff --git a/src/content/experiences/autoentrepreneur.md b/src/content/experiences/autoentrepreneur.md
new file mode 100644
index 0000000..8846e71
--- /dev/null
+++ b/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
+---
diff --git a/src/content/experiences/erisium.md b/src/content/experiences/erisium.md
new file mode 100644
index 0000000..1316fe6
--- /dev/null
+++ b/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
+---
diff --git a/src/content/experiences/idemia.md b/src/content/experiences/idemia.md
new file mode 100644
index 0000000..6bbc739
--- /dev/null
+++ b/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
+---
diff --git a/src/content/experiences/la-salle-a-manger.md b/src/content/experiences/la-salle-a-manger.md
new file mode 100644
index 0000000..3d038c8
--- /dev/null
+++ b/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
+---
diff --git a/src/content/skills.json b/src/content/skills.json
index 1d94e28..d90f515 100644
--- a/src/content/skills.json
+++ b/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"
+      }
     }
   ]
-
 }
diff --git a/src/error.vue b/src/error.vue
index 9d813cf..9c029ca 100644
--- a/src/error.vue
+++ b/src/error.vue
@@ -2,10 +2,6 @@
 const error = useError()
 const appConfig = useAppConfig()
 const getColor = computed(() => appConfig.ui.primary)
-
-definePageMeta({
-  layout: 'default',
-})
 </script>
 
 <template>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 0a0f5b9..63de9e8 100644
--- a/src/pages/about.vue
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index bfee724..e36d222 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -905,6 +905,13 @@
     kolorist "^1.7.0"
     local-pkg "^0.4.3"
 
+"@iconify/vue@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@iconify/vue/-/vue-4.1.1.tgz#c143c2973a4990ba2b47b766f80a9bca97937305"
+  integrity sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz"
@@ -6988,6 +6995,14 @@ nuxi@3.6.5:
   optionalDependencies:
     fsevents "~2.3.2"
 
+nuxt-icon@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/nuxt-icon/-/nuxt-icon-0.5.0.tgz#cdeeba91cc89160d08c3d176628a0e459eb9486c"
+  integrity sha512-ND4yh8kW4VyIbORP3cWjgVrOAvy6QSDFDTJltakdqmxVfVysNIs/bx2NzlkHeR1EOS8E/jVcemfTPmRsJ7WUVw==
+  dependencies:
+    "@iconify/vue" "^4.1.1"
+    "@nuxt/kit" "^3.6.5"
+
 nuxt@3.6.5, nuxt@^3.6.5:
   version "3.6.5"
   resolved "https://registry.npmjs.org/nuxt/-/nuxt-3.6.5.tgz"