full site

vickkie · Jun 26, 2024 · 0fd53dc · 0fd53dc
1 parent e662f05
commit 0fd53dc
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 108 deletions.
diff --git a/css/portfolio-hero.css b/css/portfolio-hero.css
@@ -1403,7 +1403,7 @@ main {
   max-height: 50svh;
   display: grid;
   grid-template-columns: 100px 1fr 30px;
-  grid-template-areas: "greatwork morework logowork";
+  grid-template-areas: "morework greatwork logowork";
 }
 
 .where-morework {
@@ -1423,6 +1423,8 @@ main {
 
 .great-work {
   grid-area: greatwork;
+  display: grid;
+  justify-content: center;
 }
 
 .free-time {
@@ -2560,3 +2562,24 @@ span {
   z-index: 2000;
   pointer-events: none;
 }
+#toTop {
+  border: none;
+  bottom: 10px;
+  height: 45px;
+  overflow: hidden;
+  position: fixed;
+  right: 10px;
+  rotate: -45deg;
+  text-decoration: none;
+  text-indent: 100%;
+  width: 45px;
+  z-index: 20;
+}
+#toTop svg {
+  left: 0;
+  position: absolute;
+  width: 88%;
+}
+#toTop svg path {
+  stroke: white;
+}
diff --git a/img/svg/icons8-github.svg b/img/svg/icons8-github.svg
diff --git a/index.html b/index.html
@@ -552,7 +552,7 @@
             <span>2024</span>
           </div>
           <div class="dev-header">
-            Hey there! I'm Uzitrake.<br />A <span class="tomato">Digital Designer</span> <br />Based in Kenya(KE)
+            Hey there! I'm Uzitrake.<br />A <span class="tomato">Fullstack Developer</span> <br />Based in Kenya(KE)
           </div>
 
           <div class="head-desc">
@@ -572,7 +572,7 @@
               <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6 0V12" stroke="var(--bright-thistle)" stroke-width="2" stroke-miterlimit="10" />
                 <path d="M12 6H0" stroke="var(--bright-thistle)" stroke-width="2" stroke-miterlimit="10" /></svg
-              ><span> Full stack developer</span>
+              ><span>Software engineer</span>
             </div>
           </div>
         </div>
@@ -819,9 +819,7 @@ <h2 class="heading heading--item">
       </section>
       <section class="more-work">
         <div class="great-work"><img src="img/svg/great-work.svg" alt="great work above" /></div>
-        <div class="where-morework">
-          <span data-effect19 class="split-char">Discover more work <br />On socials ❈</span>
-        </div>
+        <div class="where-morework"></div>
 
         <div class="logo-work">
           <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -1591,15 +1589,15 @@ <h3 class="project__header__titleb" data-gl-text="uppercase" data-gl-text-active
               </svg>
             </a>
             <a
-              href="tel:+254706676569"
+              href="https://github.com/vickkie"
               target="_blank"
               class="intro__button"
               data-cursor="-hidden"
               aria-label="call number"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" class="intro__button-svg" viewBox="0 0 24 24">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" height="50px">
                 <path
