From e5b35857611e2b24045a2cf44ed64d97a4d0bb92 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Thu, 13 Jul 2023 16:52:23 +0200 Subject: [PATCH] complete website rework beginning --- js/specialanimations.js => build.js | 0 404.html => src/404.html | 0 about.html => src/about/aboutme/index.html | 0 aboutPage.html => src/about/index.html | 0 {assets => src/assets}/Logo.png | Bin {assets => src/assets}/codeSnippet.png | Bin {assets => src/assets}/logo.xcf | Bin {css => src/css}/altstyle.css | 0 {css => src/css}/footerstyle.css | 0 {css => src/css}/mainstyle.css | 0 {css => src/css}/menustyle.css | 0 src/css/nav/menu.css | 65 +++++++++++++ src/css/nav/toggle.css | 87 ++++++++++++++++++ favicon.ico => src/favicon.ico | Bin footer.html => src/footer.html | 0 index.html => src/index.html | 0 {js => src/js}/basicanimations.js | 0 {js => src/js}/jquery.js | 0 src/js/specialanimations.js | 0 src/menu.html | 75 +++++++++++++++ menu.html => src/menu_old.html | 0 .../privacypolicy/index.html | 0 .../projects/biogascontrollerapp/index.html | 0 src/projects/impress/index.html | 0 projects.html => src/projects/index.html | 0 .../projects/musicplayer/index.html | 0 .../projects/qrscanner/index.html | 0 .../smuL.html => src/projects/smuL/index.html | 0 .../projects/storagemanager/index.html | 0 {search => src/search}/index.html | 0 services.html => src/services/index.html | 0 support.html => src/support/index.html | 0 32 files changed, 227 insertions(+) rename js/specialanimations.js => build.js (100%) mode change 100755 => 100644 rename 404.html => src/404.html (100%) rename about.html => src/about/aboutme/index.html (100%) rename aboutPage.html => src/about/index.html (100%) rename {assets => src/assets}/Logo.png (100%) rename {assets => src/assets}/codeSnippet.png (100%) rename {assets => src/assets}/logo.xcf (100%) rename {css => src/css}/altstyle.css (100%) rename {css => src/css}/footerstyle.css (100%) rename {css => src/css}/mainstyle.css (100%) rename {css => src/css}/menustyle.css (100%) create mode 100644 src/css/nav/menu.css create mode 100644 src/css/nav/toggle.css rename favicon.ico => src/favicon.ico (100%) rename footer.html => src/footer.html (100%) rename index.html => src/index.html (100%) rename {js => src/js}/basicanimations.js (100%) rename {js => src/js}/jquery.js (100%) create mode 100755 src/js/specialanimations.js create mode 100644 src/menu.html rename menu.html => src/menu_old.html (100%) rename privacypolicy.html => src/privacypolicy/index.html (100%) rename projects/bgac.html => src/projects/biogascontrollerapp/index.html (100%) create mode 100644 src/projects/impress/index.html rename projects.html => src/projects/index.html (100%) rename projects/musiplayer.html => src/projects/musicplayer/index.html (100%) rename projects/qrinsight.html => src/projects/qrscanner/index.html (100%) rename projects/smuL.html => src/projects/smuL/index.html (100%) rename projects/storagemanager.html => src/projects/storagemanager/index.html (100%) rename {search => src/search}/index.html (100%) rename services.html => src/services/index.html (100%) rename support.html => src/support/index.html (100%) 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 @@ + + + + + + + + nav + + + + +
+
+
+
+ + + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/menu.html b/src/menu_old.html similarity index 100% rename from menu.html rename to src/menu_old.html diff --git a/privacypolicy.html b/src/privacypolicy/index.html similarity index 100% rename from privacypolicy.html rename to src/privacypolicy/index.html diff --git a/projects/bgac.html b/src/projects/biogascontrollerapp/index.html similarity index 100% rename from projects/bgac.html rename to src/projects/biogascontrollerapp/index.html diff --git a/src/projects/impress/index.html b/src/projects/impress/index.html new file mode 100644 index 0000000..e69de29 diff --git a/projects.html b/src/projects/index.html similarity index 100% rename from projects.html rename to src/projects/index.html diff --git a/projects/musiplayer.html b/src/projects/musicplayer/index.html similarity index 100% rename from projects/musiplayer.html rename to src/projects/musicplayer/index.html diff --git a/projects/qrinsight.html b/src/projects/qrscanner/index.html similarity index 100% rename from projects/qrinsight.html rename to src/projects/qrscanner/index.html diff --git a/projects/smuL.html b/src/projects/smuL/index.html similarity index 100% rename from projects/smuL.html rename to src/projects/smuL/index.html diff --git a/projects/storagemanager.html b/src/projects/storagemanager/index.html similarity index 100% rename from projects/storagemanager.html rename to src/projects/storagemanager/index.html diff --git a/search/index.html b/src/search/index.html similarity index 100% rename from search/index.html rename to src/search/index.html diff --git a/services.html b/src/services/index.html similarity index 100% rename from services.html rename to src/services/index.html diff --git a/support.html b/src/support/index.html similarity index 100% rename from support.html rename to src/support/index.html