Skip to content

Commit

Permalink
✧ Update 01-04-07
Browse files Browse the repository at this point in the history 
- Added the navigation bar,
- Optimized js,
- Added new keywords,
- Minor description changes.
  • Loading branch information
@jakubekgranie
jakubekgranie committed Jul 28, 2024
1 parent 0fddab6 commit 9bbf6ef
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 34 deletions.
Binary file added Visual assets/icons8-floppy-48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Visual assets/icons8-home-48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Visual assets/icons8-info-48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Visual assets/icons8-wrench-48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Visual assets/star.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 54 additions & 4 deletions css.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@ body{
background-attachment: fixed;
background-position: center;
}
.pos-rel{
position: relative;
}
h1{
margin:0
}
.header{
height:100vh
}
.default-horizontal-padding{
padding-left:14vw;
padding-right:14vw
padding:0 15.5vw;
}
.ff-space-mono{
font-family:'Space Mono';
Expand Down Expand Up @@ -71,7 +73,7 @@ h1{
}

.update-sticky{
position: fixed;

left: 2.7vw;
color: white;
font-family: Zain;
Expand Down Expand Up @@ -100,10 +102,12 @@ h1{
width: 14vw;
height: 1.8vw;
background-image: linear-gradient(to right, #507777, #8fa77f);
z-index: 2;
border-bottom-left-radius: 0.81632653061vw;
border-bottom-right-radius: 0.81632653061vw;
}
.z-2{
z-index: 2;
}
.us-bg-hover{
margin-top: 4.589375vw;
}
Expand All @@ -119,4 +123,50 @@ h1{
}
.op-0{
opacity: 0;
}
.pos-fxd{
position: fixed;
}
.nav{
right: 0;
flex-direction: column;
margin-right: 1.5vw;
}
.centering-y{
top: 50%;
transform: translateY(-50%);
}
.button{
background: #F5F0DC;
width: 3vw;
height: 3vw;
box-shadow: inset 0 0 1.2vw 0.4vw #fff5cb;
cursor: pointer;
}
.br-50p{
border-radius: 50%;
}
.button:not(:last-child){
margin-bottom: 1vw;
}
.b-icon{
width: 1.3vw;
height: 1.3vw;
}
@keyframes indicator{
50%{
background-position: right center;
}
}
#b-indicator{
background-image: radial-gradient(circle, #809bce, #66bae0, #69d6df, #94edd1, #d3ffc3);
background-size: 300%;
width: .6vw;
height: .6vw;
position: absolute;
background-position: left center;
margin-right: 6vw;
box-shadow: 0 0 0.65vw 0.25vw rgba(199, 199, 199, 0.75);
animation: indicator 3s infinite ease-in-out;
transition: all .2s ease-in-out;
}
33 changes: 24 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8">
<title>ShatterWares 3.0 ALPHA</title>
<meta name='keywords' content='shatterwares, shattered web, jakub namyślak, jakub namyslak, jacob namyslak, namyslak, ekonomik opole, opole, ekonom, programista, programmer, it, it technician, project, beta'>
<meta name='description' content='the liminal space of the internets.'>
<meta name='keywords' content='shatterwares, shattered web, jakub namyślak, jakub namyslak, jacob namyslak, namyslak, ekonomik opole, opole, ekonom, programista, programmer, it, it technician, project, beta, blog, personal site, presonal space, c++, c#, html, js, javascript, sql, mysql, db, database, databases'>
<meta name='description' content='the liminal space of the interwebs.'>
<meta name='subject' content='personal page'>
<meta name='copyright' content='Jakub Namyślak'>
<meta name='language' content='EN'>
Expand Down Expand Up @@ -33,18 +33,18 @@
<script src="js.js" type="text/javascript"></script>
<!---->
</head>
<body class="mg-0" style="background-size: 225%;">
<body class="mg-0 pos-rel">
<div class="dp-none">
<img src="Visual assets/logo.png">
</div>
<a href="https://github.com/jakubekgranie/shatterwares.com/commits/shwares-3.0" target="_blank" id="us-main" class="t-p2 op-0">
<div class="update-sticky us-fg t-p2" id="us">
<div class="update-sticky pos-fxd us-fg t-p2" id="us">
<p class="mg-0 header-p">Early Development Period</p>
<span class="mg-0 us-ch-p" id="us-feed">
✧ Hotfix 01-03-07/1
✧ Update 01-04-07
</span>
</div>
<div class="update-sticky us-bg t-p2" id="us2"></div> <!--the style usage is essential for some reason-->
<div class="update-sticky pos-fxd us-bg z-2 t-p2" id="us2"></div>
</a>
<header class="header fx -jc-spb -ai-c default-horizontal-padding bs-bb">
<div class="ff-space-mono">
Expand All @@ -53,8 +53,23 @@ <h1 class="header-h1 mg-0">✦ // SHATTERWARES</h1>
</div>
<img src="Visual assets/logo.png" class="header-logo fx -jc-c" alt="Logo">
</header>
<section id="about-me" class="about-me default-horizontal-padding fx -ai-c -jc-c">

</section>
<nav class="nav pos-fxd fx centering-y z-2">
<div id="b-home" class="button fx -ai-c -jc-c pos-rel br-50p">
<img src="Visual assets/icons8-home-48.png" class="b-icon" alt="Home">
<div id="b-indicator" class="br-50p centering-y t-p2"></div>
</div>
<div id="b-about" class="button fx -ai-c -jc-c pos-rel br-50p">
<img src="Visual assets/star.png" class="b-icon" alt="Home">
</div>
<div id="b-skills" class="button fx -ai-c -jc-c pos-rel br-50p">
<img src="Visual assets/icons8-wrench-48.png" class="b-icon" alt="Home">
</div>
<div id="b-projects" class="button fx -ai-c -jc-c pos-rel br-50p">
<img src="Visual assets/icons8-floppy-48.png" class="b-icon" alt="Home">
</div>
<div id="b-site" class="button fx -ai-c -jc-c pos-rel br-50p">
<img src="Visual assets/icons8-info-48.png" class="b-icon" alt="Home">
</div>
</nav>
</body>
</html>
45 changes: 24 additions & 21 deletions js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@
let vw = window.innerWidth * 0.01, vh = window.innerHeight * 0.01;
window.onload = () => {
const us = document.getElementById("us"), us2 = document.getElementById("us2"), usHeight = us.clientHeight / vw - 2; // why does html generate such abhorrent spaces on resize?
document.getElementById("us-feed").innerHTML += "<hr class='mg-0 br-us_init'>==== CHANGELOG<br>- Added comments to js,<br>- Optimized js,<br>- Bug fixes.<br><br>The associated update was termed '01-02-07' due to an error. The target is the second instance.";
document.getElementById("us-feed").innerHTML += "<hr class='mg-0 br-us_init'>==== CHANGELOG<br>- Added the navigation bar,<br>- Optimized js,<br>- Added new keywords,<br>- Minor description changes.";
const usExtendedHeight = us.clientHeight / vw - 2, us2Margin = usExtendedHeight - usHeight;
us.style.height = usHeight + "vw";
us2.style.top = us.clientHeight + window.innerWidth * 0.01125 + "px"; // resize breaks
function loopedLetterRand(i, elementTextP, slogan){ // for every external loop call, start from one letter further. legacy. the core component of randomizeAddress().
us2.style.top = us.clientHeight / vw + 1.125 + "vw"; // resize breaks
/*function loopedLetterRand(i, elementTextP, slogan){ // for every external loop call, start from one letter further. legacy. the core component of randomizeAddress().
let elementText = [], elementTextReady = "";
/*if(typeof elementTextP === undefined || elementTextP == null || elementTextP.length != slogan.length){
if(typeof elementTextP === undefined || elementTextP == null || elementTextP.length != slogan.length){
elementTextP = "";
for(let j = 0; j < slogan.length; j++)
elementTextP += "_";
} mediocre safeguard*/
} mediocre safeguard
for(let j = 0; j < elementTextP.length; j++) // deserialize
elementText.push(elementTextP[j]);
for(j = i; j < elementTextP.length; j++){
Expand All @@ -47,8 +47,8 @@ window.onload = () => {
elementText.textContent = elementTextReady;
}, waitTime / 3 * j * (i + 1) + 20);
}
}
const ids = ["about-me"], functions = [() => {console.warn("This is a test trigger.")}], params = [["-a", "-nd"]], IOs = [false ,{root: null, rootMargin: "0px",threshold: 0.75}]; //after, nondisc;
}*/
const ids = [], functions = [() => {}], params = [["-a", "-nd"]], IOs = []; //after, nondisc;
function callback(entries, observer, index){
entries.forEach(entry => {
let data = [false, false];
Expand Down Expand Up @@ -96,25 +96,28 @@ window.onload = () => {
}
document.getElementById("us-main").addEventListener("mouseover", () => {subUSAnimation(true)});
document.getElementById("us-main").addEventListener("mouseout", () => {subUSAnimation()});
}
function scrollListener(reinit = false){
if(reinit){
vw = window.innerWidth * 0.01;
vh = window.innerHeight * 0.01;
function parseButtons(index){
document.getElementById("b-indicator").style.marginTop = index * 4 + "vw";
}
const buttons = ["b-home", "b-about", "b-skills", "b-projects", "b-site"];
for(let i = 0; i < 5; i++)
document.getElementById(buttons[i]).addEventListener("click", () => {parseButtons(i)});
}
/*legacy function scrollListener(){
vw = window.innerWidth * 0.01;
vh = window.innerHeight * 0.01;
const scr = window.scrollY, res = 225 - 125 * scr / (80 * vh);
if(scr > -1 && res >= 100)
document.body.style.backgroundSize = res + "%";
else if(res < 100)
document.body.style.backgroundSize = "100%";
}
document.body.style.backgroundSize = "100%";
}*/
document.addEventListener("scroll", () => {scrollListener()});
window.onresize = () => {
const us = document.getElementById("us"), us2 = document.getElementById("us2");
us.classList.toggle("t-p2");
us2.classList.toggle("t-p2");
us2.style.top = us.clientHeight + window.innerWidth * 0.01125 + "px";
us.classList.add("t-p2");
us2.classList.add("t-p2");
scrollListener(true);
for(let i = 0; i < 1; i++){
document.getElementById("us").classList.toggle("t-p2");
document.getElementById("us2").classList.toggle("t-p2");
}
vw = window.innerWidth * 0.01;
vh = window.innerHeight * 0.01;
}

0 comments on commit 9bbf6ef

Please sign in to comment.