routing

package.json

@@ -12,6 +12,7 @@
     "@types/react": "^17.0.0",
     "@types/react-animate-on-scroll": "^2.1.2",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-slick": "^0.23.4",
     "@types/react-tabs": "^2.3.2",
     "@types/react-typing-animation": "^1.6.2",
@@ -22,6 +23,7 @@
     "react-animate-on-scroll": "^2.1.5",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
     "react-slick": "^0.28.1",
     "react-snapshot": "^1.3.0",

src/App.tsx

@@ -1,33 +1,12 @@
 import React, {useState} from 'react';
 import './App.css';
-import Footer from "./components/footer/Footer";
+import Main from "./Main";
-import Hero from "./components/hero/Hero";
-import AboutMe from "./components/about-me/AboutMe";
-import Jobs from "./components/jobs/Jobs";
-import Projects from "./components/projects/Projects";
-import Hobbies from "./components/hobbies/Hobbies";
-import Contact from "./components/contact/Contact";
-import Terminal from "./components/terminal/Terminal";
 
 function App() {
 
-    const showTerm: boolean = new URLSearchParams(window.location.search).get("showTerm") === 'true';
-    const [isTerminalVisible, setIsTerminalVisible] = useState(showTerm);
-
     return (
         <div className="App">
-            {showTerm && <Terminal isTerminalVisible={isTerminalVisible} setIsTerminalVisible={setIsTerminalVisible}/>}
+            <Main/>
-            {!isTerminalVisible &&
-                <div>
-                    <Hero/>
-                    <AboutMe/>
-                    <Jobs/>
-                    <Projects/>
-                    <Hobbies/>
-                    <Contact/>
-                    <Footer/>
-                </div>
-            }
         </div>
       );
 }

src/Main.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Blog from "./pages/Blog";
+
+const Main = () => {
+    return (
+        <Routes>
+            <Route element={<Home/>} path='/'/>
+            <Route element={<Blog/>} path='/blog'/>
+        </Routes>
+    );
+}
+
+export default Main;

src/index.tsx

@@ -4,12 +4,13 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { render } from 'react-snapshot';
+import { BrowserRouter } from 'react-router-dom';
 
-render(
+ReactDOM.render((
-  <React.StrictMode>
+        <BrowserRouter>
-    <App />
+            <App /> {/* The various pages will be displayed by the `Main` component. */}
-  </React.StrictMode>,
+        </BrowserRouter>
-  document.getElementById('root')
+    ), document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/Blog.tsx

@@ -0,0 +1,13 @@
+import React, {useState} from 'react';
+import './Home.css';
+
+function Blog() {
+
+    return (
+        <div className="Blog">
+            <h1>Blog</h1>
+        </div>
+    );
+}
+
+export default Blog;

src/pages/Home.css

@@ -0,0 +1,165 @@
+.App {
+  text-align: center;
+  background-color: black;
+  min-height: 100vh;
+  width: 100vw !important;
+  max-width: 100vw !important;
+  font-size: calc(20px);
+  color: white;
+}
+
+.row {
+  margin: 0 !important;
+}
+
+html {
+  background-color: black;
+}
+
+/* we do this because scroll snapping is broken on moz://a for some reason */
+@supports (-moz-appearance:none){
+  html {
+    scroll-snap-type: none !important;
+  }
+}
+
+/* mobile won't play with snapping too well so we need to make it prox not mandatory */
+@media only screen and (max-width: 600px) {
+  html {
+    scroll-snap-type: none !important;
+  }
+
+  .child {
+    scroll-snap-align: none !important;
+  }
+}
+
+h1 {
+  font-weight: bolder;
+}
+
+@keyframes fade-up-anim {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  100% {
+    opacity:1;
+    transform: translateY(0px);
+  }
+}
+
+
+@media only screen and (max-width: 993px) {
+  .fade-up-md {
+    opacity: 0;
+    animation: fade-up-anim 2s forwards 200ms !important;
+  }
+
+  .fade-up-md-2 {
+    opacity: 0;
+    animation: fade-up-anim 2s forwards 400ms !important;
+  }
+
+  .fade-up-md-3 {
+    opacity: 0;
+    animation: fade-up-anim 2s forwards 600ms !important;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .fade-up {
+    opacity: 0;
+    animation: fade-up-anim 2s forwards 200ms;
+  }
+
+  .fade-up-2 {
+    opacity: 0;
+    animation: fade-up-anim 2s forwards 400ms;
+  }
+
+  .fade-up-3 {
+    opacity: 0;
+    animation: fade-up-anim 2s forwards 600ms;
+  }
+}
+
+.fade-up {
+  opacity: 0;
+  animation: fade-up-anim 2s forwards 200ms;
+}
+
+.fade-up-d3s {
+  opacity: 0;
+  animation: fade-up-anim 2s forwards 3s;
+}
+
+@keyframes fade-in-tx-anim {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+.fade-in-tx {
+  animation: fade-in-tx-anim 1s ease-in;
+}
+
+@keyframes fade-out{
+  0% {
+    opacity: 1;
+    z-index: 500;
+  }
+
+  99% {
+    opacity: .1;
+    z-index: 500;
+  }
+
+  100% {
+    opacity:0;
+    z-index: -500;
+    display: none;
+    visibility: hidden;
+  }
+}
+
+.fade-out {
+  animation: fade-out 1s ease-in forwards;
+  opacity: 0;
+}
+
+@keyframes move-left-atx-anim {
+  0% {
+    margin-left: 0;
+  }
+  100% {
+    margin-left: -17px;
+  }
+}
+
+.move-left-atx {
+  animation: move-left-atx-anim 1s forwards;
+}
+
+ul {
+  list-style-type: none;
+  margin-left: -35px;
+
+}
+
+html {
+  scroll-snap-type: y proximity;
+}
+
+.child {
+  scroll-snap-align: center;
+
+}
+
+.pfp {
+  border-radius: 100%;
+  width: 25%
+}

src/pages/Home.tsx

@@ -0,0 +1,35 @@
+import React, {useState} from 'react';
+import './Home.css';
+import Footer from "../components/footer/Footer";
+import Hero from "../components/hero/Hero";
+import AboutMe from "../components/about-me/AboutMe";
+import Jobs from "../components/jobs/Jobs";
+import Projects from "../components/projects/Projects";
+import Hobbies from "../components/hobbies/Hobbies";
+import Contact from "../components/contact/Contact";
+import Terminal from "../components/terminal/Terminal";
+
+function Home() {
+
+    const showTerm: boolean = new URLSearchParams(window.location.search).get("showTerm") === 'true';
+    const [isTerminalVisible, setIsTerminalVisible] = useState(showTerm);
+
+    return (
+        <div className="Home">
+            {showTerm && <Terminal isTerminalVisible={isTerminalVisible} setIsTerminalVisible={setIsTerminalVisible}/>}
+            {!isTerminalVisible &&
+                <div>
+                    <Hero/>
+                    <AboutMe/>
+                    <Jobs/>
+                    <Projects/>
+                    <Hobbies/>
+                    <Contact/>
+                    <Footer/>
+                </div>
+            }
+        </div>
+    );
+}
+
+export default Home;