mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-14 12:14:42 +01:00
About page
This commit is contained in:
@@ -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: {
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
29
src/components/resume/DateTag.vue
Normal file
29
src/components/resume/DateTag.vue
Normal 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>
|
||||
23
src/components/resume/Education.vue
Normal file
23
src/components/resume/Education.vue
Normal 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>
|
||||
39
src/components/resume/Experience.vue
Normal file
39
src/components/resume/Experience.vue
Normal 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>
|
||||
23
src/components/resume/Skill.vue
Normal file
23
src/components/resume/Skill.vue
Normal 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>
|
||||
7
src/content/educations/baccalaureat.md
Normal file
7
src/content/educations/baccalaureat.md
Normal 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
|
||||
---
|
||||
7
src/content/educations/brevet.md
Normal file
7
src/content/educations/brevet.md
Normal 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
|
||||
---
|
||||
7
src/content/educations/degree.md
Normal file
7
src/content/educations/degree.md
Normal 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
|
||||
---
|
||||
7
src/content/educations/self-taught.md
Normal file
7
src/content/educations/self-taught.md
Normal 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
|
||||
---
|
||||
9
src/content/experiences/autoentrepreneur.md
Normal file
9
src/content/experiences/autoentrepreneur.md
Normal 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
|
||||
---
|
||||
9
src/content/experiences/erisium.md
Normal file
9
src/content/experiences/erisium.md
Normal 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
|
||||
---
|
||||
9
src/content/experiences/idemia.md
Normal file
9
src/content/experiences/idemia.md
Normal 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
|
||||
---
|
||||
8
src/content/experiences/la-salle-a-manger.md
Normal file
8
src/content/experiences/la-salle-a-manger.md
Normal 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
|
||||
---
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
@@ -2,10 +2,6 @@
|
||||
const error = useError()
|
||||
const appConfig = useAppConfig()
|
||||
const getColor = computed(() => appConfig.ui.primary)
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -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>
|
||||
|
||||
15
yarn.lock
15
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"
|
||||
|
||||
Reference in New Issue
Block a user