start working on nav menu

site/src/css/footer.css

@@ -0,0 +1,3 @@
+footer .logo {
+    height: 40vh;
+}

site/src/css/nav.css

@@ -1,3 +1,88 @@
-nav .logo {
+nav {
-    height: 10vh;
+    display: flex;
+    width: 100vw;
+    height: 20vh;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(226, 226, 226);
+}
+
+nav .logo {
+    height: 90%;
+    border-radius: 20px;
+}
+
+nav a {
+    /* TODO: Update colours */
+    color: black;
+    text-decoration: none;
+}
+
+nav .nav-link-wrapper .nav-link-dropdown {
+    transform: scaleY( 0 );
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 100%;
+    transform-origin: top;
+    transition: transform 0.5s;
+    background-color: white;
+    border-radius: 10px;
+    padding: 15px;
+    z-index: 2;
+}
+
+nav .nav-link-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    cursor: pointer;
+    position: relative;
+    width: 10%;
+    min-width: 50px;
+    z-index: 20;
+}
+
+nav .nav-link-wrapper:hover {
+    color: gray;
+}
+
+nav .nav-link-wrapper .nav-link-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    transition: all 0.5s;
+    padding: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    position: relative;
+    z-index: 2;
+}
+
+nav .nav-link-wrapper:hover .nav-link-header {
+    background-color: white;
+}
+
+nav .nav-link-wrapper:hover .nav-link-dropdown {
+    transform: scaleY( 1 );
+}
+
+nav .nav-link-wrapper .nav-link-header::before {
+    border: white 15px solid;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: calc( 100% - 15px );
+    bottom: -15px;
+    border-bottom-right-radius: 30px;
+    content: " ";
+    z-index: -1;
+}
+
+nav .nav-link-wrapper:hover .nav-link-header::before {
+    
 }

site/src/css/style.css

@@ -1,4 +1,5 @@
 @import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' );
+@import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' );
 @import url( '/css/nav.css' );
 @import url( '/css/footer.css' );
 
@@ -9,4 +10,20 @@ body {
     padding: 0;
     margin: 0;
     font-family: 'Manrope', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.material-symbols-outlined {
+    font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 48
+}
+
+.content {
+    width: 80%;
 }

site/src/index.html

@@ -47,7 +47,7 @@
         </div>
 
         <div class="content">
-            
+            <h1>My work</h1>
         </div>
 
 

site/src/nav.html

@@ -1,27 +1,50 @@
-<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
+<div class="nav-link-wrapper">
-<div>
+    <div class="nav-link-header">
-    <div class="nav-link-wrapper">
+        <span class="material-symbols-outlined">lightbulb</span>
         <a href="/projects">Projects</a>
-        <div class="nav-link-dropdown">
-            <a href="/projects/storagemanager">StorageManager</a>
-            <a href="/projects/qrscanner">QR & Barcode Insight</a>
-            <a href="/projects/libreevent">libreǝvent</a>
-        </div>
     </div>
-    <div class="nav-link-wrapper">
+    <div class="nav-link-dropdown">
-        <a href="/projects">About</a>
+        <a href="/projects">View all</a>
-        <div class="nav-link-dropdown">
+        <a href="/projects/storagemanager">StorageManager</a>
-            <a href="/about/aboutme">StorageManager</a>
+        <a href="/projects/qrscanner">QR & Barcode Insight</a>
-            <a href="/projects/qrscanner">QR & Barcode Insight</a>
+        <a href="/projects/libreevent">libreǝvent</a>
-            <a href="/projects/libreevent">libreǝvent</a>
+    </div>
-        </div>
+</div>
-    </div>
+
-    <div class="nav-link-wrapper">
+<div class="nav-link-wrapper">
-        <a href="/projects">Support</a>
+    <div class="nav-link-header">
-        <div class="nav-link-dropdown">
+        <span class="material-symbols-outlined">build</span>
-            <a href="/projects/storagemanager">StorageManager</a>
+        <a href="/services">Services</a>
-            <a href="/projects/qrscanner">QR & Barcode Insight</a>
+    </div>
-            <a href="/projects/libreevent">libreǝvent</a>
+    <div class="nav-link-dropdown">
-        </div>
+        <a href="https://store.janishutz.com">Store</a>
+        <a href="https://id.janishutz.com">Account</a>
+        <a href="https://development.janishutz.com">Custom Websites</a>
+    </div>
+</div>
+
+<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
+
+<div class="nav-link-wrapper">
+    <div class="nav-link-header">
+        <span class="material-symbols-outlined">info</span>
+        <a href="/about">About</a>
+    </div>
+    <div class="nav-link-dropdown">
+        <a href="/about">About janishutz.com</a>
+        <a href="/about/aboutme">About Janis Hutz</a>
+        <a href="/legal">Legal</a>
+    </div>
+</div>
+
+<div class="nav-link-wrapper">
+    <div class="nav-link-header">
+        <span class="material-symbols-outlined">support_agent</span>
+        <a href="/projects">Support</a>
+    </div>
+    <div class="nav-link-dropdown">
+        <a href="https://support.janishutz.com">Support Hub</a>
+        <a href="https://support.janishutz.com/knowledgebase.php">Knowledgebase</a>
+        <a href="/support/old">Old websites</a>
     </div>
 </div>