Merge pull request #4 from harry-whorlow/styles-update

feat(styles update): update to styling, theme change and transitions
harry-whorlow · Oct 31, 2023 · cc67f41 · cc67f41
2 parents 8924389 + dd3eb47
commit cc67f41
Show file tree

Hide file tree

Showing 12 changed files with 503 additions and 240 deletions.
diff --git a/public/fonts/NeueMachi/NeueMachina-Light.otf b/public/fonts/NeueMachi/NeueMachina-Light.otf
diff --git a/public/fonts/NeueMachi/NeueMachina-Regular.otf b/public/fonts/NeueMachi/NeueMachina-Regular.otf
diff --git a/public/fonts/NeueMachi/NeueMachina-Ultrabold.otf b/public/fonts/NeueMachi/NeueMachina-Ultrabold.otf
diff --git a/src/components/CustomCursor/CustomCursor.astro b/src/components/CustomCursor/CustomCursor.astro
@@ -13,8 +13,6 @@
     transition: transfrom 500ms ease;
 
     pointer-events: none;
-
-    z-index: 100;
   }
 
   #mouse {
@@ -23,13 +21,17 @@
 
     background-color: #c0c0c0;
     mix-blend-mode: difference;
+
+    z-index: 100;
   }
 
   #baby-mouse {
     height: 10px;
     width: 10px;
 
-    background-color: var(--accent-pink);
+    background-color: var(--accent-primary);
+
+    z-index: 101;
   }
 </style>
 
@@ -104,8 +106,8 @@
 
       if (underMouse && underMouse.classList.contains('actionable')) {
         const mouseTrailerEnlargekeyFrames = {
-          height: `30px`,
-          width: `30px`,
+          height: `40px`,
+          width: `40px`,
         };
 
         mouseTrailer.animate(mouseTrailerEnlargekeyFrames, {

diff --git a/src/components/Logo/Logo.astro b/src/components/Logo/Logo.astro
@@ -157,6 +157,8 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
     <span class="logo-cell" id="cell-23-6"></span>
     <span class="logo-cell" id="cell-23-7"></span>
   </div>
+
+  <!-- <h1 id="slogan">Full time dreamer, part time developer</h1> -->
 </div>
 
 <style>
@@ -194,16 +196,26 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
   }
 
   .logo-cell {
-    background-color: var(--main-dark-grey);
+    background-color: var(--grey-dark-main);
 
     border-radius: 15px;
     height: 100%;
 
+    z-index: 1;
     position: absolute;
 
     opacity: 0;
   }
 
+  #slogan {
+    position: absolute;
+    font-family: neuemachina;
+    font-size: 100px;
+
+    color: var(--main-text-main);
+  }
+
+  /* cells */
   /* row one */
 
   #cell-1-1 {
@@ -551,7 +563,7 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
     width: 70px;
     left: 30px;
 
-    background-color: var(--accent-pink);
+    background-color: var(--accent-primary);
   }
 
   #cell-20-2 {
@@ -579,14 +591,14 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
   #cell-21-1 {
     width: 25px;
     left: 10px;
-    background-color: var(--accent-pink);
+    background-color: var(--accent-primary);
   }
 
   #cell-21-2 {
     width: 70px;
     left: 45px;
 
-    background-color: var(--accent-pink);
+    background-color: var(--accent-primary);
   }
 
   #cell-21-3 {
@@ -610,7 +622,7 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
     width: 105px;
     left: 10px;
 
-    background-color: var(--accent-pink);
+    background-color: var(--accent-primary);
   }
 
   #cell-22-2 {
@@ -633,14 +645,14 @@ const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
   #cell-23-1 {
     width: 25px;
     left: 30px;
-    background-color: var(--accent-pink);
+    background-color: var(--accent-primary);
   }
 
   #cell-23-2 {
     width: 25px;
     left: 65px;
 
-    background-color: var(--accent-pink);
+    background-color: var(--accent-primary);
   }
 
   #cell-23-3 {

