add more pages + fix bugs

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');
+}

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;
+}

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
 */

newVersion/css/navstyle.css

@@ -54,8 +54,8 @@
     color: rgb(168, 212, 253);
     font-size: 5vh;
     cursor: pointer;
-    width: 1.7vw;
+    width: 35px;
-    height: 1.29vw;
+    height: 27px;
     position: fixed;
     top: 50px;
     right: 50px;
@@ -67,8 +67,8 @@
 }
 
 .listtoggle:hover {
-    width: 2.2vw;
+    width: 45px;
-    height: 1.68vw;
+    height: 33px;
 }
 
 .listtoggle:hover .line {

newVersion/examples/index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        
+        <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+        <link rel="stylesheet" href="/css/style.css">
+        <link rel="stylesheet" href="/css/examplesStyle.css">
+        <link rel="stylesheet" href="/css/fancyStyle.css">
+
+        <meta http-equiv="X-UA-Compatible" content="IE=8">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>Order :: Development - janishutz.com</title>
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="scroll-indicator" id="scroll-hint">
+            <div class="scroll-wrapper">
+                Scroll to discover more
+                <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+            </div>
+        </div>
+
+        <div class="progress" id="progress">
+            <div class="progress-wrapper">
+                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
+                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step3">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step4">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step5">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step6">radio_button_unchecked</span>
+                <span class="material-symbols-outlined progress-item" id="step7">radio_button_unchecked</span>
+            </div>
+        </div>
+
+        <div class="step" id="step-1">
+            <div class="step-content">
+                <h1 class="gradient-purple huge small-margin">Exam&shy;ples</h1>
+                <h3 class="gradient-purple bigger">of websites I have created</h3>
+            </div>
+        </div>
+
+        
+        <div class="step reveal" id="step-2">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Libre&shy;ǝvent</h1>
+                <p class="white half-width">My flagship project - A fully free and open source event management solution</p>
+            </div>
+        </div>
+        
+        <div class="step reveal" id="step-3">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Per&shy;sonal web&shy;site</h1>
+                <p class="white half-width">My own website, where I show off my projects</p>
+            </div>
+        </div>
+        
+        <div class="step reveal" id="step-4">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">im&shy;press.js - website</h1>
+                <p class="white half-width">A website for a JavaScript presentation framework I contribute code to</p>
+            </div>
+        </div>
+
+        <div class="step reveal" id="step-5">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">im&shy;press.js - docs</h1>
+                <p class="white half-width">The documentation page for impress.js, a JavaScript presentation framework</p>
+            </div>
+        </div>
+        
+        <div class="step reveal" id="step-6">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Boo&shy;king</h1>
+                <p class="white half-width">A fully featured booking system for Language School Hossegor</p>
+            </div>
+        </div>
+        
+        <div class="step reveal" id="step-7">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Ja&shy;pan</h1>
+                <p class="white half-width">A small research project for history class at school</p>
+            </div>
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer src="/js/scrolling.js"></script>
+
+        <script>
+            $( '#nav' ).load( '/nav.html' );
+        </script>
+    </body>
+</html>

newVersion/index.html

@@ -9,6 +9,7 @@
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/homeStyle.css">
+        <link rel="stylesheet" href="/css/fancyStyle.css">
 
         <meta http-equiv="X-UA-Compatible" content="IE=8">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">

newVersion/info/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        
+        <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+        <link rel="stylesheet" href="/css/style.css">
+        <link rel="stylesheet" href="/css/homeStyle.css">
+        <link rel="stylesheet" href="/css/fancyStyle.css">
+
+        <meta http-equiv="X-UA-Compatible" content="IE=8">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>Order :: Development - janishutz.com</title>
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="scroll-indicator" id="scroll-hint">
+            <div class="scroll-wrapper">
+                Scroll to discover more
+                <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+            </div>
+        </div>
+
+        <div class="progress" id="progress">
+            <div class="progress-wrapper">
+                <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
+                <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
+            </div>
+        </div>
+
+        <div class="step" id="step-1">
+            <div class="step-content">
+                <h1 class="gradient-purple huge small-margin">Order</h1>
+                <h3 class="gradient-purple bigger">Ready for your new website?</h3>
+            </div>
+        </div>
+
+        <div class="step reveal" id="step-2">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1>
+                <p class="white">Get a website of any style you want</p>
+            </div>
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer src="/js/scrolling.js"></script>
+
+        <script>
+            $( '#nav' ).load( '/nav.html' );
+        </script>
+    </body>
+</html>

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 ) ) {
+        if ( regPos != currentlyShowing && regPos < revealables.length + 1 ) {
-            revealables[ regPos ].classList.remove( 'active' );
+            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 );
+                timeout = setTimeout( showScrollHint, 7000 );
-            }
-        } 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 );
             }
+            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;

newVersion/nav.html

@@ -14,6 +14,7 @@
                 <div class="nav-list">
                     <a class="navitem inactive" id="home" href="/">Home</a>
                     <a class="navitem inactive" id="order" href="/order">Order</a>
+                    <a class="navitem inactive" id="info" href="/info">Details</a>
                     <a class="navitem inactive" id="contact" href="/contact">Contact</a>
                     <a class="navitem inactive" id="examples" href="/examples">Examples</a>
                 </div>
@@ -27,7 +28,7 @@
         <script>
             let offset = 0;
             let menuOpen = false;
-            const offsetList = { 'home': 0, 'order': -200, 'contact': -400, 'examples': -600 };
+            const offsetList = { 'home': 0, 'order': -200, 'info': -400, 'contact': -600, 'examples': -800 };
             $( document ).ready( function () {
                 if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
                     $( '#nav-menu' ).hide( 700 );
@@ -55,10 +56,12 @@
                         $( '#nav-menu' ).css( 'background-position', `${0 + offset}px` );
                     } else if ( obj == 'order' ) {
                         $( '#nav-menu' ).css( 'background-position', `${200 + offset}px` );
-                    } else if ( obj == 'contact' ) {
+                    } else if ( obj == 'info' ) {
                         $( '#nav-menu' ).css( 'background-position', `${400 + offset}px` );
-                    } else if ( obj == 'examples' ) {
+                    } else if ( obj == 'contact' ) {
                         $( '#nav-menu' ).css( 'background-position', `${600 + offset}px` );
+                    } else if ( obj == 'examples' ) {
+                        $( '#nav-menu' ).css( 'background-position', `${800 + offset}px` );
                     }
                 } )
                 $( '.inactive' ).mouseleave ( function () {

newVersion/order/index.html

@@ -9,6 +9,7 @@
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
         <link rel="stylesheet" href="/css/style.css">
         <link rel="stylesheet" href="/css/homeStyle.css">
+        <link rel="stylesheet" href="/css/fancyStyle.css">
 
         <meta http-equiv="X-UA-Compatible" content="IE=8">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">