complete website rework beginning
This commit is contained in:
0
js/specialanimations.js → build.js
Executable file → Normal file
0
js/specialanimations.js → build.js
Executable file → Normal file
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
65
src/css/nav/menu.css
Normal file
65
src/css/nav/menu.css
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
#menu {
|
||||||
|
color: white;
|
||||||
|
transform: scale( 0 );
|
||||||
|
transform-origin: top right;
|
||||||
|
transition: all 1s;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
cursor: default;
|
||||||
|
background-color: rgb(18, 12, 59);
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu.open {
|
||||||
|
transform: scale( 1 );
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-container {
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-category {
|
||||||
|
padding: 2vw;
|
||||||
|
transition: all 1s;
|
||||||
|
transition-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TODO: Make multiple steps for this
|
||||||
|
TODO: Optimise for mobile devices (scale vertically) */
|
||||||
|
|
||||||
|
.menu-category:hover {
|
||||||
|
padding-right: 15vw;
|
||||||
|
transition-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-list {
|
||||||
|
transition: all 0.5s;
|
||||||
|
transform: scaleY( 0 );
|
||||||
|
position: absolute;
|
||||||
|
transform-origin: top;
|
||||||
|
transition-delay: 0s;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-category:hover .category-list {
|
||||||
|
transform: scaleY( 1 );
|
||||||
|
transition-delay: 0.5s;
|
||||||
|
}
|
||||||
87
src/css/nav/toggle.css
Normal file
87
src/css/nav/toggle.css
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
.nav-container {
|
||||||
|
height: 13vh;
|
||||||
|
width: 13vh;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 9;
|
||||||
|
position: fixed;
|
||||||
|
transition: all 2s ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle-container {
|
||||||
|
background-color: rgb(21, 21, 73);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
justify-content: flex-start;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
border-bottom-left-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container:hover {
|
||||||
|
height: 20vh;
|
||||||
|
width: 20vh;
|
||||||
|
transition: all 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle-positioner {
|
||||||
|
width: 75%;
|
||||||
|
height: 75%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle {
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgb(168, 212, 253);
|
||||||
|
font-size: 5vh;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 35px;
|
||||||
|
height: 27px;
|
||||||
|
z-index: 11;
|
||||||
|
transition: 0.8s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav-Hide-Show button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background-color: rgb(49, 142, 230);
|
||||||
|
}
|
||||||
|
|
||||||
|
#line1 {
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
transition: transform 0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#line2 {
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#line3 {
|
||||||
|
transform-origin: 0% 100%;
|
||||||
|
transition: transform 0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle.active #line1 {
|
||||||
|
transform: rotate( 45deg );
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle.active #line2 {
|
||||||
|
transform: scaleY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle.active #line3 {
|
||||||
|
transform: rotate( -45deg );
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
0
js/jquery.js → src/js/jquery.js
vendored
0
js/jquery.js → src/js/jquery.js
vendored
0
src/js/specialanimations.js
Executable file
0
src/js/specialanimations.js
Executable file
75
src/menu.html
Normal file
75
src/menu.html
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=7">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>nav</title>
|
||||||
|
<link rel="stylesheet" href="/css/nav/toggle.css">
|
||||||
|
<link rel="stylesheet" href="/css/nav/menu.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-toggle-container">
|
||||||
|
<div class="nav-toggle-positioner">
|
||||||
|
<div class="nav-toggle active" onclick="menu()">
|
||||||
|
<span class="line" id="line1"></span>
|
||||||
|
<span class="line" id="line2"></span>
|
||||||
|
<span class="line" id="line3"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="menu" class="open">
|
||||||
|
<div class="menu-container">
|
||||||
|
<h2>Menu</h2>
|
||||||
|
<div class="menu-main">
|
||||||
|
<div class="menu-category">
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<div class="category-list">
|
||||||
|
<a href="/projects/storagemanager" class="category-item">StorageManager</a>
|
||||||
|
<a href="/projects/smuL" class="category-item">SimpleMediaUpscalerLite</a>
|
||||||
|
<a href="/projects/libreevent" class="category-item">libreǝvent</a>
|
||||||
|
<a href="/projects/qrscanner" class="category-item">QR & Barcode Insight</a>
|
||||||
|
<a href="/projects/musicplayer" class="category-item">MusicPlayer</a>
|
||||||
|
<a href="/projects/biogascontrollerapp" class="category-item">BiogasControllerApp</a>
|
||||||
|
<a href="/projects/impress" class="category-item">impress.js</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-category">
|
||||||
|
<h3>About</h3>
|
||||||
|
<div class="category-list">
|
||||||
|
<a href="/privacypolicy" class="category-item">Privacy Policy</a>
|
||||||
|
<a href="/about" class="category-item">About janishutz.com</a>
|
||||||
|
<a href="/about/aboutme" class="category-item">About me</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-category">
|
||||||
|
<h3>Services</h3>
|
||||||
|
<div class="category-list">
|
||||||
|
<a href="/services" class="category-item">Overview</a>
|
||||||
|
<a href="/services/websites" class="category-item">Custom Websites</a>
|
||||||
|
<a href="/services/pcbuilding" class="category-item">PC Building</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-category">
|
||||||
|
<h3>Support</h3>
|
||||||
|
<div class="category-list">
|
||||||
|
<a href="/support" class="category-item">Support hub</a>
|
||||||
|
<a href="/support/faq" class="category-item">FAQ</a>
|
||||||
|
<a href="/support/contact" class="category-item">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function menu () {
|
||||||
|
$( '.menu-container' ).fadeToggle( 1000 );
|
||||||
|
$( '#menu' ).toggleClass( 'open' );
|
||||||
|
$( '.nav-toggle' ).toggleClass( 'active' );
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
0
src/projects/impress/index.html
Normal file
0
src/projects/impress/index.html
Normal file
Reference in New Issue
Block a user