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/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;

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"

src/styles/UI/AnimatedButton.scss → 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: '';