Add more pages

This commit is contained in:
2025-06-24 17:11:15 +02:00
parent f9d0d01d0b
commit cf31a03582
6 changed files with 252 additions and 21 deletions

View File

@@ -36,7 +36,7 @@
<p class="no-margin bigger">Hello! I'm Janis Hutz, and I develop software</p>
<p class="no-margin">Having been working on developing software and learning to do so properly since the
beginning of 2021, I have accumulated a lot of work hours in this subject. In September 2024, I have
started my studies in Software Engineering at ETH Zurich, a renowned university in Switzerland.</p>
started my studies in Software Engineering at ETH Zurich, a renowned university in Switzerland, where I am currently working towards my Bachelor of Science degree.</p>
<p class="no-margin">My projects are becoming increasingly more complex, useful and feature-rich. Now
finally, with proper education, I will be taking my software to the next level.</p>
<p class="no-margin">Most of the software provided on this website is done so for free. Any <a

View File

@@ -8,7 +8,7 @@
<a href="/projects/qrscanner">QR & Barcode Insight</a>
<a href="/projects/libreevent">libreǝvent</a>
<a href="/projects/musicplayer">MusicPlayer</a>
<a href="/projects/smuL">SimpleMediaUpscalerLite</a>
<a href="/projects/biogascontrollerapp">BiogasControllerApp</a>
</div>
<div class="footer-category">
<h3>Info</h3>

View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
<!-- SEO -->
<title>BiogasControllerApp - Configure the microcontroller used in ENATECH at KSWO to control the Biogas Plant | janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="software store, donations" />
<meta name="description"
content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
<meta name="og:title"
content="BiogasControllerApp - Configure the microcontroller used in ENATECH at KSWO to control the Biogas Plant" />
<meta name="og:description"
content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
<meta name="og:image" content="https://static.janishutz.com/seo/projects/store.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/projects/store" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
</head>
<body>
<nav></nav>
<div class="slider">
<div class="slider-container">
<div class="slider-element current"
style="background-image: url( 'https://static.janishutz.com/assets/store/store-main.jpg' );">
<a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
<h2>Create Events with Ease</h2>
<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' );">
<h2>Create seat plans</h2>
<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' );">
<h1>Order Tickets</h1>
<p>on this page and give users all important data</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );">
<h2>User Accounts</h2>
<p>Your customers can do everything in self-service!</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
<h2>Open Source Project</h2>
<p>Free Software, developed by Janis Hutz & the community</p>
<a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
</div>
</div>
<span class="slider-controls slider-control-left material-symbols-outlined"
onclick="sliderControl( 'previous' )">arrow_back</span>
<span class="slider-controls slider-control-right material-symbols-outlined"
onclick="sliderControl( 'next' )">arrow_forward
</div>
</div>
<div class="content">
<img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer logo" class="project-logo">
<h1>Biogas&shy;Controller&shy;App</h1>
<a href="/projects" class="back-button">&leftarrow; All projects</a>
<p>Control the microcontroller used in the subject ENATECH at Kantonsschule Wohlen</p>
<hr class="pullquote-lines">
<h3 class="content-title-small">Why use a commercial event management solution, if you can host a more flexible
one yourself?</h3>
<hr class="pullquote-lines">
</div>
<div class="content">
<h2>Project Website</h2>
<p>libreevent has its own project website, where you can learn more about the project, find documentation and a
guide on how to install it.</p>
<a href="https://libreevent.janishutz.com" target="_blank" class="button">Project Website</a>
</div>
<footer></footer>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>
activateSlider(7500);
</script>
</body>
</html>

View File

