fix: improve wording

components/Interests/InterestParagraph.tsx

@@ -1,8 +1,17 @@
 import htmlParser from "html-react-parser"
+import { faCode, faMicrochip } from "@fortawesome/free-solid-svg-icons"
+import { faGit } from "@fortawesome/free-brands-svg-icons"
+
+export const InterestsIcons = {
+  code: faCode,
+  "open-source": faGit,
+  "high-tech": faMicrochip,
+} as const
 
 export interface InterestParagraphProps {
   title: string
   description: string
+  id: keyof typeof InterestsIcons
 }
 
 export const InterestParagraph = (

components/Interests/InterestsList/index.tsx

@@ -1,18 +1,28 @@
-import { faCode, faMicrochip } from "@fortawesome/free-solid-svg-icons"
-import { faGit } from "@fortawesome/free-brands-svg-icons"
+import { getI18n } from "@/i18n/i18n.server"
 
+import {
+  InterestsIcons,
+  type InterestParagraphProps,
+} from "../InterestParagraph"
 import { InterestItem } from "./InterestItem"
 
 export const InterestsList = (): JSX.Element => {
+  const i18n = getI18n()
+
+  let paragraphs = i18n.translate<InterestParagraphProps[]>(
+    "home.interests.paragraphs",
+  )
+  if (!Array.isArray(paragraphs)) {
+    paragraphs = []
+  }
+
   return (
     <div className="my-4 flex justify-center">
       <ul className="m-0 flex w-96 list-none justify-around p-0">
-        <InterestItem title="Developer Full Stack" fontAwesomeIcon={faCode} />
-        <InterestItem
-          title="Passionate about High-Tech"
-          fontAwesomeIcon={faMicrochip}
-        />
-        <InterestItem title="Open-Source enthusiast" fontAwesomeIcon={faGit} />
+        {paragraphs.map(({ title, id }) => {
+          const icon = InterestsIcons[id]
+          return <InterestItem key={id} title={title} fontAwesomeIcon={icon} />
+        })}
       </ul>
     </div>
   )

components/Portfolio/PortfolioItem.tsx

@@ -35,7 +35,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
           <h3 className="my-6 text-xl font-semibold text-yellow dark:text-yellow-dark">
             {title}
           </h3>
-          <p className="my-6">{description}</p>
+          <p className="my-6 mx-2">{description}</p>
         </div>
       </a>
     </ShadowContainer>

components/Profile/ProfileDescriptionBottom.tsx

@@ -1,23 +1,21 @@
+import htmlParser from "html-react-parser"
+
 import { getI18n } from "@/i18n/i18n.server"
 
 export const ProfileDescriptionBottom = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
-    <p className="mb-8 mt-8 text-base font-normal text-gray dark:text-gray-dark">
-      {i18n.translate("home.about.description-bottom")}
-      {i18n.locale === "fr-FR" ? (
-        <>
-          <br />
-          <br />
-          <a
-            href="/curriculum-vitae/index.html"
-            className="text-yellow hover:underline dark:text-yellow-dark"
-          >
-            Curriculum vitæ
-          </a>
-        </>
-      ) : null}
-    </p>
+    <div className="my-6 text-gray dark:text-gray-dark text-center max-w-md text-base">
+      <p>{htmlParser(i18n.translate("home.about.description-bottom"))}</p>
+
+      <br />
+      <a
+        href="/curriculum-vitae/index.html"
+        className="text-yellow hover:underline dark:text-yellow-dark"
+      >
+        Curriculum vitæ ({i18n.translate("common.fr-FR")})
+      </a>
+    </div>
   )
 }