nickorlow/personal-site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tab based nav

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-03-12 17:39:56 -05:00
parent a2a4defc87
commit aeef385c85
9 changed files with 109 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/Main.tsx
View file

@ -3,14 +3,42 @@ 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 (
<div>
<Routes>
<Route element={<Home/>} path='/'/>
<Route element={<Blog/>} path='/blogs'/>
<Route element={<NavBarView><Hero/></NavBarView>} path='/'/>
<Route element={<NavBarView><Hero/></NavBarView>} path='/home'/>
<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>
);
}

29
src/components/about-me/AboutMe.tsx
View file

@ -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>
<div className={"col-12"} style={{width: "100vw", justifyContent: "center", display: "flex"}}>
<p className={"col-12"} style={{maxWidth: 600}}>
I was born and raised in Austin, Texas. I've been writing code for nearly 7 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>
<h1 style={{marginBottom: 20}}>About Me</h1>
<div style={{width: "100vw", justifyContent: "center", display: "flex"}}>
<p style={{maxWidth: 600}}>
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>
</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
majority of our software.</p></div>
<div className={"col-12"} style={{width: "100vw", justifyContent: "center", display: "flex"}}><p
style={{maxWidth: 600}}>I primarily do backend work and love working with databases. I'm also an
avid runner and entrepreneur.</p></div>
<div style={{width: "100vw", justifyContent: "center", display: "flex"}}>
<p style={{maxWidth: 600}}>
I'm interested in infra and backend engineering.
</p>
</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>
);

1
src/components/hero/Hero.tsx
View file

@ -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>
);
}

2
src/components/hobbies/Hobbies.tsx
View file

@ -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>

21
src/components/navbar/Navbar.css Normal file
View file

@ -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;
}

34
src/components/navbar/Navbar.tsx Normal file
View file

@ -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>
)
}

4
src/components/social-bar/SocialBar.tsx
View file

@ -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>
);
}

1
src/pages/Blog.tsx
View file

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

3
src/pages/SingleBlog.tsx
View file

@ -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