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

Upload website

Browse Source
This commit is contained in:
Janis Hutz
2025-09-29 11:24:54 +02:00
parent 337fb757d5
commit 7fa3715aec
82 changed files with 11586 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
dist/about/aboutme/index.html vendored Normal file
View File

@@ -0,0 +1,319 @@
<!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">
<link rel="stylesheet" href="/css/timeline.css">
<link rel="stylesheet" href="/css/wrapfig.css">
<!-- SEO -->
<title>About me | 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="aboutme, about, janis hutz" />
<meta name="description" content="Learn more about the creator of janishutz.com, his projects and goals" />
<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/about/aboutme" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
</head>
<body>
<nav><script>
// Themeing
let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
var theme = loadedTheme;
let loadTheme = () => {
loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
if ( loadedTheme === 'auto' ) {
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
theme = 'dark_mode';
} else {
theme = 'light_mode';
}
}
if ( theme === 'dark_mode' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
document.documentElement.classList.remove( 'dark' );
theme === 'light_mode';
}
}
loadTheme();
setTimeout( () => {
document.querySelector( 'body' ).classList.add( 'loaded' );
}, 500 );
function changeTheme () {
theme = document.getElementById( 'theme-select' ).value;
localStorage.setItem( 'theme', theme );
loadTheme();
}
</script>
<div class="nav-placeholder"></div>
<div class="nav-top-bar">
<a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
</a>
<!-- <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> -->
<div class="nav-toggle" onclick="openMenu( 'toggle' )">
<span class="line" id="line1"></span>
<span class="line" id="line2"></span>
<span class="line" id="line3"></span>
</div>
</div>
<div class="nav-menu">
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/projects">
<span class="material-symbols-outlined nav-icon">lightbulb</span>
<div>Projects</div>
</a>
<div class="nav-link-dropdown">
<a href="/projects">View all</a>
<a href="/projects/storagemanager">StorageManager</a>
<a href="/projects/qrscanner">QR & Barcode Insight</a>
<a href="/projects/libreevent">libreǝvent</a>
<a href="/projects/musicplayer">MusicPlayer</a>
<a href="https://conductorcalc.com" target="_blank">ConductorCalc</a>
</div>
</div>
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/services">
<span class="material-symbols-outlined nav-icon">build</span>
<div>Services</div>
</a>
<div class="nav-link-dropdown">
<a href="https://store.janishutz.com">Store</a>
<a href="https://account.janishutz.com">Account</a>
<a href="https://development.janishutz.com">Custom Websites</a>
</div>
</div>
<a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
</a>
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/about">
<span class="material-symbols-outlined nav-icon">info</span>
<div>About</div>
</a>
<div class="nav-link-dropdown">
<a href="/about">About janishutz.com</a>
<a href="/about/aboutme">About Janis Hutz</a>
<a href="https://blog.janishutz.com" target="_blank">Blog</a>
<a href="/legal">Legal</a>
</div>
</div>
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/support">
<span class="material-symbols-outlined nav-icon">support_agent</span>
<div>Support</div>
</a>
<div class="nav-link-dropdown">
<a href="https://support.janishutz.com" target="_blank">Support Hub</a>
<a href="https://support.janishutz.com/knowledgebase.php" target="_blank">Knowledgebase</a>
<a href="/support/old">Old websites</a>
</div>
</div>
</div>
<script>
const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ];
const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ];
const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ];
function openMenu( action ) {
if ( action === 'toggle' ) {
if ( menu.classList.contains( 'active' ) ) {
openMenu( 'close' );
} else {
openMenu( 'open' );
}
} else if ( action === 'close' ) {
menu.classList.remove( 'active' );
toggle.classList.remove( 'active' );
document.body.classList.remove( 'no-scroll' );
} else if ( action === 'open' ) {
document.body.classList.add( 'no-scroll' );
toggle.classList.add( 'active' );
menu.classList.add( 'active' );
bar.classList.remove( 'slide-up' );
menu.classList.remove( 'slide-up' );
}
}
let oldScroll = 0;
document.addEventListener( 'scroll', () => {
if ( oldScroll < window.scrollY && window.innerHeight * 0.2 < window.scrollY ) {
bar.classList.add( 'slide-up' );
menu.classList.add( 'slide-up' );
} else if ( oldScroll > window.scrollY ) {
bar.classList.remove( 'slide-up' );
menu.classList.remove( 'slide-up' );
}
oldScroll = window.scrollY;
} );
// TODO: Hide menu on when scrolling down
</script>
</nav>
<div class="content">
<h1 class="title">About Janis Hutz</h1>
<div class="wrapfig-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="Janis Hutz" class="wrapfig left circle">
<div class="wrapfig-text right">
<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, 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
href="https://store.janishutz.com/donate" target="_blank">financial support</a> would be greatly
appreciated.</p>
<p class="no-margin">I am a hard-core Linux user, which means I am always tweaking my user interface and
OS when I am not coding. You can read up on my Linux journey <a
href="https://blog.janishutz.com/series/my-linux-journey/" target="_blank">here</a>. While I do
occasionally like to play games on my own, I primarily do so with friends, as I prefer not to waste
my time playing games, if there is nobody available to play them with.</p>
<p class="no-margin">Other than that, I am also very interested in PC hardware, and I am always
up-to-date with the latest hardware, ranging from CPUs and GPUs to power supplies, cases and
coolers. I also enjoy composing music, but mostly keep that to myself, as with playing piano, which
I enjoy doing occasionally.</p>
</div>
</div>
<h2>Timeline</h2>
<p>The timeline of my projects and my evolution in software development</p>
<div class="timeline">
<div class="timeline-line"></div>
<div class="timeline-el" id="timeline-dot-1">
<div class="timeline-year">2015</div> <!-- TODO: Check date is accurate-->
<div class="timeline-dot"></div>
<div class="timeline-desc">First coding experience using LEGO Mindstorms & LabView</div>
</div>
<div class="timeline-el" id="timeline-dot-2">
<div class="timeline-year">2021</div> <!-- TODO: Check date is accurate-->
<div class="timeline-dot"></div>
<div class="timeline-desc">BiogasControllerApp, Small projects</div>
</div>
<div class="timeline-el" id="timeline-dot-3">
<div class="timeline-year">2022</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">StorageManager, QR & Barcode Insight, smuL</div>
</div>
<div class="timeline-el" id="timeline-dot-4">
<div class="timeline-year">2023</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">libreevent, smuL, StorageManager</div>
</div>
<div class="timeline-el" id="timeline-dot-5">
<div class="timeline-year">2024</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">Language School Hossegor - Booking, store.janishutz.com, id.janishutz.com
</div>
</div>
<div class="timeline-el" id="timeline-dot-7">
<div class="timeline-year">2025</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">ETH Zurich, ConductorCalc, StorageManager, Website, Dotfiles, new Account System</div>
</div>
</div>
<p style="margin-top: 50px;">Learn more here</p>
<a href="/links" class="button">Linktree</a>
</div>
<footer><div class="footer-container">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
<div class="footer-text-container">
<div class="footer-category">
<h3>Projects</h3>
<a href="/projects">View all</a>
<a href="/projects/storagemanager">StorageManager</a>
<a href="/projects/qrscanner">QR & Barcode Insight</a>
<a href="/projects/libreevent">libreǝvent</a>
<a href="/projects/musicplayer">MusicPlayer</a>
<a href="/projects/biogascontrollerapp">BiogasControllerApp</a>
</div>
<div class="footer-category">
<h3>Info</h3>
<a href="/about">About janishutz.com</a>
<a href="/about/aboutme">About Janis Hutz</a>
<div class="theme-selector">
<span class="material-symbols-outlined" id="theme-switcher-icon">light_mode</span>
<select id="theme-select" onchange="changeTheme()">
<option value="auto">Auto</option>
<option value="light_mode">Light</option>
<option value="dark_mode">Dark</option>
</select>
</div>
</div>
<div class="footer-category">
<h3>Support</h3>
<a href="https://support.janishutz.com">Get support</a>
<a href="https://support.janishutz.com/knowledgebase.php">Knowledgebase</a>
<a href="/support/support-status">Support status</a>
</div>
<div class="footer-category">
<h3>Legal</h3>
<a href="/legal/privacy">Privacy Policy</a>
<a href="/legal/tos">Terms of Service</a>
<a href="/legal/returns">Return policy</a>
<a href="/support/support-status">Support Status</a>
<div onclick="showAnalytics()" style="cursor: pointer;">Analytics</div>
</div>
<div class="analytics-notice" id="analytics">
<h2>Analytics</h2>
<p>This website uses privacy preserving product analytics allowing me to analyze aggregated statistics for this website. All data collected will not allow me to uniquely identify you. <br><a href="/legal/privacy">Privacy Policy</a></p>
<!-- Matomo stuff -->
<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>
<!-- 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="" />
<!-- End Matomo -->
<button class="analytics-button" onclick="closeAnalytics()"><span class="material-symbols-outlined">close</span></button>
<div class="small-symbol" onclick="showAnalytics()" title="Change your analytics preferences"><span class="material-symbols-outlined">Analytics</span></div>
</div>
</div>
<script>
function closeAnalytics () {
document.getElementById( 'analytics' ).classList.remove( 'show' );
localStorage.setItem( 'analytics-dismissed', 'true' );
}
function showAnalytics () {
document.getElementById( 'analytics' ).classList.add( 'show' );
}
if ( !localStorage.getItem( 'analytics-dismissed' ) ) {
document.getElementById( 'analytics' ).classList.add( 'show' );
}
// Show which theme is loaded
document.getElementById( 'theme-select' ).value = loadedTheme;
</script>
</div>
</footer>
</body>
</html>

