re-update header for github

vuvnguyen95 · Feb 13, 2024 · 620126c · 620126c
1 parent f50c2e7
commit 620126c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 34 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -9,18 +9,16 @@
   </head>
   <body>
     <div class="heading">
-      <nav>
-        <div id="logo">
-          <img src="./images/logo2.png" alt="Logo" width="5%" />
-          <span>Vu Nguyen</span>
-          <span id="menu">
-            <a href="#top">Home</a>
-            <a href="#about">About</a>
-            <a href="#skills">Skills</a>
-            <a href="#projects">Projects</a>
-          </span>
-        </div>
-      </nav>
+        <span class="logo">
+          <img src="./images/logo2.png" alt="Logo"/>
+          <h1>Vu Nguyen</h1>
+        </span>
+        <span id="menu">
+          <a href="#top">Home</a>
+          <a href="#about">About</a>
+          <a href="#skills">Skills</a>
+          <a href="#projects">Projects</a>
+        </span>
     </div>
 
     <div class="content-wrap">

diff --git a/script.js b/script.js
@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", (e) => {
-  const menuLinks = document.querySelectorAll("nav #menu a");
+  const menuLinks = document.querySelectorAll(".menu a");
   menuLinks.forEach((link) => {
     link.addEventListener("click", function (e) {
       e.preventDefault();

diff --git a/styles.css b/styles.css
@@ -9,8 +9,8 @@
   overflow-x: scroll;
   display: flex;
   flex-wrap: nowrap;
-  width: 100vw; /* Adjust if needed */
-  height: 100vh; /* Adjust if needed */
+  width: 100vw;
+  height: 100vh; 
 }
 
 body,
@@ -35,46 +35,53 @@ html {
   z-index: 1000;
   border-bottom: 2px solid #f4f4f4;
   padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px;
 }
 .heading span {
-    color: #ffffff;
-    font-size: 1.5em;
-    letter-spacing: 2px;
-    margin-left: 20px;
+  color: #ffffff;
+  font-size: 1.5em;
+  letter-spacing: 2px;
 }
-#logo {
-  position: relative;
+.logo {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
-#logo img {
-  width: 90px; /* Adjust as needed */
+.logo h1 {
+  color: #ffffff;
+  font-size: 1.3em;
+  letter-spacing: 2px;
+  margin-left: 10px;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.logo img {
+  width: 90px;
+  flex-shrink: 0;
 }
 
 #menu {
-  position: relative;
-  padding-left: 20px;
-  left: 30%;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: 25%;
 }
 
 #menu a {
   text-decoration: none;
-  text-emphasis: bold;
   font-size: large;
   color: #ffffff;
   padding: 20px;
   border-radius: 5px;
   transition: background-color 0.3s;
-
 }
 
 #menu a:hover {