Working on prose icon

app/components/content/ProseIcon.vue

@@ -4,6 +4,10 @@ defineProps({
     type: String,
     required: true,
   },
+  color: {
+    type: String,
+    default: 'gray',
+  },
 })
 </script>
 
@@ -11,9 +15,12 @@ defineProps({
   <span class="inline-flex items-center">
     <UIcon
       class="mb-1 mr-1"
-      :name="icon"
+      :name="`i-logos:${icon}`"
     />
-    <span class="sofia font-medium underline-offset-2 underline decoration-neutral-300 dark:decoration-neutral-700">
+    <span
+      :class="`text-${color}-500 decoration-${color}-300`"
+      class="sofia font-medium underline-offset-2 underline"
+    >
       <slot />
     </span>
   </span>

content/home/en.md

@@ -13,26 +13,34 @@ concepts and theories behind these :hover-text{hover="My second passion 📱" te
 effectively.
 
 As a software engineer and mathematics student, my :hover-text{hover="My bag of knowledge 🎒" text="expertise"} covers
-:prose-icon[TypeScript]{icon="i-logos-typescript-icon"},
-:prose-icon[Vue]{icon="i-logos:vue"},
-:prose-icon[Nuxt]{icon="i-logos:nuxt-icon"},
-:prose-icon[Adonis]{icon="i-logos:adonisjs-icon"},
-:prose-icon[Java]{icon="i-logos:java"},
-:prose-icon[Python]{icon="i-logos:python"},
-:prose-icon[R]{icon="i-logos:r-lang"},
+:prose-icon[TypeScript]{icon="typescript-icon" color="blue"},
+:prose-icon[Vue]{icon="vue" color="green"},
+:prose-icon[Nuxt]{icon="nuxt-icon" color="emerald"},
+:prose-icon[Adonis]{icon="adonisjs-icon" color="purple"},
+:prose-icon[Java]{icon="java" color="red"},
+:prose-icon[Python]{icon="python" color="amber"},
+:prose-icon[R]{icon="r-lang" color="blue"},
 which enables me to :hover-text{hover="need to quickly understand the complexity of projects 🏎️" text="understand"} the
 different needs of mathematical projects and to propose the best solutions.
 I also learned other important technologies, such as
-:prose-icon[Docker]{icon="i-logos:docker-icon"},
-:prose-icon[Redis]{icon="i-logos:redis"},
-:prose-icon[MySQL]{icon="i-logos:mysql-icon"} and
-:prose-icon[Git]{icon="i-logos:git-icon"} to :hover-text{hover="All these technologies complement each other 🔗" text="complete"} my knowledge.
+:prose-icon[Docker]{icon="docker-icon" color="sky"},
+:prose-icon[Redis]{icon="redis" color="red"},
+:prose-icon[MySQL]{icon="mysql-icon" color="zinc"} and
+:prose-icon[Git]{icon="git-icon" color="orange"} to :hover-text{hover="All these technologies complement each
+other 🔗" text="
+complete"} my knowledge.
 
-I'm :hover-text{hover="As tech is always evolving, I need to be up-to-date 🖥️" position="top" text="constantly"} learning new things, from technology to finance and entrepreneurship. I love :hover-text{hover="I love sharing my knowledge and helping
-others 🫂" text="sharing"} my knowledge and learning new theorems and technologies. I'm a :hover-text{hover="I'm constantly looking to discover new things" text="curious"} person and eager to continue learning and growing throughout my life.
+I'm :hover-text{hover="As tech is always evolving, I need to be up-to-date 🖥️" position="top" text="constantly"}
+learning new things, from technology to finance and entrepreneurship. I love :hover-text{hover="I love sharing my
+knowledge and helping
+others 🫂" text="sharing"} my knowledge and learning new theorems and technologies. I'm a :hover-text{hover="I'm
+constantly looking to discover new things" text="curious"} person and eager to continue learning and growing throughout
+my life.
 
 As well as programming, I enjoy :hover-text{hover="Sport allows me to burn off energy 🏋️‍♂️" text="sport"} and
-:hover-text{hover="Travelling frees me and gets me away from it all ✈️" text="travelling"}. My passion, commitment and eagerness to learn and progress are the qualities that enable me to succeed in my :hover-text{hover="Career already begun and far from over 😎" text="career"} and :hover-text{hover="Only 2 years of study left 💪" text="studies"}.
+:hover-text{hover="Travelling frees me and gets me away from it all ✈️" text="travelling"}. My passion, commitment and
+eagerness to learn and progress are the qualities that enable me to succeed in my :hover-text{hover="Career already
+begun and far from over 😎" text="career"} and :hover-text{hover="Only 2 years of study left 💪" text="studies"}.
 
 ::stats
 ::

content/home/fr.md

@@ -8,25 +8,32 @@ Salut, je suis Arthur Danjou, étudiant en mathématiques à la faculté des sci
 Avec une :hover-text{hover="La technologie évolue beaucoup trop vite 🤯" position="top" text="compréhension profonde"}
 des technologies émergentes, je suis au cœur d'un domaine en pleine expansion. Ma formation en :hover-text{hover="Les
 mathématiques sont ma principale passion ∑" position="right" text="mathématiques"} me donne une longueur d'avance pour
-comprendre les concepts et les théories qui sous-tendent ces :hover-text{hover="Ma deuxième passion 📱" text="technologies"} et à les concevoir efficacement.
+comprendre les concepts et les théories qui sous-tendent ces :hover-text{hover="Ma deuxième passion 📱" text="
+technologies"} et à les concevoir efficacement.
 
-En tant qu'ingénieur logiciel et étudiant en mathématiques, mon :hover-text{hover="Mon sac de connaissances 🎒" text="expertise"} couvre
-:prose-icon[TypeScript]{icon="i-logos-typescript-icon"},
-:prose-icon[Vue]{icon="i-logos:vue"},
-:prose-icon[Nuxt]{icon="i-logos:nuxt-icon"},
-:prose-icon[Adonis]{icon="i-logos:adonisjs-icon"},
-:prose-icon[Java]{icon="i-logos:java"},
-:prose-icon[Python]{icon="i-logos:python"},
-:prose-icon[R]{icon="i-logos:r-lang"},
+En tant qu'ingénieur logiciel et étudiant en mathématiques, mon :hover-text{hover="Mon sac de connaissances 🎒" text="
+expertise"} couvre
+:prose-icon[TypeScript]{icon="typescript-icon" color="blue"},
+:prose-icon[Vue]{icon="vue" color="green"},
+:prose-icon[Nuxt]{icon="nuxt-icon" color="emerald"},
+:prose-icon[Adonis]{icon="adonisjs-icon" color="purple"},
+:prose-icon[Java]{icon="java" color="red"},
+:prose-icon[Python]{icon="python" color="amber"},
+:prose-icon[R]{icon="r-lang" color="blue"},
 ce qui me permet de :hover-text{hover="Comprendre rapidement la complexité des projets 🏎️" text="comprendre"} les
 différents besoins des projets mathématiques et de proposer les meilleures solutions.
 J'ai également appris d'autres technologies importantes, telles que
-:prose-icon[Docker]{icon="i-logos:docker-icon"},
-:prose-icon[Redis]{icon="i-logos:redis"},
-:prose-icon[MySQL]{icon="i-logos:mysql-icon"} et
-:prose-icon[Git]{icon="i-logos:git-icon"} pour :hover-text{hover="Toutes ces technologies se complètent 🔗" text="compléter"} mes connaissances.
+:prose-icon[Docker]{icon="docker-icon" color="sky"},
+:prose-icon[Redis]{icon="redis" color="red"},
+:prose-icon[MySQL]{icon="mysql-icon" color="zinc"} et
+:prose-icon[Git]{icon="git-icon" color="orange"} pour :hover-text{hover="Toutes ces technologies se complètent 🔗" text="
+compléter"} mes connaissances.
 
-Je suis :hover-text{hover="Je dois toujours chercher à être à jour 🖥️" position="top" text="constamment"} dans l'apprentissage de nouvelles choses, de la technologie à la finance en passant par l'entrepreneuriat. J'aime :hover-text{hover="J'aime partager et aider les autres 🫂" text="partager"} mes connaissances et apprendre de nouveaux théorèmes et technologies. Je suis une personne :hover-text{hover="Je cherche à découvrir de nouvelles choses" text="curieuse"} et désireuse de continuer à apprendre et à grandir tout au long de ma vie.
+Je suis :hover-text{hover="Je dois toujours chercher à être à jour 🖥️" position="top" text="constamment"} dans
+l'apprentissage de nouvelles choses, de la technologie à la finance en passant par l'entrepreneuriat. J'aime
+:hover-text{hover="J'aime partager et aider les autres 🫂" text="partager"} mes connaissances et apprendre de nouveaux
+théorèmes et technologies. Je suis une personne :hover-text{hover="Je cherche à découvrir de nouvelles choses" text="
+curieuse"} et désireuse de continuer à apprendre et à grandir tout au long de ma vie.
 
 Outre la programmation, j'aime le :hover-text{hover="Le sport me permet de dépenser de l'énergie 🏋️‍♂️" text="sport"}
 et :hover-text{hover="Les voyages me libèrent et m'évadent ✈️" text="voyager"}.