tab based nav
This commit is contained in:
parent
a2a4defc87
commit
aeef385c85
9 changed files with 109 additions and 26 deletions
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
21
src/components/navbar/Navbar.css
Normal 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
34
src/components/navbar/Navbar.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue