navbar opt

austinhutchen · Oct 24, 2024 · ec3803c · ec3803c
1 parent 022977b
commit ec3803c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/components/common/navbar.tsx b/src/components/common/navbar.tsx
@@ -51,31 +51,31 @@ 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
                 </h3>
               </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
                 </h3>
               </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
                 </h3>
               </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,37 +112,37 @@ 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>
 
                 </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
@@ -142,17 +142,17 @@ 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;
   top: 0;
   /* 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;
 }