-                  d="M12,0c-6.627,0 -12,5.373 -12,12c0,6.627 5.373,12 12,12c6.627,0 12,-5.373 12,-12c0,-6.627 -5.373,-12 -12,-12Zm0,2c5.514,0 10,4.486 10,10c0,5.514 -4.486,10 -10,10c-5.514,0 -10,-4.486 -10,-10c0,-5.514 4.486,-10 10,-10Zm2.692,14.889c0.161,0.115 0.368,0.143 0.553,0.073c0.185,-0.07 0.322,-0.228 0.362,-0.42c0.435,-2.042 1.489,-7.211 1.884,-9.068c0.03,-0.14 -0.019,-0.285 -0.129,-0.379c-0.11,-0.093 -0.263,-0.12 -0.399,-0.07c-2.096,0.776 -8.553,3.198 -11.192,4.175c-0.168,0.062 -0.277,0.223 -0.271,0.4c0.006,0.177 0.125,0.33 0.296,0.381c1.184,0.354 2.738,0.847 2.738,0.847c0,0 0.725,2.193 1.104,3.308c0.047,0.139 0.157,0.25 0.301,0.287c0.145,0.038 0.298,-0.001 0.406,-0.103c0.608,-0.574 1.548,-1.461 1.548,-1.461c0,0 1.786,1.309 2.799,2.03Zm-5.505,-4.338l0.84,2.769l0.186,-1.754c0,0 3.243,-2.925 5.092,-4.593c0.055,-0.048 0.062,-0.13 0.017,-0.188c-0.045,-0.057 -0.126,-0.071 -0.188,-0.032c-2.143,1.368 -5.947,3.798 -5.947,3.798Z"
+                  d="M17.791,46.836C18.502,46.53,19,45.823,19,45v-5.4c0-0.197,0.016-0.402,0.041-0.61C19.027,38.994,19.014,38.997,19,39 c0,0-3,0-3.6,0c-1.5,0-2.8-0.6-3.4-1.8c-0.7-1.3-1-3.5-2.8-4.7C8.9,32.3,9.1,32,9.7,32c0.6,0.1,1.9,0.9,2.7,2c0.9,1.1,1.8,2,3.4,2 c2.487,0,3.82-0.125,4.622-0.555C21.356,34.056,22.649,33,24,33v-0.025c-5.668-0.182-9.289-2.066-10.975-4.975 c-3.665,0.042-6.856,0.405-8.677,0.707c-0.058-0.327-0.108-0.656-0.151-0.987c1.797-0.296,4.843-0.647,8.345-0.714 c-0.112-0.276-0.209-0.559-0.291-0.849c-3.511-0.178-6.541-0.039-8.187,0.097c-0.02-0.332-0.047-0.663-0.051-0.999 c1.649-0.135,4.597-0.27,8.018-0.111c-0.079-0.5-0.13-1.011-0.13-1.543c0-1.7,0.6-3.5,1.7-5c-0.5-1.7-1.2-5.3,0.2-6.6 c2.7,0,4.6,1.3,5.5,2.1C21,13.4,22.9,13,25,13s4,0.4,5.6,1.1c0.9-0.8,2.8-2.1,5.5-2.1c1.5,1.4,0.7,5,0.2,6.6c1.1,1.5,1.7,3.2,1.6,5 c0,0.484-0.045,0.951-0.11,1.409c3.499-0.172,6.527-0.034,8.204,0.102c-0.002,0.337-0.033,0.666-0.051,0.999 c-1.671-0.138-4.775-0.28-8.359-0.089c-0.089,0.336-0.197,0.663-0.325,0.98c3.546,0.046,6.665,0.389,8.548,0.689 c-0.043,0.332-0.093,0.661-0.151,0.987c-1.912-0.306-5.171-0.664-8.879-0.682C35.112,30.873,31.557,32.75,26,32.969V33 c2.6,0,5,3.9,5,6.6V45c0,0.823,0.498,1.53,1.209,1.836C41.37,43.804,48,35.164,48,25C48,12.318,37.683,2,25,2S2,12.318,2,25 C2,35.164,8.63,43.804,17.791,46.836z"
                 />
               </svg>
             </a>
@@ -1673,6 +1671,28 @@ <h3 class="project__header__titleb" data-gl-text="uppercase" data-gl-text-active
       <div class="footer-low-line"></div>
     </section>
 
+    <a
+      class="footer__link-top"
+      id="toTop"
+      href="#heromain"
+      aria-label="scroll to top"
+      data-cursor="-hidden"
+      style="display: block"
+      ><svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.510301 2.3982 121 127.1">
+        <path
+          d="M 60 129 Z M -0.002 63.356 A 1 1 0 0 0 119.96 61.777 A 1 1 0 0 0 0 64 Z "
+          stroke="none"
+          stroke-width="0.5"
+          class="top-arrow-wrapper"
+        />
+        <path
+          d="M 46.676 41.238 L 80.562 41.037 L 80.38 72.604 M 80.312 41.537 L 39.085 84.014"
+          class="top-arrow-path"
+          stroke-width="5"
+          fill="none"
+        /></svg
+    ></a>
+
     <script src="libs-js/gsap.min.js"></script>
     <script src="libs-js/split-text.js"></script>
     <script type="module" src="js/index.js"></script>