diff --git a/src/components/Logo/utils/getRandomStartPosition.ts b/src/components/Logo/utils/getRandomStartPosition.ts
@@ -28,7 +28,7 @@ export const getRandomStartPosInt = (element: HTMLElement, locationMap: Location
 
   const { left: elementLeftPoint, width: elementWidth } = element.getBoundingClientRect();
 
-  let randomPoint = window.screen.width * Math.random();
+  let randomPoint = (window.screen.width - elementWidth) * Math.random();
   let startVector: number;
 
   if (randomPoint > elementLeftPoint) {

diff --git a/src/components/RadarPanel/RadarPanel.astro b/src/components/RadarPanel/RadarPanel.astro
@@ -1,20 +1,56 @@
 ---
 const { href, title, body } = Astro.props;
+
+import Terminal from './components/Terminal.astro';
 ---
 
 <div id="radar-container">
   <div id="radar-game">
-    <div id="terminal-container"></div>
+    <Terminal />
+
+    <div class="flex-row-center">
+      <div id="left-top-c" class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div id="right-top-c" class="radar-cell"></div>
+    </div>
+
+    <div class="flex-row-center">
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+    </div>
+
+    <div class="flex-row-center">
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+    </div>
+
+    <div class="flex-row-center">
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+    </div>
+
+    <div class="flex-row-center">
+      <div id="right-bottom-c" class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div class="radar-cell"></div>
+      <div id="left-bottom-c" class="radar-cell"></div>
+    </div>
   </div>
 </div>
 
 <style>
-  #terminal-container {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-  }
-
   #radar-container {
     margin-top: 50px;
 
@@ -26,101 +62,35 @@ const { href, title, body } = Astro.props;
   }
 
   #radar-game {
-    width: 80vw;
-    height: 100%;
-
     position: relative;
+  }
+
+  .radar-cell {
+    height: 130px;
+    width: 140px;
 
-    background-color: var(--main-dark-grey);
+    background-color: var(--grey-light-main);
 
-    border-radius: 20px;
+    /* border: solid 1px var(--grey-dark-main); */
+  }
+
+  #left-top-c {
+    border-radius: 10px 0 0 0;
+  }
+
+  #right-top-c {
+    border-radius: 0 10px 0 0;
+  }
+
+  #left-bottom-c {
+    border-radius: 0 0 10px 0;
+  }
 
-    background-size: 16vw 20vh;
-    background-image: linear-gradient(to right, grey 1px, transparent 1px),
-      linear-gradient(to bottom, grey 1px, transparent 1px);
+  #right-bottom-c {
+    border-radius: 0 0 0 10px;
   }
 </style>
 
 <script>
   import gsap from 'gsap';
-  import { TextPlugin } from 'gsap/TextPlugin';
-  gsap.registerPlugin(TextPlugin);
-
-  const terminalContainer = document.querySelector<HTMLElement>('#terminal-container');
-  const textTimeLine = gsap.timeline();
-  const cursorTimeline = gsap.timeline();
-
-  const rowData = [
-    { text: 'a berlin based web developer', duration: 2 },
-    { text: 'building full-stack applications that work', duration: 3 },
-    { text: 'occasionally...', duration: 1 },
-    { text: '', duration: 0.25 },
-    { text: 'sudo rm -rf /really-important-project/opt/gitlab/postgress/data/*', duration: 5 },
-    { text: '^c', duration: 0.25 },
-    { text: '^c', duration: 0.25 },
-    { text: '^c', duration: 0.25 },
-    { text: 'shit, wrong terminal!', duration: 0.5 },
-  ];
-
-  const idArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
-
-  const addTerminalRow = (row: { text: string; duration: number }, index: number) => {
-    const terminalRow = document.createElement('div');
-    terminalRow.classList.add('terminal-row');
-
-    //creats the terminal $ for this row
-    const terminalDollar = document.createElement('p');
-    terminalDollar.classList.add('terminal-text');
-    const terminalDollarText = document.createTextNode('$');
-    terminalDollar.appendChild(terminalDollarText);
-
-    //creats the text for this row
-    const terminalText = document.createElement('p');
-    terminalText.classList.add('terminal-text');
-    terminalText.setAttribute('id', idArray[index]);
-    terminalText.style.marginLeft = '6px';
-
-    // creats the cursor for this row
-    const textTerminalCursor = document.createElement('p');
-    textTerminalCursor.classList.add('terminal-cursor');
-    textTerminalCursor.setAttribute('id', `cursor-${idArray[index]}`);
-
-    // adds all elements to the row
-    terminalRow.appendChild(terminalDollar);
-    terminalRow.appendChild(terminalText);
-    terminalRow.appendChild(textTerminalCursor);
-
-    //appends to the parent to create full row
-    terminalContainer?.appendChild(terminalRow);
-
-    if (rowData[index - 1]) {
-      cursorTimeline.killTweensOf(`#cursor-${idArray[index - 1]}`).set(`#cursor-${idArray[index - 1]}`, { opacity: 0 });
-    }
-
-    let cursorTl = gsap.timeline();
-    cursorTl.to(`#cursor-${idArray[index]}`, {
-      opacity: 1,
-      duration: 0.5,
-      repeat: -1,
-      yoyo: true,
-      ease: 'power2.inOut',
-    });
-    cursorTimeline.add(cursorTl);
-
-    let textTl = gsap.timeline();
-    textTl.to(`#${idArray[index]}`, { duration: row.duration, text: row.text });
-    textTimeLine.add(textTl);
-  };
-
-  const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-  (async () => {
-    for (let index = 0; index < rowData.length; ++index) {
-      if (index > 0) {
-        await delay(rowData[index - 1].duration * 1000);
-      }
-
-      addTerminalRow(rowData[index], index);
-    }
-  })();
 </script>