fix: calculate age client side so it updates "automatically" (not only on rebuild)

components/Head.tsx

@@ -3,7 +3,7 @@ import NextHead from 'next/head'
 interface HeadProps {
   title?: string
   image?: string
-  description: string
+  description?: string
   url?: string
 }
 
@@ -11,7 +11,7 @@ export const Head: React.FC<HeadProps> = (props) => {
   const {
     title = 'Divlo',
     image = 'https://divlo.fr/images/icons/icon-96x96.png',
-    description,
+    description = 'Divlo - Developer Full Stack Junior • Passionate about High-Tech',
     url = 'https://divlo.fr/'
   } = props
 

components/Profile/ProfileList/index.tsx

@@ -1,29 +1,23 @@
 import useTranslation from 'next-translate/useTranslation'
+import { useMemo } from 'react'
 
-import {
-  DIVLO_BIRTHDAY_DAY,
-  DIVLO_BIRTHDAY_MONTH,
-  DIVLO_BIRTHDAY_YEAR
-} from 'utils/getAge'
+import { DIVLO_BIRTHDAY, DIVLO_BIRTHDAY_DATE, getAge } from 'utils/getAge'
 
 import { ProfileItem } from './ProfileItem'
 
-export interface ProfileListProps {
-  age: number
-}
-
-export const ProfileList: React.FC<ProfileListProps> = (props) => {
-  const { age } = props
+export const ProfileList: React.FC = () => {
   const { t } = useTranslation('home')
 
+  const age = useMemo(() => {
+    return getAge(DIVLO_BIRTHDAY)
+  }, [])
+
   return (
     <ul className='m-0 list-none p-0'>
       <ProfileItem title={t('home:about.full-name')} value='Théo LUDWIG' />
       <ProfileItem
         title={t('home:about.birth-date')}
-        value={`${DIVLO_BIRTHDAY_DAY}/${DIVLO_BIRTHDAY_MONTH}/${DIVLO_BIRTHDAY_YEAR} (${age} ${t(
-          'home:about.years-old'
-        )})`}
+        value={`${DIVLO_BIRTHDAY_DATE} (${age} ${t('home:about.years-old')})`}
       />
       <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
       <ProfileItem

components/Profile/index.tsx

@@ -3,19 +3,13 @@ import { ProfileInformation } from './ProfileInfo'
 import { ProfileList } from './ProfileList'
 import { ProfileLogo } from './ProfileLogo'
 
-export interface ProfileProps {
-  age: number
-}
-
-export const Profile: React.FC<ProfileProps> = (props) => {
-  const { age } = props
-
+export const Profile: React.FC = () => {
   return (
     <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
       <ProfileLogo />
       <div>
         <ProfileInformation />
-        <ProfileList age={age} />
+        <ProfileList />
         <ProfileDescriptionBottom />
       </div>
     </div>