✧ Update 01-06-07

- Added a lang attribute to the HTML element, - Development of the sections continues, - Added an update feed control button, - Tweaked/optimized all code.
jakubekgranie · Jul 31, 2024 · 2108bf8 · 2108bf8
1 parent 7a8ffb0
commit 2108bf8
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 42 deletions.
diff --git a/Fonts/val.ttf b/Fonts/val.ttf
diff --git a/Visual assets/about-me-star.png b/Visual assets/about-me-star.png
diff --git a/Visual assets/icons8-dev-48.png b/Visual assets/icons8-dev-48.png
diff --git a/Visual assets/star-update.png b/Visual assets/star-update.png
diff --git a/css.css b/css.css
@@ -1,3 +1,7 @@
+@font-face {
+    font-family: Valorant;
+    src: url("Fonts/val.ttf");
+}
 body{
     background-image: linear-gradient(30deg,#f1fffa,#eefaee,#f1f3e1,#f7ead6,#fde1d2,#fedecb,#ffdbc4,#ffd9bc,#efe1ae,#cfecb0,#a0f5c7,#5ffbf1);
     background-attachment: fixed;
@@ -17,7 +21,7 @@ h1{
 }
 .ff-space-mono{
     font-family:'Space Mono';
-    font-weight:lighter
+    font-weight: lighter
 }
 .header-h1{
     font-size:3.8vw;
@@ -77,25 +81,26 @@ h1{
     font-family: Zain;
     text-decoration: none;
 }
-.t-p2{
+.t-p125{
     transition: all .125s ease-in-out;
 }
 .us-main{
     top: 2vw;
     left: 2.7vw;
-    opacity: .9;
+    opacity: .8;
 }
 .us-main:hover{
     opacity: 1;
 }
 .us-fg{
     width: 12vw;
-    background-image: linear-gradient(to right bottom, #363636, #4f6373, #4e9aa2, #79d1ad, #e2ffa1);
     padding: 1vw;
     border-radius: 0.81632653061vw;
     overflow: hidden;
 }
-
+.us-fg-bg{
+    background-image: linear-gradient(to right bottom, #363636, #4f6373, #4e9aa2, #79d1ad, #e2ffa1);
+}
 .us-bg{
     width: 14vw;
     height: 1.8vw;
@@ -134,15 +139,17 @@ h1{
     top: 50%;
     transform: translateY(-50%);
 }
+.br-50p{
+    border-radius: 50%;
+}
 .button{
-    background: #F5F0DC;
     width: 3vw;
     height: 3vw;
-    box-shadow: inset 0 0 1.2vw 0.2vw #ffe7d2;
     cursor: pointer;
 }
-.br-50p{
-    border-radius: 50%;
+.b-bg{
+    background: #F5F0DC;
+    box-shadow: inset 0 0 1.2vw 0.2vw #ffe7d2;
 }
 .button:not(:last-child){
     margin-bottom: 1vw;
@@ -165,7 +172,6 @@ h1{
     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;
 }
 .pos-abs{
     position: absolute;
@@ -183,10 +189,65 @@ h1{
     width: 100%;
     height: 100%;
     backdrop-filter: blur(16px) opacity(0.95);
+    padding: 12vh 18vw; /*maybe make horizontal padding wider? check after about-me completion.*/
     z-index: 1;
     top: 0;
+}
+.t-p2{
     transition: all .2s ease-in-out;
 }
 .ov-off{
-    backdrop-filter: blur(16px) opacity(0);
+    opacity: 0;
+}
+.ov-describer{
+    top: 1.75vw;
+    left: 2vw;
+    min-height: 6vw;
+    min-width: 6vw;
+    background: url("Visual assets/about-me-star.png") no-repeat;
+    background-position: 30%;
+    background-size: contain;
+}
+.ovd-title{
+    font: 1.75vw Valorant;
+    margin-top: auto;
+    margin-bottom: 0.9vw;
+}
+.gr-flt-about-me{
+    filter: saturate(150%) drop-shadow(3px 3px #ffbcd4);
+}
+.gr-about-me{
+    background-image: linear-gradient(to right bottom, #ff0059, #ff507d, #ff799e, #ff9cbb, #ffbcd4);
+}
+.gr-text{
+    background-clip: text;
+    -webkit-background-clip: text;
+    -moz-background-clip: text;
+    -o-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -moz-text-fill-color:transparent;
+    -o-text-fill-color: transparent;
+}
+.ov-item-container{
+    border-width: 0.4vw;
+    padding: 4.5px;
+    height: fit-content;
+    border-radius: 7px;
+}
+.ov-item{
+    border-radius: 5.25496564838px;
+    padding: max(5.5px, 0.75vw);
+    background-color: #fdf3d0; /*#ffecc4*/
+}
+.b-update:hover{
+    box-shadow: 0px 0px 0.46875vw 0.2604166666666667vw #6F9A85;
+}
+.b-update-on:hover{
+    opacity: 0.75;
+}
+.b-update-off{
+    opacity: 0.75;
+}
+.b-update-off:hover{
+    opacity: 1;
 }
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>ShatterWares 3.0 ALPHA</title>
@@ -20,7 +20,7 @@
         <!---->
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Zain:wght@400;700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Zain:wght@400;700&display=swap" rel="stylesheet">
         <!---->
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -37,15 +37,15 @@
         <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="pos-fxd us-main t-p2 z-2">
+        <a href="https://github.com/jakubekgranie/shatterwares.com/commits/shwares-3.0" target="_blank" id="us-main" class="pos-fxd us-main t-p125 z-2">
             <div class="pos-rel">
-                <div class="update-sticky us-fg t-p2 pos-abs z-2" id="us">
+                <div class="update-sticky us-fg us-fg-bg t-p125 pos-abs z-2" id="us">
                     <p class="mg-0 header-p">Early Development Period</p>
                     <span class="mg-0 us-ch-p" id="us-feed">
-                        ✧ Update 01-05-07
+                        ✧ Update 01-06-07
                     </span>
                 </div>
-                <div class="update-sticky us-bg t-p2 pos-abs" id="us2"></div>
+                <div class="update-sticky us-bg t-p125 pos-abs" id="us2"></div>
             </div>
         </a>
         <header class="header fx -jc-spb -ai-c default-horizontal-padding bs-bb">
@@ -56,23 +56,35 @@ <h1 class="header-h1 mg-0"><span class="h-star">✦</span> <span id="h-contents"
                 <img src="Visual assets/logo.png" class="header-logo fx -jc-c" alt="Logo">
         </header>
         <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">
+            <div id="b-home" class="button b-bg fx -ai-c -jc-c br-50p pos-rel">
                 <img src="Visual assets/icons8-home-48.png" class="b-icon" alt="Home">
-                <div id="b-indicator" class="b-indicator pos-abs br-50p centering-y t-p2"></div>
+                <div id="b-indicator" class="b-indicator pos-abs centering-y t-p2 br-50p"></div>
             </div>
-            <div id="b-about" class="button fx -ai-c -jc-c br-50p">
+            <div id="b-about" class="button b-bg fx -ai-c -jc-c 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 br-50p">
+            <div id="b-skills" class="button b-bg fx -ai-c -jc-c 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 br-50p">
+            <div id="b-projects" class="button b-bg fx -ai-c -jc-c 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 br-50p">
+            <div id="b-site" class="button b-bg fx -ai-c -jc-c br-50p">
                 <img src="Visual assets/icons8-info-48.png" class="b-icon" alt="Home">
             </div>
+            <div id="b-hide-feed" class="button b-update b-update-on fx -ai-c -jc-c br-50p us-fg-bg t-p125">
+                <img src="Visual assets/icons8-dev-48.png" class="b-icon" alt="Home">
+            </div>
         </nav>
-        <section id="overlay" class="overlay ov-off pos-fxd"></section>
+        <section id="overlay" class="overlay ov-off pos-fxd bs-bb fx ff-space-mono t-p2">
+            <div class="pos-abs ov-describer fx">
+                <p class="mg-0 ovd-title gr-text gr-about-me gr-flt-about-me"><b>✧</b>>> ABOUT ME</p>
+            </div>
+            <div class="ov-item-container gr-about-me">
+                <div class="ov-item">
+                    <h3 class="mg-0 gr-text gr-about-me gr-flt-about-me">✧>> CORE</h3>
+                </div>
+            </div>
+        </section>
     </body>
 </html>
diff --git a/js.js b/js.js
@@ -1,29 +1,35 @@
 /*
     IDEA BOARD
-    - Use regex and await for delayed but responsive animation initialization;
-    - Subtext init (lor[r]-esque);
-    - parallax-bound imagery;
-    - emphasize subs;
-    - logo
-    - animation ideas
-    - sections
-    - about me
-    - what do i do + langs
-    - current projects
-    - contact
+    - Use regex and await for delayed but responsive animation initialization; [?]
+    - Subtext init (lor[r]-esque); [?]
+    - parallax-bound imagery; [?]
+    - emphasize subs; [?]
+    - logo; [TBD]
+    - animation ideas; [IN-PROGRESS]
+    - sections: [1/5]
+        - home, [PRIMARY WORK DONE]
+        - about me, [IN-PROGRESS]
+        - my skills, [TBD]
+        - projects, [TBD]
+        - about site; [TBD]
+    - add a mirror element for the update feed to track size (see 1st comment excluding this). check if js can get computed values from such element when just stored in a variable.
+      if issues with viewport sync appear, resort to more rudimentary approaches; [TBD]
+    - get swap functions to two toggles if values used aren't js-dependent (calculations are, whilst classes/constant values are not). [DONE]
+
+    AFTER 1.0
+    - convert css subclasses to prefix-like names (see the .fx family).
 */
 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 animations,<br>- Started section work,<br>- Optimized code.<br><br>==== KNOWN BUGS<br>- Unexpected line separation distance causes this element's dimensions to be inadequate when the viewport becomes bigger than initially. Fix en route.";
+    document.getElementById("us-feed").innerHTML += "<hr class='mg-0 br-us_init'>==== CHANGELOG<br>- Added a lang attribute to the HTML element,<br>- Development of the sections continues,<br>- Added an update feed control button,<br>- Tweaked/optimized all code.<br><br>==== KNOWN BUGS<br>- Unexpected line separation distance causes this element's dimensions to be inadequate when the viewport becomes bigger than initially. Fix en route.";
     const usExtendedHeight = us.clientHeight / vw - 2, us2Margin = usExtendedHeight - usHeight + "vw";
     us.style.height = usHeight + "vw";
     us2.style.top = us.clientHeight / vw - .750 +  "vw"; // resize breaks
     setInterval(() => {document.getElementById("h-writer").classList.toggle("op-0")}, 1000);
     const title = "// SHATTERWARES";
-    for(let i = 0; i < title.length; i++){
+    for(let i = 0; i < title.length; i++)
         setTimeout(() => {document.getElementById("h-contents").innerHTML += title[i]}, 450 + 35 * i - Math.pow(1.1, i));
-    }
     /*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){
@@ -99,8 +105,20 @@ window.onload = () => {
             us2.style.marginTop = null;
         }
     }
-    document.getElementById("us-main").addEventListener("mouseover", () => {subUSAnimation(true)});
-    document.getElementById("us-main").addEventListener("mouseout", () => {subUSAnimation()});
+    const feed = document.getElementById("us-main");
+    feed.addEventListener("mouseover", () => {subUSAnimation(true)});
+    feed.addEventListener("mouseout", () => {subUSAnimation()});
+    const updateButton = document.getElementById("b-hide-feed");
+    function toggleFeed(){
+        if(!feed.style.display)
+            feed.style.display = "none";
+        else
+            feed.style.display = null;
+        updateButton.classList.toggle("b-update-on");
+        updateButton.classList.toggle("b-update-off");
+    }
+    updateButton.addEventListener("click", () => {toggleFeed()});
+    document.getElementById("b-hide-feed")
     const buttons = ["b-about", "b-skills", "b-projects", "b-site"], bInd = document.getElementById("b-indicator"), ov = document.getElementById("overlay");
     let isOverlaid;
     document.getElementById("b-home").addEventListener("click", () => {
@@ -130,8 +148,8 @@ window.onload = () => {
 document.addEventListener("scroll", () => {scrollListener()});
 window.onresize = () => {
     for(let i = 0; i < 2; i++){
-        document.getElementById("us").classList.toggle("t-p2");
-        document.getElementById("us2").classList.toggle("t-p2");
+        document.getElementById("us").classList.toggle("t-p125");
+        document.getElementById("us2").classList.toggle("t-p125");
     }
     vw = window.innerWidth * 0.01;
     vh = window.innerHeight * 0.01;