Add new pages, Update about me, design updates

This commit is contained in:
2025-05-03 15:13:10 +02:00
parent 9df8fc5647
commit b2cf33d4f4
22 changed files with 168 additions and 104 deletions

View File

@@ -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>
<a href="/links">Linktree</a>
<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://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://mastodon.social/@janishutz" class="button" target="_blank">Mastodon</a>
<a href="/projects" class="button">Projects</a>
<a href="/about/aboutme" class="button">About Janis Hutz</a>
<a href="https://store.janishutz.com/donate" class="button" target="_blank">Donate</a>
</div>
<p style="margin-top: 50px;">Learn more here</p>
<a href="/links" class="button">Linktree</a>
<!-- <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://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://mastodon.social/@janishutz" class="button" target="_blank">Mastodon</a> -->
<!-- <a href="/projects" class="button">Projects</a> -->
<!-- <a href="/about" class="button">About janishutz.com</a> -->
<!-- <a href="https://store.janishutz.com/donate" class="button" target="_blank">Donate</a> -->
<!-- </div> -->
</div>
<footer></footer>

View File

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

View File

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

View File

@@ -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;
margin-right: auto;
width: 80%;
}
.footer-category {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 80%;
}
.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;
@media only screen and (min-width: 999px) {
footer .logo {
margin-top: unset;
border-radius: 0;
}
.footer-container {
flex-direction: row;
margin-bottom: unset;
}
.analytics-notice.show {
bottom: 5px;
.footer-text-container {
align-items: flex-start;
justify-content: flex-start;
flex-direction: row;
width: unset;
margin-left: auto;
margin-right: auto;
}
.analytics-button {
color: var( --color-text-primary );
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1rem;
cursor: pointer;
.footer-category {
margin-left: auto;
margin-right: auto;
width: unset;
}
#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;
}

View File

@@ -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 {

View File

View File

@@ -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 {

View File

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

View File

@@ -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>

View File

@@ -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>
<p>Looking for a new website, an online booking tool or similar? Check out my previous projects</p>
<h3>ConductorCalc</h3>
<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>

View File

@@ -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>

View File

View File

View File

View File

View File

View File

View File

@@ -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>

View File