From 51450c632cd2c4018ade8b9174cd3c3201fac6e4 Mon Sep 17 00:00:00 2001
From: ITurres <emanueliturres.co@gmail.com>
Date: Wed, 13 Mar 2024 17:07:00 -0300
Subject: [PATCH] Refactor: Rename 'AnimatedButton' to 'ExpertiseLinks' UI
 component

- Enhance accessibility.
- Rename component import and usage in 'AboutPage'.
- Rename style file and class names.
---
 src/components/UI/AnimatedButton.tsx          | 32 ---------------
 src/components/UI/ExpertiseLinks.tsx          | 41 +++++++++++++++++++
 src/components/pages/AboutPage.tsx            |  4 +-
 ...nimatedButton.scss => ExpertiseLinks.scss} |  3 +-
 4 files changed, 45 insertions(+), 35 deletions(-)
 delete mode 100644 src/components/UI/AnimatedButton.tsx
 create mode 100644 src/components/UI/ExpertiseLinks.tsx
 rename src/styles/UI/{AnimatedButton.scss => ExpertiseLinks.scss} (92%)

diff --git a/src/components/UI/AnimatedButton.tsx b/src/components/UI/AnimatedButton.tsx
deleted file mode 100644
index a52d527..0000000
--- a/src/components/UI/AnimatedButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import '../../styles/UI/AnimatedButton.scss';
-
-const AnimatedButton: React.FC = () => (
-  <button
-    type="button"
-    className="animated-button my-btn"
-    aria-label="navigates to expertise page"
-  >
-    <Link to="/homepage/expertise" className="text-hue-rotate">
-      languages
-    </Link>
-    <Link to="/homepage/expertise" className="text-hue-rotate">
-      frameworks
-    </Link>
-    <Link to="/homepage/expertise" className="text-hue-rotate">
-      skills
-    </Link>
-    <a
-      href="https://docs.google.com/document/d/1vfOALwpILAh8Jn29zV6aO6jwuGZQwLyYjRb3_YKZfQ0/edit?usp=sharing"
-      className="text-hue-rotate"
-      target="_blank"
-      rel="noreferrer noopener"
-    >
-      resume
-    </a>
-  </button>
-);
-
-export default AnimatedButton;
diff --git a/src/components/UI/ExpertiseLinks.tsx b/src/components/UI/ExpertiseLinks.tsx
new file mode 100644
index 0000000..a7d05a2
--- /dev/null
+++ b/src/components/UI/ExpertiseLinks.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import '../../styles/UI/ExpertiseLinks.scss';
+
+const ExpertiseLinks: React.FC = () => (
+  <div className="expertise-links">
+    <Link
+      to="/homepage/expertise"
+      className="text-hue-rotate"
+      aria-label="navigate to expertise section"
+    >
+      languages
+    </Link>
+    <Link
+      to="/homepage/expertise"
+      className="text-hue-rotate"
+      aria-label="navigate to expertise section"
+    >
+      frameworks
+    </Link>
+    <Link
+      to="/homepage/expertise"
+      className="text-hue-rotate"
+      aria-label="navigate to expertise section"
+    >
+      skills
+    </Link>
+    <a
+      href="https://docs.google.com/document/d/1vfOALwpILAh8Jn29zV6aO6jwuGZQwLyYjRb3_YKZfQ0/edit?usp=sharing"
+      className="text-hue-rotate"
+      aria-label="navigate to Arthur's resume which is hosted on Google Docs"
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      resume
+    </a>
+  </div>
+);
+
+export default ExpertiseLinks;
diff --git a/src/components/pages/AboutPage.tsx b/src/components/pages/AboutPage.tsx
index a44e522..28804ac 100644
--- a/src/components/pages/AboutPage.tsx
+++ b/src/components/pages/AboutPage.tsx
@@ -8,7 +8,7 @@ import profileImage from '../../assets/images/profile/profile.png';
 import homepageDotsImage from '../../assets/images/bg/homepage-dots-img.png';
 import '../../styles/pages/AboutPage.scss';
 
-import AnimatedButton from '../UI/AnimatedButton.tsx';
+import ExpertiseLinks from '../UI/ExpertiseLinks.tsx';
 
 import setPageTitle from '../../utils/setPageTitle.ts';
 
@@ -42,7 +42,7 @@ const AboutPage: React.FC = () => {
           with diverse teams worldwide.
         </p>
 
-        <AnimatedButton />
+        <ExpertiseLinks />
 
         <Link
           to="/homepage/contact"
diff --git a/src/styles/UI/AnimatedButton.scss b/src/styles/UI/ExpertiseLinks.scss
similarity index 92%
rename from src/styles/UI/AnimatedButton.scss
rename to src/styles/UI/ExpertiseLinks.scss
index d948cfe..48e6abf 100644
--- a/src/styles/UI/AnimatedButton.scss
+++ b/src/styles/UI/ExpertiseLinks.scss
@@ -4,7 +4,7 @@ $color1-hover: colors.$color1;
 $color2-hover: colors.$color2;
 $dark: colors.$dark;
 
-.animated-button {
+.expertise-links {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -22,6 +22,7 @@ $dark: colors.$dark;
   max-width: 550px;
   width: 100%;
   margin-bottom: 0.7rem;
+  cursor: pointer; // * Even though the element is not a button, emulate the button hover effect.
 
   &::before {
     content: '';