From 2dcd60b39b7a097484026541e4a57fcaebc29c83 Mon Sep 17 00:00:00 2001 From: Brendan Smiley Date: Sat, 24 Aug 2024 15:48:38 -0600 Subject: [PATCH] Added Active page nav bar highlighting Fixed the Main page scss, the about section was gross --- web-ui/src/App.scss | 9 +- .../NavigationBar/NavigationBar.scss | 82 +++++---- .../NavigationBar/NavigationBar.tsx | 37 +++- web-ui/src/pages/Home/Home.scss | 166 ++++++++++-------- web-ui/src/pages/Home/Home.tsx | 21 ++- 5 files changed, 189 insertions(+), 126 deletions(-) diff --git a/web-ui/src/App.scss b/web-ui/src/App.scss index 04371dc..1169a58 100644 --- a/web-ui/src/App.scss +++ b/web-ui/src/App.scss @@ -7,11 +7,11 @@ $main-background: #0d1017; $main-text-color: #fff; // Buttons and Links -$button-background: #71a18f; +$button-background: #86c1c9; $button-color: #f1fffa; -$button-hover-background: #2a6464; -$button-active-background:$button-background; -$button-hover-background-2: #d6d2d2; +$button-hover-background: #a296f7; +$button-active-background: $button-background; +$button-hover-background-2: #a296f7; // Navbar $navbar-background: #1b202c; @@ -24,7 +24,6 @@ $dark-card-background: #232325; // TODO box-shadow: 0 4px 8px 0 rgb(236 236 236 / 20%), 0 6px 20px 0 rgb(190 190 190 / 19%); - .App { display: flex; flex-direction: column; diff --git a/web-ui/src/components/NavigationBar/NavigationBar.scss b/web-ui/src/components/NavigationBar/NavigationBar.scss index 2371f0e..d11a254 100644 --- a/web-ui/src/components/NavigationBar/NavigationBar.scss +++ b/web-ui/src/components/NavigationBar/NavigationBar.scss @@ -2,46 +2,50 @@ @import "../../App.scss"; .NavigationBar { - // Will always be on top of the page - position: fixed; - top: 0; - left: 0; - padding: 2px 0px; - width: 100%; - height: 60px; - background-color: $navbar-background; - z-index: 100; - display:flex; - justify-content: center; - align-items: center; - - .nav-link{ - background-color: $button-background; - padding: 10px; - border-radius: 5px; - margin: 0 10px; - text-decoration: none; - color: $button-color; - } - // For mobile only use active - @media only screen and (max-width: 600px) { - .nav-link:active{ - background-color: $button-hover-background; - } - + // Will always be on top of the page + position: fixed; + top: 0; + left: 0; + padding: 2px 0px; + width: 100%; + height: 60px; + background-color: $navbar-background; + z-index: 100; + display: flex; + justify-content: center; + align-items: center; + + .nav-link { + background-color: $button-background; + padding: 10px; + border-radius: 5px; + margin: 0 10px; + text-decoration: none; + color: $button-color; + } + + .active-link { + background-color: rgb(150, 140, 255); + } + + // For mobile only use active + @media only screen and (max-width: 600px) { + .nav-link:active { + background-color: $button-hover-background; } - // For desktop only use hover - @media only screen and (min-width: 600px) { - .nav-link:hover{ - background-color: $button-hover-background; - } + } + // For desktop only use hover + @media only screen and (min-width: 600px) { + .nav-link:hover { + background-color: $button-hover-background; } - + } } -.Content{ - margin-top: 60px; - margin-bottom: 60px; - padding: 20px; - -} \ No newline at end of file +.Content { + margin-top: 60px; + margin-bottom: 60px; + padding: 20px; + height: 82.4vh; // TODO fix this + overflow-y: auto; +} diff --git a/web-ui/src/components/NavigationBar/NavigationBar.tsx b/web-ui/src/components/NavigationBar/NavigationBar.tsx index 83bb37b..3aa844f 100644 --- a/web-ui/src/components/NavigationBar/NavigationBar.tsx +++ b/web-ui/src/components/NavigationBar/NavigationBar.tsx @@ -16,6 +16,17 @@ interface NavigationBarProps { } const NavigationBar: React.FC = ({ navItems }) => { + /** + * Handles the user selecting a link + * Highlights the selected link with the active class + * @param e Link event + */ + const handleSelected = (e: any) => { + const links = document.querySelectorAll(".nav-link"); + links.forEach((link) => link.classList.remove("active-link")); + e.target.classList.add("active-link"); + }; + return (
@@ -35,11 +46,27 @@ const NavigationBar: React.FC = ({ navItems }) => { This website uses cookies to enhance the user experience.
diff --git a/web-ui/src/pages/Home/Home.scss b/web-ui/src/pages/Home/Home.scss index 6538882..1b63ae8 100644 --- a/web-ui/src/pages/Home/Home.scss +++ b/web-ui/src/pages/Home/Home.scss @@ -1,79 +1,105 @@ @import "../../App.scss"; .Home { - .intro{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; - .name{ - font-size: 50px; - font-weight: bold; - color: $main-text-color; - text-align: center; - // Gradient the text - background: linear-gradient(90deg, #6bed9d, #a394f8); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + .intro { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; - // Animate the Gradient to move - background-size: 200% auto; - animation: moveGradient 10s linear infinite; + .name { + font-size: 50px; + font-weight: bold; + color: $main-text-color; + text-align: center; + // Gradient the text + background: linear-gradient(90deg, #6bedbf, #a394f8); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; - @keyframes moveGradient { - 0%, 100% { - background-position: 0% 50%; - } - 10% { - background-position: 0% 50%; - } - 45% { - background-position: 100% 50%; - } - 70% { - background-position: 100% 50%; - } - 90% { - background-position: 0% 50%; - } - } - } - - .title { - font-family: monospace; - color:#0000; - background: - linear-gradient(-90deg,$accent-1 4px,#0000 0) 10px 0, - linear-gradient($accent-1 0 0) 0 0; - background-size:calc(var(--n)*1ch) 200%; - -webkit-background-clip:padding-box,text; - background-clip:padding-box,text; - background-repeat:no-repeat; - animation: - b 1.6s infinite steps(1), - t calc(var(--n)*.1s) steps(var(--n)) forwards; - } - @keyframes t{ - from {background-size:0 200%} - } - @keyframes b{ - 50% {background-position:0 -100%,0 0} - } + // Animate the Gradient to move + background-size: 200% auto; + animation: moveGradient 10s linear infinite; - .typing-space{ - font-family: monospace; - font-weight: 700; - font-size: 1.7rem; - padding:20px; - } - + @keyframes moveGradient { + 0%, + 100% { + background-position: 0% 50%; + } + 10% { + background-position: 0% 50%; + } + 45% { + background-position: 100% 50%; + } + 70% { + background-position: 100% 50%; + } + 90% { + background-position: 0% 50%; + } + } } - - .about{ - margin-top: 20px; - margin-bottom: 20px; - font-size: 20px; - color: $main-text-color; - text-align: center; + + .title { + margin: auto 0; + font-family: monospace; + color: #0000; + background: linear-gradient(-90deg, $accent-1 4px, #0000 0) 10px 0, + linear-gradient($accent-1 0 0) 0 0; + background-size: calc(var(--n) * 1ch) 200%; + -webkit-background-clip: padding-box, text; + background-clip: padding-box, text; + background-repeat: no-repeat; + animation: b 1.6s infinite steps(1), + t calc(var(--n) * 0.065s) steps(var(--n)) forwards; + } + @keyframes t { + from { + background-size: 0 200%; + } + } + @keyframes b { + 50% { + background-position: 0 -100%, 0 0; + } + } + + .typing-space { + font-family: monospace; + font-weight: 700; + font-size: 1.7rem; + padding: 20px; + } + } + + .about { + margin: auto 0; + font-size: 20px; + color: $main-text-color; + } + .about h1 { + text-align: center; + } + + .about p { + margin: 1rem auto; + } + + // For mobile only use active + @media only screen and (max-width: 700px) { + .about p { + width: 90%; + } + } + // For desktop only use hover + @media only screen and (min-width: 700px) { + .about p { + width: 75%; } + } } diff --git a/web-ui/src/pages/Home/Home.tsx b/web-ui/src/pages/Home/Home.tsx index 08ef758..b45b31b 100644 --- a/web-ui/src/pages/Home/Home.tsx +++ b/web-ui/src/pages/Home/Home.tsx @@ -9,7 +9,7 @@ const Home: React.FC = (props) => { // Get the inital device size useEffect(() => { if (deviceType() === "mobile") { - setNameSize("45px"); + setNameSize("40px"); } else { setNameSize("50px"); } @@ -19,7 +19,7 @@ const Home: React.FC = (props) => { useEffect(() => { const handleResize = () => { if (deviceType() === "mobile") { - setNameSize("45px"); + setNameSize("40px"); } else { setNameSize("50px"); } @@ -37,7 +37,8 @@ const Home: React.FC = (props) => { {/* Set the style to "--n:53" */}
- Mechanical Engineering Technologist, Software Engineering Student. + Software Engineering Student, and Mechanical Engineering + Technologist.
@@ -45,10 +46,16 @@ const Home: React.FC = (props) => {

About Me

- Currently in Canada completing a Bachelors Degree in Software - Engineering. Experienced in both software and mechanical engineering. - Started engineering related design work {experience} years ago. - Passionate about automating tasks that will save people time. + I am currently in Canada completing a bachelor's degree in Software + Engineering. I have industry experience and education in both software + and mechanical engineering. I started started engineering-related + design work {experience} years ago. My passion for helping solve world + problems has driven me to always learn and grow. I am always looking + for new opportunities, feel free to get in contact with me. +

+ +

+ Thank you for visiting my website. Enjoy!