@@ -28,6 +28,15 @@
width: 70vw;
height: 40vw;
}
.small-logo {
width: 25%;
height: auto;
}
.side-by-side {
margin-top: 20px;
}
</style>
</head>
@@ -82,12 +91,16 @@
<p>You may find all of them <a href="https://github.com/janishutz?tab=repositories" target="_blank">here</a></p>
<div class="side-by-side">
<div class="side-by-side-item left">
<img src="https://libreevent.janishutz.com/assets/logo.png" alt="libreevent logo"
class="project-logo small-logo">
<h3>libreevent</h3>
<p>Tired of paying for event management software and want to gain control over your data? libreevent is
a powerful tool to sell tickets for your next event. Complete with mobile apps for entry control</p>
<a href="/projects/libreevent" class="button">Details</a>
</div>
<div class="side-by-side-item right">
<img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png"
alt="musicplayer logo" class="project-logo small-logo">
<h3>MusicPlayer</h3>
<p>A browser-based Music Player with remote playlist sharing and support for your local playlists, as
well as Apple Music</p>
@@ -96,26 +109,31 @@
</div>
<div class="side-by-side">
<div class="side-by-side-item left">
<img src="https://static.janishutz.com/assets/logos/impress.jpg" alt="impress.js logo" class="project-logo small-logo">
<h3>impress</h3>
<p>A JavaScript library to create fancy browser-based presentations in 3D</p>
<a href="/projects/impress" class="button">Details</a>
</div>
<div class="side-by-side-item right">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="project-logo small-logo">
<h3>Arch-Dev-VM</h3>
<p>Looking for an easy to set up Arch Linux virtual machine for development? The scripts here allow you
to set up an Arch Linux Virtual Machine in under 1 hour, of which most time is waiting for downloads
to finish.</p>
<a href="https://github.com/janishutz/arch-dev-vm" class="button">GitHub</a>
<a href="https://github.com/janishutz/arch-dev-vm" class="button" target="_blank">GitHub</a>
</div>
</div>
<div class="side-by-side">
<div class="side-by-side-item left">
<img src="https://raw.githubusercontent.com/janishutz/BiogasControllerApp/refs/heads/main/BiogasControllerAppLogo.png"
alt="biogascontrollerapp logo" class="project-logo small-logo">
<h3>BiogasControllerApp</h3>
<p>A small KivyMD-based application to control a small Biogas Plant in the subject ENATECH at
Kantonsschule Wohlen</p>
<a href="/projects/biogascontrollerapp" class="button">Details</a>
</div>
<div class="side-by-side-item right">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="project-logo small-logo">
<h3>Small School Projects</h3>
<p>Various small projects I did during my time at Kantonsschule Wohlen</p>
<a href="/projects/schoolprojects" class="button">Details</a>
@@ -128,6 +146,7 @@
<p>Apps designed for your phone and tablet</p>
<div class="side-by-side">
<div class="side-by-side-item left">
<img src="https://static.janishutz.com/assets/logos/storagemanager.jpg" alt="StorageManager logo" class="project-logo small-logo">
<h3>StorageManager</h3>
<p>Missing stock keeping in your home storage? Keep throwing food away because it went bad?
StorageManager aims to help you with this by providing easy to use tools to keep track of what you
@@ -135,6 +154,7 @@
<a href="/projects/storagemanager" class="button">Details</a>
</div>
<div class="side-by-side-item right">
<img src="https://static.janishutz.com/assets/logos/qrscanner.jpg" alt="QR & Barcode Insight logo" class="project-logo small-logo">
<h3>QR &amp; Barcode Insight</h3>
<p>QR Codes have become a massive security risk. QR &amp; Barcode Insight helps protect you by showing
you the unfiltered content of QR codes as well as the option to check the scanned links with
@@ -149,11 +169,13 @@
<p>Cross-Platform apps, available in browsers or even app stores!</p>
<div class="side-by-side">
<div class="side-by-side-item left">
<img src="https://cdn.conductorcalc.com/logo.jpg" alt="impress.js logo" class="project-logo small-logo">
<h3>ConductorCalc</h3>
<p>Your all-in-one solution for calculating parameters when designing high-voltage lines</p>
<a href="https://conductorcalc.com" target="_blank" class="button">Details</a>
</div>
<div class="side-by-side-item right">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="project-logo small-logo">
<h3>Store</h3>
<p>The way to buy my software and support the development of my open source software</p>
<a href="/projects/store" class="button">Details</a>
@@ -161,12 +183,14 @@
</div>
<div class="side-by-side">
<div class="side-by-side-item left">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="project-logo small-logo">
<h3>Accounts</h3>
<p>Tired of creating lots of accounts? All my services rely on a single account backend, not requiring
you to create a new account for each</p>
<a href="/projects/accounts" class="button">Details</a>
</div>
<div class="side-by-side-item right">
<img src="https://static.janishutz.com/assets/logos/lsh.jpg" alt="Language School Hossegor logo" class="project-logo small-logo">
<h3>Language School Hossegor Booking System</h3>
<p>A fully featured booking system for a French language school, written from scratch specifically for
their purposes with a highly customizable booking process.</p>

