fix: add hover effects

blog/BlogPosts.tsx

@@ -22,7 +22,7 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
               locale="en"
               data-cy={post.slug}
             >
-              <ShadowContainer className="cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2">
+              <ShadowContainer className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02]">
                 <h2
                   data-cy="blog-post-title"
                   className="text-xl font-semibold text-primary dark:text-primary-dark"

components/Header/index.tsx

@@ -14,8 +14,11 @@ export const Header = (): JSX.Element => {
 
   return (
     <header className="sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black">
-      <Link href="/">
-        <h1 className="flex items-center justify-center">
+      <h1>
+        <Link
+          href="/"
+          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-105"
+        >
           <Image
             quality={100}
             className="size-16"
@@ -26,8 +29,8 @@ export const Header = (): JSX.Element => {
           <strong className="ml-1 hidden font-headline font-semibold text-primary dark:text-primary-dark sm:block sm:text-xl">
             Théo LUDWIG
           </strong>
-        </h1>
-      </Link>
+        </Link>
+      </h1>
       <div className="flex justify-between">
         <div className="flex flex-col items-center justify-center px-6">
           <Link

components/OpenSource/Repository.tsx

@@ -11,7 +11,7 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
   const { name, description, href } = props
 
   return (
-    <ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-transform duration-200 ease-in-out hover:-translate-y-2">
+    <ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.03]">
       <a href={href} target="_blank" rel="noopener noreferrer">
         <div className="flex">
           <GitHubIcon className="mr-2 h-6" />

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -13,7 +13,7 @@ export const SocialMediaItem = (props: SocialMediaItemProps): JSX.Element => {
         aria-label={ariaLabel}
         target="_blank"
         rel="noopener noreferrer"
-        className="relative inline-block bg-transparent"
+        className="relative inline-block bg-transparent transition-all duration-300 ease-in-out hover:scale-110"
       >
         {children}
       </a>