feat: add Curriculum vitae

components/Header/Language/LanguageFlag.tsx

@@ -10,6 +10,7 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
   return (
     <>
       <Image
+        quality={100}
         width={35}
         height={35}
         src={`/images/languages/${language}.svg`}

components/Header/Language/index.tsx

@@ -47,7 +47,7 @@ export const Language: React.FC = () => {
       <ul
         data-cy='languages-list'
         className={classNames(
-          'absolute top-14 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-light dark:bg-black dark:shadow-dark',
+          'absolute top-14 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
           { hidden: hiddenMenu }
         )}
       >

components/Header/index.tsx

@@ -17,6 +17,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
         <a>
           <div className='flex items-center justify-center'>
             <Image
+              quality={100}
               width={60}
               height={60}
               src='/images/divlo_icon_small.png'

components/Portfolio/PortfolioItem.tsx

@@ -23,6 +23,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
       >
         <div className='flex justify-center'>
           <Image
+            quality={100}
             className='transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
             width={300}
             height={300}

components/Profile/ProfileDescriptionBottom.tsx

@@ -1,12 +1,23 @@
-import Translation from 'next-translate/Trans'
+import useTranslation from 'next-translate/useTranslation'
 
 export const ProfileDescriptionBottom: React.FC = () => {
+  const { t, lang } = useTranslation()
+
   return (
     <p className='mt-8 mb-8 text-base font-normal text-gray dark:text-gray-dark'>
-      <Translation
-        i18nKey='home:about.description-bottom'
-        components={[<br key='break' />]}
-      />
+      {t('home:about.description-bottom')}
+      {lang === 'fr' && (
+        <>
+          <br />
+          <br />
+          <a
+            href='/curriculum-vitae.html'
+            className='text-yellow hover:underline dark:text-yellow-dark'
+          >
+            Mon Curriculum vitæ
+          </a>
+        </>
+      )}
     </p>
   )
 }

components/Profile/ProfileList/ProfileItem.tsx

@@ -9,10 +9,10 @@ export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
 
   return (
     <li className='mb-3 before:table after:clear-both after:table'>
-      <strong className='float-left block w-28 text-xs font-bold uppercase text-black dark:text-white'>
+      <strong className='float-left block w-28 text-sm font-bold text-black dark:text-white'>
         {title}
       </strong>
-      <span className='profile-list__item-info ml-0 mb-4 block text-sm font-normal text-gray dark:text-gray-dark sm:mb-0 sm:ml-32'>
+      <span className='ml-0 mb-4 block text-sm font-normal text-gray dark:text-gray-dark sm:mb-0 sm:ml-32'>
         {link != null ? (
           <a
             className='text-gray hover:underline dark:text-gray-dark'

components/Profile/ProfileList/index.tsx

@@ -7,6 +7,7 @@ export const ProfileList: React.FC = () => {
 
   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='31/03/2003' />
       <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
       <ProfileItem

components/Profile/ProfileLogo.tsx

@@ -5,7 +5,7 @@ import DivloLogo from 'public/images/divlo_logo.png'
 export const ProfileLogo: React.FC = () => {
   return (
     <div className='max-h-[370px] max-w-[370px] px-2 py-6'>
-      <Image src={DivloLogo} alt='Divlo' />
+      <Image quality={100} src={DivloLogo} alt='Divlo' />
     </div>
   )
 }

components/Skills/Skill.tsx

@@ -28,7 +28,7 @@ export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
       rel='noopener noreferrer'
     >
       <div className='text-center'>
-        <Image width={60} height={60} alt={skill} src={image} />
+        <Image quality={100} width={60} height={60} alt={skill} src={image} />
         <p className='mt-1'>{skill}</p>
       </div>
     </a>

components/design/ShadowContainer.tsx

@@ -6,26 +6,14 @@ export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
   const { children, className, ...rest } = props
 
   return (
-    <>
-      <div
-        className={classNames(
-          'shadow-container mb-12 h-full max-w-full break-words',
-          className
-        )}
-        {...rest}
-      >
-        {children}
-      </div>
-
-      <style jsx>
-        {`
-          .shadow-container {
-            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
-            border: 1px solid black;
-            border-radius: 1rem;
-          }
-        `}
-      </style>
-    </>
+    <div
+      className={classNames(
+        'mb-12 h-full max-w-full break-words rounded-2xl border border-solid border-[#000] shadow-light dark:shadow-dark ',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
   )
 }