Merge branch 'public'

App.jsx

@@ -7,6 +7,8 @@ class App extends React.Component {
     this.state = {
       isDrawerOpen: false,
       selectedProject: null,
+      windowWidth: window.innerWidth,
+      drawerKey: 0,
     };
   }
 
@@ -23,15 +25,26 @@ class App extends React.Component {
           media: mediaUrls,
         };
         // console.log("Project data:", projectData);
+
         this.setState({ isDrawerOpen: true, selectedProject: projectData });
       });
     });
+    window.addEventListener("resize", this.handleResize);
   }
 
+  handleResize = () => {
+    // simple counter as the key
+    this.setState((prevState) => ({
+      windowWidth: window.innerWidth,
+      drawerKey: prevState.drawerKey + 1, // Increment the key
+    }));
+  };
+
   componentWillUnmount() {
     document.querySelectorAll(".work-tile").forEach((button) => {
       button.removeEventListener("click");
     });
+    window.removeEventListener("resize", this.handleResize);
   }
 
   toggleDrawer = () => {
@@ -40,7 +53,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div className={this.state.isDrawerOpen ? "work-drawer open" : "work-drawer"}>
+      <div key={this.state.drawerKey} className={this.state.isDrawerOpen ? "work-drawer open" : "work-drawer"}>
         <div className="drawer-wrapper" id="drawer-wrapper">
           <div id="close" className="closeDrawer" onClick={this.toggleDrawer}>
             {

css/services.css

@@ -1,16 +1,31 @@
 .hero-services {
   display: grid;
-  grid-template-columns: 1fr;
   grid-template-areas:
     "..."
     "hero-service";
-  grid-template-rows: 40% 60%;
+  grid-template-columns: 1fr;
+  grid-template-rows: 30% 50% 20%;
   min-height: 100vh;
   overflow: hidden;
 }
 
+.inner-service2:nth-last-of-type(3):before {
+  background-image: url(../assets/images/0775.webp);
+  background-position: 50% 43%;
+  background-repeat: no-repeat;
+  background-size: 81%;
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
 .hero-service {
   grid-area: hero-service;
+  text-align: center;
   padding: 0;
   font-size: calc(8vw + 10px);
   font-family: unset;
@@ -803,3 +818,17 @@ figure {
   grid-template-columns: 1fr 1fr;
   justify-items: end;
 }
+
+.scroll-service-down {
+  align-items: center;
+  display: grid;
+  grid-column: 1 / 2;
+  grid-row: 3 / 4;
+  justify-content: center;
+  z-index: 3;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 20px;
+}
+.scroll-service-down span {
+  width: fit-content;
+}

css/works.css

@@ -326,13 +326,6 @@ video {
   overflow: hidden;
 }
 
-@font-face {
-  font-family: "Uzi";
-  src: url("https://raw.githubusercontent.com/vickkie/uzitrake/main/fonts/MonumentExtended-Regular.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
 .sw-partner-marquee {
   display: -webkit-box;
   display: -webkit-flex;
@@ -524,7 +517,7 @@ video {
 .display-expla {
   font-size: 70px;
   color: white;
-  font-family: Uzi;
+  font-family: inherit;
 }
 
 .works-exit {

js/main/404.jsx

@@ -10,7 +10,7 @@ const NotFound = () => {
           <div className="tr__page404__lion"></div>
           <span>4</span>
         </h1>
-        <p className="delay">Page not found. You are lost in the jungle.</p>
+        <p className="delay">Page not found. You are lost in Kenyan jungle.</p>
         <br />
         <br />
         <a href="index" className="prj_btn" style={{ width: "fit-content", gap: "10px" }}>

js/main/services.js

@@ -233,3 +233,18 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
+
+gsap.registerPlugin(SplitText);
+
+const herolargelogo = select(".hero-largelogo");
+
+let herotext = new SplitText(".innerservice", { type: "chars", charsClass: "inner-service2" });
+
+// const splitchars = selectAll(".split-chars");
+
+// splitchars.forEach((splitchar) => {
+//   new SplitText(splitchar, {
+//     type: "chars",
+//     charsClass: "otherchars",
+//   });
+// });