From 5f69d25662e747e0610b8e67e2a9ba5983a8aeb7 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 19 May 2023 20:36:23 +0200 Subject: [PATCH] add more pages + fix bugs --- newVersion/css/examplesStyle.css | 53 ++++++++++++++ newVersion/css/fancyStyle.css | 119 ++++++++++++++++++++++++++++++ newVersion/css/homeStyle.css | 120 ------------------------------- newVersion/css/navstyle.css | 8 +-- newVersion/examples/index.html | 99 +++++++++++++++++++++++++ newVersion/index.html | 1 + newVersion/info/index.html | 58 +++++++++++++++ newVersion/js/scrolling.js | 33 ++++----- newVersion/nav.html | 9 ++- newVersion/order/index.html | 1 + 10 files changed, 356 insertions(+), 145 deletions(-) create mode 100644 newVersion/css/examplesStyle.css create mode 100644 newVersion/css/fancyStyle.css create mode 100644 newVersion/examples/index.html create mode 100644 newVersion/info/index.html diff --git a/newVersion/css/examplesStyle.css b/newVersion/css/examplesStyle.css new file mode 100644 index 0000000..74ed1ea --- /dev/null +++ b/newVersion/css/examplesStyle.css @@ -0,0 +1,53 @@ +body { + height: 500%; +} + + +/* + Styles for individual steps +*/ + +#step-1 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( 'https://static.janishutz.com/Logo.png'); +} + +#step-2 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage6.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-3 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage2.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-4 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage3.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-5 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage5.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-6 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage4.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-7 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage1.png'); +} diff --git a/newVersion/css/fancyStyle.css b/newVersion/css/fancyStyle.css new file mode 100644 index 0000000..89965d3 --- /dev/null +++ b/newVersion/css/fancyStyle.css @@ -0,0 +1,119 @@ +/* + Steps style +*/ + +.step { + font-family: Lobster; + display: flex; + flex-direction: column; + justify-content: center; + height: 100vh; + margin-left: 0; + width: 100vw; + font-size: 150%; + margin: 0; + padding: 0; +} + +.step-content { + width: 90%; + margin-left: 2.5%; +} + +.reveal { + position: fixed; + transition: 1.5s all ease; + transform: translateY(100vh); + background-color: rgb(14, 14, 14); +} + +.reveal.active { + transform: translateY(0); +} + +.scroll-indicator { + position: fixed; + right: 5%; + z-index: 7; + width: 90%; + bottom: 5%; + display: none; +} + +.scroll-wrapper { + color: rgb(221, 221, 221); + font-size: 80%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} + +.scroll-symbol { + font-size: 180%; + animation: scroll-animation infinite 4s ease-in-out; +} + +@keyframes scroll-animation { + 0% { + opacity: 0; + transform: translateY(0); + } + 10% { + opacity: 1; + } + 65% { + opacity: 0.8; + } + 75% { + opacity: 0; + transform: translateY(25px); + } + 100% { + opacity: 0; + } +} + +.progress { + display: flex; + justify-content: center; + align-items: center; + height: 90%; + top: 5%; + right: 2%; + z-index: 5; + position: fixed; +} + +.progress-wrapper { + display: flex; + color: white; + border-radius: 50px; + flex-direction: column; + max-width: min-content; +} + +.progress-item { + cursor: pointer; +} + + +.background-images { + position: fixed; +} + +.hidables, #img1 { + position: fixed; + height: 100vh; + width: auto; + top: 0%; + display: block; + right: 0%; + opacity: 0; + transition: all 2s; +} + +.visible { + opacity: 1; +} \ No newline at end of file diff --git a/newVersion/css/homeStyle.css b/newVersion/css/homeStyle.css index 8614759..0d9c96c 100644 --- a/newVersion/css/homeStyle.css +++ b/newVersion/css/homeStyle.css @@ -1,127 +1,7 @@ -/* - Steps style -*/ - body { height: 400%; } -.step { - font-family: Lobster; - display: flex; - flex-direction: column; - justify-content: center; - height: 100vh; - margin-left: 0; - width: 100vw; - font-size: 150%; - margin: 0; - padding: 0; -} - -.step-content { - width: 90%; - margin-left: 2.5%; -} - -.reveal { - position: fixed; - transition: 1.5s all ease; - transform: translateY(100vh); - background-color: rgb(14, 14, 14); -} - -.reveal.active { - transform: translateY(0); -} - -.scroll-indicator { - position: fixed; - right: 5%; - z-index: 11; - width: 90%; - bottom: 5%; - display: none; -} - -.scroll-wrapper { - color: rgb(221, 221, 221); - font-size: 80%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; -} - -.scroll-symbol { - font-size: 180%; - animation: scroll-animation infinite 4s ease-in-out; -} - -@keyframes scroll-animation { - 0% { - opacity: 0; - transform: translateY(0); - } - 10% { - opacity: 1; - } - 65% { - opacity: 0.8; - } - 75% { - opacity: 0; - transform: translateY(25px); - } - 100% { - opacity: 0; - } -} - -.progress { - display: flex; - justify-content: center; - align-items: center; - height: 90%; - top: 5%; - right: 2%; - z-index: 5; - position: fixed; -} - -.progress-wrapper { - display: flex; - color: white; - border-radius: 50px; - flex-direction: column; - max-width: min-content; -} - -.progress-item { - cursor: pointer; -} - - -.background-images { - position: fixed; -} - -.hidables, #img1 { - position: fixed; - height: 100vh; - width: auto; - top: 0%; - display: block; - right: 0%; - opacity: 0; - transition: all 2s; -} - -.visible { - opacity: 1; -} - /* Styles for individual steps */ diff --git a/newVersion/css/navstyle.css b/newVersion/css/navstyle.css index 25d384a..ae24916 100644 --- a/newVersion/css/navstyle.css +++ b/newVersion/css/navstyle.css @@ -54,8 +54,8 @@ color: rgb(168, 212, 253); font-size: 5vh; cursor: pointer; - width: 1.7vw; - height: 1.29vw; + width: 35px; + height: 27px; position: fixed; top: 50px; right: 50px; @@ -67,8 +67,8 @@ } .listtoggle:hover { - width: 2.2vw; - height: 1.68vw; + width: 45px; + height: 33px; } .listtoggle:hover .line { diff --git a/newVersion/examples/index.html b/newVersion/examples/index.html new file mode 100644 index 0000000..2170553 --- /dev/null +++ b/newVersion/examples/index.html @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + Order :: Development - janishutz.com + + + +
+
+ Scroll to discover more + keyboard_double_arrow_down +
+
+ +
+
+ radio_button_checked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked +
+
+ +
+
+