diff --git a/js/main.js b/js/main.js
@@ -3,6 +3,8 @@
 let select = (e) => document.querySelector(e);
 let selectAll = (e) => document.querySelectorAll(e);
 
+gsap.registerPlugin(SplitText);
+
 // Group 0: service worker
 // main.js
 if ("serviceWorker" in navigator) {
@@ -16,6 +18,7 @@ if ("serviceWorker" in navigator) {
   });
 }
 
+// Group 1; EMAIL
 let emailButtons = selectAll(".emailme");
 
 emailButtons.forEach((emailButton) => {
@@ -24,22 +27,21 @@ emailButtons.forEach((emailButton) => {
   });
 });
 
-//?Call the splittingjs to transform the data-splitting texts to spans of chars
-// Splitting();
-
-gsap.registerPlugin(SplitText);
+// Group 2:Call the splittingjs to transform the data-splitting texts to spans of chars
 
-const splitchars = document.querySelectorAll(".split-char");
+document.addEventListener("DOMContentLoaded", () => {
+  const splitchars = document.querySelectorAll(".split-char");
 
-splitchars.forEach((splitchar) => {
-  new SplitText(splitchar, {
-    type: "chars,words",
-    charsClass: "char",
-    wordsClass: "word",
+  splitchars.forEach((splitchar) => {
+    new SplitText(splitchar, {
+      type: "chars,words",
+      charsClass: "char",
+      wordsClass: "word",
+    });
   });
 });
 
-//Group 1; code to update time
+//Group 3; code to update time
 document.addEventListener("DOMContentLoaded", function () {
   setTimeout(() => {
     let time = select(".time");
@@ -52,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function () {
       updateTime();
     }, 1000);
 
-    //Group 2; code to open menu
+    //Group 4; code to open menu
     let openMenu = select(".button-menu");
     let closeMenu = select(".button-close");
     let menuholders = selectAll(".menu-will-open");
@@ -78,7 +80,7 @@ document.addEventListener("DOMContentLoaded", function () {
       });
     });
 
-    // GROUP 3; smooth scrolling
+    // GROUP 5  ; smooth scrolling
 
     function lenisSmooth() {
       if (innerWidth > 767) {
@@ -109,7 +111,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     window.addEventListener("resize", lenisSmooth);
 
-    //Group 4 : line animation for guiding hero
+    //Group 6 : line animation for guiding hero
 
     gsap.registerPlugin(ScrollTrigger);
 
@@ -192,7 +194,7 @@ document.addEventListener("DOMContentLoaded", function () {
       });
     }
 
-    //Group 5 : show footer
+    //Group 7 : show footer
 
     if (innerWidth > 767) {
       let footerScroller = select(".empty");
@@ -221,7 +223,7 @@ document.addEventListener("DOMContentLoaded", function () {
       window.addEventListener("resize", showFooter);
     }
 
-    // Group 6 : folding of text from opaCITY AnimaTION
+    // Group 8 : folding of text from opaCITY AnimaTION
 
     const fx28Titles = [...selectAll("[data-effect28]")];
 
@@ -295,71 +297,7 @@ document.addEventListener("DOMContentLoaded", function () {
       });
     }
 
-    //Group 7; code to change image on menu clicking
-
-    let menGallery = select(".menu-gallery"),
-      workMenu = select(".menu-work"),
-      gallerypics = menGallery.querySelectorAll(".gallery__item-imginner");
-
-    const changeWorkMenu = () => {
-      gallerypics.forEach(function (element, i) {
-        //  let gallerypic = querySelector(".gallery__item-imginner");
-        let imageSet = element.getAttribute("data-image");
-
-        let timeline = gsap.timeline();
-
-        timeline
-          .addLabel("rotate,+=0")
-          .to(
-            element,
-            {
-              transform: "rotate3d(0, 1, 0, 180deg)",
-              perspective: "1000px",
-              duration: 1.2,
-              ease: "power2.in",
-              id: i + 1,
-            },
-            "rotate"
-          )
-          .add(() => {
-            element.classList.add(`menu-image${i}`);
-          });
-      });
-    };
-
-    const resumeMenu = () => {
-      gallerypics.forEach(function (element, i) {
-        //  let gallerypic = querySelector(".gallery__item-imginner");
-        let imageSet = element.getAttribute("data-image");
-
-        // console.log(element, imageSet, i);
-        // element.style.backgroundImage = `${imageSet}`;
-
-        let timeline = gsap.timeline();
-
-        timeline
-          .to(element, {
-            transform: "rotate3d(0, 1, 0, 0deg);",
-            perspective: "1000px",
-            duration: 1.2,
-            ease: "power2.in",
-            id: i + 1,
-          })
-          .add(() => {
-            element.classList.remove(`menu-image${i}`);
-          });
-      });
-    };
-
-    workMenu.addEventListener("mouseenter", () => {
-      changeWorkMenu();
-    });
-
-    // workMenu.addEventListener("mouseleave", () => {
-    //   resumeMenu();
-    // });
-
-    //Group 8; code to toggle dark-light modes
+    //Group 9; code to toggle dark-light modes
 
     let toggleButton = select(".knob");
     let togglePath = select(".dark-toggle");
@@ -394,7 +332,7 @@ document.addEventListener("DOMContentLoaded", function () {
       // bodyComputedStyle.getPropertyValue('--color-black'),
     });
 
-    //Group 9; initiating and controlling custom cursor
+    //Group 10; initiating and controlling custom cursor
 
     if (innerWidth > 767) {
       let cursor = new MouseFollower();
@@ -501,18 +439,7 @@ document.addEventListener("DOMContentLoaded", function () {
   }, 0);
 });
 
-//use the defaults
-
-//  Group 13: darkmode if user browser prefers
-
-// if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-//   // User prefers dark mode, add the dark-mode class to the body element
-//   document.body.classList.add("dark-mode");
-// } else {
-//   document.body.classList.remove("dark-mode");
-// }
-
-//Animate the fucking explorer
+// Group 13: Animate the fucking explorer
 let emailbox = select(".email-box");
 
 let explorer = select(".in-world-btn-wrap");
@@ -563,3 +490,77 @@ explorer.addEventListener("mouseenter", () => {
 explorer.addEventListener("mouseleave", () => {
   expoHoverTl.reverse();
 });
+
+//use the defaults
+
+//  Group 13: darkmode if user browser prefers
+
+// if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+//   // User prefers dark mode, add the dark-mode class to the body element
+//   document.body.classList.add("dark-mode");
+// } else {
+//   document.body.classList.remove("dark-mode");
+// }
+//
+let projects = selectAll(".project__header__linkb");
+
+projects.forEach((project, i) => {
+  // Function to convert RGB values to CSS rgb() format
+  function rgbToCss(rgb) {
+    return `rgb(${rgb.join(", ")})`;
+  }
+
+  // Dynamically generate the backgroundColor property value
+  let fadeBlack = rgbToCss([0, 0, 0]); // Black color
+  let fadeMain = rgbToCss([210, 152, 205]); // Main color
+
+  let projectstl = gsap.timeline({ paused: true });
+
+  projectstl.addLabel("start", 0).fromTo(
+    project,
+    { duration: 0.5, backgroundColor: fadeBlack, ease: "none" },
+    {
+      duration: 0.5,
+      backgroundColor: fadeMain,
+      ease: "none",
+    },
+    "start"
+  );
+
+  project.addEventListener("mouseenter", () => {
+    projectstl.play();
+  });
+  project.addEventListener("mouseleave", () => {
+    projectstl.reverse();
+  });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  let toTopbutton = select("#toTop");
+
+  // Add an event listener to check scroll position
+  function showTotop() {
+    let scrollPosition = window.scrollY || document.documentElement.scrollTop;
+
+    if (scrollPosition > 1.2 * window.innerHeight) {
+      toTopbutton.style.display = "block";
+    } else {
+      toTopbutton.style.display = "none";
+    }
+  }
+  showTotop();
+  window.addEventListener("scroll", showTotop);
+
+  function scrollTop() {
+    gsap.to(window, {
+      duration: 2,
+      delay: 0,
+      scrollTo: {
+        y: ".hero-main",
+      },
+      ease: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+    });
+  }
+
+  toTopbutton.addEventListener("click", scrollTop);
+});