Issue #7 🎫: 404 not found page (component) and HashRouter migration

.eslintrc.json

@@ -34,6 +34,12 @@
     {
       "files": ["src/**/*Slice.js"],
       "rules": { "no-param-reassign": ["error", { "props": false }] }
+    },
+    {
+      "files": ["src/**/*.ts", "src/**/*.tsx"],
+      "rules": {
+        "no-undef": "off"
+      }
     }
   ],
   "ignorePatterns": ["dist/", "build/"]

src/App.tsx

@@ -3,12 +3,17 @@ import { Routes, Route } from 'react-router-dom';
 
 import AccessPage from './components/pages/AccessPage.tsx';
 import HomePage from './components/pages/HomePage.tsx';
+import NotFoundPage from './components/pages/NotFoundPage.tsx';
 
 const App: React.FC = () => (
   <>
     <Routes>
-      <Route path="/iturres-reactive-portfolio/" element={<AccessPage />} />
-      <Route path="/iturres-reactive-portfolio/homepage/*" element={<HomePage />} />
+      <Route path="/" element={<AccessPage />} />
+      <Route
+        path="homepage/*"
+        element={<HomePage />}
+      />
+      <Route path="/*" element={<NotFoundPage fromPath="/" />} />
     </Routes>
   </>
 );

src/components/UI/AnimatedButton.tsx

