design, libreevent page partially done

components/scroll/scroll.css

@@ -12,8 +12,53 @@
     right: 5%;
     z-index: 7;
     width: 90%;
+    bottom: -200px;
+}
+
+#scroll-indicator.show-scroll {
+    animation: pop-in 0.5s;
     bottom: 5%;
-    display: none;
+}
+
+#scroll-indicator.hide-scroll {
+    animation: pop-out 0.5s;
+    bottom: -200px;
+}
+
+@keyframes pop-in {
+    0% {
+        bottom: -200px;
+    }
+
+    70% {
+        bottom: 6.5%;
+    }
+
+    80% {
+        bottom: 6%;
+    }
+
+    100% {
+        bottom: 5%;
+    }
+}
+
+@keyframes pop-out {
+    0% {
+        bottom: 5%;
+    }
+
+    25% {
+        bottom: 6.5%
+    }
+
+    35% {
+        bottom: 6%;
+    }
+
+    100% {
+        bottom: -200px;
+    }
 }
 
 .content {

components/scroll/scroll.js

@@ -1,82 +1,84 @@
 window.scrollHint = ( maxScroll ) => {
-    $( () => {
+    let isShowing = false;
-        let isShowing = false;
+    const el = document.getElementById( 'scroll-indicator' );
-        const el = document.getElementById( 'scroll-indicator' );
+    if ( !el ) {
-        if ( !el ) {
+        throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' );
-            throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' );
+    }
-        }
+    el.innerHTML = `
-        el.innerHTML = `
+    <div class="scroll-wrapper">
-        <div class="scroll-wrapper">
+        <div class="scroll-container">
-            <div class="scroll-container">
+            Scroll to discover more
-                Scroll to discover more
+            <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
-                <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+        </div>
-            </div>
+    </div>`;
-        </div>`;
+    
-        
+    el.onclick = () => {
-        el.onclick = () => {
+        if ( window.scrollY === 0 ) {
-            if ( window.scrollY === 0 ) {
+            window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } );
-                window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } );
+        } else if ( window.scrollY % window.innerHeight === 0 ) {
-            } else if ( window.scrollY % window.innerHeight === 0 ) {
+            window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } );
-                window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } );
+        } else {
-            } else {
+            window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
-                window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
-            }
-            $( '#scroll-indicator' ).fadeOut( 300 );
-            try {
-                clearTimeout( scrollCorrectionTimeout );
-            } catch ( _err ) {};
-            isShowing = false;
-            timeout = setTimeout( () => { showHint() }, 2500 );
         }
+        el.classList.remove( 'show-scroll' );
+        el.classList.add( 'hide-scroll' );
+        try {
+            clearTimeout( scrollCorrectionTimeout );
+        } catch ( _err ) {};
+        isShowing = false;
+        timeout = setTimeout( () => { showHint() }, 2500 );
+    }
 
-        document.onscrollend = () => {
+    document.onscrollend = () => {
-            scrollCorrectionTimeout = setTimeout( () => {
+        scrollCorrectionTimeout = setTimeout( () => {
-                scrollCorrection();
-            }, 1000 );
-            timeout = setTimeout( () => { 
-                showHint();
-            }, 2500 );
-        }
-        document.onscroll = () => {
-            try {
-                clearTimeout( timeout );
-            } catch ( _e ) {}
-            try {
-                clearTimeout( scrollCorrectionTimeout );
-            } catch ( _err ) {};
-            if ( isShowing ) {
-                isShowing = false;
-                $( '#scroll-indicator' ).fadeOut( 300 );
-            }
-        };
-
-        window.onresize = () => {
             scrollCorrection();
-            showHint();
+        }, 1000 );
-        }
+        timeout = setTimeout( () => { 
-
-        let timeout = setTimeout( () => { 
             showHint();
         }, 2500 );
-
+    }
-        let scrollCorrectionTimeout = 0;
+    document.onscroll = () => {
-        
+        try {
-        const showHint = () => {
+            clearTimeout( timeout );
-            if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
+        } catch ( _e ) {}
-                $( '#scroll-indicator' ).fadeIn( 300 );
+        try {
-                isShowing = true;
+            clearTimeout( scrollCorrectionTimeout );
-            } else {
+        } catch ( _err ) {};
-                $( '#scroll-indicator' ).fadeOut( 300 );
+        if ( isShowing ) {
-                isShowing = false;
+            isShowing = false;
-            }
+            el.classList.remove( 'show-scroll' );
-        }
+            el.classList.add( 'hide-scroll' );
-
-        const scrollCorrection = () => {
-            if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) {
-                window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } );
-            }
         }
