janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

some more progress on design

Browse Source
This commit is contained in:
Janis Hutz
2024-08-28 09:10:19 +02:00
parent bd9094231e
commit 63a97f9a4b
7 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -5,4 +5,7 @@
This is the source code for my personal website. Check it out [here](https://janishutz.com). This is the source code for my personal website. Check it out [here](https://janishutz.com).
As any custom website is, this one is also written entirely in HTML, CSS and JavaScript and only uses the jQuery library as an external library As any custom website is, this one is also written entirely in HTML, CSS and JavaScript and now doesn't even use any external libraries
# Building
cd to the site directory and run `npm run build`

21
site/src/404.html
View File

@@ -3,31 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>janishutz.com - Solving your software needs with passion</title> <title>404 - Page not found | janishutz.com</title>
<link rel="stylesheet" href="/css/slider.css"> <link rel="stylesheet" href="/css/slider.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
<!-- <video src="https://static.janishutz.com/assets/video-home.mp4" autoplay class="title-video"></video> -->
<div class="slider" style="width: 100vw; height: 80vh;">
<div class="slider-container">
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/math-summaries-desktop.jpg' );">
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/libreevent-desktop.jpg' );">
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/donate-desktop.jpg' );">
</div>
</div>
<div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div>
<div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div>
</div>
<div class="content"> <div class="content">
<h1>404</h1>
<p>The page you are looking for was not found!</p>
</div> </div>

6
site/src/css/footer.css
View File

@@ -1,3 +1,9 @@
footer {
border-top: solid black 1px;
background-color: rgb(226, 226, 226);
width: 100vw;
}
footer .logo { footer .logo {
height: 40vh; height: 40vh;
} }

10
site/src/css/nav.css
View File

@@ -8,10 +8,15 @@ nav {
height: 20vh; height: 20vh;
} }
.nav-menu .logo { .nav-menu .logo-wrapper {
display: none; display: none;
height: 90%; height: 90%;
border-radius: 20px; border-radius: 20px;
overflow: hidden;
}
.nav-menu .logo {
height: 100%;
} }
nav a { nav a {
@@ -136,7 +141,7 @@ nav a {
@media only screen and (min-width: 900px) { @media only screen and (min-width: 900px) {
.nav-menu .logo { .nav-menu .logo-wrapper {
display: unset; display: unset;
} }
@@ -147,6 +152,7 @@ nav a {
.nav-menu { .nav-menu {
padding: 0; padding: 0;
height: 20vh; height: 20vh;
width: 100vw;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;

12
site/src/css/style.css
View File

@@ -27,3 +27,15 @@ body {
.content { .content {
width: 80%; width: 80%;
} }
.no-scroll {
overflow: hidden;
}
.button {
padding: 20px;
background-color: rgb(21, 43, 92);
color: white;
text-decoration: none;
border-radius: 10px;
}

11
site/src/index.html
View File

@@ -7,9 +7,9 @@
<!-- SEO --> <!-- SEO -->
<title>janishutz.com - Solving your software needs with passion</title> <title>janishutz.com - Solving your software needs with passion</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7"> <meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="og:title" content="" /> <meta name="og:title" content="" />
@@ -19,7 +19,7 @@
<meta name="og:url" content="https://janishutz.com" /> <meta name="og:url" content="https://janishutz.com" />
<meta name="og:locale" content="en_GB" /> <meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image"> <meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content=""> <meta name="theme-color" content="#152b5c">
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
@@ -48,6 +48,9 @@
<div class="content"> <div class="content">
<h1>My work</h1> <h1>My work</h1>
<div class="side-by-side">
</div>
</div> </div>

7
site/src/nav.html
View File

@@ -35,7 +35,9 @@
</div> </div>
</div> </div>
<a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
</a>
<div class="nav-link-wrapper"> <div class="nav-link-wrapper">
<a class="nav-link-header" href="/about"> <a class="nav-link-header" href="/about">
@@ -66,7 +68,6 @@
const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ]; const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ];
const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ]; const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ];
const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ]; const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ];
let isAllowedToScroll = true;
function openMenu( action ) { function openMenu( action ) {
if ( action === 'toggle' ) { if ( action === 'toggle' ) {
@@ -76,11 +77,11 @@
openMenu( 'open' ); openMenu( 'open' );
} }
} else if ( action === 'close' ) { } else if ( action === 'close' ) {
isAllowedToScroll = true;
menu.classList.remove( 'active' ); menu.classList.remove( 'active' );
toggle.classList.remove( 'active' ); toggle.classList.remove( 'active' );
document.body.classList.remove( 'no-scroll' );
} else if ( action === 'open' ) { } else if ( action === 'open' ) {
isAllowedToScroll = false; document.body.classList.add( 'no-scroll' );
toggle.classList.add( 'active' ); toggle.classList.add( 'active' );
menu.classList.add( 'active' ); menu.classList.add( 'active' );
} }