feature(add-title-image): Add mobile and desktop title images

src/components/navigation/Navbar.tsx

@@ -12,7 +12,7 @@ export const Navbar = () => {
 
     return (
         <>
-            <div className="fixed top-0 w-full bg-dark-1 h-16">
+            <div className="fixed top-0 w-full bg-dark-1 h-16 z-50">
                 <div className="w-[50%] ml-[25%] h-full flex gap-6 items-center justify-center">
                     {routerData.map(route => (
                         <Link key={route.name}

src/components/router/Router.tsx

@@ -4,16 +4,14 @@ import {Route, Routes} from "react-router-dom";
 
 export const Router = () => {
     return (
-        <div className="w-full md:w-[80%]">
-            <Routes>
-                {routerData.map(({path, element, name}) => (
-                    <Route
-                        key={name}
-                        path={path}
-                        element={element}
-                    />
-                ))}
-            </Routes>
-        </div>
+        <Routes>
+            {routerData.map(({path, element, name}) => (
+                <Route
+                    key={name}
+                    path={path}
+                    element={element}
+                />
+            ))}
+        </Routes>
     );
 }

src/pages/home/HomePage.tsx

@@ -1,19 +1,28 @@
 import React, {JSX} from 'react'
-import {AboutMeContainer, AboutWebsiteContainer, IntroContainer, SkillsContainer} from "./components";
+import {AboutMeContainer, AboutWebsiteContainer, SkillsContainer} from "./components";
 import {mapContentContainers} from "../../domain";
 
 export const HomePage = () => {
 
     const containers: JSX.Element[] = [
-        <IntroContainer/>,
-        <AboutWebsiteContainer/>,
         <AboutMeContainer/>,
+        <AboutWebsiteContainer/>,
         <SkillsContainer/>,
     ];
 
     return (
-        <div>
-            {mapContentContainers(containers)}
+        <div className="w-full">
+            <div className="relative">
+                <img className="w-full h-auto block md:hidden" src="/images/r7-mobile.jpg" alt="R7"/>
+                <img className="w-full h-auto hidden md:block" src="/images/r7.jpg" alt="R7 Mobile"/>
+                <span className="absolute top-1/2 md:top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                    <h1 className="text-7xl md:text-9xl font-bold">Z-100</h1>
+                    <h2 className="text-4xl md:text-5xl mt-5">Swiss Backend Dev</h2>
+                </span>
+            </div>
+            <div className="w-full md:w-[80%] mx-auto">
+                {mapContentContainers(containers)}
+            </div>
         </div>
     );
 }