Exam­ples

+

of websites I have created

+
+
+ + +
+
+

Libre­ǝvent

+

My flagship project - A fully free and open source event management solution

+
+
+ +
+
+

Per­sonal web­site

+

My own website, where I show off my projects

+
+
+ +
+
+

im­press.js - website

+

A website for a JavaScript presentation framework I contribute code to

+
+
+ +
+
+

im­press.js - docs

+

The documentation page for impress.js, a JavaScript presentation framework

+
+
+ +
+
+

Boo­king

+

A fully featured booking system for Language School Hossegor

+
+
+ +
+
+

Ja­pan

+

A small research project for history class at school

+
+
+ + + + + + + \ No newline at end of file diff --git a/newVersion/index.html b/newVersion/index.html index b002f8b..9b918fb 100644 --- a/newVersion/index.html +++ b/newVersion/index.html @@ -9,6 +9,7 @@ + diff --git a/newVersion/info/index.html b/newVersion/info/index.html new file mode 100644 index 0000000..19d4801 --- /dev/null +++ b/newVersion/info/index.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + Order :: Development - janishutz.com + + + +
+
+ Scroll to discover more + keyboard_double_arrow_down +
+
+ +
+
+ radio_button_checked + radio_button_unchecked +
+
+ +
+
+

Order

