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

improved page loading time by ~60% - no gf

Browse Source
This commit is contained in:
janis
2023-05-25 09:09:19 +02:00
parent 17e8475adb
commit 69494e8d20
9 changed files with 34 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
newVersion/assets/doubleArrowDown.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#FFFFFF" d="M480-200 240-440l42-42 198 198 198-198 42 42-240 240Zm0-253L240-693l42-42 198 198 198-198 42 42-240 240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 225 B

1
newVersion/assets/radio_button_checked.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#FFFFFF" d="M480-294q78 0 132-54t54-132q0-78-54-132t-132-54q-78 0-132 54t-54 132q0 78 54 132t132 54Zm0 214q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 511 B

1
newVersion/assets/radio_button_unchecked.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#FFFFFF" d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 424 B

7
newVersion/contact/index.html
View File

@@ -6,7 +6,6 @@
<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/orderStyle.css">
<link rel="stylesheet" href="/css/fancyStyle.css">
@@ -27,15 +26,15 @@
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
<img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
</div>
</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>
<img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
<img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
</div>
</div>

2
newVersion/css/fancyStyle.css
View File

@@ -104,7 +104,9 @@
}
.progress-item {
color: white;
cursor: pointer;
width: 1.75vw;
}

17
newVersion/examples/index.html
View File

@@ -6,7 +6,6 @@
<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">
@@ -27,20 +26,20 @@
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
<img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
</div>
</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>
<img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
<img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step3" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step4" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step5" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step6" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step7" src="/assets/radio_button_unchecked.svg">
</div>
</div>

15
newVersion/index.html
View File

@@ -6,7 +6,6 @@
<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">
@@ -28,19 +27,19 @@
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
<img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
</div>
</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>
<img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
<img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step3" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step4" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step5" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step6" src="/assets/radio_button_unchecked.svg">
</div>
</div>

19
newVersion/info/index.html
View File

@@ -6,7 +6,6 @@
<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/infoStyle.css">
<link rel="stylesheet" href="/css/fancyStyle.css">
@@ -27,21 +26,21 @@
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to learn more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
<img class="scroll-symbol" src="/assets/doubleArrowDown.svg">
</div>
</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>
<span class="material-symbols-outlined progress-item" id="step8">radio_button_unchecked</span>
<img class="progress-item" id="step1" src="/assets/radio_button_checked.svg">
<img class="progress-item" id="step2" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step3" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step4" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step5" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step6" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step7" src="/assets/radio_button_unchecked.svg">
<img class="progress-item" id="step8" src="/assets/radio_button_unchecked.svg">
</div>
</div>

4
newVersion/js/scrolling.js
View File

@@ -54,8 +54,8 @@ $( document ).ready( function () {
}
function trackProgress () {
$( '.progress-item' ).html( `radio_button_unchecked` );
document.getElementById( `step${currentlyShowing + 1}` ).innerHTML = `radio_button_checked`;
$( '.progress-item' ).attr( 'src', `/assets/radio_button_unchecked.svg` );
$( `#step${currentlyShowing + 1}` ).attr( 'src', `/assets/radio_button_checked.svg` );
}
$( '.progress-item' ).click( function () {