tab based nav

src/Main.tsx

@@ -3,15 +3,43 @@ import { Routes, Route } from 'react-router-dom';
 import Home from './pages/Home';
 import Blog from "./pages/Blog";
 import SingleBlog from "./pages/SingleBlog";
+import Navbar from "./components/navbar/Navbar";
+import Hero from "./components/hero/Hero";
+import AboutMe from "./components/about-me/AboutMe";
+import Contact from "./components/contact/Contact";
+import Hobbies from "./components/hobbies/Hobbies";
+import Projects from "./components/projects/Projects";
+
+
+const NavBarView = (props: {children: any}) => {
+    return (
+        <div>
+            <div style={{height: "95vh"}}>
+            {props.children}
+            </div>
+            <Navbar/>
+        </div>
+    )
+}
 
 const Main = () => {
+
+
+
     return (
-        <Routes>
+        <div>
-            <Route element={<Home/>} path='/'/>
+            <Routes>
-            <Route element={<Blog/>} path='/blogs'/>
+                <Route element={<NavBarView><Hero/></NavBarView>} path='/'/>
-            <Route element={<SingleBlog/>} path='/blog'/>
+                <Route element={<NavBarView><Hero/></NavBarView>} path='/home'/>
-        </Routes>
+                <Route element={<NavBarView><AboutMe/></NavBarView>} path='/about'/>
+                <Route element={<NavBarView><Contact/></NavBarView>} path='/contact'/>
+                <Route element={<NavBarView><Hobbies/></NavBarView>} path='/hobbies'/>
+                <Route element={<NavBarView><Projects/></NavBarView>} path='/projects'/>
+                <Route element={<NavBarView><Blog/></NavBarView>} path='/blogs'/>
+                <Route element={<SingleBlog/>} path='/blog'/>
+            </Routes>
+        </div>
     );
 }
 
-export default Main;
+export default Main;

src/components/about-me/AboutMe.tsx

@@ -3,26 +3,31 @@ import React from "react";
 export default function AboutMe() {
     return (
         <div className={"child"} style={{minHeight: "100vh"}}>
-            <div className={"row"} style={{
+            <div style={{
+                display: "flex",
+                flexDirection:"column",
                 alignItems: "center",
                 alignContent: "center",
                 justifyContent: "center",
                 minHeight: "50rem"
             }}>
-                <h1 className={"col-12"} style={{marginBottom: 20}}>About Me</h1>
+                <h1 style={{marginBottom: 20}}>About Me</h1>
-                <div className={"col-12"} style={{width: "100vw", justifyContent: "center", display: "flex"}}>
+                <div style={{width: "100vw", justifyContent: "center", display: "flex"}}>
-                    <p className={"col-12"} style={{maxWidth: 600}}>
+                    <p style={{maxWidth: 600}}>
-                        I was born and raised in Austin, Texas. I've been writing code for nearly 7 years and I'm
+                        I'm from Austin, Texas. I've been writing code for nearly 9 years and I'm
-                        currently going to <b>The University of Texas at Austin</b> and working as the <b>Chief Technology Officer</b> at <b>Comp Wallet Corp.</b>
+                        currently going to <b>The University of Texas at Austin</b>
                     </p>
                 </div>
 
-                <div className={"col-12"} style={{width: "100vw", justifyContent: "center", display: "flex"}}><p
+
-                    style={{maxWidth: 600}}>Previously, I founded a startup called <b>CavCash</b> where I wrote a
+                <div style={{width: "100vw", justifyContent: "center", display: "flex"}}>
-                    majority of our software.</p></div>
+                    <p style={{maxWidth: 600}}>
-                <div className={"col-12"} style={{width: "100vw", justifyContent: "center", display: "flex"}}><p
+                        I'm interested in infra and backend engineering.
-                    style={{maxWidth: 600}}>I primarily do backend work and love working with databases. I'm also an
+                    </p>
-                    avid runner and entrepreneur.</p></div>
+                </div>
+
+                <p style={{maxWidth: 600}}>If you would like to contact me, you can reach me at:</p>
+                <a href={"mailto:nickorlow@nickorlow.com"}>nickorlow@nickorlow.com</a>
             </div>
         </div>
     );

src/components/hero/Hero.tsx

@@ -23,7 +23,6 @@ export default function Hero() {
                 </div>
                 <SocialBar style={{justifyContent: "center", width: "60vmin"}}/>
             </div>
-            <p className={"fade-up-d3s"}>scroll for more</p>
         </div>
     );
 }

src/components/hobbies/Hobbies.tsx

@@ -20,7 +20,7 @@ export default function Hobbies () {
                 alignItems: "center"
             }}>
                 <div className={"d-md-block d-none"}>
-                    <h1>Other Hobbies</h1>
+                    <h1>Hobbies</h1>
                     {AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
                                                          info={hobby}/>)}
                 </div>

src/components/navbar/Navbar.css

@@ -0,0 +1,21 @@
+.navbar-selected-pill {
+    background-color: white;
+    width: 40px;
+    height: 3px;
+    border-radius: 5px;
+    transition-duration: .5s;
+}
+
+.navbar-unselected-pill {
+    width: 0px;
+}
+
+.no-blue-link {
+    color: white;
+}
+
+.no-blue-link:hover {
+    transition-duration: .5s;
+    color: grey;
+    text-decoration: none;
+}

