complete website rework beginning

src/css/nav/menu.css

@@ -0,0 +1,65 @@
+#menu {
+    color: white;
+    transform: scale( 0 );
+    transform-origin: top right;
+    transition: all 1s;
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100vw;
+    height: 100vh;
+    cursor: default;
+    background-color: rgb(18, 12, 59);
+}
+
+#menu.open {
+    transform: scale( 1 );
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.menu-container {
+    width: 80%;
+    height: 80%;
+}
+
+.menu-main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.menu-category {
+    padding: 2vw;
+    transition: all 1s;
+    transition-delay: 0.5s;
+}
+
+/*  TODO: Make multiple steps for this
+    TODO: Optimise for mobile devices (scale vertically) */
+
+.menu-category:hover {
+    padding-right: 15vw;
+    transition-delay: 0s;
+}
+
+.category-list {
+    transition: all 0.5s;
+    transform: scaleY( 0 );
+    position: absolute;
+    transform-origin: top;
+    transition-delay: 0s;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.menu-category:hover .category-list {
+    transform: scaleY( 1 );
+    transition-delay: 0.5s;
+}

src/css/nav/toggle.css

@@ -0,0 +1,87 @@
+.nav-container {
+    height: 13vh;
+    width: 13vh;
+    right: 0;
+    top: 0;
+    z-index: 9;
+    position: fixed;
+    transition: all 2s ease-in-out;
+    cursor: pointer;
+}
+
+.nav-toggle-container {
+    background-color: rgb(21, 21, 73);
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    justify-content: flex-start;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    border-bottom-left-radius: 100%;
+}
+
+.nav-container:hover {
+    height: 20vh;
+    width: 20vh;
+    transition: all 0.5s ease-in-out;
+}
+
+.nav-toggle-positioner {
+    width: 75%;
+    height: 75%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.nav-toggle {
+    text-decoration: none;
+    color: rgb(168, 212, 253);
+    font-size: 5vh;
+    cursor: pointer;
+    width: 35px;
+    height: 27px;
+    z-index: 11;
+    transition: 0.8s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* Nav-Hide-Show button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
+
+.line {
+    display: block;
+    width: 100%;
+    height: 3px;
+    background-color: rgb(49, 142, 230);
+}
+
+#line1 {
+    transform-origin: 0% 0%;
+    transition: transform 0.4s ease-in-out;
+}
+
+#line2 {
+    transition: transform 0.2s ease-in-out;
+}
+
+#line3 {
+    transform-origin: 0% 100%;
+    transition: transform 0.4s ease-in-out;
+}
+
+.nav-toggle.active #line1 {
+    transform: rotate( 45deg );
+}
+
+.nav-toggle.active #line2 {
+    transform: scaleY(0);
+}
+
+.nav-toggle.active #line3 {
+    transform: rotate( -45deg );
+}

src/menu.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="IE=7">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>nav</title>
+        <link rel="stylesheet" href="/css/nav/toggle.css">
+        <link rel="stylesheet" href="/css/nav/menu.css">
+    </head>
+    <body>
+        <div class="nav-container">
+            <div class="nav-toggle-container">
+                <div class="nav-toggle-positioner">
+                    <div class="nav-toggle active" onclick="menu()">
+                        <span class="line" id="line1"></span>
+                        <span class="line" id="line2"></span>
+                        <span class="line" id="line3"></span>
+                    </div>
+                </div>
+            </div>
+            <div id="menu" class="open">
+                <div class="menu-container">
+                    <h2>Menu</h2>
+                    <div class="menu-main">
+                        <div class="menu-category">
+                            <h3>Projects</h3>
+                            <div class="category-list">
+                                <a href="/projects/storagemanager" class="category-item">StorageManager</a>
+                                <a href="/projects/smuL" class="category-item">SimpleMediaUpscalerLite</a>
+                                <a href="/projects/libreevent" class="category-item">libreǝvent</a>
+                                <a href="/projects/qrscanner" class="category-item">QR & Barcode Insight</a>
+                                <a href="/projects/musicplayer" class="category-item">MusicPlayer</a>
+                                <a href="/projects/biogascontrollerapp" class="category-item">BiogasControllerApp</a>
+                                <a href="/projects/impress" class="category-item">impress.js</a>
+                            </div>
+                        </div>
+                        <div class="menu-category">
+                            <h3>About</h3>
+                            <div class="category-list">
+                                <a href="/privacypolicy" class="category-item">Privacy Policy</a>
+                                <a href="/about" class="category-item">About janishutz.com</a>
+                                <a href="/about/aboutme" class="category-item">About me</a>
+                            </div>
+                        </div>
+                        <div class="menu-category">
+                            <h3>Services</h3>
+                            <div class="category-list">
+                                <a href="/services" class="category-item">Overview</a>
+                                <a href="/services/websites" class="category-item">Custom Websites</a>
+                                <a href="/services/pcbuilding" class="category-item">PC Building</a>
+                            </div>
+                        </div>
+                        <div class="menu-category">
+                            <h3>Support</h3>
+                            <div class="category-list">
+                                <a href="/support" class="category-item">Support hub</a>
+                                <a href="/support/faq" class="category-item">FAQ</a>
+                                <a href="/support/contact" class="category-item">Contact</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script>
+            function menu () { 
+                $( '.menu-container' ).fadeToggle( 1000 );
+                $( '#menu' ).toggleClass( 'open' );
+                $( '.nav-toggle' ).toggleClass( 'active' );
+            }
+        </script>
+    </body>
+</html>