Merge pull request #6 from harry-whorlow/second-section

Second section

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@gsap/shockingly": "^3.12.2",
     "astro": "^3.0.10",
+    "dayjs": "^1.11.10",
     "gsap": "npm:@gsap/shockingly@^3.12.2",
     "overlayscrollbars": "^2.4.4",
     "sass": "^1.66.1",

src/components/Estd/Estd.astro

@@ -0,0 +1,146 @@
+<div id="estd-container" class="flex-column-center">
+  <div class="flex-row estd-row-center">
+    <p class="estd-p estd-label">M&nbsp;</p>
+
+    <div id="estd-minuets-container" class="estd-row">
+      <p class="minuets estd-p estd-split-text"></p>
+    </div>
+  </div>
+
+  <div class="flex-row">
+    <p class="estd-p estd-label">H&nbsp;</p>
+
+    <div id="estd-hours-container" class="estd-row">
+      <p class="hours estd-p estd-split-text"></p>
+    </div>
+  </div>
+
+  <div class="flex-row">
+    <p class="estd-p estd-label">D&nbsp;</p>
+
+    <div id="estd-days-container" class="estd-row">
+      <p class="days estd-p estd-split-text"></p>
+    </div>
+  </div>
+
+  <div class="flex-row">
+    <p class="estd-p">COUNTED</p>
+  </div>
+</div>
+
+<style>
+  #estd-container {
+    position: fixed;
+
+    bottom: 10px;
+    left: 10px;
+
+    z-index: 51;
+    mix-blend-mode: difference;
+
+    opacity: 0;
+  }
+
+  .estd-row {
+    width: 100%;
+    position: relative;
+
+    overflow: hidden;
+  }
+
+  .estd-label {
+    min-width: 18px;
+  }
+</style>
+
+<style is:global>
+  .estd-p {
+    font-family: neuemachina;
+    color: #c0c0c0;
+
+    display: inline-block;
+  }
+
+  .estd-split-text {
+    position: absolute;
+    left: 0;
+  }
+
+  .estd-hidden {
+    top: 20px;
+  }
+</style>
+
+<script>
+  import gsap from 'gsap';
+  import { SplitText } from 'gsap/all';
+  gsap.registerPlugin(SplitText);
+
+  import { returnEstd } from './utils/getDateValues';
+
+  gsap.to('#estd-container', { delay: 5, opacity: 1, duration: 0.5 });
+
+  const { minuets, hours, days } = returnEstd();
+  (document.querySelector('.minuets') as Element).innerHTML = minuets;
+  (document.querySelector('.hours') as Element).innerHTML = hours;
+  (document.querySelector('.days') as Element).innerHTML = days;
+
+  const targetdata = {
+    minuets: { value: minuets, container: document.querySelector('#estd-minuets-container') },
+    hours: { value: hours, container: document.querySelector('#estd-hours-container') },
+    days: { value: days, container: document.querySelector('#estd-days-container') },
+  };
+
+  const animateTime = () => {
+    const currentTime = returnEstd();
+
+    (Object.keys(currentTime) as Array<keyof typeof currentTime>).forEach((timeRange) => {
+      if (currentTime[timeRange] != targetdata[timeRange].value) {
+        const pNode = document.createElement('p');
+        pNode.classList.add(timeRange);
+        pNode.classList.add('estd-hidden');
+        pNode.classList.add('estd-split-text');
+        pNode.classList.add('estd-p');
+
+        const pNodeText = document.createTextNode(currentTime[timeRange]);
+        pNode.appendChild(pNodeText);
+        targetdata[timeRange].container?.appendChild(pNode);
+
+        const cleanUp = () => {
+          targetdata[timeRange].value = currentTime[timeRange];
+          document.querySelectorAll(`.${timeRange}`)[0].remove();
+        };
+
+        gsap
+          .timeline()
+          .to(
+            new SplitText(document.querySelectorAll(`.${timeRange}`)[0], { type: 'chars' }).chars,
+            {
+              duration: 0.5,
+              y: -20,
+              stagger: 0.2,
+            },
+            0
+          )
+          .to(
+            new SplitText(document.querySelectorAll(`.${timeRange}`)[1], { type: 'chars' }).chars,
+            {
+              duration: 0.5,
+              y: -20,
+              stagger: 0.2,
+              onComplete: () => cleanUp(),
+            },
+            0.5
+          );
+      }
+    });
+  };
+
+  setTimeout(
+    () => {
+      animateTime();
+      setInterval(animateTime, 60000);
+    },
+    (60 - new Date().getSeconds()) * 1000
+  );
+</script>

src/components/Estd/utils/getDateValues.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs';
+
+const birthDate = dayjs('02/28/1998');
+
+export const returnEstd = (): { days: string; hours: string; minuets: string } => {
+  const curentDate = dayjs();
+  const dateDifferancSec = curentDate.diff(birthDate, 's');
+
+  const days = Math.floor(dateDifferancSec / 86400);
+  const hours = Math.floor((dateDifferancSec - days * 86400) / 3600);
+  const minuets = Math.floor((dateDifferancSec - days * 86400 - hours * 3600) / 60);
+
+  return {
+    days: String(days),
+    hours: hours.toLocaleString(undefined, { minimumIntegerDigits: 2 }),
+    minuets: minuets.toLocaleString(undefined, { minimumIntegerDigits: 2 }),
+  };
+};

src/components/GentleGoodnight/GentleGoodNight.astro

