From ee01284622e7c34638fabcbcd55235b1567eef79 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Tue, 15 Oct 2024 17:23:25 +0200 Subject: [PATCH] footer, better nav, design --- site/src/about/aboutme/index.html | 30 ++++++++-- site/src/css/footer.css | 93 +++++++++++++++++++++++++++++++ site/src/css/nav.css | 11 ++++ site/src/css/timeline.css | 49 ++++++++++++++++ site/src/css/wrapfig.css | 37 +++++++++--- site/src/footer.html | 40 ++++++++++--- site/src/nav.html | 16 ++++++ 7 files changed, 255 insertions(+), 21 deletions(-) create mode 100644 site/src/css/timeline.css diff --git a/site/src/about/aboutme/index.html b/site/src/about/aboutme/index.html index c3d8062..4abce0e 100644 --- a/site/src/about/aboutme/index.html +++ b/site/src/about/aboutme/index.html @@ -4,6 +4,7 @@ + @@ -31,27 +32,48 @@ Janis Hutz

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.

+

Timeline

+

The timeline of my projects and my evolution in software development

-
2015
+
First coding experience using LEGO Mindstorms & LabView
-
2021
+
BiogasControllerApp
+
+
2022
+
+
StorageManager, QR & Barcode Insight, smuL
+
+
+
2023
+
+
libreevent, smuL, StorageManager
+
+
+
2024
+
+
Language School Hossegor - Booking, store.janishutz.com, id.janishutz.com, ConductorCalc
+
-

Discover the full range of services and software offered here

+

Discover the full range of services and software offered here

+ 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 @@ -
+
@@ -26,14 +26,38 @@ Privacy Policy Terms of Service Return policy - Return policy + Support Status
- -
- - - - +
+

Analytics

+

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.
Privacy Policy

+ +
+ Loading... +
+ + + + + + + +
Analytics
+
+
\ 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