@@ -9,22 +9,13 @@ const AnimatedButton: React.FC = () => (
     className="animated-button my-btn"
     aria-label="navigates to expertise page"
   >
-    <Link
-      to="/iturres-reactive-portfolio/homepage/expertise"
-      className="text-hue-rotate"
-    >
+    <Link to="/homepage/expertise" className="text-hue-rotate">
       languages
     </Link>
-    <Link
-      to="/iturres-reactive-portfolio/homepage/expertise"
-      className="text-hue-rotate"
-    >
+    <Link to="/homepage/expertise" className="text-hue-rotate">
       frameworks
     </Link>
-    <Link
-      to="/iturres-reactive-portfolio/homepage/expertise"
-      className="text-hue-rotate"
-    >
+    <Link to="/homepage/expertise" className="text-hue-rotate">
       skills
     </Link>
     <a

src/components/UI/FileTabsNavbar.tsx

@@ -12,10 +12,10 @@ const FileTabsNavbar: React.FC = () => {
 
   const paths = useMemo(
     () => ({
-      homepage: '/iturres-reactive-portfolio/homepage',
-      projects: '/iturres-reactive-portfolio/homepage/projects',
-      contact: '/iturres-reactive-portfolio/homepage/contact',
-      expertise: '/iturres-reactive-portfolio/homepage/expertise',
+      homepage: '/homepage',
+      projects: '/homepage/projects',
+      contact: '/homepage/contact',
+      expertise: '/homepage/expertise',
     }),
     [],
   );

src/components/UI/Navbar.tsx

@@ -88,7 +88,7 @@ const Navbar: React.FC = () => {
           </a>
         </li>
         <li style={{ '--elem': 4 } as CSSProperties}>
-          <Link to="/iturres-reactive-portfolio/">
+          <Link to="/">
             <BiExit size={iconSize} className="text-hue-rotate" title="Exit" />
           </Link>
         </li>
@@ -97,7 +97,7 @@ const Navbar: React.FC = () => {
         {windowWidth < minWith && (
           <>
             <li style={{ '--elem': 5 } as CSSProperties}>
-              <Link to="/iturres-reactive-portfolio/homepage">
+              <Link to="/homepage">
                 <SiAboutdotme
                   size={iconSize}
                   className="text-hue-rotate"
@@ -106,7 +106,7 @@ const Navbar: React.FC = () => {
               </Link>
             </li>
             <li style={{ '--elem': 6 } as CSSProperties}>
-              <Link to="/iturres-reactive-portfolio/homepage/projects">
+              <Link to="/homepage/projects">
                 <FaProjectDiagram
                   size={iconSize}
                   className="text-hue-rotate"
@@ -115,7 +115,7 @@ const Navbar: React.FC = () => {
               </Link>
             </li>
             <li style={{ '--elem': 7 } as CSSProperties}>
-              <Link to="/iturres-reactive-portfolio/homepage/contact">
+              <Link to="/homepage/contact">
                 <AiOutlineMail
                   size={iconSize}
                   className="text-hue-rotate"
@@ -124,7 +124,7 @@ const Navbar: React.FC = () => {
               </Link>
             </li>
             <li style={{ '--elem': 8 } as CSSProperties}>
-              <Link to="/iturres-reactive-portfolio/homepage/expertise">
+              <Link to="/homepage/expertise">
                 <LuSquareStack
                   size={iconSize}
                   className="text-hue-rotate"

src/components/pages/AboutPage.tsx

@@ -45,7 +45,7 @@ const AboutPage: React.FC = () => {
         <AnimatedButton />
 
         <Link
-          to="/iturres-reactive-portfolio/homepage/contact"
+          to="/homepage/contact"
           className="aboutPage__cta"
           title="This link will take you to the contact page."
         >

src/components/pages/AccessPage.tsx

@@ -50,7 +50,7 @@ const AccessPage = () => {
         }
       }, 200);
 
-      $videoElement.current.addEventListener('ended', () => navigate('/iturres-reactive-portfolio/homepage'));
+      $videoElement.current.addEventListener('ended', () => navigate('/homepage'));
     }
   };
 

src/components/pages/HomePage.tsx

@@ -7,6 +7,7 @@ import Navbar from '../UI/Navbar.tsx';
 import ExpertiseSummaryPage from './ExpertiseSummaryPage.tsx';
 import ContactPage from './ContactPage.tsx';
 import ProjectsPage from './ProjectsPage.tsx';
+import NotFoundPage from './NotFoundPage.tsx';
 import FileTabsNavbar from '../UI/FileTabsNavbar.tsx';
 
 const HomePage: React.FC = () => {
@@ -30,6 +31,7 @@ const HomePage: React.FC = () => {
           <Route path="/expertise" element={<ExpertiseSummaryPage />} />
           <Route path="/contact" element={<ContactPage />} />
           <Route path="/projects" element={<ProjectsPage />} />
+          <Route path="/*" element={<NotFoundPage fromPath="/homepage" />} />
         </Route>
       </Routes>
     </>

src/components/pages/NotFoundPage.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import FloatingAstronaut from '../animations/FloatingAstronaut.tsx';
+
+import '../../styles/pages/NotFoundPage.scss';
+
+type NotFoundPageProps = {
+  fromPath: string;
+};
+
+const AstronautStyleProps = {
+  animationSpeed: 45,
+  maxWidth: 50,
+  move: {
+    fromTop: 200,
+    toTop: 270,
+    fromLeft: -50,
+    toLeft: 100,
+    fromRight: 0,
+    toRight: 0,
+  },
+  rotation: {
+    rotate: -130,
+  },
+};
+
+const NotFoundPage: React.FC<NotFoundPageProps> = ({ fromPath }) => {
+  const isWildCardAtAccessPage = fromPath === '/';
+
+  const pathTo = isWildCardAtAccessPage ? '/' : '/homepage';
+
+  return (
+    <main className="not-found-page">
+      <FloatingAstronaut
+        animationSpeed={AstronautStyleProps.animationSpeed}
+        maxWidth={AstronautStyleProps.maxWidth}
+        move={AstronautStyleProps.move}
+        rotation={AstronautStyleProps.rotation}
+      />
+
+      <header>
+        <h2 className="text-hue-rotate">
+          <span>&#128640;</span>
+          &nbsp; Oops! It looks like you&apos;ve drifted off course! &nbsp;
+          <span>&#127756;</span>
+        </h2>
+        <p>
+          Houston, we have a problem... The page you&apos;re searching for seems
+          to have floated away into the cosmic abyss. Our astronauts are out
+          there on a mission to find it, but in the meantime, why not explore
+          some of the other stellar destinations on the portfolio?
+        </p>
+        <Link
+          to={pathTo}
+          rel="noreferrer noopener"
+          className="my-btn not-found-page-btn text-hue-rotate static-shadow"
+        >
+          {isWildCardAtAccessPage
+            ? 'Go back to the Access Page'
+            : 'Go back to the Home Page'}
+        </Link>
+      </header>
+    </main>
+  );
+};
+
+export default NotFoundPage;

src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/index.scss';
@@ -12,8 +12,8 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <BrowserRouter>
+    <HashRouter>
       <App />
-    </BrowserRouter>
+    </HashRouter>
   </React.StrictMode>,
 );

src/styles/UI/button.scss

@@ -29,3 +29,7 @@ $color2-hover: colors.$color2-hover;
     background-color: $color2-hover;
   }
 }
+
+.static-shadow {
+  box-shadow: 0 0 200px $color2-hover;
+}

src/styles/pages/NotFoundPage.scss

@@ -0,0 +1,58 @@
+@use '../variables/colors' as colors;
+@use '../variables/fonts' as fonts;
+
+$color1: colors.$color1;
+$color2-hover: colors.$color2-hover;
+$font-family-regular: fonts.$font-family-regular;
+
+.not-found-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+
+  header {
+    text-align: center;
+    padding: 0.5rem;
+
+    h2 {
+      font-size: 1.2em;
+      font-weight: 900;
+      margin-bottom: 1rem;
+      color: $color1;
+
+      span {
+        font-size: 1.5rem;
+      }
+    }
+
+    p {
+      font-family: 'Jura', sans-serif;
+      font-size: 1.1rem;
+      padding-bottom: 2rem;
+      max-width: 500px;
+      margin: 0 auto;
+    }
+  }
+}
+
+.not-found-page-btn {
+  text-decoration: none;
+  font-size: 0.8rem;
+  font-family: $font-family-regular;
+  background-color: transparent;
+  border-radius: 0.5rem;
+  color: $color2-hover;
+  border: 1px solid $color2-hover;
+  margin-top: 4rem;
+  padding: 0.9rem 2rem;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 0 200px $color2-hover;
+  }
+
+  &:focus {
+    box-shadow: 0 0 10px $color2-hover;
+  }
+}