Add new pages, Update about me, design updates

site/src/about/aboutme/index.html

@@ -69,27 +69,27 @@
                     <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-5">
+                <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, store.janishutz.com, ConductorCalc</div>
+                    <div class="timeline-desc">ETH Zurich, ConductorCalc, StorageManager, Website, Dotfiles</div>
                 </div>
             </div>
 
-            <p style="margin-top: 50px;">Discover the full range of services and software offered here</p>
+            <p style="margin-top: 50px;">Learn more here</p>
-            <a href="/links">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/aboutme" class="button">About Janis Hutz</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>

site/src/about/index.html

@@ -35,17 +35,18 @@
                 </div>
             </div>
 
-            <p style="margin-top: 30px;">Discover the full range of services and software offered here</p>
+            <p style="margin-top: 50px;">Learn more here</p>
-            <div class="inline-elements">
+            <a href="/links" class="button">Linktree</a>
-                <a href="https://development.janishutz.com" class="button" target="_blank">Custom Websites</a>
+            <!-- <div class="inline-elements"> -->
-                <a href="https://store.janishutz.com" class="button" target="_blank">Store</a>
+            <!--     <a href="https://development.janishutz.com" class="button" target="_blank">Custom Websites</a> -->
-                <a href="https://github.com/janishutz" class="button" target="_blank">GitHub</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://github.com/janishutz" class="button" target="_blank">GitHub</a> -->
-                <a href="https://npmjs.com/~janishutz" class="button" target="_blank">npm</a>
+            <!--     <a href="https://git.janishutz.com/janishutz" class="button" target="_blank">Git</a> -->
-                <a href="/projects" class="button">Projects</a>
+            <!--     <a href="https://npmjs.com/~janishutz" class="button" target="_blank">npm</a> -->
-                <a href="/about/aboutme" class="button">About Janis Hutz</a>
+            <!--     <a href="/projects" class="button">Projects</a> -->
-                <a href="https://store.janishutz.com/donate" class="button" target="_blank">Donate</a>
+            <!--     <a href="/about/aboutme" class="button">About Janis Hutz</a> -->
-            </div>
+            <!--     <a href="https://store.janishutz.com/donate" class="button" target="_blank">Donate</a> -->
+            <!-- </div> -->
 
 		</div>
 		<footer></footer>

site/src/css/analytics.css

