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

Major progress (too much to list)

Browse Source
This commit is contained in:
Admin
2025-06-22 14:44:09 +02:00
parent 39ca1fc1f2
commit f9d0d01d0b
18 changed files with 833 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/slider/slider.css
View File

@@ -74,4 +74,4 @@
.slider-element.next { .slider-element.next {
z-index: 5; z-index: 5;
left: 150%; left: 150%;
} }

192
site/src/about/aboutme/index.html
View File

@@ -1,97 +1,113 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
<meta name="og:description" content="" />
<meta name="og:image" content="https://static.janishutz.com/seo/legal-card.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/legal" />
<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="content">
<h1 class="title">About Janis Hutz</h1>
<div class="wrapfig-wrapper"> <head>
<img src="https://static.janishutz.com/logo.jpg" alt="Janis Hutz" class="wrapfig left circle"> <!-- CSS -->
<div class="wrapfig-text right"> <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<p class="no-margin bigger">Hello! I'm Janis Hutz, and I develop software</p> <link rel="stylesheet" href="/css/style.css">
<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> <link rel="stylesheet" href="/css/timeline.css">
<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> <link rel="stylesheet" href="/css/wrapfig.css">
<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> <!-- SEO -->
<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> <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="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
<meta name="og:description" content="" />
<meta name="og:image" content="https://static.janishutz.com/seo/legal-card.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/legal" />
<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="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.</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> </div>
<div class="timeline-el" id="timeline-dot-7">
<h2>Timeline</h2> <div class="timeline-year">2025</div>
<p>The timeline of my projects and my evolution in software development</p> <div class="timeline-dot"></div>
<div class="timeline"> <div class="timeline-desc">ETH Zurich, ConductorCalc, StorageManager, Website, Dotfiles</div>
<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</div>
</div>
</div> </div>
</div>
<p style="margin-top: 50px;">Learn more here</p> <p style="margin-top: 50px;">Learn more here</p>
<a href="/links" class="button">Linktree</a> <a href="/links" class="button">Linktree</a>
<!-- <div class="inline-elements"> --> <!-- <div class="inline-elements"> -->
<!-- <a href="https://blog.janishutz.com" class="button" target="_blank">Blog</a> --> <!-- <a href="https://blog.janishutz.com" class="button" target="_blank">Blog</a> -->
<!-- <a href="https://development.janishutz.com" class="button" target="_blank">Custom Websites</a> --> <!-- <a href="https://development.janishutz.com" class="button" target="_blank">Custom Websites</a> -->
<!-- <a href="https://store.janishutz.com" class="button" target="_blank">Store</a> --> <!-- <a href="https://store.janishutz.com" class="button" target="_blank">Store</a> -->
<!-- <a href="https://git.janishutz.com/janishutz" class="button" target="_blank">Git</a> --> <!-- <a href="https://git.janishutz.com/janishutz" class="button" target="_blank">Git</a> -->
<!-- <a href="https://github.com/janishutz" class="button" target="_blank">GitHub</a> --> <!-- <a href="https://github.com/janishutz" class="button" target="_blank">GitHub</a> -->
<!-- <a href="https://npmjs.com/~janishutz" class="button" target="_blank">npm</a> --> <!-- <a href="https://npmjs.com/~janishutz" class="button" target="_blank">npm</a> -->
<!-- <a href="https://mastodon.social/@janishutz" class="button" target="_blank">Mastodon</a> --> <!-- <a href="https://mastodon.social/@janishutz" class="button" target="_blank">Mastodon</a> -->
<!-- <a href="/projects" class="button">Projects</a> --> <!-- <a href="/projects" class="button">Projects</a> -->
<!-- <a href="/about" class="button">About janishutz.com</a> --> <!-- <a href="/about" class="button">About janishutz.com</a> -->
<!-- <a href="https://store.janishutz.com/donate" class="button" target="_blank">Donate</a> --> <!-- <a href="https://store.janishutz.com/donate" class="button" target="_blank">Donate</a> -->
<!-- </div> --> <!-- </div> -->
</div>
<footer></footer>
</body>
</div>
<footer></footer>
</body>
</html> </html>

36
site/src/about/index.html
View File

@@ -5,6 +5,7 @@
<!-- CSS --> <!-- 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="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/timeline.css">
<link rel="stylesheet" href="/css/wrapfig.css"> <link rel="stylesheet" href="/css/wrapfig.css">
<!-- SEO --> <!-- SEO -->
@@ -40,6 +41,41 @@
<p class="no-margin">Most of the software provided on this website is done so for free. Any <a <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 href="https://store.janishutz.com/donate" target="_blank">financial support</a> would be greatly
appreciated.</p> 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>
</div> </div>

3
site/src/css/footer.css
View File

@@ -65,6 +65,7 @@ footer .logo {
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
width: unset; width: unset;
max-width: 65%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@@ -73,5 +74,7 @@ footer .logo {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: unset; width: unset;
min-width: max-content;
margin: 5px;
} }
} }

73
site/src/css/nav.css
View File

