About page

This commit is contained in:
2023-08-18 15:33:31 +02:00
parent 6dc6002061
commit e69cc1d91f
19 changed files with 240 additions and 50 deletions

View File

@@ -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: {

View File

@@ -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"
}

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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
---

View File

@@ -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
---

View File

@@ -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
---

View File

@@ -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
---

View File

@@ -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
---

View File

@@ -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
---

View File

@@ -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
---

View File

@@ -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
---

View File

@@ -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"
}
}
]
}

View File

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

View File

@@ -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>

View File

@@ -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"