@@ -0,0 +1,62 @@
+/* 
+    Analytics 
+*/
+.analytics-notice {
+    z-index: 10000;
+    bottom: -450px;
+    right: 5px;
+    width: 300px;
+    height: 400px;
+    position: fixed;
+    background-color: var( --color-background-analytics );
+    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 {
+    color: var( --color-text-primary );
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+#matomo-opt-out {
+    color: var( --color-text-primary ) !important;
+}
+
+.analytics-notice .small-symbol {
+    position: fixed;
+    bottom: -3px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    background-color: var( --color-background-analytics );
+    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/footer.css

@@ -6,103 +6,72 @@ footer {
 }
 
 footer .logo {
+    margin-top: 20px;
     height: 40vh;
+    border-radius: 20px;
 }
 
 .footer-container {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 100%;
+    margin-bottom: 50px;
 }
 
 .footer-text-container {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     min-width: calc( ( 100% - 40vh - 50px ) / 2 );
-    margin-left: auto;
+    width: 80%;
-    margin-right: auto;
 }
 
 .footer-category {
     display: flex;
     flex-direction: column;
-    margin-left: auto;
+    width: 80%;
-    margin-right: auto;
 }
 
 .footer-category a {
     color: var( --color-text-primary );
     text-decoration: none;
     transition: all 0.5s;
-    font-size: 1rem;
+    transform: scale(1);
+    transition: transform 0.75s;
 }
 
 .footer-category a:hover {
     color: var( --color-button-hover );
-    font-size: 1.1rem;
+    transform: scale(1.1);
 }
 
 
-/* 
-    Analytics 
-*/
-.analytics-notice {
-    z-index: 10000;
-    bottom: -450px;
-    right: 5px;
-    width: 300px;
-    height: 400px;
-    position: fixed;
-    background-color: var( --color-background-analytics );
-    border-radius: 20px;
-    padding: 10px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: scroll;
-    transition: bottom 1s;
-}
 
-.analytics-notice.show {
+@media only screen and (min-width: 999px) {
-    bottom: 5px;
+    footer .logo {
-}
+        margin-top: unset;
+        border-radius: 0;
+    }
+    .footer-container {
+        flex-direction: row;
+        margin-bottom: unset;
+    }
 
-.analytics-button {
+    .footer-text-container {
-    color: var( --color-text-primary );
+        align-items: flex-start;
-    position: absolute;
+        justify-content: flex-start;
-    top: 10px;
+        flex-direction: row;
-    right: 10px;
+        width: unset;
-    background: none;
+        margin-left: auto;
-    border: none;
+        margin-right: auto;
-    font-size: 1rem;
+    }
-    cursor: pointer;
-}
     
-#matomo-opt-out {
+    .footer-category {
-    color: var( --color-text-primary ) !important;
+        margin-left: auto;
-}
+        margin-right: auto;
-
+        width: unset;
-.analytics-notice .small-symbol {
+    }
-    position: fixed;
-    bottom: -3px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    background-color: var( --color-background-analytics );
-    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,5 +1,3 @@
-/* TODO: Update... */
-
 nav {
     width: 100vw;
     height: 20vh;
@@ -21,10 +19,24 @@ nav {
     height: 100%;
 }
 
+.nav-top-bar .logo-wrapper:hover {
+    transform: unset;
+}
+
 nav a {
     /* TODO: Update colours */
     color: var( --color-text-primary );
     text-decoration: none;
+    transform: scale(1);
+    transition: transform 0.75s;
+}
+
+nav a:hover {
+    transform: scale(1.1);
+}
+
+.nav-link-wrapper {
+    margin-bottom: 30px;
 }
 
 .nav-link-dropdown a {
@@ -71,10 +83,15 @@ nav a {
 }
 
 .nav-top-bar .logo {
+    height: 100%;
+}
+
+.nav-top-bar .logo-wrapper {
     display: unset;
     height: 90%;
     border-radius: 20px;
     margin-left: 20px;
+    overflow: hidden;
 }
 
 .nav-menu.active {
@@ -82,6 +99,7 @@ nav a {
 }
 
 .nav-link-header {
+    font-size: 1.2rem;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -149,6 +167,10 @@ nav a {
 
 
 @media only screen and (min-width: 900px) {
+    nav a:hover {
+        transform: unset;
+    }
+
     .nav-menu .logo-wrapper {
         display: unset;
     }
@@ -198,6 +220,7 @@ nav a {
         position: relative;
         margin-left: 3%;
         margin-right: 3%;
+        margin-bottom: unset;
     }
     
     .nav-link-header {

site/src/css/style.css

@@ -3,6 +3,7 @@
 @import url( '/css/nav.css' );
 @import url( '/css/colors.css' );
 @import url( '/css/footer.css' );
+@import url( '/css/analytics.css' );
 
 /* Color Theme */
 :root, :root.light {

site/src/css/wrapfig.css

@@ -1,5 +1,5 @@
 .wrapfig-wrapper {
-    width: 80%;
+    width: 100%;
     position: relative;
 }
 

site/src/footer.html

@@ -27,7 +27,7 @@
             <h3>Support</h3>
             <a href="https://support.janishutz.com">Get support</a>
             <a href="https://support.janishutz.com/knowledgebase.php">Knowledgebase</a>
-            <a href="/legal/support-status">Support status</a>
+            <a href="/support/support-status">Support status</a>
         </div>
         <div class="footer-category">
             <h3>Legal</h3>

site/src/index.html

@@ -59,26 +59,31 @@
                 <div class="side-by-side-item right">
                     <h3>Custom Websites</h3>
                     <p>Find your perfect new web appearance, built from the groundup without any frameworks</p>
+                    <a href="https://development.janishutz.com" class="button">Check it out</a>
                 </div>
             </div>
             <div class="side-by-side">
                 <div class="side-by-side-item left">
                     <h3>Accounts</h3>
                     <p>Log into any of my services with one single account, or apply to get access to the SDKs to integrate them into your own projects</p>
+                    <a href="https://id.janishutz.com" class="button">To Account</a>
                 </div>
                 <div class="side-by-side-item right">
                     <h3>Free & Open Source Software</h3>
                     <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>
                 </div>
             </div>
             <div class="side-by-side">
                 <div class="side-by-side-item left">
                     <h3>iOS Apps</h3>
                     <p>Apps to improve your day-to-day life by providing useful features helping you stay safe and organized.</p>
+                    <a href="https://janishutz.com/projects#ios" class="button">iOS Apps</a>
                 </div>
                 <div class="side-by-side-item right">
-                    <h3>Custom Websites</h3>
+                    <h3>ConductorCalc</h3>
-                    <p>Looking for a new website, an online booking tool or similar? Check out my previous projects</p>
+                    <p>Professional wire calculation software to aid in building high voltage lines safely</p>
+                    <a href="https://conductorcalc.com" class="button">ConductorCalc</a>
                 </div>
             </div>
         </div>

site/src/nav.html

@@ -36,7 +36,10 @@
 <div class="nav-placeholder"></div>
 
 <div class="nav-top-bar">
+    <a href="/" class="logo-wrapper">
         <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
+    </a>
+    <!-- <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> -->
     <div class="nav-toggle" onclick="openMenu( 'toggle' )">
         <span class="line" id="line1"></span>
         <span class="line" id="line2"></span>

site/src/projects/storagemanager/index.html

@@ -55,7 +55,7 @@
             <img src="https://static.janishutz.com/assets/storagemanager.jpg" alt="storage manager logo" class="project-logo">
             <h1>Storage Manager</h1>
 
-            <p>Managing storage can be a challenging task, especially, when the volume of items stored gets big. 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>
             <div class=""></div>