footer, better nav, design

site/src/about/aboutme/index.html

@@ -4,6 +4,7 @@
 		<!-- 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 -->
@@ -31,27 +32,48 @@
                 <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">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-dot"></div>
                     <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-dot"></div>
                     <div class="timeline-year">2021</div> <!-- TODO: Check date is accurate-->
+                    <div class="timeline-dot"></div>
                     <div class="timeline-desc">BiogasControllerApp</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, ConductorCalc</div>
+                </div>
             </div>
 
-            <p style="margin-top: 30px;">Discover the full range of services and software offered here</p>
+            <p style="margin-top: 50px;">Discover the full range of services and software offered here</p>
             <div class="inline-elements">
+                <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://store.janishutz.com" class="button" target="_blank">Store</a>
                 <a href="https://github.com/janishutz" class="button" target="_blank">GitHub</a>

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;
 }

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;

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 );
+}

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 {
+@media only screen and (min-width: 999px) {
-    margin-left: auto;
+    .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;
+    }    
 }

site/src/footer.html

@@ -1,4 +1,4 @@
-<div>
+<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">
@@ -26,14 +26,38 @@
             <a href="/legal/privacy">Privacy Policy</a>
             <a href="/legal/tos">Terms of Service</a>
             <a href="/legal/returns">Return policy</a>
-            <a href="/legal/tos">Return policy</a>
+            <a href="/support/support-status">Support Status</a>
         </div>
 
-        <!-- Matomo stuff -->
+        <div class="analytics-notice" id="analytics">
-        <div id="matomo-opt-out"></div>
+            <h2>Analytics</h2>
-		<script src="https://analytics.janishutz.com/index.php?module=CoreAdminHome&action=optOutJS&divId=matomo-opt-out&language=auto&backgroundColor=000000&fontColor=FFFFFF&fontSize=12px&fontFamily=monospace&showIntro=1"></script>
+            <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 Image Tracker-->
+            <!-- Matomo stuff -->
-		<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.janishutz.com/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
+            <div id="matomo-opt-out">
-		<!-- End Matomo -->
+                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' );
+        }
+    </script>
 </div>

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
 </script>