start new version of website

newVersion/css/homeStyle.css

@@ -0,0 +1,39 @@
+/* 
+    Steps style
+*/
+
+body {
+    height: 300%;
+}
+
+.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;
+}
+
+.reveal {
+    position: fixed;
+    transition: 1.5s all ease;
+    transform: translateY(100vh);
+    background-color: rgb(14, 14, 14);
+}
+
+.reveal.active {
+    transform: translateY(0);
+}
+
+/* 
+    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');
+}

newVersion/css/navstyle.css

@@ -0,0 +1,158 @@
+/*
+*				myevent - navstyle.css
+*
+*	Created by Janis Hutz 03/06/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+/*
+    Default rules that are set for mobile interfaces
+*/
+#nav-menu {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85);
+    position: fixed;
+    display: block;
+    z-index: 10;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    left: 1;
+    right: 1;
+}
+
+.nav-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+
+.menuActive {
+    overflow: hidden;
+}
+
+.logo {
+    display: block;
+    width: 60vw;
+    height: auto;
+    margin: 0;
+    border-radius: 10px;
+}
+
+.listtoggle {
+    text-decoration: none;
+    color: rgb(168, 212, 253);
+    font-size: 5vh;
+    cursor: pointer;
+    width: 1.7vw;
+    height: 1.29vw;
+    position: fixed;
+    top: 50px;
+    right: 50px;
+    z-index: 11;
+    transition: 0.8s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.listtoggle:hover {
+    width: 2.2vw;
+    height: 1.68vw;
+}
+
+.listtoggle:hover .line {
+    background-color: rgb(29, 69, 105);
+    transition: 0.4s;
+}
+
+/* Nav-Hide-Show button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
+
+.line {
+    display: block;
+    width: 100%;
+    height: 3px;
+    background-color: rgb(168, 212, 253);
+}
+
+#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;
+}
+
+.listtoggle.active #line1 {
+    transform: rotate( 45deg );
+}
+
+.listtoggle.active #line2 {
+    transform: scaleY(0);
+}
+
+.listtoggle.active #line3 {
+    transform: rotate( -45deg );
+}
+
+
+/* This is the list actually containing the menu items */
+.nav-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.navitem {
+    text-decoration: none;
+    text-align: center;
+    color: rgb(107, 107, 107);;
+    font-size: 1.4rem;
+    width: fit-content;
+    padding: 2%;
+}
+
+.inactive {
+    transition: 1s;
+    color: white;
+    font-size: 1.3rem;
+}
+
+.inactive:hover {
+    font-size: 1.6rem;
+    color: rgb(107, 107, 107);
+    transition: 0.4s;
+}
+
+/* ~ --> all next & + --> next */
+.shaded {
+    color: rgb(107, 107, 107);
+    transition: 0.3s;
+}
+
+@media only screen and (min-width: 999px) {
+    .nav-container {
+        flex-direction: row;
+    }
+
+    .logo {
+        width: auto;
+        height: 70vh;
+        margin-left: 10%;
+    }
+}

newVersion/css/style.css

@@ -0,0 +1,45 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-size: calc( 16pt + 0.39vw );
+}
+
+body {
+    background-color: rgb(14, 14, 14);
+    font-family: sans-serif;
+}
+
+/*
+    GRADIENTS
+*/
+
+.gradient-purple {
+    background-image: repeating-linear-gradient(to right, rgb(85, 19, 116), rgb(131, 28, 151), rgb(119, 77, 128));
+    width: fit-content;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+
+/* 
+    SIZES
+*/
+
+.huge {
+    font-size: 500%;
+}
+
+.bigger {
+    font-size: 200%;
+}
+
+.small-margin {
+    margin: 0.5%;
+}
+
+.no-margin {
+    margin: 0;
+}

newVersion/index.html

@@ -0,0 +1,44 @@
+<!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="/css/style.css">
+        <link rel="stylesheet" href="/css/homeStyle.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>Home :: Development - janishutz.com</title>
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="step" id="step-1">
+            <h1 class="gradient-purple huge small-margin">Web&shy;sites</h1>
+            <h3 class="gradient-purple bigger">Get your new online presence</h3>
+        </div>
+
+        <div class="step reveal">
+            <h1 class="gradient-purple huge small-margin">Beau&shy;ti&shy;ful</h1>
+            <h3 class="gradient-purple bigger">yet still not expensive</h3>
+        </div>
+
+        <div class="step reveal">
+            <h1 class="gradient-purple huge small-margin">In&shy;te&shy;res&shy;ted?</h1>
+            <h3 class="gradient-purple bigger">contact me for an offer</h3>
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <!--<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
+        <script defer src="js/scrolling.js"></script>
+
+        <script>
+            $( '#nav' ).load( '/nav.html' );
+        </script>
+    </body>
+</html>

newVersion/js/scrolling.js

@@ -0,0 +1,25 @@
+$( document ).ready( function () {
+
+    document.addEventListener( 'scroll', scrolled );
+
+    let revealables = document.querySelectorAll( '.reveal' );
+
+    let currentlyShowing = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) );
+
+
+    for ( let i = 0; i < currentlyShowing; i++ ) {
+        if ( i < parseInt( revealables.length ) ) {
+            revealables[ i ].classList.add( 'active' );
+        }
+    }
+
+    function scrolled() {
+        let regPos = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) );
+        if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) {
+            revealables[ regPos ].classList.remove( 'active' );
+        } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) {
+            revealables[ currentlyShowing ].classList.add( 'active' );
+        }
+        currentlyShowing = regPos;
+    }
+} );

newVersion/nav.html

@@ -0,0 +1,54 @@
+<!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">
+        <title>nav</title>
+        <link rel="stylesheet" href="/css/navstyle.css">
+    </head>
+    <body>
+        <div id="nav-menu">
+            <div class="nav-container">
+                <img class="logo" src="https://static.janishutz.com/Logo.png" alt="logo">
+                <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="contact" href="/contact">Contact</a>
+                    <a class="navitem inactive" id="examples" href="/examples">Examples</a>
+                </div>
+            </div>
+        </div>
+        <a class="listtoggle active" onclick="toggleMenu();">
+            <span class="line" id="line1"></span>
+            <span class="line" id="line2"></span>
+            <span class="line" id="line3"></span>
+        </a>
+        <script>
+            let menuOpen = false;
+            $( document ).ready( function () {
+                if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
+                    $( '#nav-menu' ).hide( 700 );
+                    $( '.listtoggle' ).removeClass( 'active' );
+                } else {
+                    $( '#nav-menu' ).css( 'display', 'none' );
+                    $( '.listtoggle' ).removeClass( 'active' );
+                }
+                if ( location.pathname === '/' ) {
+                    $( '#home' ).removeClass( 'inactive' );
+                } else {
+                    $( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).removeClass( 'inactive' );
+                }
+                sessionStorage.setItem( 'menuOpen', 'false' );
+            } );
+
+            function toggleMenu () {
+                menuOpen = !menuOpen;
+                $( '#nav-menu' ).toggle( 600 );
+                $( 'body' ).toggleClass( 'menuActive' );
+                $( '.listtoggle' ).toggleClass( 'active' );
+                sessionStorage.setItem( 'menuOpen', String( menuOpen ) );
+            };
+        </script>
+    </body>
+</html>