+    };
 
+    window.onresize = () => {
         scrollCorrection();
-    } );
+        showHint();
+    }
+
+    let timeout = setTimeout( () => { 
+        showHint();
+    }, 2500 );
+
+    let scrollCorrectionTimeout = 0;
+    
+    const showHint = () => {
+        if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
+            el.classList.remove( 'hide-scroll' );
+            el.classList.add( 'show-scroll' );
+            isShowing = true;
+        } else {
+            el.classList.remove( 'show-scroll' );
+            el.classList.add( 'hide-scroll' );
+            isShowing = false;
+        }
+    }
+
+    const scrollCorrection = () => {
+        if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) {
+            window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } );
+        }
+    }
+
+    scrollCorrection();
 }

site/src/404.html

@@ -6,6 +6,16 @@
         <title>404 - Page not found | janishutz.com</title>
         <link rel="stylesheet" href="/css/slider.css">
         <link rel="stylesheet" href="/css/style.css">
+        <style>
+            .content {
+                height: 80vh;
+            }
+
+            .content h1 {
+                font-size: 8rem;
+                margin: 0;
+            }
+        </style>
     </head>
     <body>
         <nav></nav>
@@ -13,6 +23,7 @@
         <div class="content">
             <h1>404</h1>
             <p>The page you are looking for was not found!</p>
+            <a href="/" class="button">Home</a>
         </div>
 
 

site/src/css/style.css

@@ -26,6 +26,10 @@ body {
 
 .content {
     width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }
 
 .no-scroll {
@@ -38,4 +42,15 @@ body {
     color: white;
     text-decoration: none;
     border-radius: 10px;
+    transition: all 0.5s;
+}
+
+.button:hover {
+    border-radius: 5px;
+    background-color: rgb(2, 10, 27);
+}
+
+.project-logo {
+    width: 40%;
+    border-radius: 30px;
 }

site/src/projects/libreevent/index.html

@@ -38,12 +38,12 @@
                 </div>
                 <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
                     <h1>Create Events with Ease</h1>
-                    <p>Using the libreevent's powerful admin panel</p>
+                    <p>Using the libreǝvent's powerful admin panel</p>
                     <a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
                 </div>
                 <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
                     <h1>Create seat plans</h1>
-                    <p>libreevent's seat plan editor is designed to make this as easy as possible</p>
+                    <p>libreǝvent's seat plan editor is designed to make this as easy as possible</p>
                     <a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a>
                 </div>
                 <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
@@ -59,13 +59,22 @@
                 <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
                     <h1>Open Source Project</h1>
                     <p>Free Software, developed by Janis Hutz & the community</p>
-                    <a href="https://libreevent.janishutz.com" class="button">Learn more about libreevent</a>
+                    <a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
                 </div>
             </div>
             <div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div>
             <div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div>
         </div>
 
+        <div class="content">
+            <!-- TODO: Size logo better -->
+            <img src="https://libreevent.janishutz.com/assets/logo.png" alt="libreevent logo" class="project-logo">
+            <h1>libreǝvent</h1>
+            <p>Free & Open Source Event Management & Ticketing Solution</p>
+
+            
+        </div>
+
         <div id="yt-embed"></div>