From 3345e399b1d772dad8d4f230bd4d135883c1686c Mon Sep 17 00:00:00 2001
From: Nemesis <contact@keziahmoselle.fr>
Date: Thu, 16 Feb 2023 18:57:45 +0100
Subject: [PATCH] fix: ability and skill icon

---
 src/components/Ability.tsx | 23 +++++++++++++++--------
 src/components/Skill.tsx   | 14 ++++++++------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/Ability.tsx b/src/components/Ability.tsx
index 7ff025c6..ae34acff 100644
--- a/src/components/Ability.tsx
+++ b/src/components/Ability.tsx
@@ -70,10 +70,19 @@ export default function Ability({
             href ? "cursor-pointer hover:scale-105 transition transform" : ""
           )}
         >
-          <SVG
-            src="/decorations/frame-ability.svg"
-            className={classNames(isSmall ? "h-12 w-12" : "h-16 w-16")}
-          />
+          <div
+            className={classNames(
+              "relative",
+              isSmall ? "h-12 w-12" : "h-16 w-16"
+            )}
+          >
+            <SVG
+              height={isSmall ? "48" : "64"}
+              width={isSmall ? "48" : "64"}
+              src="/decorations/frame-ability.svg"
+              className="absolute inset-0"
+            />
+          </div>
           <div
             className={classNames(
               "absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center",
@@ -84,11 +93,9 @@ export default function Ability({
           </div>
 
           {href && !fullLink && (
-            (<Link href={href} passHref className="absolute inset-0 z-10">
-
+            <Link href={href} passHref className="absolute inset-0 z-10">
               <span className="sr-only">See ability {name}</span>
-
-            </Link>)
+            </Link>
           )}
         </div>
         <div className="flex flex-col items-start">
diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
index bc4cd7e8..15cd2de4 100644
--- a/src/components/Skill.tsx
+++ b/src/components/Skill.tsx
@@ -47,12 +47,14 @@ export default function Skill({
       </span>
       <div className="flex flex-col md:flex-row items-center">
         <div className="relative mr-4">
-          <SVG
-            height="96"
-            width="96"
-            src="/decorations/frame.svg"
-            className="h-24 w-24"
-          />
+          <div className="relative h-24 w-24">
+            <SVG
+              height="96"
+              width="96"
+              src="/decorations/frame.svg"
+              className="absolute inset-0"
+            />
+          </div>
           <div className="h-16 w-16 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
             <Image
               layout="fixed"