+

Ready for your new website?

+
+
+ +
+
+

Beau­ti­ful

+

Get a website of any style you want

+
+
+ + + + + + + \ No newline at end of file diff --git a/newVersion/js/scrolling.js b/newVersion/js/scrolling.js index 5769b22..a51b80f 100644 --- a/newVersion/js/scrolling.js +++ b/newVersion/js/scrolling.js @@ -7,7 +7,7 @@ $( document ).ready( function () { let revealables = document.querySelectorAll( '.reveal' ); let heights = $( document ).height() / ( revealables.length + 1 ); - let currentlyShowing = Math.round( window.scrollY / heights ); + let currentlyShowing = Math.round( window.scrollY / heights ) < revealables.length + 1 ? Math.round( window.scrollY / heights ) : revealables.length; for ( let i = 0; i < currentlyShowing; i++ ) { if ( i < parseInt( revealables.length ) ) { @@ -17,7 +17,7 @@ $( document ).ready( function () { trackProgress(); - let timeout = setTimeout( showScrollHint, 5000 ); + let timeout = setTimeout( showScrollHint, 3500 ); if ( currentlyShowing >= revealables.length ) { clearTimeout( timeout ); @@ -27,30 +27,30 @@ $( document ).ready( function () { if ( sessionStorage.getItem( 'menuOpen' ) == 'false' ) { $( '#scroll-hint' ).fadeIn( 300 ); } else { - timeout = setTimeout( showScrollHint, 10000 ); + timeout = setTimeout( showScrollHint, 7000 ); } } function scrolled() { heights = $( document ).height() / ( revealables.length + 1 ); let regPos = Math.round( window.scrollY / heights ); - if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) { - revealables[ regPos ].classList.remove( 'active' ); + if ( regPos != currentlyShowing && regPos < revealables.length + 1 ) { + for ( let i = 0; i < regPos + 1; i++ ) { + $( `#step-${i + 1}` ).addClass( 'active' ); + } + + for ( let i = regPos + 1; i < revealables.length + 1; i++ ) { + $( `#step-${i + 1}` ).removeClass( 'active' ); + } + clearTimeout( timeout ); $( '#scroll-hint' ).fadeOut( 300 ); if ( regPos < revealables.length ) { - timeout = setTimeout( showScrollHint, 10000 ); - } - } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) { - revealables[ currentlyShowing ].classList.add( 'active' ); - clearTimeout( timeout ); - $( '#scroll-hint' ).fadeOut( 300 ); - if ( regPos < revealables.length ) { - timeout = setTimeout( showScrollHint, 10000 ); + timeout = setTimeout( showScrollHint, 7000 ); } + currentlyShowing = regPos; + trackProgress(); } - currentlyShowing = regPos; - trackProgress(); } function trackProgress () { @@ -61,13 +61,10 @@ $( document ).ready( function () { $( '.progress-item' ).click( function () { let future = parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1; for ( let i = 0; i < future + 1; i++ ) { - $( `#step${i + 1}` ).html( `radio_button_checked` ); $( `#step-${i + 1}` ).addClass( 'active' ); } for ( let i = future + 1; i < revealables.length + 1; i++ ) { - console.log( i + 1 ); - $( `#step${i + 1}` ).html( `radio_button_unchecked` ); $( `#step-${i + 1}` ).removeClass( 'active' ); } currentlyShowing = future; diff --git a/newVersion/nav.html b/newVersion/nav.html index 171f294..467cf55 100644 --- a/newVersion/nav.html +++ b/newVersion/nav.html @@ -14,6 +14,7 @@
Home Order + Details Contact Examples
@@ -27,7 +28,7 @@