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