feat: skills card dynamic years function

components/SkillsMain.tsx

@@ -4,15 +4,16 @@ import js from '@/public/icons/svg/skills/js.svg'
 import react from '@/public/icons/svg/skills/react.svg'
 import ts from '@/public/icons/svg/skills/ts.svg'
 import { ID_SKILLS_MAIN } from '@/utils/constants'
+import { getYearsExperience } from '@/utils/getYearsExperience'
 
 const SkillsSection1 = () => {
   return (
     <div className="mb-4 flex justify-center md:mb-8 md:items-center lg:mb-0 lg:mr-8">
       <Card
-        src={js}
-        alt="JS"
+        imgSrc={js}
+        imgAlt="JS"
         title="JavaScript"
-        titleHighlight="5 years"
+        titleYears={`${getYearsExperience(2019)}`}
         description="Essential for creating modern interactive web applications."
       />
     </div>
@@ -24,19 +25,19 @@ const SkillsSection2 = () => {
     <div className="flex flex-col items-center justify-center md:flex-row lg:mr-0 lg:flex-col">
       <div className="mb-4 mr-0 md:mb-0 md:mr-8 lg:mb-8 lg:mr-0">
         <Card
-          src={ts}
-          alt="TS"
+          imgSrc={ts}
+          imgAlt="TS"
           title="TypeScript"
-          titleHighlight="3 years"
+          titleYears={`${getYearsExperience(2021)}`}
           description="Ensuring type safety, enhancing code reliability and scalability."
         />
       </div>
       <div>
         <Card
-          src={react}
-          alt="React"
+          imgSrc={react}
+          imgAlt="React"
           title="React"
-          titleHighlight="4 years"
+          titleYears={`${getYearsExperience(2020)}`}
           description="Great for components that are reusable and easy to maintain."
         />
       </div>

components/shared/Card.tsx

@@ -1,21 +1,21 @@
 import Image, { StaticImageData } from 'next/image'
 
 type Props = {
-  src: StaticImageData
-  alt: string
+  imgSrc: StaticImageData
+  imgAlt: string
   title: string
+  titleYears: string
   description: string
-  titleHighlight: string
 }
 
-const Card = ({ src, alt, title, titleHighlight, description }: Props) => (
+const Card = ({ imgSrc, imgAlt, title, titleYears, description }: Props) => (
   <div className="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md">
-    <Image src={src} alt={alt} className="mb-3" />
+    <Image src={imgSrc} alt={imgAlt} className="mb-3" />
     <div className="mb-2 text-2xl font-semibold tracking-tight text-neutral-900">
       {title}{' '}
-      {titleHighlight && (
+      {titleYears && (
         <span className="text-neutral-500">
-          {' · '} {titleHighlight}
+          {' · '} {titleYears} years
         </span>
       )}
     </div>

utils/getYearsExperience.ts

@@ -0,0 +1,3 @@
+export const getYearsExperience = (startYear: number): number => {
+  return new Date().getFullYear() - startYear
+}