src/components/navbar/Navbar.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import "./Navbar.css";
+import {Link, useLocation} from "react-router-dom";
+
+export default function Navbar() {
+    const location = useLocation();
+
+    return (
+        <div style={{maxWidth:"100%"}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-up-d3s" : "")} >
+            <div className={"d-flex flex-row justify-content-around"} style={{width: 700}}>
+                <div className={"d-flex flex-column justify-content-center align-items-center"}>
+                    <Link to={"/home"} className={"mb-0 no-blue-link"}>Home</Link>
+                    <div className={"navbar-selected-pill " + ((location.pathname === "/" || location.pathname === "/home") ? "" : "navbar-unselected-pill")}/>
+                </div>
+                <div className={"d-flex flex-column justify-content-center align-items-center"}>
+                    <Link to={"/about"} className={"mb-0 no-blue-link"}>About</Link>
+                    <div className={"navbar-selected-pill " + (location.pathname === "/about" ? "" : "navbar-unselected-pill")}/>
+                </div>
+                <div className={"d-flex flex-column justify-content-center align-items-center"}>
+                    <Link to={"/blogs"} className={"mb-0 no-blue-link"}>Blog</Link>
+                    <div className={"navbar-selected-pill " + (location.pathname === "/blogs" ? "" : "navbar-unselected-pill")}/>
+                </div>
+                <div className={"d-flex flex-column justify-content-center align-items-center"}>
+                    <Link to={"/projects"} className={"mb-0 no-blue-link"}>Projects</Link>
+                    <div className={"navbar-selected-pill " + (location.pathname === "/projects" ? "" : "navbar-unselected-pill")}/>
+                </div>
+                <div className={"d-flex flex-column justify-content-center align-items-center"}>
+                    <Link to={"/hobbies"} className={"mb-0 no-blue-link"}>Hobbies</Link>
+                    <div className={"navbar-selected-pill " + (location.pathname === "/hobbies" ? "" : "navbar-unselected-pill")}/>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/social-bar/SocialBar.tsx

@@ -23,10 +23,6 @@ export default function SocialBar(props: {style: any}) {
             <div className={"col-md-2 col-4 fade-up-3 fade-up-md-3"} style={{display: "flex", justifyContent: "center"}}>
                 <svg onClick={ () => window.location.href="mailto:nickorlow@nickorlow.com"} className={"mail-icon icon"} viewBox="0 0 100 100" width="100px" height="100px"><g id="surface12014155"><path  d="M 28 8 C 16.976562 8 8 16.976562 8 28 L 8 72 C 8 83.023438 16.976562 92 28 92 L 72 92 C 83.023438 92 92 83.023438 92 72 L 92 28 C 92 16.976562 83.023438 8 72 8 Z M 26 32 L 74 32 C 74.359375 32 74.699219 32.039062 75.019531 32.140625 L 55.359375 51.78125 C 52.398438 54.742188 47.582031 54.742188 44.621094 51.78125 L 24.980469 32.140625 C 25.300781 32.039062 25.640625 32 26 32 Z M 22.140625 34.980469 L 37.179688 50 L 22.140625 65.019531 C 22.039062 64.699219 22 64.359375 22 64 L 22 36 C 22 35.640625 22.039062 35.300781 22.140625 34.980469 Z M 77.859375 34.980469 C 77.960938 35.300781 78 35.640625 78 36 L 78 64 C 78 64.359375 77.960938 64.699219 77.859375 65.019531 L 62.800781 50 Z M 40 52.820312 L 41.78125 54.621094 C 44.042969 56.882812 47.019531 58 49.980469 58 C 52.960938 58 55.917969 56.882812 58.179688 54.621094 L 59.980469 52.820312 L 75.019531 67.859375 C 74.699219 67.960938 74.359375 68 74 68 L 26 68 C 25.640625 68 25.300781 67.960938 24.980469 67.859375 Z M 40 52.820312 "/></g></svg>
             </div>
-
-            <div className={"col-md-12 col-12 fade-up-3 fade-up-md-2"} style={{display: "flex", justifyContent: "center"}}>
-                <a href={"/blogs"}>Read My Blog</a>
-            </div>
         </div>
     );
 }

src/pages/Blog.tsx

@@ -7,7 +7,6 @@ function Blog() {
     return (
         <div className="Blog" style={{padding: 20}}>
             <h1>Blog</h1>
-            <a href={"/"}>Return Home</a>
             <Blogs/>
         </div>
     );

src/pages/SingleBlog.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown'
 import {AllBlogs} from "../static/data/Blogs";
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
 import {a11yDark as theme} from "react-syntax-highlighter/dist/esm/styles/prism";
+import {Link} from "react-router-dom";
 
 function SingleBlog() {
 
@@ -28,7 +29,7 @@ function SingleBlog() {
         <div className="Blog" style={{padding: 20}}>
             <h1>{AllBlogs[blogId].title}</h1>
             <p>{AllBlogs[blogId].date.toLocaleDateString()}</p>
-            <p><a href={"/"}>Return Home</a> | <a href={"/blogs"}>All Blogs</a></p>
+            <p><Link to={"/blogs"}>Back</Link></p>
             <div style={{width: "100%", display: 'flex', justifyContent: 'center'}}>
                 <div style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
                     <ReactMarkdown