diff --git a/js/specialanimations.js b/build.js old mode 100755 new mode 100644 similarity index 100% rename from js/specialanimations.js rename to build.js diff --git a/404.html b/src/404.html similarity index 100% rename from 404.html rename to src/404.html diff --git a/about.html b/src/about/aboutme/index.html similarity index 100% rename from about.html rename to src/about/aboutme/index.html diff --git a/aboutPage.html b/src/about/index.html similarity index 100% rename from aboutPage.html rename to src/about/index.html diff --git a/assets/Logo.png b/src/assets/Logo.png similarity index 100% rename from assets/Logo.png rename to src/assets/Logo.png diff --git a/assets/codeSnippet.png b/src/assets/codeSnippet.png similarity index 100% rename from assets/codeSnippet.png rename to src/assets/codeSnippet.png diff --git a/assets/logo.xcf b/src/assets/logo.xcf similarity index 100% rename from assets/logo.xcf rename to src/assets/logo.xcf diff --git a/css/altstyle.css b/src/css/altstyle.css similarity index 100% rename from css/altstyle.css rename to src/css/altstyle.css diff --git a/css/footerstyle.css b/src/css/footerstyle.css similarity index 100% rename from css/footerstyle.css rename to src/css/footerstyle.css diff --git a/css/mainstyle.css b/src/css/mainstyle.css similarity index 100% rename from css/mainstyle.css rename to src/css/mainstyle.css diff --git a/css/menustyle.css b/src/css/menustyle.css similarity index 100% rename from css/menustyle.css rename to src/css/menustyle.css diff --git a/src/css/nav/menu.css b/src/css/nav/menu.css new file mode 100644 index 0000000..eb95f0e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/css/nav/toggle.css b/src/css/nav/toggle.css new file mode 100644 index 0000000..ebf1f80 --- /dev/null +++ b/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 ); +} \ No newline at end of file diff --git a/favicon.ico b/src/favicon.ico similarity index 100% rename from favicon.ico rename to src/favicon.ico diff --git a/footer.html b/src/footer.html similarity index 100% rename from footer.html rename to src/footer.html diff --git a/index.html b/src/index.html similarity index 100% rename from index.html rename to src/index.html diff --git a/js/basicanimations.js b/src/js/basicanimations.js similarity index 100% rename from js/basicanimations.js rename to src/js/basicanimations.js diff --git a/js/jquery.js b/src/js/jquery.js similarity index 100% rename from js/jquery.js rename to src/js/jquery.js diff --git a/src/js/specialanimations.js b/src/js/specialanimations.js new file mode 100755 index 0000000..e69de29 diff --git a/src/menu.html b/src/menu.html new file mode 100644 index 0000000..0c3c05f --- /dev/null +++ b/src/menu.html @@ -0,0 +1,75 @@ + + +
+ + + + +