Refactor: Move homepage to about page

- Update 'App' route to use a wildcard in the 'homepage' path.
- Rename the 'HomePage' component and stylesheet to 'AboutPage'.
- Update classnames in 'AboutPage' to match the new naming convention.

src/App.tsx

@@ -4,11 +4,11 @@ import { Routes, Route } from 'react-router-dom';
 import AccessPage from './components/pages/AccessPage.tsx';
 import HomePage from './components/pages/HomePage.tsx';
 
-const App = () => (
+const App: React.FC = () => (
   <>
     <Routes>
       <Route path="/" element={<AccessPage />} />
-      <Route path="homepage" element={<HomePage />} />
+      <Route path="homepage/*" element={<HomePage />} />
     </Routes>
   </>
 );

src/components/pages/AboutPage.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+
+import profileImage from '../../assets/images/profile/profile.png';
+import homepageDotsImage from '../../assets/images/bg/homepage-dots-img.png';
+import '../../styles/pages/AboutPage.scss';
+
+const AboutPage: React.FC = () => {
+  useEffect(() => {
+    const $aboutPage = document.querySelector<HTMLDivElement>('#aboutPage');
+    if ($aboutPage) {
+      $aboutPage.style.display = 'flex'; // ?overrides the {display: none} on 'aboutPage.scss'. This is to prevent the aboutPage from showing before animation is applied.
+      $aboutPage.classList.add('blend-in-out');
+    }
+  });
+
+  return (
+    <section id="aboutPage" className="aboutPage container">
+      <div className="aboutPage__about">
+        <h1 className="aboutPage__about-title text-hue-rotate">
+          i&apos;m arthur! your dev
+          <span className="emoji">&#128075;</span>
+        </h1>
+        <p className="aboutPage__about-p">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse,
+          suscipit et? Quo facere fugiat deserunt expedita pariatur consequuntur
+          quos possimus quidem repellat ipsam sequi, mollitia perspiciatis
+          suscipit id ipsa voluptates.
+        </p>
+      </div>
+      <div className="aboutPage__images">
+        <img
+          src={homepageDotsImage}
+          alt="an abstract dotted figure"
+          className="image-layer figure rotate-hue-rotate"
+        />
+        <img
+          src={profileImage}
+          alt="my profile"
+          className="image-layer profile"
+        />
+      </div>
+    </section>
+  );
+};
+
+export default AboutPage;

src/components/pages/HomePage.tsx

@@ -1,46 +1,18 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { Routes, Route, Outlet } from 'react-router-dom';
 
-import profileImage from '../../assets/images/profile/profile.png';
-import homepageDotsImage from '../../assets/images/bg/homepage-dots-img.png';
-import '../../styles/pages/HomePage.scss';
+import AboutPage from './AboutPage.tsx';
+import LineCount from '../UI/LineCount.tsx';
 
-const HomePage = () => {
-  useEffect(() => {
-    const $homepage = document.querySelector<HTMLDivElement>('#homepage');
-    if ($homepage) {
-      $homepage.style.display = 'flex'; // ?overrides the {display: none} on 'HomePage.scss'. This is to prevent the homepage from showing before animation is applied.
-      $homepage.classList.add('blend-in-out');
-    }
-  });
-
-  return (
-    <section id="homepage" className="homepage container">
-      <div className="homepage__about">
-        <h1 className="homepage__about-title text-hue-rotate">
-          i&apos;m arthur! your dev
-          <span className="emoji">&#128075;</span>
-        </h1>
-        <p className="homepage__about-p">
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse,
-          suscipit et? Quo facere fugiat deserunt expedita pariatur consequuntur
-          quos possimus quidem repellat ipsam sequi, mollitia perspiciatis
-          suscipit id ipsa voluptates.
-        </p>
-      </div>
-      <div className="homepage__images">
-        <img
-          src={homepageDotsImage}
-          alt="an abstract dotted figure"
-          className="image-layer figure rotate-hue-rotate"
-        />
-        <img
-          src={profileImage}
-          alt="my profile"
-          className="image-layer profile"
-        />
-      </div>
-    </section>
-  );
-};
+const HomePage: React.FC = () => (
+  <>
+    <LineCount />
+    <Routes>
+      <Route path="/" element={<Outlet />}>
+        <Route path="/" element={<AboutPage />} />
+      </Route>
+    </Routes>
+  </>
+);
 
 export default HomePage;

src/styles/pages/HomePage.scss → src/styles/pages/AboutPage.scss

@@ -5,12 +5,12 @@
 @import '../animations/text-hue-rotate.scss';
 @import '../_mixins.scss';
 
-.homepage {
+.aboutPage {
   display: none;
   flex-direction: column;
   width: 90%;
 
-  @include component-code-snippet('const HomePage = () => {');
+  @include component-code-snippet('const About = () => {');
 
   user-select: none;