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

Update slider logic

Browse Source
This commit is contained in:
Janis Hutz
2026-02-11 11:52:22 +01:00
parent 3875acb579
commit b1062fcad5
9 changed files with 793 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/nav.css
View File

@@ -61,6 +61,7 @@ nav a:hover {
z-index: 100;
background-color: var(--color-background-accent);
transition: left 0.5s, top 0.5s;
overflow-y: scroll;
}
.nav-top-bar {
@@ -196,6 +197,7 @@ nav a:hover {
top: 0;
left: 0;
border-bottom: var(--color-text-primary) 1px solid;
overflow: unset;
}
.nav-menu.slide-up {

6
src/css/style.css
View File

@@ -119,7 +119,7 @@ a {
.slider {
width: 100vw;
height: calc(100vw / 16 * 11);
height: 70vh;
}
.slider-element {
@@ -138,8 +138,8 @@ a {
}
.slider-controls {
font-size: 2.6rem;
padding: 0.25rem 0.5rem;
font-size: 2rem;
padding: 0.15rem 0.25rem;
}
.slider-control-left {

4
src/footer.html
View File

@@ -45,9 +45,9 @@
<div id="matomo-opt-out">
Loading...
</div>
<script src="https://analytics.janishutz.com/index.php?module=CoreAdminHome&action=optOutJS&divId=matomo-opt-out&language=auto&fontColor=000000&fontSize=12px&fontFamily=monospace&showIntro=1"></script>
<script defer src="https://analytics.janishutz.com/index.php?module=CoreAdminHome&action=optOutJS&divId=matomo-opt-out&language=auto&fontColor=000000&fontSize=12px&fontFamily=monospace&showIntro=1"></script>
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.janishutz.com/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.janishutz.com/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" loading="lazy" />
<!-- End Matomo -->
<button class="analytics-button" onclick="closeAnalytics()"><span class="material-symbols-outlined">close</span></button>

37
src/index.html
View File

@@ -3,7 +3,8 @@
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<!-- <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css"> -->
<link rel="stylesheet" href="http://localhost:8081/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/side-by-side.css">
@@ -13,9 +14,11 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="software store, custom software, foss" />
<meta name="description" content="Discover amazing software projects like ConductorCalc, libreevent, a secure and reliable authentication system and much more and get support for it all" />
<meta name="description"
content="Discover amazing software projects like ConductorCalc, libreevent, a secure and reliable authentication system and much more and get support for it all" />
<meta name="og:title" content="janishutz.com - software to make your life easier" />
<meta name="og:description" content="Discover projects, services and more developed by Janis Hutz, get support and more!" />
<meta name="og:description"
content="Discover projects, services and more developed by Janis Hutz, get support and more!" />
<meta name="og:image" content="https://static.janishutz.com/logo.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com" />
@@ -26,35 +29,36 @@
<body>
<nav></nav>
<!-- <video src="https://static.janishutz.com/assets/video-home.mp4" autoplay class="title-video"></video> -->
<div class="slider">
<div class="slider-container">
<div class="slider-element current"
style="background-image: url( 'https://static.janishutz.com/assets/home/store.jpg' );">
<div class="slider-element current" data-image-base-url="https://static.janishutz.com/assets/home/store"
data-filetype="jpg">
<div class="slider-info">
<h2>Software for your needs</h2>
<p>Professional-Grade Software</p>
<a href="https://store.janishutz.com" class="button" target="_blank">Store</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://static.janishutz.com/assets/home/conductorcalc.jpg' );">
<div class="slider-element" data-image-base-url="https://static.janishutz.com/assets/home/conductorcalc"
data-filetype="jpg">
<div class="slider-info">
<h2>ConductorCalc</h2>
<p>The perfect tool to aid you in the complex calculations necessary when building high voltage lines</p>
<p>The perfect tool to aid you in the complex calculations necessary when building high voltage
lines</p>
<a href="https://conductorcalc.com" class="button" target="_blank">Check it out</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://static.janishutz.com/assets/projects/musicplayer-title.jpg' );">
data-image-base-url="https://static.janishutz.com/assets/projects/musicplayer-title"
data-filetype="jpg">
<div class="slider-info">
<h2>MusicPlayer</h2>
<p>Your one-stop solution for music at your next party</p>
<a href="/projects/musicplayer" class="button">Check it out</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://static.janishutz.com/assets/home/foss.jpg' );">
<div class="slider-element" data-image-base-url="https://static.janishutz.com/assets/home/foss"
data-filetype="jpg">
<div class="slider-info">
<h2>Open Source Projects</h2>
<p>Free Software, developed by Janis Hutz & the community</p>
@@ -68,6 +72,11 @@
onclick="sliderControl( 'next' )">arrow_forward</span>
</div>
<!-- <script src="https://static.janishutz.com/js/slider.js"></script> -->
<script src="http://localhost:8081/js/slider.js"></script>
<script src="/slider-rwd.js"></script>
<script>activateSlider(7500, null)</script>
<div class="content">
<hr class="divider">
<h1>My work</h1>
@@ -114,11 +123,7 @@
</div>
</div>
<footer></footer>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>activateSlider(7500)</script>
</body>
</html>

2
src/nav.html
View File

@@ -37,7 +37,7 @@
<div class="nav-top-bar">
<a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo" loading="lazy">
</a>
<!-- <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> -->
<div class="nav-toggle" onclick="openMenu( 'toggle' )">

11
src/slider-rwd.js Normal file
View File

@@ -0,0 +1,11 @@
/* eslint-disable no-undef */
const loadImageByScreenSize = () => {
if ( window.innerHeight / window.innerWidth >= 1 ) {
loadImageType( '-mobile' );
} else {
loadImageType( '' );
}
};
window.addEventListener( 'resize', loadImageByScreenSize );
loadImageByScreenSize();