Hello! I'm Janis Hutz, and I develop software
-
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
+
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.
+
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.
Most of the software provided on this website is done so for free. Any financial support would be greatly appreciated.
+
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 here. 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.
+
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.
+
+
Blog
Custom Websites
Store
GitHub
diff --git a/site/src/css/footer.css b/site/src/css/footer.css
index 9b9a23e..4ef9190 100644
--- a/site/src/css/footer.css
+++ b/site/src/css/footer.css
@@ -7,4 +7,97 @@ footer {
footer .logo {
height: 40vh;
+}
+
+.footer-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer-text-container {
+ display: flex;
+ flex-direction: row;
+ min-width: calc( ( 100% - 40vh - 50px ) / 2 );
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.footer-category {
+ display: flex;
+ flex-direction: column;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.footer-category a {
+ color: black;
+ text-decoration: none;
+ transition: all 0.5s;
+ font-size: 1rem;
+}
+
+.footer-category a:hover {
+ color: rgb(21, 43, 92);
+ font-size: 1.1rem;
+}
+
+
+/*
+ Analytics
+*/
+.analytics-notice {
+ z-index: 10000;
+ bottom: -450px;
+ right: 5px;
+ width: 300px;
+ height: 400px;
+ position: fixed;
+ background-color: rgb(193, 193, 223);
+ border-radius: 20px;
+ padding: 10px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: scroll;
+ transition: bottom 1s;
+}
+
+.analytics-notice.show {
+ bottom: 5px;
+}
+
+.analytics-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: none;
+ border: none;
+ font-size: 1rem;
+ cursor: pointer;
+}
+
+.analytics-notice .small-symbol {
+ position: fixed;
+ bottom: -3px;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ background-color: rgb(193, 193, 223);
+ border: solid black 1px;
+ cursor: pointer;
+ transition: all 1s;
+ padding-left: 20px;
+ padding-right: 20px;
+ padding-bottom: 5px;
+ right: 10px;
+ transition-delay: 2s;
+ z-index: 10001;
+ font-size: 1.5rem;
+}
+
+.analytics-notice.show .small-symbol {
+ bottom: -100px;
+ transition-delay: 0s;
}
\ No newline at end of file
diff --git a/site/src/css/nav.css b/site/src/css/nav.css
index eae1e77..0df67b1 100644
--- a/site/src/css/nav.css
+++ b/site/src/css/nav.css
@@ -1,3 +1,5 @@
+/* TODO: Update... */
+
nav {
width: 100vw;
height: 20vh;
@@ -61,6 +63,11 @@ nav a {
align-items: center;
z-index: 100;
border-bottom: black 1px solid;
+ transition: top 0.5s;
+}
+
+.nav-top-bar.slide-up {
+ top: -20vh;
}
.nav-top-bar .logo {
@@ -162,6 +169,10 @@ nav a {
border-bottom: black 1px solid;
}
+ .nav-menu.slide-up {
+ top: -20vh;
+ }
+
.nav-link-dropdown {
transform: scaleY( 0 );
align-items: unset;
diff --git a/site/src/css/timeline.css b/site/src/css/timeline.css
new file mode 100644
index 0000000..a4d267a
--- /dev/null
+++ b/site/src/css/timeline.css
@@ -0,0 +1,49 @@
+.timeline {
+ position: relative;
+ display: block;
+ flex-direction: column;
+ height: 100%;
+}
+
+.timeline-el {
+ z-index: 3;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+ margin-top: 30px;
+ background: none;
+}
+
+.timeline-dot {
+ width: 20px;
+ height: 20px;
+ background-color: rgb(21, 43, 92);
+ border-radius: 20px;
+}
+
+.timeline-year {
+ margin-right: 20px;
+ color: rgb(63, 63, 63);
+ font-style: italic;
+ width: 5rem;
+}
+
+.timeline-desc {
+ font-style: italic;
+ font-weight: lighter;
+ margin-left: 20px;
+ max-width: calc( 100% - 5rem - 60px );
+}
+
+.timeline-line {
+ position: absolute;
+ z-index: 1;
+ height: calc(100% - 10px);
+ top: 5px;
+ width: 4px;
+ background-color: rgb(110, 110, 110);
+ display: flex;
+ left: calc( 5rem + 28px );
+}
\ No newline at end of file
diff --git a/site/src/css/wrapfig.css b/site/src/css/wrapfig.css
index 988782f..c07129e 100644
--- a/site/src/css/wrapfig.css
+++ b/site/src/css/wrapfig.css
@@ -4,26 +4,45 @@
}
.wrapfig {
- width: 40%;
+ width: 100%;
}
.wrapfig.left {
- float: left;
+ float: none;
}
.wrapfig.right {
- float: left;
+ float: none;
}
.wrapfig-text {
margin: 5px;
- width: 58%;
+ width: 100%;
}
-.wrapfig-text.left {
- margin-right: auto;
-}
-.wrapfig-text.right {
- margin-left: auto;
+@media only screen and (min-width: 999px) {
+ .wrapfig {
+ width: 40%;
+ }
+
+ .wrapfig.left {
+ float: left;
+ }
+
+ .wrapfig.right {
+ float: right;
+ }
+
+ .wrapfig-text {
+ width: 58%;
+ }
+
+ .wrapfig-text.left {
+ margin-right: auto;
+ }
+
+ .wrapfig-text.right {
+ margin-left: auto;
+ }
}
\ No newline at end of file
diff --git a/site/src/footer.html b/site/src/footer.html
index da8afc1..d317332 100644
--- a/site/src/footer.html
+++ b/site/src/footer.html
@@ -1,4 +1,4 @@
-
+
\ No newline at end of file
diff --git a/site/src/nav.html b/site/src/nav.html
index 5f04707..ac9aaba 100644
--- a/site/src/nav.html
+++ b/site/src/nav.html
@@ -84,6 +84,22 @@
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
\ No newline at end of file
\ No newline at end of file
diff --git a/site/src/nav.html b/site/src/nav.html
index 5f04707..ac9aaba 100644
--- a/site/src/nav.html
+++ b/site/src/nav.html
@@ -84,6 +84,22 @@
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
\ No newline at end of file
-
+