From 8810c5aa253c9f7f674767c4db723ce5bc03f9d5 Mon Sep 17 00:00:00 2001
From: Yagyesh Bobde <yagyeshsrbobde@gmail.com>
Date: Tue, 4 Oct 2022 20:43:26 +0530
Subject: [PATCH 1/4] added lazy loading to images and defer to the script to
 load the page faster

---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 344b068..9ab67a0 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
 <meta name="viewport" content= "width=device-width, initial-scale=1.0">
 
-<style id="css">
+<style id="css" defer >
 *, *:before, *:after {
   margin: 0;
   padding: 0;
@@ -264,7 +264,7 @@
   
   <section class="block section-landing">
     <figure class="item-parallax-media">
-      <img src="https://i.postimg.cc/DwP6Ky8V/Untitled-design-13.png" alt="" />
+      <img loading="lazy" src="https://i.postimg.cc/DwP6Ky8V/Untitled-design-13.png" alt="" />
     </figure>
     <div class="item-parallax-content flex-container">
       <div class="landing-content centered-content">
@@ -289,7 +289,7 @@ <h2 class="head-small head-centered">Visibility</h2>
   
   <section class="block section-part">
     <figure class="item-parallax-media">
-      <img src="https://i.postimg.cc/Pxq7PvBn/Untitled-design-12.png" alt="" />
+      <img loading="lazy" src="https://i.postimg.cc/Pxq7PvBn/Untitled-design-12.png" alt="" />
     </figure>
     <div class="item-parallax-content flex-container">
       <div class="centered-content">
@@ -304,7 +304,7 @@ <h1 class="head-large head-centered">Garden <br/>of Purity</h1>
   <section class="block">
     <div class="item-parallax-content flex-container img-grid">
       <figure class="img-gridItem type-right">
-        <img src="https://i.postimg.cc/J4Bbc3J4/Untitled-design-11.png" alt="" />
+        <img loading="lazy" src="https://i.postimg.cc/J4Bbc3J4/Untitled-design-11.png" alt="" />
         <figcaption class="img-caption">
           <h2 class="head-small">Natural</h2>
           <p class="copy copy-white">
@@ -313,7 +313,7 @@ <h2 class="head-small">Natural</h2>
         </figcaption>
       </figure>
       <figure class="img-gridItem type-left">
-        <img src="https://i.postimg.cc/nV0bkpHL/Untitled-design-10.png" alt="" />
+        <img loading="lazy" src="https://i.postimg.cc/nV0bkpHL/Untitled-design-10.png" alt="" />
         <figcaption class="img-caption">
           <h2 class="head-small">Sustainable</h2>
           <p class="copy copy-white">
@@ -326,7 +326,7 @@ <h2 class="head-small">Sustainable</h2>
   
   <section class="block section-end">
     <figure class="item-parallax-media">
-      <img src="https://i.postimg.cc/yNGXc9xt/Orange-Autumn-Leaf-Quote-Fall-Desktop-Wallpaper.png" alt="" />
+      <img loading="lazy" src="https://i.postimg.cc/yNGXc9xt/Orange-Autumn-Leaf-Quote-Fall-Desktop-Wallpaper.png" alt="" />
     </figure>
     <div class="item-parallax-content flex-container">
       <div class="landing-content centered-content">

From 3698d89aa93091b2c0c043298621e36d848af0e4 Mon Sep 17 00:00:00 2001
From: Yagyesh Bobde <yagyeshsrbobde@gmail.com>
Date: Tue, 4 Oct 2022 20:52:00 +0530
Subject: [PATCH 2/4] separated the parallax css and the styles.css file to
 render css faster

---
 index.html | 151 +----------------------------------------------------
 1 file changed, 2 insertions(+), 149 deletions(-)

diff --git a/index.html b/index.html
index 9ab67a0..97bcec6 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
 <meta name="viewport" content= "width=device-width, initial-scale=1.0">
-
-<style id="css" defer >
+<link rel="stylesheet" href="./styles.css" defer />
+<style id="css" >
 *, *:before, *:after {
   margin: 0;
   padding: 0;
@@ -71,88 +71,6 @@
 html {
   background-color: #00171f;
 }
-.flex-container {
-  display: flex;
-}
-.centered-content {
-  margin: auto;
-}
-.head-large {
-  margin-bottom: 5vw;
-  font-size: 10vw;
-  line-height: 1.2em;
-  font-family: 'Inknut Antiqua', serif;
-  color: wheat;
-  opacity: 0.9;
-}
-
-@media screen and ( max-width: 800px) {
-    
-    .head-large{
-      font-size: 5rem;
-    }
-
-    .section-landing:before, .section-end:before{
-      opacity: 0;
-    }
-  
-}
-
-@media screen and (max-width:440px) {
-  .head-large{
-    font-size: 4rem;
-  }
-  .img-caption h2{
-      font-size: 80%;
-    }
-  .img-caption p {
-        font-size: 15px;
-    }
-    
-  .type-left .img-caption{
-    margin-top: 35px;
-  }
-
-  .img-grid:nth-child(2) .img-caption p{
-    font-size: 13px;
-  }
-
-  .type-left .img-caption h2{
-    margin-bottom: 10px;
-  }
-}
-.head-small {
-  margin-bottom: 1.5rem;
-  font-size: 1.2rem;
-  line-height: 1.2em;
-  font-family: 'Roboto Condensed', sans-serif;
-  color: white;
-  text-transform: uppercase;
-  letter-spacing: 0.5em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.head-centered {
-  text-align: center;
-}
-.copy {
-  display: block;
-  max-width: 500px;
-  margin-right: auto;
-  margin-bottom: 1.5rem;
-  margin-left: auto;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-  font-family: 'Roboto', sans-serif;
-  font-size: 1rem;
-  line-height: 1.8em;
-  text-align: center;
-}
-.copy-white {
-  color: white;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 .item-parallax-media {
   overflow: hidden;
 }
@@ -193,71 +111,6 @@
   will-change: transform;
   backface-visibility: visible;
 }
-.img-grid {
-  flex-direction: column;
-  justify-content: space-around;
-}
-.img-gridItem {
-  position: relative;
-  width: 100%;
-  max-width: 800px;
-  margin-right: auto;
-  margin-left: auto;
-}
-.img-gridItem img {
-  display: block;
-  width: 45%;
-  height: 35vh;
-  object-fit:none;
-  will-change: transform;
-  backface-visibility: visible;
-}
-.img-gridItem.type-left img {
-  margin-right: auto;
-}
-.img-gridItem.type-right img {
-  margin-left: auto;
-}
-.img-gridItem:nth-child(1) img {
-  transform: translateX(calc(var(--yBlock-4) * -0.03%));
-}
-.img-gridItem:nth-child(2) img {
-  transform: translateX(calc(var(--yBlock-4) * 0.03%));
-}
-.img-caption {
-  position: absolute;
-  top: 50%;
-  width: 50%;
-  transform: translateY(-50%);
-}
-.img-caption * {
-  text-align: left;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-}
-.type-left .img-caption {
-  right: 0;
-}
-.type-right .img-caption {
-  left: 0;
-}
-.section-end:before {
-  content: '';
-  position: absolute;
-  bottom: 50%;
-  left: 24%;
-  width: 10px;
-  height: 80%;
-  background-color: white;
-  z-index: 3;
-  transform: translateY(8vw);
-}
-.custom-properties-ftw {
-  padding: 2.5rem 1.5rem;
-}
-.custom-properties-ftw .head-small {
-  margin-bottom: 0;
-}
 </style>
   
 <main class="content js-content">

From 3510f031ea9036f197cce11d22deb883e944e27f Mon Sep 17 00:00:00 2001
From: Yagyesh Bobde <yagyeshsrbobde@gmail.com>
Date: Tue, 4 Oct 2022 21:02:00 +0530
Subject: [PATCH 3/4] defer the script file and link if from app.js and not in
 the html

---
 index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 97bcec6..7b74067 100644
--- a/index.html
+++ b/index.html
@@ -192,7 +192,9 @@ <h1 class="head-large">Back to Basic</h1>
     <h3 class="head-small head-centered">Custom Properties</h3>
   </section>
 </main>
-<script id="jsbin-javascript">
+
+
+<script id="jsbin-javascript" defer >
 
 
 

From 131cec7a31a190503afc487a311c03b91cdb9553 Mon Sep 17 00:00:00 2001
From: Yagyesh Bobde <yagyeshsrbobde@gmail.com>
Date: Tue, 4 Oct 2022 21:05:26 +0530
Subject: [PATCH 4/4] removed the script from html and linked it to app.js

---
 index.html | 31 +------------------------------
 1 file changed, 1 insertion(+), 30 deletions(-)

diff --git a/index.html b/index.html
index 7b74067..e4b67c7 100644
--- a/index.html
+++ b/index.html
@@ -194,35 +194,6 @@ <h3 class="head-small head-centered">Custom Properties</h3>
 </main>
 
 
-<script id="jsbin-javascript" defer >
+<script id="jsbin-javascript" defer src="./app.js" >
 
-
-
-const body = document.body;
-const content = document.querySelector('.js-content');
-const blocks = document.querySelectorAll('.block');
-
-const updateOffset = () => {
-  requestAnimationFrame(updateOffset);
-  body.style.setProperty('--y', content.scrollTop);
-  updateProps();
-};
-
-const updateProps = () => {
-  let i = -1;
-
-  for (let block of blocks) {
-    i += 1;
-    let top = blocks[i].getBoundingClientRect().top;
-
-    if (top < window.innerHeight * 1.3 && top > window.innerHeight * -1.3) {
-      body.style.setProperty(`--yBlock-${i + 1}`, top);
-    } else {
-      body.style.setProperty(`--yBlock-${i + 1}`, 0);
-    }
-  }
-};
-
-updateProps();
-updateOffset();
 </script>