janishutz-website/development-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress on website

Browse Source
This commit is contained in:
Janis Hutz
2023-05-19 18:30:28 +02:00
parent d856df8e1b
commit 9207db9a59
14 changed files with 245 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
newVersion/assets/screenshotCode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
newVersion/assets/screenshotPage1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
newVersion/assets/screenshotPage2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

BIN
newVersion/assets/screenshotPage3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 454 KiB

BIN
newVersion/assets/screenshotPage4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
newVersion/assets/screenshotPage5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
newVersion/assets/screenshotPage6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

121
newVersion/css/homeStyle.css
View File

@@ -35,10 +35,131 @@ body {
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
*/
#step-1 {
position: fixed;
background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 ));
}
#step-2 {
position: fixed;
background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage1.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/screenshotPage4.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( 'https://static.janishutz.com/Logo.png');
}

8
newVersion/css/navstyle.css
View File

@@ -72,7 +72,7 @@
}
.listtoggle:hover .line {
background-color: rgb(29, 69, 105);
background-color: rgb(58, 149, 224);
transition: 0.4s;
}
@@ -124,7 +124,7 @@
.navitem {
text-decoration: none;
text-align: center;
color: rgb(29, 69, 105);
color: rgb(168, 212, 253);
font-size: 1.4rem;
width: fit-content;
padding: 2%;
@@ -138,13 +138,13 @@
.inactive:hover {
font-size: 1.6rem;
color: rgb(29, 69, 105);
color: rgb(168, 212, 253);
transition: 0.4s;
}
/* ~ --> all next & + --> next */
.shaded {
color: rgb(29, 69, 105);
color: rgb(168, 212, 253);
transition: 0.3s;
}

11
newVersion/css/style.css
View File

@@ -20,12 +20,21 @@ body {
-webkit-text-fill-color: currentColor;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
/*
GRADIENTS
*/
.gradient-purple {
background-image: repeating-linear-gradient(to right, rgb(85, 19, 116), rgb(131, 28, 151), rgb(119, 77, 128));
background-image: repeating-linear-gradient(to right, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214));
width: fit-content;
-webkit-background-clip: text;
background-clip: text;

41
newVersion/index.html
View File

@@ -6,6 +6,7 @@
<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">
@@ -18,6 +19,34 @@
</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>
</div>
</div>
<div class="background-images" id="images">
<img src="/assets/screenshotPage1.png" id="img1" style="z-index: -6; opacity: 1;">
<img src="/assets/screenshotPage2.png" id="img2" class="hidables" style="z-index: -5;">
<img src="/assets/screenshotPage3.png" id="img3" class="hidables" style="z-index: -4;">
<img src="/assets/screenshotPage4.png" id="img4" class="hidables" style="z-index: -3;">
<img src="/assets/screenshotPage5.png" id="img5" class="hidables" style="z-index: -2;">
<img src="/assets/screenshotPage6.png" id="img6" class="hidables" style="z-index: -1;">
</div>
<div class="step" id="step-1">
<div class="step-content">
<h1 class="gradient-purple huge small-margin">Web&shy;sites</h1>
@@ -25,35 +54,36 @@
</div>
</div>
<div class="step reveal">
<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 half-width">Get a website of any style you want</p>
</div>
</div>
<div class="step reveal">
<div class="step reveal" id="step-3">
<div class="step-content">
<h1 class="gradient-purple biggest small-margin">Cus&shy;tom</h1>
<p class="white half-width">Built with the technologies used by frameworks, but without the downsides that come with them</p>
</div>
</div>
<div class="step reveal">
<div class="step reveal" id="step-4">
<div class="step-content">
<h1 class="gradient-purple biggest small-margin">Static</h1>
<p class="white half-width">Websites that display your content in a stylish, beautiful manner, like this page</p>
</div>
</div>
<div class="step reveal">
<div class="step reveal" id="step-5">
<div class="step-content">
<h1 class="gradient-purple biggest small-margin">Dynamic</h1>
<p class="white half-width">Websites that include blogs, contact forms, registration forms and many more dynamic features, like the order page</p>
</div>
</div>
<div class="step reveal">
<div class="step reveal" id="step-6">
<div class="step-content">
<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>
@@ -62,6 +92,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script defer src="/js/scrolling.js"></script>
<script defer src="/js/index.js"></script>
<script>
$( '#nav' ).load( '/nav.html' );

13
newVersion/js/index.js
View File

@@ -0,0 +1,13 @@
setInterval( backgroundSwitching, 10000 );
let id = 2;
function backgroundSwitching () {
$( `#img${id}` ).addClass( 'visible' );
if ( id > 6 ) {
id = 2;
$( `.hidables` ).removeClass( 'visible' );
} else {
id++;
}
}

51
newVersion/js/scrolling.js
View File

@@ -1,5 +1,7 @@
$( document ).ready( function () {
sessionStorage.getItem( 'menuOpen' ) ? sessionStorage.setItem( 'menuOpen', sessionStorage.getItem( 'menuOpen' ) ) : sessionStorage.setItem( 'menuOpen', false );
document.addEventListener( 'scroll', scrolled );
document.addEventListener( 'resize', scrolled );
@@ -13,14 +15,63 @@ $( document ).ready( function () {
}
}
trackProgress();
let timeout = setTimeout( showScrollHint, 10000 );
if ( currentlyShowing >= revealables.length ) {
clearTimeout( timeout );
}
function showScrollHint () {
if ( !sessionStorage.getItem( 'menuOpen' ) ) {
$( '#scroll-hint' ).fadeIn( 300 );
} else {
timeout = setTimeout( showScrollHint, 10000 );
}
}
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' );
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 );
}
}
currentlyShowing = regPos;
trackProgress();
}
function trackProgress () {
$( '.progress-item' ).html( `radio_button_unchecked` );
document.getElementById( `step${currentlyShowing + 1}` ).innerHTML = `radio_button_checked`;
}
$( '.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;
trackProgress();
window.scrollTo( { top: ( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1 ) * heights, behavior: 'instant' } );
} );
} );

10
newVersion/order/index.html
View File

@@ -6,6 +6,7 @@
<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">
@@ -23,7 +24,14 @@
<h3 class="gradient-purple bigger">Ready for your new website?</h3>
</div>
<div class="step reveal">
<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 reveal" id="step-2">
<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>