From aeef385c85e90f8ffc90da8dad3847ad7f34cdb9 Mon Sep 17 00:00:00 2001 From: Nicholas Orlowsky Date: Sun, 12 Mar 2023 17:39:56 -0500 Subject: [PATCH] tab based nav --- src/Main.tsx | 40 +++++++++++++++++++++---- src/components/about-me/AboutMe.tsx | 29 ++++++++++-------- src/components/hero/Hero.tsx | 1 - src/components/hobbies/Hobbies.tsx | 2 +- src/components/navbar/Navbar.css | 21 +++++++++++++ src/components/navbar/Navbar.tsx | 34 +++++++++++++++++++++ src/components/social-bar/SocialBar.tsx | 4 --- src/pages/Blog.tsx | 1 - src/pages/SingleBlog.tsx | 3 +- 9 files changed, 109 insertions(+), 26 deletions(-) create mode 100644 src/components/navbar/Navbar.css create mode 100644 src/components/navbar/Navbar.tsx diff --git a/src/Main.tsx b/src/Main.tsx index a0ac266..ebf8941 100644 --- a/src/Main.tsx +++ b/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 ( +
+
+ {props.children} +
+ +
+ ) +} const Main = () => { + + + return ( - - } path='/'/> - } path='/blogs'/> - } path='/blog'/> - +
+ + } path='/'/> + } path='/home'/> + } path='/about'/> + } path='/contact'/> + } path='/hobbies'/> + } path='/projects'/> + } path='/blogs'/> + } path='/blog'/> + +
); } -export default Main; \ No newline at end of file +export default Main; diff --git a/src/components/about-me/AboutMe.tsx b/src/components/about-me/AboutMe.tsx index 531f249..d16fb01 100644 --- a/src/components/about-me/AboutMe.tsx +++ b/src/components/about-me/AboutMe.tsx @@ -3,26 +3,31 @@ import React from "react"; export default function AboutMe() { return (
-
-

About Me

-
-

- I was born and raised in Austin, Texas. I've been writing code for nearly 7 years and I'm - currently going to The University of Texas at Austin and working as the Chief Technology Officer at Comp Wallet Corp. +

About Me

+
+

+ I'm from Austin, Texas. I've been writing code for nearly 9 years and I'm + currently going to The University of Texas at Austin

-

Previously, I founded a startup called CavCash where I wrote a - majority of our software.

-

I primarily do backend work and love working with databases. I'm also an - avid runner and entrepreneur.

+ +
+

+ I'm interested in infra and backend engineering. +

+
+ +

If you would like to contact me, you can reach me at:

+ nickorlow@nickorlow.com
); diff --git a/src/components/hero/Hero.tsx b/src/components/hero/Hero.tsx index feb6211..1133c41 100644 --- a/src/components/hero/Hero.tsx +++ b/src/components/hero/Hero.tsx @@ -23,7 +23,6 @@ export default function Hero() {
-

scroll for more

); } diff --git a/src/components/hobbies/Hobbies.tsx b/src/components/hobbies/Hobbies.tsx index 6035a5a..fcc078c 100644 --- a/src/components/hobbies/Hobbies.tsx +++ b/src/components/hobbies/Hobbies.tsx @@ -20,7 +20,7 @@ export default function Hobbies () { alignItems: "center" }}>
-

Other Hobbies

+

Hobbies

{AllHobbies.map((hobby) => )}
diff --git a/src/components/navbar/Navbar.css b/src/components/navbar/Navbar.css new file mode 100644 index 0000000..d4c8e31 --- /dev/null +++ b/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; +} diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx new file mode 100644 index 0000000..6c4302a --- /dev/null +++ b/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 ( +
+
+
+ Home +
+
+
+ About +
+
+
+ Blog +
+
+
+ Projects +
+
+
+ Hobbies +
+
+
+
+ ) +} diff --git a/src/components/social-bar/SocialBar.tsx b/src/components/social-bar/SocialBar.tsx index 879ac85..c6b01b5 100644 --- a/src/components/social-bar/SocialBar.tsx +++ b/src/components/social-bar/SocialBar.tsx @@ -23,10 +23,6 @@ export default function SocialBar(props: {style: any}) {
window.location.href="mailto:nickorlow@nickorlow.com"} className={"mail-icon icon"} viewBox="0 0 100 100" width="100px" height="100px">
- -
); } diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index f051097..7efff65 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -7,7 +7,6 @@ function Blog() { return (

Blog

- Return Home
); diff --git a/src/pages/SingleBlog.tsx b/src/pages/SingleBlog.tsx index 2bbe92c..fdbf601 100644 --- a/src/pages/SingleBlog.tsx +++ b/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() {

{AllBlogs[blogId].title}

{AllBlogs[blogId].date.toLocaleDateString()}

-

Return Home | All Blogs

+

Back