311
dist/about/index.html vendored Normal file
View File

@@ -0,0 +1,311 @@
<!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">
<link rel="stylesheet" href="/css/timeline.css">
<link rel="stylesheet" href="/css/wrapfig.css">
<!-- SEO -->
<title>About | 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="about, janishutz" />
<meta name="description" content="Learn more about the history of janishutz.com and discover the projects" />
<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/about" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
</head>
<body>
<nav><script>
// Themeing
let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
var theme = loadedTheme;
let loadTheme = () => {
loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
if ( loadedTheme === 'auto' ) {
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
theme = 'dark_mode';
} else {
theme = 'light_mode';
}
}
if ( theme === 'dark_mode' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
document.documentElement.classList.remove( 'dark' );
theme === 'light_mode';
}
}
loadTheme();
setTimeout( () => {
document.querySelector( 'body' ).classList.add( 'loaded' );
}, 500 );
function changeTheme () {
theme = document.getElementById( 'theme-select' ).value;
localStorage.setItem( 'theme', theme );
loadTheme();
}
</script>
<div class="nav-placeholder"></div>
<div class="nav-top-bar">
<a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
</a>
<!-- <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> -->
<div class="nav-toggle" onclick="openMenu( 'toggle' )">
<span class="line" id="line1"></span>
<span class="line" id="line2"></span>
<span class="line" id="line3"></span>
</div>
</div>
<div class="nav-menu">
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/projects">
<span class="material-symbols-outlined nav-icon">lightbulb</span>
<div>Projects</div>
</a>
<div class="nav-link-dropdown">
<a href="/projects">View all</a>
<a href="/projects/storagemanager">StorageManager</a>
<a href="/projects/qrscanner">QR & Barcode Insight</a>
<a href="/projects/libreevent">libreǝvent</a>
<a href="/projects/musicplayer">MusicPlayer</a>
<a href="https://conductorcalc.com" target="_blank">ConductorCalc</a>
</div>
</div>
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/services">
<span class="material-symbols-outlined nav-icon">build</span>
<div>Services</div>
</a>
<div class="nav-link-dropdown">
<a href="https://store.janishutz.com">Store</a>
<a href="https://account.janishutz.com">Account</a>
<a href="https://development.janishutz.com">Custom Websites</a>
</div>
</div>
<a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
</a>
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/about">
<span class="material-symbols-outlined nav-icon">info</span>
<div>About</div>
</a>
<div class="nav-link-dropdown">
<a href="/about">About janishutz.com</a>
<a href="/about/aboutme">About Janis Hutz</a>
<a href="https://blog.janishutz.com" target="_blank">Blog</a>
<a href="/legal">Legal</a>
</div>
</div>
<div class="nav-link-wrapper">
<a class="nav-link-header" href="/support">
<span class="material-symbols-outlined nav-icon">support_agent</span>
<div>Support</div>
</a>
<div class="nav-link-dropdown">
<a href="https://support.janishutz.com" target="_blank">Support Hub</a>
<a href="https://support.janishutz.com/knowledgebase.php" target="_blank">Knowledgebase</a>
<a href="/support/old">Old websites</a>
</div>
</div>
</div>
<script>
const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ];
const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ];
const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ];
function openMenu( action ) {
if ( action === 'toggle' ) {
if ( menu.classList.contains( 'active' ) ) {
openMenu( 'close' );
} else {
openMenu( 'open' );
}
} else if ( action === 'close' ) {
menu.classList.remove( 'active' );
toggle.classList.remove( 'active' );
document.body.classList.remove( 'no-scroll' );
} else if ( action === 'open' ) {
document.body.classList.add( 'no-scroll' );
toggle.classList.add( 'active' );
menu.classList.add( 'active' );
bar.classList.remove( 'slide-up' );
menu.classList.remove( 'slide-up' );
}
}
let oldScroll = 0;
document.addEventListener( 'scroll', () => {
if ( oldScroll < window.scrollY && window.innerHeight * 0.2 < window.scrollY ) {
bar.classList.add( 'slide-up' );
menu.classList.add( 'slide-up' );
} else if ( oldScroll > window.scrollY ) {
bar.classList.remove( 'slide-up' );
menu.classList.remove( 'slide-up' );
}
oldScroll = window.scrollY;
} );
// TODO: Hide menu on when scrolling down
</script>
</nav>
<div class="content">
<h1 class="title">About</h1>
<div class="wrapfig-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo"
class="wrapfig left rounded-corners">
<div class="wrapfig-text right">
<p class="no-margin">Since its launch in January 2023, janishutz.com has seen a lot of changes. Not only
has the main website seen three major revisions, but the offering has expanded massively, with a
Software Store, Custom Website development, Account services and more becoming part of the Software
ecosystem.</p>
<p class="no-margin">Most of the software provided on this website is done so for free. Any <a
href="https://store.janishutz.com/donate" target="_blank">financial support</a> would be greatly
appreciated.</p>
<p>The goal of this website is and has always been to show off software projects and the current design
gives you a much neater introduction with much more information. The website has always been written
from scratch and loading times have been reduced as much as possible, giving you a snappy experience
like barely anywhere else on the internet</p>
<h2>Timeline</h2>
<p>The timeline of evolution of this website</p>
<div class="timeline">
<div class="timeline-line"></div>
<div class="timeline-el" id="timeline-dot-1">
<div class="timeline-year">2022</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">Launch of the first version, can be found <a
href="https://janishutz.github.io" target="_blank">here</a></div>
</div>
<div class="timeline-el" id="timeline-dot-2">
<div class="timeline-year">2023</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">
Two updated versions, found <a href="https://v1.janishutz.com" target="_blank">here</a>
and <a href="https://v2.janishutz.com" target="_blank">here</a> slightly updating and then
completely reworking the design of the website
</div>
</div>
<div class="timeline-el" id="timeline-dot-3">
<div class="timeline-year">2024</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">Add more services (Accounts, Store)</div>
</div>
<div class="timeline-el" id="timeline-dot-4">
<div class="timeline-year">2025</div>
<div class="timeline-dot"></div>
<div class="timeline-desc">The current website, reworked accounts</div>
</div>
</div>
</div>
</div>
<p style="margin-top: 50px;">Learn more here</p>
<div class="inline-elements">
<a href="/links" class="button">Linktree</a>
<a href="/about/aboutme" class="button">About Janis Hutz</a>
</div>
</div>
<footer><div class="footer-container">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
<div class="footer-text-container">
<div class="footer-category">
<h3>Projects</h3>
<a href="/projects">View all</a>
<a href="/projects/storagemanager">StorageManager</a>
<a href="/projects/qrscanner">QR & Barcode Insight</a>
<a href="/projects/libreevent">libreǝvent</a>
<a href="/projects/musicplayer">MusicPlayer</a>
<a href="/projects/biogascontrollerapp">BiogasControllerApp</a>
</div>
<div class="footer-category">
<h3>Info</h3>
<a href="/about">About janishutz.com</a>
<a href="/about/aboutme">About Janis Hutz</a>
<div class="theme-selector">
<span class="material-symbols-outlined" id="theme-switcher-icon">light_mode</span>
<select id="theme-select" onchange="changeTheme()">
<option value="auto">Auto</option>
<option value="light_mode">Light</option>
<option value="dark_mode">Dark</option>
</select>
</div>
</div>
<div class="footer-category">
<h3>Support</h3>
<a href="https://support.janishutz.com">Get support</a>
<a href="https://support.janishutz.com/knowledgebase.php">Knowledgebase</a>
<a href="/support/support-status">Support status</a>
</div>
<div class="footer-category">
<h3>Legal</h3>
<a href="/legal/privacy">Privacy Policy</a>
<a href="/legal/tos">Terms of Service</a>
<a href="/legal/returns">Return policy</a>
<a href="/support/support-status">Support Status</a>
<div onclick="showAnalytics()" style="cursor: pointer;">Analytics</div>
</div>
<div class="analytics-notice" id="analytics">
<h2>Analytics</h2>
<p>This website uses privacy preserving product analytics allowing me to analyze aggregated statistics for this website. All data collected will not allow me to uniquely identify you. <br><a href="/legal/privacy">Privacy Policy</a></p>
<!-- Matomo stuff -->
<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>
<!-- 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="" />
<!-- End Matomo -->
<button class="analytics-button" onclick="closeAnalytics()"><span class="material-symbols-outlined">close</span></button>
<div class="small-symbol" onclick="showAnalytics()" title="Change your analytics preferences"><span class="material-symbols-outlined">Analytics</span></div>
</div>
</div>
<script>
function closeAnalytics () {
document.getElementById( 'analytics' ).classList.remove( 'show' );
localStorage.setItem( 'analytics-dismissed', 'true' );
}
function showAnalytics () {
document.getElementById( 'analytics' ).classList.add( 'show' );
}
if ( !localStorage.getItem( 'analytics-dismissed' ) ) {
document.getElementById( 'analytics' ).classList.add( 'show' );
}
// Show which theme is loaded
document.getElementById( 'theme-select' ).value = loadedTheme;
</script>
</div>
</footer>
</body>
</html>