@@ -52,7 +52,7 @@ const skyrimjpg = await getImage({ src: skyrimSrc, format: 'jpg' });
 
     margin-bottom: 8px;
 
-    /* color: black; */
+    color: var(--grey-dark-main);
 
     /* background: url('../../images/skyrim.jpg') no-repeat center center;
     background-size: cover;
@@ -105,5 +105,5 @@ const skyrimjpg = await getImage({ src: skyrimSrc, format: 'jpg' });
         quickTo(animateDisperseElement(goodNightChars.chars[index] as HTMLElement, e));
       });
     });
-  }, 5000);
+  }, 6000);
 </script>

src/components/TextScroller/TextScroller.astro

@@ -0,0 +1,131 @@
+<div>
+  <div class="rail" id="big">
+    <h1 class="big-text">PART TIME DEVELOPER</h1>
+    <h1 class="big-text">&</h1>
+    <h1 class="big-text">FULL TIME PROCRASTINATOR</h1>
+    <h1 class="big-text">-</h1>
+    <h1 class="big-text">OCCASIONALLY PRESENT</h1>
+    <h1 class="big-text">// &nbsp</h1>
+  </div>
+
+  <div class="rail" id="small">
+    <h1 class="small-text">Python</h1>
+    <h1 class="small-text">-</h1>
+    <h1 class="small-text">JavaScript</h1>
+    <h1 class="small-text">-</h1>
+    <h1 class="small-text">Go Lang</h1>
+    <h1 class="small-text">-</h1>
+    <h1 class="small-text">TypeScript</h1>
+    <h1 class="small-text">-</h1>
+    <h1 class="small-text">Python</h1>
+    <h1 class="small-text">-</h1>
+    <h1 class="small-text">JavaScript</h1>
+    <h1 class="small-text">-</h1>
+    <h1 class="small-text">Go Lang</h1>
+    <h1 class="small-text">-</h1>
+    <h1 class="small-text">TypeScript</h1>
+    <h1 class="small-text">- &nbsp</h1>
+  </div>
+</div>
+
+<style>
+  .big-text {
+    font-size: 100px;
+    font-weight: 400;
+  }
+
+  .small-text {
+    font-size: 40px;
+    font-weight: 400;
+  }
+
+  h1 {
+    font-family: neuemachina;
+
+    white-space: nowrap;
+
+    letter-spacing: ls(120);
+    line-height: 1em;
+
+    margin-right: 2.5rem;
+
+    color: var(--main-text-light);
+
+    z-index: 100;
+  }
+
+  .rail {
+    display: flex;
+  }
+</style>
+
+<script>
+  import gsap from 'gsap';
+  import ScrollTrigger from 'gsap/ScrollTrigger';
+  gsap.registerPlugin(ScrollTrigger);
+
+  import { horizontalLoop } from '../../utils/textScrollerHelpers';
+
+  const scrollingText = gsap.utils.toArray('#big .big-text');
+  const smallScrollingText = gsap.utils.toArray('#small .small-text');
+
+  // big timeline
+  const BigTl = horizontalLoop(scrollingText, {
+    paused: true,
+    repeat: -1,
+    speed: 0.5,
+  });
+
+  let bigDirection = 1;
+  let BigT: GSAPTween;
+
+  ScrollTrigger.create({
+    trigger: '#overlay-secondary',
+    start: 'top top',
+    end: 'bottom top',
+    onUpdate: (self) => {
+      if (self.direction !== bigDirection) {
+        bigDirection = self.direction;
+        BigT && BigT.kill();
+        BigT = gsap.to(BigTl, {
+          duration: 0.3,
+          timeScale: self.direction,
+        });
+      }
+    },
+  });
+
+  ScrollTrigger.create({
+    trigger: '.second-section',
+    start: 'top center',
+    end: 'bottom bottom',
+    onEnter: () => BigTl.play(),
+    onLeave: () => BigTl.paused(),
+  });
+
+  //small timeline
+  const smallTl = horizontalLoop(smallScrollingText, {
+    repeat: -1,
+    speed: 1,
+    reversed: true,
+  });
+
+  let smallDirection = -1;
+  let smallT: GSAPTween;
+
+  ScrollTrigger.create({
+    trigger: '#overlay-secondary',
+    start: 'top top',
+    end: 'bottom top',
+    onUpdate: (self) => {
+      if (self.direction !== smallDirection) {
+        smallDirection = self.direction;
+        smallT && smallT.kill();
+        smallT = gsap.to(smallTl, {
+          duration: 0.3,
+          timeScale: self.direction * -1,
+        });
+      }
+    },
+  });
+</script>

src/components/Toolbar/Toolbar.astro

@@ -56,12 +56,15 @@ const { href, title, body } = Astro.props;
 
 <script>
   import gsap from 'gsap';
+  import TextPlugin from 'gsap/TextPlugin';
+
+  gsap.registerPlugin(TextPlugin);
 
   const titles = ['./PROJEKT-NEU', 'HARRY WHORLOW'];
 
   gsap.to('#title-cursor', { delay: 5, opacity: 1, repeat: -1, yoyo: true, duration: 0.5 });
 
-  let timeline = gsap.timeline({ delay: 5, repeat: -1 });
+  let timeline = gsap.timeline({ delay: 6, repeat: -1 });
 
   titles.forEach((title) => {
     let titleTimeline = gsap.timeline({ repeat: 1, yoyo: true, repeatDelay: 1 });