From ec3803c79734a882781945817b21b5b2ce2f897b Mon Sep 17 00:00:00 2001
From: Austin Hutchen <hutchencodes@gmail.com>
Date: Thu, 24 Oct 2024 05:54:57 -0600
Subject: [PATCH] navbar opt

---
 src/components/common/navbar.tsx | 40 ++++++++++++++++----------------
 src/css/navBar.css               |  8 +++----
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/common/navbar.tsx b/src/components/common/navbar.tsx
index 966fb738..9ccb96ed 100644
--- a/src/components/common/navbar.tsx
+++ b/src/components/common/navbar.tsx
@@ -51,7 +51,7 @@ export const NavBar: React.FC = () => {
         <Collapse isOpen={isOpen} navbar className="navFlex">
           <Nav className="mr-auto d-flex justify-content-center align-items-center nav-horizontal" navbar>
             <NavItem className="nav-item">
-              <Button style={{ border: '1px solid white' }} onClick={() => nav('/')}>
+              <Button style={{ border: '1px solid blue' }} onClick={() => nav('/')}>
                 <img src={home} width={icon_width} height={icon_height} alt="home" />
                 <h3>
                   Home
@@ -59,7 +59,7 @@ export const NavBar: React.FC = () => {
               </Button>
             </NavItem >
             <NavItem className="nav-item">
-              <Button style={{ border: '1px solid white' }} onClick={() => nav('/AboutMe')}>
+              <Button style={{ border: '1px solid blue' }} onClick={() => nav('/AboutMe')}>
                 <img src={about} width={icon_width} height={icon_height} alt="about" />
                 <h3>
                   About
@@ -67,7 +67,7 @@ export const NavBar: React.FC = () => {
               </Button>
             </NavItem>
             <NavItem className="nav-item">
-              <Button style={{ border: '1px solid white' }} onClick={() => nav('/Resume')}>
+              <Button style={{ border: '1px solid blue' }} onClick={() => nav('/Resume')}>
                 <img src={resume} width={icon_width} height={icon_height} alt="resume" />
                 <h3>
                   Resume
@@ -75,7 +75,7 @@ export const NavBar: React.FC = () => {
               </Button>
             </NavItem>
             <NavItem className="nav-item">
-              <Button style={{ border: '1px solid white' }} onClick={() => nav('/Projects')}>
+              <Button style={{ border: '1px solid blue' }} onClick={() => nav('/Projects')}>
                 <img src={projects} width={icon_width} height={icon_height} alt="projects" />
                 <h3>
                   Software
@@ -84,7 +84,7 @@ export const NavBar: React.FC = () => {
               </Button>
             </NavItem>
             <NavItem className="nav-item">
-              <Button style={{ border: '1px solid white' }} onClick={() => nav('/Gallery')}>
+              <Button style={{ border: '1px solid blue' }} onClick={() => nav('/Gallery')}>
                 <img src={microChip} width={icon_width} height={icon_height} alt="cube" />
                 <h3>
                   Embedded
@@ -94,15 +94,15 @@ export const NavBar: React.FC = () => {
             </NavItem>
 
 
-            <NavItem className="nav-item">
-              <Button style={{ border: '1px solid white' }} onClick={() => nav('/Feedback')}>
+            <NavItem >
+              <Button style={{ border: '1px solid blue' }} onClick={() => nav('/Feedback')}>
                 <img src={feedback} width={icon_width} height={icon_height} alt="feedback" />
                 <h3>
                   Feedback
                 </h3>
               </Button>
             </NavItem>
-            <NavItem className="nav-item" >
+            <NavItem >
               <Button style={{ border: '1px solid white' }} >
                 <a href="https://github.com/austinhutchen" target="_blank" rel="noopener noreferrer">
                   <img src={github} width={icon_width} height={icon_height} alt="GitHub" />
@@ -112,10 +112,10 @@ export const NavBar: React.FC = () => {
                 </a>
               </Button>
             </NavItem>
-            <NavItem className="nav-item">
-              <Button style={{ border: '1px solid white' }} >
+            <NavItem >
+              <Button >
                 <a href="https://www.instagram.com/austinscode/" target="_blank" rel="noopener noreferrer">
-                  <img src={instagram} width={icon_width} height={icon_height} className="nav-icon" alt="instagram" />
+                  <img src={instagram} width={icon_width} height={icon_height}  alt="instagram" />
                   <h3>
                     Instagram
                   </h3>
@@ -123,26 +123,26 @@ export const NavBar: React.FC = () => {
                 </a>
               </Button>
             </NavItem>
-            <NavItem className="nav-item" >
-              <Button style={{ border: '1px solid white' }} >
+            <NavItem >
+              <Button  >
                 <a href="https://www.facebook.com/austinhutchen/reels/" target="_blank" rel="noopener noreferrer">
-                  <img src={facebook} width={icon_width} height={icon_height} className="nav-icon" alt="facebook" />
+                  <img src={facebook} width={icon_width} height={icon_height}  alt="facebook" />
                   Facebook
                 </a>
               </Button>
             </NavItem>
-            <NavItem className="nav-item" >
-              <Button style={{ border: '1px solid white' }} >
+            <NavItem >
+              <Button >
                 <a href="https://leetcode.com/austinhutchen/" target="_blank" rel="noopener noreferrer">
-                  <img src={leetcode} width={icon_width} height={icon_height} className="nav-icon" alt="leetcode" />
+                  <img src={leetcode} width={icon_width} height={icon_height}  alt="leetcode" />
                   Leetcode
                 </a>
               </Button>
             </NavItem>
-            <NavItem className="nav-item" >
-              <Button style={{ border: '1px solid white' }} >
+            <NavItem  >
+              <Button  >
                 <a href="https://www.linkedin.com/in/austin-hutchen-15440a1b2/" target="_blank" rel="noopener noreferrer">
-                  <img src={linkedin} width={icon_width} height={icon_height} className="nav-icon" alt="LinkedIn" />
+                  <img src={linkedin} width={icon_width} height={icon_height}  alt="LinkedIn" />
                   LinkedIn
                 </a>
               </Button>
diff --git a/src/css/navBar.css b/src/css/navBar.css
index 179d54c5..a69e3521 100644
--- a/src/css/navBar.css
+++ b/src/css/navBar.css
@@ -142,7 +142,7 @@ a:hover {
 
 .custom-navbar {
   display: flex;
-  margin: auto;
+  margin: 0 auto;
   background-color: rgba(0, 0, 0, 0.05);
   align-items: center;
   justify-content: center;
@@ -150,9 +150,9 @@ a:hover {
   /* Position at the top */
   animation: slideIn 0.5s cubic-bezier(.24, .51, .8, .94) both;
   z-index: 1000;
-  max-width: 100%;
+  max-width: max-content;
   /* Ensure the navbar is above other elements */
-  border-radius: 8vw;
+  border-radius: 4vw;
 }
 
 .clickIcon {
@@ -276,5 +276,5 @@ a:active {
 
 .nav-icon {
   border-image-source: url('../../public/fast_imgs/border.webp');
-  border-image-width: 6svh;
+  border-image-width: 4svh;
 }
\ No newline at end of file