@@ -1,11 +1,10 @@
nav { nav {
width: 100vw; width: 100vw;
height: 20vh; height: 15vh;
} }
.nav-placeholder { .nav-placeholder {
height: 20vh; height: 15vh;
} }
.nav-menu .logo-wrapper { .nav-menu .logo-wrapper {
@@ -25,7 +24,7 @@ nav {
nav a { nav a {
/* TODO: Update colours */ /* TODO: Update colours */
color: var( --color-text-primary ); color: var(--color-text-primary);
text-decoration: none; text-decoration: none;
transform: scale(1); transform: scale(1);
transition: transform 0.75s; transition: transform 0.75s;
@@ -50,17 +49,17 @@ nav a:hover {
.nav-menu { .nav-menu {
position: fixed; position: fixed;
left: -100vw; left: -100vw;
top: 20vh; top: 15vh;
padding-top: 2.5vh; padding-top: 2.5vh;
padding-bottom: 2.5vh; padding-bottom: 2.5vh;
padding-left: 2.5vw; padding-left: 2.5vw;
padding-right: 2.5vw; padding-right: 2.5vw;
height: 75vh; height: 80vh;
width: 95vw; width: 95vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 100; z-index: 100;
background-color: var( --color-background-accent ); background-color: var(--color-background-accent);
transition: left 0.5s, top 0.5s; transition: left 0.5s, top 0.5s;
} }
@@ -69,8 +68,8 @@ nav a:hover {
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 20vh; height: 15vh;
background-color: var( --color-background-accent ); background-color: var(--color-background-accent);
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 100; z-index: 100;
@@ -120,7 +119,7 @@ nav a:hover {
margin-left: auto; margin-left: auto;
margin-right: 20px; margin-right: 20px;
text-decoration: none; text-decoration: none;
color: var( --color-text-primary ); color: var(--color-text-primary);
font-size: 5vh; font-size: 5vh;
cursor: pointer; cursor: pointer;
width: 35px; width: 35px;
@@ -136,7 +135,7 @@ nav a:hover {
display: block; display: block;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: var( --color-text-primary ); background-color: var(--color-text-primary);
} }
#line1 { #line1 {
@@ -154,7 +153,7 @@ nav a:hover {
} }
.nav-toggle.active #line1 { .nav-toggle.active #line1 {
transform: rotate( 45deg ) scaleX( 0.95 ); transform: rotate(45deg) scaleX(0.95);
} }
.nav-toggle.active #line2 { .nav-toggle.active #line2 {
@@ -162,15 +161,23 @@ nav a:hover {
} }
.nav-toggle.active #line3 { .nav-toggle.active #line3 {
transform: rotate( -45deg ) scaleX( 0.95 ); transform: rotate(-45deg) scaleX(0.95);
} }
@media only screen and (min-width: 900px) { @media only screen and (min-width: 900px) {
nav {
height: 20vh;
}
nav a:hover { nav a:hover {
transform: unset; transform: unset;
} }
.nav-placeholder {
height: 20vh;
}
.nav-menu .logo-wrapper { .nav-menu .logo-wrapper {
display: unset; display: unset;
} }
@@ -188,7 +195,7 @@ nav a:hover {
flex-direction: row; flex-direction: row;
top: 0; top: 0;
left: 0; left: 0;
border-bottom: var( --color-text-primary ) 1px solid; border-bottom: var(--color-text-primary) 1px solid;
} }
.nav-menu.slide-up { .nav-menu.slide-up {
@@ -196,7 +203,7 @@ nav a:hover {
} }
.nav-link-dropdown { .nav-link-dropdown {
transform: scaleY( 0 ); transform: scaleY(0);
align-items: unset; align-items: unset;
justify-content: unset; justify-content: unset;
position: absolute; position: absolute;
@@ -205,12 +212,12 @@ nav a:hover {
width: max-content; width: max-content;
transform-origin: top; transform-origin: top;
transition: transform 0.5s; transition: transform 0.5s;
background-color: var( --color-background-primary ); background-color: var(--color-background-primary);
border-radius: 10px; border-radius: 10px;
padding: 15px; padding: 15px;
z-index: 2; z-index: 2;
} }
.nav-link-wrapper { .nav-link-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -222,7 +229,7 @@ nav a:hover {
margin-right: 3%; margin-right: 3%;
margin-bottom: unset; margin-bottom: unset;
} }
.nav-link-header { .nav-link-header {
flex-direction: column; flex-direction: column;
min-width: 100px; min-width: 100px;
@@ -233,9 +240,10 @@ nav a:hover {
z-index: 3; z-index: 3;
} }
.nav-link-header::before, .nav-link-header::after { .nav-link-header::before,
.nav-link-header::after {
opacity: 0; opacity: 0;
border: var( --color-background-primary ) 15px solid; border: var(--color-background-primary) 15px solid;
border-top-color: transparent; border-top-color: transparent;
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -245,36 +253,37 @@ nav a:hover {
transition: opacity 0.4s; transition: opacity 0.4s;
bottom: -15px; bottom: -15px;
} }
.nav-link-header::before { .nav-link-header::before {
border-left-color: transparent; border-left-color: transparent;
border-bottom-right-radius: 30px; border-bottom-right-radius: 30px;
right: calc( 100% - 15px ); right: calc(100% - 15px);
} }
.nav-link-header::after { .nav-link-header::after {
border-right-color: transparent; border-right-color: transparent;
border-bottom-left-radius: 30px; border-bottom-left-radius: 30px;
left: calc( 100% - 15px ); left: calc(100% - 15px);
} }
.nav-link-dropdown a:hover { .nav-link-dropdown a:hover {
text-decoration: underline; text-decoration: underline;
} }
.nav-link-wrapper:hover .nav-link-header { .nav-link-wrapper:hover .nav-link-header {
background-color: var( --color-background-primary ); background-color: var(--color-background-primary);
}
.nav-link-wrapper:hover .nav-link-dropdown {
transform: scaleY( 1 );
} }
.nav-link-wrapper:hover .nav-link-header::before, .nav-link-wrapper:hover .nav-link-header::after { .nav-link-wrapper:hover .nav-link-dropdown {
transform: scaleY(1);
}
.nav-link-wrapper:hover .nav-link-header::before,
.nav-link-wrapper:hover .nav-link-header::after {
transition-delay: 0.1s; transition-delay: 0.1s;
opacity: 1; opacity: 1;
} }
.nav-toggle { .nav-toggle {
display: none; display: none;
} }

105
site/src/css/style.css
View File

@@ -1,12 +1,13 @@
@import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' ); @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' ); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url( '/css/nav.css' ); @import url('/css/nav.css');
@import url( '/css/colors.css' ); @import url('/css/colors.css');
@import url( '/css/footer.css' ); @import url('/css/footer.css');
@import url( '/css/analytics.css' ); @import url('/css/analytics.css');
/* Color Theme */ /* Color Theme */
:root, :root.light { :root,
:root.light {
--color-text-primary: black; --color-text-primary: black;
--color-text-accent: #303030; --color-text-accent: #303030;
--color-link: rgb(10, 10, 100); --color-link: rgb(10, 10, 100);
@@ -54,8 +55,8 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
background-color: var( --color-background-primary ); background-color: var(--color-background-primary);
color: var( --color-text-primary ); color: var(--color-text-primary);
} }
body.loaded { body.loaded {
@@ -64,10 +65,10 @@ body.loaded {
.material-symbols-outlined { .material-symbols-outlined {
font-variation-settings: font-variation-settings:
'FILL' 0, 'FILL' 0,
'wght' 400, 'wght' 400,
'GRAD' 0, 'GRAD' 0,
'opsz' 48 'opsz' 48
} }
.content { .content {
@@ -85,7 +86,7 @@ body.loaded {
.button { .button {
padding: 20px; padding: 20px;
background-color: var( --color-button ); background-color: var(--color-button);
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 10px; border-radius: 10px;
@@ -96,14 +97,19 @@ body.loaded {
.button:hover { .button:hover {
border-radius: 5px; border-radius: 5px;
background-color: var( --color-button-hover ); background-color: var(--color-button-hover);
} }
.divider { .divider {
width: 100%; width: 100%;
margin-bottom: 2%; margin-bottom: 2%;
margin-top: 2%; margin-top: 2%;
border-color: var( --color-text-primary ); border-color: var(--color-text-primary);
}
.slider {
width: 100vw;
height: calc(100vw / 16 * 11);
} }
.slider-element { .slider-element {
@@ -118,31 +124,37 @@ body.loaded {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;
max-width: 70%;
}
.slider-controls {
font-size: 2.6rem;
padding: 0.25rem 0.5rem;
} }
.pullquote-lines { .pullquote-lines {
border-color: var( --color-text-primary ); border-color: var(--color-text-primary);
margin-bottom: 2%; margin-bottom: 2%;
margin-top: 2%; margin-top: 2%;
width: 100%; width: 100%;
} }
.quotes-text { .quotes-text {
font-size: 150%; font-size: 150%;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
} }
.quotes-author { .quotes-author {
text-align: right; text-align: right;
font-style: italic; font-style: italic;
width: 80%; width: 80%;
margin-right: auto; margin-right: auto;
font-weight: lighter; font-weight: lighter;
margin-top: 0; margin-top: 0;
} }
@@ -184,21 +196,32 @@ body.loaded {
margin: 5px; margin: 5px;
} }
@media only screen and (min-width: 550px) and (max-width: 998px) { @media only screen and (min-width: 550px) and (max-width: 999px) {
.project-logo { .project-logo {
margin-top: 10vh; margin-top: 10vh;
width: 50vw; width: 50vw;
} }
} }
@media only screen and (min-width: 999px) { @media only screen and (min-width: 1000px) {
.project-logo { .project-logo {
margin-top: 4vh; margin-top: 4vh;
width: auto; width: auto;
height: 40vh; height: 40vh;
} }
.inline-elements { .inline-elements {
flex-direction: row; flex-direction: row;
} }
} }
@media only screen and (min-width: 800px) {
.slider {
width: 100vw;
height: 80vh;
}
.slider-controls {
font-size: 3rem;
}
}

15
site/src/index.html
View File

@@ -27,7 +27,7 @@
<body> <body>
<nav></nav> <nav></nav>
<!-- <video src="https://static.janishutz.com/assets/video-home.mp4" autoplay class="title-video"></video> --> <!-- <video src="https://static.janishutz.com/assets/video-home.mp4" autoplay class="title-video"></video> -->
<div class="slider" style="width: 100vw; height: 80vh;"> <div class="slider">
<div class="slider-container"> <div class="slider-container">
<div class="slider-element current" <div class="slider-element current"
style="background-image: url( 'https://static.janishutz.com/assets/home/home-store.jpg' );"> style="background-image: url( 'https://static.janishutz.com/assets/home/home-store.jpg' );">
@@ -54,8 +54,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div> <span class="slider-controls slider-control-left material-symbols-outlined"
<div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div> onclick="sliderControl( 'previous' )">arrow_back</span>
<span class="slider-controls slider-control-right material-symbols-outlined"
onclick="sliderControl( 'next' )">arrow_forward
</div>
</div> </div>
<div class="content"> <div class="content">
@@ -86,7 +89,7 @@
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>Free & Open Source Software</h3> <h3>Free & Open Source Software</h3>
<p>Various open source projects are in the works at janishutz.com, with help from the community.</p> <p>Various open source projects are in the works at janishutz.com, with help from the community.</p>
<a href="https://janishutz.com/projects#foss" class="button">Projects</a> <a href="/projects#foss" class="button">Projects</a>
</div> </div>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
@@ -94,12 +97,12 @@
<h3>iOS Apps</h3> <h3>iOS Apps</h3>
<p>Apps to improve your day-to-day life by providing useful features helping you stay safe and <p>Apps to improve your day-to-day life by providing useful features helping you stay safe and
organized.</p> organized.</p>
<a href="https://janishutz.com/projects#ios" class="button">iOS Apps</a> <a href="/projects#ios" class="button">iOS Apps</a>
</div> </div>
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>ConductorCalc</h3> <h3>ConductorCalc</h3>
<p>Professional wire calculation software to aid in building high voltage lines safely</p> <p>Professional wire calculation software to aid in building high voltage lines safely</p>
<a href="https://conductorcalc.com" class="button">ConductorCalc</a> <a href="https://conductorcalc.com" class="button" target="_blank">ConductorCalc</a>
</div> </div>
</div> </div>
</div> </div>

196
site/src/legal/privacy/index.html
View File

@@ -1,84 +1,124 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>Privacy Policy | 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="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
<meta name="og:description" content="" />
<meta name="og:image" content="https://static.janishutz.com/seo/home-card.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style>
.info {
font-weight: normal;
}
</style>
</head>
<body>
<nav></nav>
<div class="content">
<h1 class="title">Privacy Policy</h1>
<a href="/legal" class="back">&leftarrow; Back to legal hub</a> <head>
<!-- CSS -->
<hr class="pullquote-lines"> <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<h3 class="quotes-text">Privacy is an inherent human right, and a requirement for maintaining the human condition with dignity and respect</h3> <link rel="stylesheet" href="/css/style.css">
<h4 class="quotes-author">- Bruce Schneier</h4>
<hr class="pullquote-lines"> <!-- SEO -->
<title>Privacy Policy | janishutz.com</title>
<p>Keeping your data safe is at the centre of all of my software. Therefore, I will never sell your data and all data that is collected automatically is not tied to your identity.</p> <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="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
<meta name="og:description" content="" />
<meta name="og:image" content="https://static.janishutz.com/seo/home-card.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style>
.info {
font-weight: normal;
}
</style>
</head>
<body>
<nav></nav>
<div class="content">
<h1 class="title">Privacy Policy</h1>
<a href="/legal" class="back">&leftarrow; Back to legal hub</a>
<hr class="pullquote-lines">
<h3 class="quotes-text">Privacy is an inherent human right, and a requirement for maintaining the human
condition with dignity and respect</h3>
<h4 class="quotes-author">- Bruce Schneier</h4>
<hr class="pullquote-lines">
<p>Keeping your data safe is at the centre of all of my software. Therefore, I will never sell your data and all
data that is collected automatically is not tied to your identity.</p>
<ol style="width: 100%"> <ol style="width: 100%">
<b><li> <b>
What data is collected on you? <li>
<p class="info">Some of my web-based services, but none of my apps may use Privacy Preserving Product Analytics, meaning all data on interactions with my websites and services will be aggregated and anonymized. All raw data is deleted within a day of being collected. <br> What data is collected on you?
This data includes your anonymized IP address and your approximated country (which is estimated based on your IP address) and what pages you clicked on. For this purpose my services use Matomo, which is a free and open source, self-hosted analytics tool. <p class="info">Some of my web-based services, but none of my apps may use Privacy Preserving
<br> All other data that is collected on you is data you willingly and at your own responsibility provide me with when signing up or using any of my services. Whilst I try to have everything run cloud-less, some features still require some data handling on my servers.</p> Product Analytics, meaning all data on interactions with my websites and services will be
</li></b> aggregated and anonymized. All raw data is deleted within a day of being collected. <br>
<b><li> This data includes your anonymized IP address and your approximated country (which is estimated
How is this data stored and processed? based on your IP address) and what pages you clicked on. For this purpose my services use
<p class="info">All the data that has to be sent to the cloud for processing, like the contact form, is sent to my servers using an HTTPS connection, hence, it is an encrypted connection. The data from the contact from is then sent to one of my email addresses via my mail server and is never stored on the actual server. You may have your request deleted at any time. To do so, please contact me again or respond to my response email. Matomo, which is a free and open source, self-hosted analytics tool.
<br> The data collected automatically by my analytics tool is stored for one day and never allows me to uniquely identify you as an individual. Once the data is aggregated, the raw data is deleted, and you will only show up as part of all users that visit my websites. <br> All other data that is collected on you is data you willingly and at your own
</p> responsibility provide me with when signing up or using any of my services. Whilst I try to have
</li></b> everything run cloud-less, some features still require some data handling on my servers.
<b><li> </p>
How can I have my data deleted? </li>
<p class="info">To have your data deleted, please <a href="https://support.janishutz.com/index.php?a=add&catid=5">contact me</a>. I will not be able to delete the data that is collected automatically, as I do not know who this data belongs to and all raw data is deleted within one day of creation.</p> </b>
</li></b> <b>
<b><li> <li>
Opting out of data collection How is this data stored and processed?
<p class="info">All websites that feature Matomo tracking code will allow you to opt out, if you scroll all the way down and opt out there</p> <p class="info">All the data that has to be sent to the cloud for processing, like the contact form,
</li></b> is sent to my servers using an HTTPS connection, hence, it is an encrypted connection. You may
<b><li> have your request deleted at any time. To do so, depending on the platform, you will either find
Cookies a button on the account page, or you will have to contact me to delete the data.
<p class="info">Most of my websites do not use any cookies. If they do use cookies, the specific service will explicitly state so when you first visit the page, except for the account services, which use cookies, but don't state this explicitly. Cookies are small amounts of text-based data which is used to identify you, which, whenever one of my services uses cookies, is required to allow you to for example sign into that page. No third party cookies are used on any of my websites</p> <br> The data collected automatically by my analytics tool is stored for one day and never
</li></b> allows me to uniquely identify you as an individual. Once the data is aggregated, the raw data
<b><li> is deleted, and you will only show up as part of all users that visit my websites.
Sharing data with third parties </p>
<p class="info">On my store, some data has to be shared with third parties, namely the developers of software you purchase. </li>
This data includes your unique UserID and your selected username. Not even your email address is shared with third parties. </b>
This data is only shared with developers of third-party software if you purchased their software, and they request it. Other than that, no data is shared with any third parties, except I have your explicit, written permission to do so in case I need to forward your query to somebody else.</p> <b>
</li></b> <li>
<b><li> How can I have my data deleted?
Updating this privacy Policy <p class="info">To have your data deleted, please <a
<p class="info">I retain the right to, at any time, at my own will and discretion, update this privacy policy. Valid is always the privacy policy which is available at this URL</p> href="https://support.janishutz.com/index.php?a=add&catid=5">contact me</a>. I will not be
</li></b> able to delete the data that is collected automatically, as I do not know who this data belongs
</ol> to and all raw data is deleted within one day of creation.</p>
<i>Last updated 2024-05-20</i> </li>
</div> </b>
<footer></footer> <b>
</body> <li>
Opting out of data collection
<p class="info">All websites that feature Matomo tracking code will allow you to opt out, by
clicking the small symbol in the bottom right corner.</p>
</li>
</b>
<b>
<li>
Cookies
<p class="info">Most of my websites do not use any cookies. If they do use cookies, the specific
service will explicitly state so when you first visit the page. Cookies are small amounts of
text-based data used to identify you, which, whenever one of my services uses cookies, is
required to allow you to sign into that page. No third party cookies are used on any of my
websites</p>
</li>
</b>
<b>
<li>
Sharing data with third parties
<p class="info">No data is shared with third parties, except you give your explicit, written consent
to do so. In the future, my store may support other developer's software. If so and you purchase
a product by a third-party developer, some data will have to be shared with them.</p>
</li>
</b>
<b>
<li>
Updating this privacy Policy
<p class="info">I retain the right to, at any time, at my own will and discretion, update this
privacy policy. Valid is always the privacy policy which is available at this URL</p>
</li>
</b>
</ol>
<i>Last updated 2025-06-22</i>
</div>
<footer></footer>
</body>
</html> </html>

1
site/src/links/index.html
View File

@@ -35,6 +35,7 @@
<h1 class="title">Links</h1> <h1 class="title">Links</h1>
<p class="text-center">Links to the most important pages and platforms</p> <p class="text-center">Links to the most important pages and platforms</p>
<!-- TODO: Improve design -->
<div class="inline-elements"> <div class="inline-elements">
<a href="https://development.janishutz.com" class="button" target="_blank">Custom Websites</a> <a href="https://development.janishutz.com" class="button" target="_blank">Custom Websites</a>
<a href="https://store.janishutz.com" class="button" target="_blank">Store</a> <a href="https://store.janishutz.com" class="button" target="_blank">Store</a>

1
site/src/nav.html
View File

@@ -86,6 +86,7 @@
<div class="nav-link-dropdown"> <div class="nav-link-dropdown">
<a href="/about">About janishutz.com</a> <a href="/about">About janishutz.com</a>
<a href="/about/aboutme">About Janis Hutz</a> <a href="/about/aboutme">About Janis Hutz</a>
<a href="https://blog.janishutz.com">Blog</a>
<a href="/legal">Legal</a> <a href="/legal">Legal</a>
</div> </div>
</div> </div>

0
site/src/projects/arch-dev-vm/index.html → site/src/projects/accounts/index.html
View File

0
site/src/projects/id/index.html → site/src/projects/biogascontrollerapp/index.html
View File

104
site/src/projects/conductorcalc/index.html
View File

@@ -0,0 +1,104 @@
<!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>ConductorCalc - Professional High-Voltage Line Calculation Software | 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="libreevent, event management, ticketing, seat plan editor, free and open source" />
<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="libreevent - free and open source event management solution" />
<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/libreevent.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/projects/libreevent" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style>
#yt-embed {
width: 90vw;
height: 50vw;
}
@media only screen and (min-width: 999px) {
#yt-embed {
width: 70vw;
height: 40vw;
}
}
</style>
</head>
<body>
<nav></nav>
<div class="slider">
<div class="slider-container">
<div class="slider-element current"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<a href="https://conductorcalc.com" class="button" style="margin-top: 30%;">Website</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
<h2>Available on every platform</h2>
<p>ConductorCalc uses web technologies to be available on all major platforms</p>
<a href="https://store.janishutz.com/product/com.janishutz.ConductorCalc" target="_blank" class="button">Buy now</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
<h2></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-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">
<!-- TODO: Size logo better -->
<img src="https://cdn.conductorcalc.com/logo.jpg" alt="ConductorCalc logo" class="project-logo">
<h1>ConductorCalc</h1>
<a href="/projects" class="back-button">&leftarrow; All projects</a>
<p>Professional High-Voltage-Line calculation software</p>
<a href="https://conductorcalc.com" target="_blank" class="button">ConductorCalc.com</a>
</div>
<div id="yt-embed"></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>

75
site/src/projects/index.html
View File

@@ -40,86 +40,137 @@
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a> <a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a>
</div> </div>
<div class="slider-element" <div class="slider-element current"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> style="background-image: url( 'https://static.janishutz.com/assets/projects/conductorcalc-title.jpg' );">
<a href="/projects/storagemanager" class="button" style="margin-top: 30%;">Storagemanager</a> <a href="https://conductorcalc.com" class="button" style="margin-top: 30%;">ConductorCalc</a>
</div> </div>
<div class="slider-element" <div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> style="background-image: url( 'https://static.janishutz.com/assets/projects/storagemanager-title.jpg' );">
<a href="/projects/storagemanager" class="button" style="margin-top: 30%;">StorageManager</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://static.janishutz.com/assets/projects/qrscanner-title.jpg' );">
<a href="/projects/qrscanner" class="button" style="margin-top: 30%;">QR &amp; Barcode Insight</a> <a href="/projects/qrscanner" class="button" style="margin-top: 30%;">QR &amp; Barcode Insight</a>
</div> </div>
<!-- TODO: Make sure that margins are okay -->
<div class="slider-element" <div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> style="background-image: url( 'https://static.janishutz.com/assets/projects/store-title.jpg' );">
<a href="/projects/store" class="button" style="margin-top: 30%;">Store</a> <a href="/projects/store" class="button" style="margin-top: 30%;">Store</a>
</div> </div>
<div class="slider-element" <div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> style="background-image: url( 'https://static.janishutz.com/assets/projects/musicplayer-title.jpg' );">
<a href="/projects/musicplayer" class="button" style="margin-top: 30%;">MusicPlayer</a> <a href="/projects/musicplayer" class="button" style="margin-top: 30%;">MusicPlayer</a>
</div> </div>
</div> </div>
<!-- TODO: Move to different icons, as on iOS that is broken (of course it is) --> <span class="slider-controls slider-control-left material-symbols-outlined"
<div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div> onclick="sliderControl( 'previous' )">arrow_back</span>
<div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div> <span class="slider-controls slider-control-right material-symbols-outlined"
onclick="sliderControl( 'next' )">arrow_forward
</div>
</div> </div>
<div class="content"> <div class="content">
<!-- TODO: Size logo better -->
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz logo" class="project-logo"> <img src="https://static.janishutz.com/logo.jpg" alt="janishutz logo" class="project-logo">
<h1>Projects</h1> <h1>Projects</h1>
<p>Discover all of my software projects</p> <p>Discover my software projects</p>
<hr class="divider" style="margin-top: 75px;">
<h2 id="foss">Open Source Projects</h2> <h2 id="foss">Open Source Projects</h2>
<p>Projects you can use for free, that have their source code publicly available and you can help develop</p>
<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">
<div class="side-by-side-item left"> <div class="side-by-side-item left">
<h3>libreevent</h3> <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>
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>MusicPlayer</h3> <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>
<a href="/projects/musicplayer" class="button">Details</a>
</div> </div>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<div class="side-by-side-item left"> <div class="side-by-side-item left">
<h3>impress</h3> <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>
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>Arch-Dev-VM</h3> <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>
</div> </div>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<div class="side-by-side-item left"> <div class="side-by-side-item left">
<h3>BiogasControllerApp</h3> <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>
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>Small School Projects</h3> <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>
</div> </div>
</div> </div>
<hr class="divider" style="margin-top: 75px;">
<h2 id="ios">iOS Apps</h2> <h2 id="ios">iOS Apps</h2>
<p>Apps designed for your phone and tablet</p>
<div class="side-by-side"> <div class="side-by-side">
<div class="side-by-side-item left"> <div class="side-by-side-item left">
<h3>StorageManager</h3> <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
have</p>
<a href="/projects/storagemanager" class="button">Details</a>
</div> </div>
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>QR &amp; Barcode Insight</h3> <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
Google's Safe Search API</p>
<a href="/projects/qrscanner" class="button">Details</a>
</div> </div>
</div> </div>
<hr class="divider" style="margin-top: 75px;">
<h2 id="proprietary">Proprietary Software</h2> <h2 id="proprietary">Proprietary Software</h2>
<p>Cross-Platform apps, available in browsers or even app stores!</p>
<div class="side-by-side"> <div class="side-by-side">
<div class="side-by-side-item left"> <div class="side-by-side-item left">
<h3>ConductorCalc</h3> <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>
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>Store</h3> <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>
</div> </div>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<div class="side-by-side-item left"> <div class="side-by-side-item left">
<h3>id.janishutz.com</h3> <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>
<div class="side-by-side-item right"> <div class="side-by-side-item right">
<h3>Language School Hossegor Booking System</h3> <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>
<a href="/projects/languageschoolhossegor-booking" class="button">Details</a>
</div> </div>
</div> </div>
</div> </div>

184
site/src/projects/libreevent/index.html
View File

@@ -1,101 +1,121 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>libreevent - free and open source event management solution | 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="libreevent, event management, ticketing, seat plan editor, free and open source" />
<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="libreevent - free and open source event management solution" />
<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/libreevent.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/projects/libreevent" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style> <head>
<!-- CSS -->
<link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
<!-- SEO -->
<title>libreevent - free and open source event management solution | 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="libreevent, event management, ticketing, seat plan editor, free and open source" />
<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="libreevent - free and open source event management solution" />
<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/libreevent.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/projects/libreevent" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style>
#yt-embed {
width: 90vw;
height: 50vw;
}
@media only screen and (min-width: 999px) {
#yt-embed { #yt-embed {
width: 70vw; width: 70vw;
height: 40vw; height: 40vw;
} }
</style> }
</head> </style>
<body> </head>
<nav></nav>
<div class="slider" style="width: 100vw; height: 80vh;"> <body>
<div class="slider-container"> <nav></nav>
<div class="slider-element current" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a> <div class="slider">
</div> <div class="slider-container">
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );"> <div class="slider-element current"
<h2>Create Events with Ease</h2> style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<p>Using the libreǝvent's powerful admin panel</p> <a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
<a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a> </div>
</div> <div class="slider-element"
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );"> style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
<h2>Create seat plans</h2> <h2>Create Events with Ease</h2>
<p>libreǝvent's seat plan editor is designed to make this as easy as possible</p> <p>Using the libreǝvent's powerful admin panel</p>
<a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a> <a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
</div> </div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );"> <div class="slider-element"
<h1>Order Tickets</h1> style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
<p>on this page and give users all important data</p> <h2>Create seat plans</h2>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a> <p>libreǝvent's seat plan editor is designed to make this as easy as possible</p>
</div> <a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );"> </div>
<h2>User Accounts</h2> <div class="slider-element"
<p>Your customers can do everything in self-service!</p> style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a> <h1>Order Tickets</h1>
</div> <p>on this page and give users all important data</p>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );"> <a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
<h2>Open Source Project</h2> </div>
<p>Free Software, developed by Janis Hutz & the community</p> <div class="slider-element"
<a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a> style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );">
</div> <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>
<div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div>
<div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div>
</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"> <div class="content">
<!-- TODO: Size logo better --> <!-- TODO: Size logo better -->
<img src="https://libreevent.janishutz.com/assets/logo.png" alt="libreevent logo" class="project-logo"> <img src="https://libreevent.janishutz.com/assets/logo.png" alt="libreevent logo" class="project-logo">
<h1>libreǝvent</h1> <h1>libreǝvent</h1>
<a href="/projects" class="back-button">&leftarrow; All projects</a> <a href="/projects" class="back-button">&leftarrow; All projects</a>
<p>Free & Open Source Event Management & Ticketing Solution</p> <p>Free & Open Source Event Management & Ticketing Solution</p>
<hr class="pullquote-lines"> <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> <h3 class="content-title-small">Why use a commercial event management solution, if you can host a more flexible
<hr class="pullquote-lines"> one yourself?</h3>
</div> <hr class="pullquote-lines">
</div>
<div id="yt-embed"></div> <div id="yt-embed"></div>
<div class="content"> <div class="content">
<h2>Project Website</h2> <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> <p>libreevent has its own project website, where you can learn more about the project, find documentation and a
<a href="https://libreevent.janishutz.com" target="_blank" class="button">Project Website</a> guide on how to install it.</p>
</div> <a href="https://libreevent.janishutz.com" target="_blank" class="button">Project Website</a>
</div>
<footer></footer> <footer></footer>
<script src="https://static.janishutz.com/js/yt-embed.js"></script> <script src="https://static.janishutz.com/js/yt-embed.js"></script>
<script src="https://static.janishutz.com/js/slider.js"></script> <script src="https://static.janishutz.com/js/slider.js"></script>
<script> <script>
YTEmbed( 'yt-embed', 'UYMa-xTyZYo' ); YTEmbed('yt-embed', 'UYMa-xTyZYo');
activateSlider( 7500 ); activateSlider(7500);
</script> </script>
</body> </body>
</html>
</html>

0
site/src/projects/smuL/index.html
View File

136
site/src/projects/storagemanager/index.html
View File

@@ -1,74 +1,92 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>Storage Manager - get organized | 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="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
<meta name="og:description" content="" />
<meta name="og:image" content="https://static.janishutz.com/seo/projects-card.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style> <head>
#yt-embed { <!-- CSS -->
width: 70vw; <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
height: 40vw; <link rel="stylesheet" href="/css/style.css">
}
</style>
</head>
<body>
<nav></nav>
<div class="slider" style="width: 100vw; height: 80vh;"> <!-- SEO -->
<div class="slider-container"> <title>Storage Manager - get organized | janishutz.com</title>
<div class="slider-element current" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a> <meta charset="UTF-8" />
</div> <meta http-equiv="X-UA-Compatible" content="IE=7" />
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> <meta name="keywords" content="" />
<a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a> <meta name="description" content="" />
</div> <meta name="og:title" content="" />
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> <meta name="og:description" content="" />
<a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a> <meta name="og:image" content="https://static.janishutz.com/seo/projects-card.jpg" />
</div> <meta name="og:type" content="website" />
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );"> <meta name="og:url" content="https://janishutz.com" />
<a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a> <meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style>
#yt-embed {
width: 70vw;
height: 40vw;
}
</style>
</head>
<body>
<nav></nav>
<div class="slider">
<div class="slider-container">
<div class="slider-element current"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<a href="https://apps.apple.com/us/app/storagemanager/id6443832297" class="button"
style="margin-top: 30%;">App Store</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<div class="slider-info">
<a href="https://apps.apple.com/us/app/storagemanager/id6443832297" class="button">App Store</a>
</div> </div>
</div> </div>
<div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div> <div class="slider-element"
<div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div> style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a>
</div>
</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"> <div class="content">
<!-- TODO: Size logo better --> <!-- TODO: Size logo better -->
<img src="https://static.janishutz.com/assets/storagemanager.jpg" alt="storage manager logo" class="project-logo"> <img src="https://static.janishutz.com/assets/storagemanager.jpg" alt="storage manager logo"
<h1>Storage Manager</h1> class="project-logo">
<h1>Storage Manager</h1>
<p>Managing storage can be a challenging task, especially when the volume of items stored becomes large. If products in that storage can go bad, you are very likely to produce quite a bit of waste. StorageManager is an iOS app that can send you notifications such that you do not forget about products that are about to expire.</p> <p>Managing storage can be a challenging task, especially when the volume of items stored becomes large. If
products in that storage can go bad, you are very likely to produce quite a bit of waste. StorageManager is
an iOS app that can send you notifications such that you do not forget about products that are about to
expire.</p>
<h3>Features</h3> <h3>Features</h3>
<div class=""></div> <div class=""></div>
</div> </div>
<footer></footer> <footer></footer>
<script src="https://static.janishutz.com/js/yt-embed.js"></script> <script src="https://static.janishutz.com/js/yt-embed.js"></script>
<script src="https://static.janishutz.com/js/slider.js"></script> <script src="https://static.janishutz.com/js/slider.js"></script>
<script> <script>
activateSlider( 7500 ); activateSlider(7500);
</script> </script>
</body> </body>
</html> </html>

109
site/src/projects/store/index.html
View File

@@ -0,0 +1,109 @@
<!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>Store - Buy Software and support the continuous development of open source projects | 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="Store - Buy Software and support the continuous development of open source projects" />
<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>
<!-- TODO: Think about mobile design of slider -->
<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">
<!-- TODO: Size logo better -->
<img src="https://libreevent.janishutz.com/assets/logo.png" alt="libreevent logo" class="project-logo">
<h1>libreǝvent</h1>
<a href="/projects" class="back-button">&leftarrow; All projects</a>
<p>Free & Open Source Event Management & Ticketing Solution</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>