View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
<!-- SEO -->
<title>MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="software store, donations" />
<meta name="description"
content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
<meta name="og:title"
content="MusicPlayer - Fully browser based with built-in remote playlist display with animations" />
<meta name="og:description"
content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
<meta name="og:image" content="https://static.janishutz.com/seo/projects/store.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/projects/store" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
</head>
<body>
<nav></nav>
<div class="slider">
<div class="slider-container">
<div class="slider-element current"
style="background-image: url( 'https://static.janishutz.com/assets/store/store-main.jpg' );">
<a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
<h2>Create Events with Ease</h2>
<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' );">
<h2>Create seat plans</h2>
<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' );">
<h1>Order Tickets</h1>
<p>on this page and give users all important data</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );">
<h2>User Accounts</h2>
<p>Your customers can do everything in self-service!</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
<h2>Open Source Project</h2>
<p>Free Software, developed by Janis Hutz & the community</p>
<a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
</div>
</div>
<span class="slider-controls slider-control-left material-symbols-outlined"
onclick="sliderControl( 'previous' )">arrow_back</span>
<span class="slider-controls slider-control-right material-symbols-outlined"
onclick="sliderControl( 'next' )">arrow_forward
</div>
</div>
<div class="content">
<img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer logo" class="project-logo">
<h1>Music&shy;Player</h1>
<a href="/projects" class="back-button">&leftarrow; All projects</a>
<p>Play music fully in the browser and remotely share what you are currently playing. Perfect for your next party!</p>
<hr class="pullquote-lines">
<h3 class="content-title-small">Why use a commercial event management solution, if you can host a more flexible
one yourself?</h3>
<hr class="pullquote-lines">
</div>
<div id="yt-embed"></div>
<div class="content">
<h2>Project Website</h2>
<p>libreevent has its own project website, where you can learn more about the project, find documentation and a
guide on how to install it.</p>
<a href="https://libreevent.janishutz.com" target="_blank" class="button">Project Website</a>
</div>
<footer></footer>
<script src="https://static.janishutz.com/js/yt-embed.js"></script>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>
YTEmbed('yt-embed', 'UYMa-xTyZYo');
activateSlider(7500);
</script>
</body>
</html>

View File

@@ -29,7 +29,6 @@
<body>
<nav></nav>
<!-- TODO: Think about mobile design of slider -->
<div class="slider">
<div class="slider-container">
<div class="slider-element current"
@@ -67,17 +66,20 @@
<a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
</div>
</div>
<span class="slider-controls slider-control-left material-symbols-outlined" onclick="sliderControl( 'previous' )">arrow_back</span>
<span class="slider-controls slider-control-right material-symbols-outlined" onclick="sliderControl( 'next' )">arrow_forward</div>
<span class="slider-controls slider-control-left material-symbols-outlined"
onclick="sliderControl( 'previous' )">arrow_back</span>
<span class="slider-controls slider-control-right material-symbols-outlined"
onclick="sliderControl( 'next' )">arrow_forward
</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>
<img src="https://static.janishutz.com/logo.jpg" alt="store logo" class="project-logo">
<h1>Store</h1>
<a href="/projects" class="back-button">&leftarrow; All projects</a>
<p>Free & Open Source Event Management & Ticketing Solution</p>
<p>Support my work and buy software</p>
<a href="https://store.janishutz.com" target="_blank" class="button">Store</a>
<hr class="pullquote-lines">
<h3 class="content-title-small">Why use a commercial event management solution, if you can host a more flexible
@@ -85,23 +87,12 @@
<hr class="pullquote-lines">
</div>
<div id="yt-embed"></div>
<div class="content">
<h2>Project Website</h2>
<p>libreevent has its own project website, where you can learn more about the project, find documentation and a
guide on how to install it.</p>
<a href="https://libreevent.janishutz.com" target="_blank" class="button">Project Website</a>
</div>
<footer></footer>
<script src="https://static.janishutz.com/js/yt-embed.js"></script>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>
YTEmbed('yt-embed', 'UYMa-xTyZYo');
activateSlider(7500);
</script>
</body>