diff --git a/css/portfolio-hero.css b/css/portfolio-hero.css
index edd7ce4c..586bd154 100755
--- a/css/portfolio-hero.css
+++ b/css/portfolio-hero.css
@@ -23,6 +23,7 @@ body {
--color-bg: #ebebeb;
--color-biege: #e3dacd;
--stick-black: #000;
+ --stick-white: #fff;
--hero-font: 8vw;
--hero-sub-font: 1.3rem;
--size-submain: 3rem;
@@ -62,7 +63,7 @@ body {
@font-face {
font-display: swap;
font-family: "LA-LUXE";
- src: url("https://raw.githubusercontent.com/vickkie/uzitrake/main/Bricolage%20Grotesque.woff2") format("woff2");
+ src: url("../fonts/BricolageGrotesque.woff2") format("woff2");
/* src: url("https://raw.githubusercontent.com/vickkie/uzitrake/main/AtiplaND-Regular.woff2") format("woff2"); */
}
@@ -760,6 +761,9 @@ main {
border-bottom-left-radius: 29px;
border-bottom-right-radius: 29px;
}
+ .project__header__link__textb {
+ text-align: center;
+ }
.mid-larger {
font-size: var(--hc-xl) !important;
@@ -1459,6 +1463,7 @@ main {
border-top-left-radius: 35px;
border-top-right-radius: 35px;
width: var(--screen-width);
+ border-top: solid 1px var(--color-link-hover);
}
.lets-you {
display: flex;
@@ -1471,7 +1476,7 @@ main {
}
.same-you {
font-size: 1.1rem;
- color: var(--color-white);
+ color: var(--stick-white);
}
.yoyo-main {
@@ -1774,7 +1779,7 @@ main {
width: 100%;
grid-column: 1/4;
grid-row: 1/6;
- background: var(--color-white);
+ background: var(--stick-white);
border-radius: 29px;
width: calc(100vw - 26px);
margin: auto;
@@ -1909,8 +1914,8 @@ main {
.intro__button {
border: 1px solid var(--color-black);
- background: white;
- box-shadow: -3px -2px 0 var(--color-black);
+ background: var(--stick-white);
+ box-shadow: -3px -2px 0 var(--stick-black);
border-radius: 50%;
justify-self: center;
margin-top: 1rem;
@@ -2068,7 +2073,7 @@ main {
.mid-larger {
font-size: var(--hc-xxl);
- color: var(--color-white);
+ color: var(--stick-white);
text-align: center;
}
.italicc {
@@ -2228,7 +2233,7 @@ li {
}
@media (min-width: 769px) {
[data-gl-text][data-gl-text-active] {
- color: var(--color-white);
+ color: var(--stick-white);
}
}
.project__header__informationb {
@@ -2238,7 +2243,7 @@ li {
}
@media (min-width: 769px) {
[data-gl-text][data-gl-text-active] {
- color: var(--color-white);
+ color: var(--stick-white);
}
}
.project__header__titleb {
@@ -2250,7 +2255,7 @@ li {
@media (min-width: 769px) {
[data-gl-text][data-gl-text-active] {
- color: var(--color-white);
+ color: var(--stick-white);
}
}
.project__header__descriptionb {
@@ -2262,7 +2267,7 @@ li {
}
@media (min-width: 769px) {
[data-gl-text][data-gl-text-active] {
- color: var(--color-white);
+ color: var(--stick-white);
}
}
.project__header__link__textb {
@@ -2314,10 +2319,6 @@ button {
font-weight: inherit;
text-align: left;
}
-body,
-button {
- color: #181818;
-}
.btn .mot,
.menu-item a .mot {
flex: 0 0 100%;
@@ -2447,7 +2448,7 @@ span {
}
.icon-text_text {
- color: var(--color-white);
+ color: var(--stick-white);
font-size: 0.875rem;
line-height: 1.45;
transform: translateY(2px);
@@ -2485,3 +2486,77 @@ span {
margin: auto;
}
+@media screen and (max-width: 767px) {
+ .vertical-centered-box .content {
+ transform: scale(1.7);
+ }
+ .vertical-centered-box .loader-circle {
+ transform: scale(1.2);
+ }
+}
+@media screen and (min-width: 768px) {
+ .vertical-centered-box .content {
+ transform: scale(2.3);
+ }
+ .vertical-centered-box .loader-circle {
+ transform: scale(1.6);
+ }
+}
+.loader-circle {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+ margin-left: -60px;
+ margin-top: -60px;
+}
+.loader-line-mask {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 60px;
+ height: 120px;
+ margin-left: -60px;
+ margin-top: -60px;
+ overflow: hidden;
+ transform-origin: 60px 60px;
+ -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
+ animation: rotate 1.2s infinite linear;
+}
+.loader-line-mask .loader-line {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+@keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+.logo-loaded {
+ position: relative;
+ margin: auto;
+ height: 30%;
+}
+.loadedlogo {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ z-index: -1;
+}
+.content {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100vh;
+ z-index: 2000;
+ pointer-events: none;
+}
diff --git a/css/preloader.css b/css/preloader.css
index e06cbb2b..9cb45d9b 100755
--- a/css/preloader.css
+++ b/css/preloader.css
@@ -59,10 +59,12 @@
overflow: hidden;
height: 100vh;
}
+.gallery {
+ position: static;
+}
.gallery__item {
position: absolute;
-
margin: 0;
display: grid;
grid-template-areas: "gallery-image";
@@ -83,22 +85,22 @@
.gallery__item:nth-of-type(1) {
top: 10%;
- left: 10%;
+ left: -50%;
}
.gallery__item:nth-of-type(2) {
top: 20%;
- right: 10%;
+ right: -50%;
}
.gallery__item:nth-of-type(3) {
bottom: 20%;
- left: 10%;
+ left: -50%;
}
.gallery__item:nth-of-type(4) {
bottom: 10%;
- right: 10%;
+ right: -50%;
}
.gallery__item-imginner {
diff --git a/css/works.css b/css/works.css
index 7cb7cb68..730973af 100755
--- a/css/works.css
+++ b/css/works.css
@@ -235,16 +235,6 @@ a:focus-visible {
transform: scale3d(0, 1, 1);
}
-.content {
- position: fixed;
- top: 0;
- right: 0;
- width: 100%;
- height: 100vh;
- z-index: 2000;
- pointer-events: none;
-}
-
.content .heading {
margin-bottom: 5rem;
font-size: 10vw;
@@ -702,7 +692,8 @@ h2 {
padding: 0;
grid-template-rows: 60px 1fr 60px;
}
- .project-role, .project-task {
+ .project-role,
+ .project-task {
padding: 0 !important;
}
.design-marquee {
diff --git a/fonts/BricolageGrotesque.woff2 b/fonts/BricolageGrotesque.woff2
new file mode 100644
index 00000000..d1164d08
Binary files /dev/null and b/fonts/BricolageGrotesque.woff2 differ
diff --git a/img/masks/uzipreload-logo.webp b/img/masks/uzipreload-logo.webp
new file mode 100644
index 00000000..29d1cf34
Binary files /dev/null and b/img/masks/uzipreload-logo.webp differ
diff --git a/img/svg/6157c1f7fe50ed002d43.svg b/img/svg/6157c1f7fe50ed002d43.svg
new file mode 100644
index 00000000..96ac6817
--- /dev/null
+++ b/img/svg/6157c1f7fe50ed002d43.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/index.html b/index.html
index 1397099e..a70fb3ab 100755
--- a/index.html
+++ b/index.html
@@ -12,7 +12,16 @@
-
+
+
+
@@ -68,8 +77,18 @@
- Uzitrake
-
+
+
+
+
+
+
+
+
+
+
@@ -334,11 +353,7 @@
Uzitrake
Discover work
@@ -625,7 +640,7 @@
Uzitrake
-
-
+
@@ -767,13 +813,15 @@
Personal
-
+
+ Discover more work On socials ❈
+
@@ -801,7 +849,7 @@
FIELD - BRANDING ,DESIGN
-
+
ROLE - Art designer,Designer
@@ -909,23 +957,22 @@
- Trakexcel
+ Hypercritical
CASE 02-04
- TASK- My objective was to design a website for Trakexcel agency that
- is exceptionally attractive and visually appealing. Every aspect of the design was crafted to captivate
- visitors and leave a lasting impression, ensuring that the website stands out amidst the digital
- landscape.
+ TASK- My objective was to design a website for Hypercritical web
+ design studio that is exceptionally attractive and visually appealing. Every aspect of the design was
+ crafted to captivate visitors and leave a lasting impression, ensuring that the website stands out
+ amidst the digital landscape.
FIELD - Web Development
-
-
ROLE - Lead Programmer
+
ROLE - Designer / Programmer
RECOGNITION - Our website has garnered attention for its innovative
design and user-friendly interface. It has been praised by industry experts and users alike for its
@@ -940,17 +987,11 @@
- Trakexcel Agency, a leading provider of marketing and analytics solutions, aimed to revolutionize its
- online presence and brand image. Recognizing the importance of a captivating design that resonates
- with its target audience, they entrusted us with this mission. As our collaboration progressed, our
- focus extended to enhancing user engagement and streamlining the user experience.
-
-
-
- This project involved the creation of a visually stunning design system and the refinement of digital
- touchpoints to ensure a seamless user journey across all platforms. We worked closely with the
- Trakexcel team to understand use the vision and objectives, and implemented innovative design
- strategies to achieve their goals effectively.
+ Hypercritical Studio, renowned for its exacting standards in website and app design, embarked on a
+ mission to redefine commitment and demonstrate its prowess to partners. Tasked with this challenge, we
+ undertook to elevate their vision, recognizing the pivotal role of captivating design in resonating
+ with their target audience. As our collaboration unfolded, our focus naturally extended to optimizing
+ user engagement and refining the user experience.
@@ -960,23 +1001,22 @@
- Throughout our collaboration, we undertook various initiatives to enhance Trakexcel's online presence.
- We began by optimizing the website's interface and user experience, focusing on improving navigation
- and visual appeal. Subsequently, we delved into mobile design, exploring new app directions and
- refining user interactions to optimize engagement. Additionally, we revamped the onboarding process,
- redesigning flows and incorporating custom illustrations to communicate Trakexcel's brand story
- effectively. Our ultimate achievement was the development of a comprehensive design system that
- ensured consistency and efficiency across all design, product, and engineering endeavors.
+
+
+ Our journey with Hypercritical Studio encompassed the development of a visually arresting design
+ system and the meticulous refinement of digital touchpoints to ensure a frictionless user journey
+ across all platforms. Working in tandem with the some collaborators, we delved deep into the vision
+ and objectives, harnessing innovative design strategies to drive impactful results.
-
-
+
- DNAnexus
+ Trakexcel
-
CASE 03-04
+
CASE 02-04
- TASK - Refining and enhancing the user interface and design of their
- platform, akin to the meticulous arrangement of five Imprimaturs on a title-page
+ TASK- My objective was to design a website for Trakexcel agency that
+ is exceptionally attractive and visually appealing. Every aspect of the design was crafted to captivate
+ visitors and leave a lasting impression, ensuring that the website stands out amidst the digital
+ landscape.
-
FIELD - RE-BRANDING, DESIGN
+
+
FIELD - Web Development
-
-
ROLE - Development Collaborator
+
ROLE - Lead Programmer
- RECOGNISION - These are the pretty responsories, these are the dear
- antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made
+ RECOGNITION - Our website has garnered attention for its innovative
+ design and user-friendly interface. It has been praised by industry experts and users alike for its
+ intuitive navigation and engaging content, establishing it as a standout platform in our field.
@@ -1052,18 +1094,17 @@
- DNAnexus, a leading provider of cloud-based data management and analysis solutions for genomics
- research, faced challenges in optimizing their user interface and experience for researchers and
- bioinformatics professionals. As the demand for genomic data analysis grew, they recognized the
- importance of enhancing their platform's usability and functionality to meet the evolving needs of
- their users. They sought a design partner with expertise in both genomics technology and user-centered
- design principles to help them overcome these challenges.
+ Trakexcel Agency, a leading provider of marketing and analytics solutions, aimed to revolutionize its
+ online presence and brand image. Recognizing the importance of a captivating design that resonates
+ with its target audience, they entrusted us with this mission. As our collaboration progressed, our
+ focus extended to enhancing user engagement and streamlining the user experience.
- This project entailed developing a robust design system and refining digital touchpoints, ensuring a
- seamless user experience across their app ecosystem with a design partner capable of adapting to their
- continuously evolving requirements.
+ This project involved the creation of a visually stunning design system and the refinement of digital
+ touchpoints to ensure a seamless user journey across all platforms. We worked closely with the
+ Trakexcel team to understand use the vision and objectives, and implemented innovative design
+ strategies to achieve their goals effectively.
@@ -1073,44 +1114,68 @@
- As part of our collaboration, we also focused on enhancing the mobile experience of the platform,
- recognizing the importance of accessibility and flexibility for users who need to access genomic data
- on the go. We explored innovative design concepts and interaction patterns to create a mobile
- interface that seamlessly complemented the desktop experience.
-
- Furthermore, we developed a comprehensive design system that provided DNAnexus with a set of
- standardized components, styles, and guidelines for maintaining consistency and coherence across their
- entire platform. This design system not only facilitated faster iteration and development but also
- empowered DNAnexus's internal teams to collaborate more effectively and efficiently.
+ Throughout our collaboration, we undertook various initiatives to enhance Trakexcel's online presence.
+ We began by optimizing the website's interface and user experience, focusing on improving navigation
+ and visual appeal. Subsequently, we delved into mobile design, exploring new app directions and
+ refining user interactions to optimize engagement. Additionally, we revamped the onboarding process,
+ redesigning flows and incorporating custom illustrations to communicate Trakexcel's brand story
+ effectively. Our ultimate achievement was the development of a comprehensive design system that
+ ensured consistency and efficiency across all design, product, and engineering endeavors.
-
+
+
-
-
-
+
+
+
+
+
+
-
+
Uzitrake
@@ -1124,7 +1189,7 @@
FIELD - UX/UI DESIGN , PORTFOLIO
-
+
ROLE - Designer, Developer
RECOGNISION - Digitally Fit Awards 2023 - Kenya
@@ -1217,6 +1282,95 @@
+
+
+
+
+ DNAnexus
+
+
CASE 03-04
+
+
+ TASK - Refining and enhancing the user interface and design of their
+ platform, akin to the meticulous arrangement of five Imprimaturs on a title-page
+
+
FIELD - RE-BRANDING, DESIGN
+
+
+
+
ROLE - Development Collaborator
+
+ RECOGNISION - These are the pretty responsories, these are the dear
+ antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made
+
+
+
+
+
+
+ DNAnexus, a leading provider of cloud-based data management and analysis solutions for genomics
+ research, faced challenges in optimizing their user interface and experience for researchers and
+ bioinformatics professionals. As the demand for genomic data analysis grew, they recognized the
+ importance of enhancing their platform's usability and functionality to meet the evolving needs of
+ their users. They sought a design partner with expertise in both genomics technology and user-centered
+ design principles to help them overcome these challenges.
+
+
+
+ This project entailed developing a robust design system and refining digital touchpoints, ensuring a
+ seamless user experience across their app ecosystem with a design partner capable of adapting to their
+ continuously evolving requirements.
+
+
+
+
+
+ As part of our collaboration, we also focused on enhancing the mobile experience of the platform,
+ recognizing the importance of accessibility and flexibility for users who need to access genomic data
+ on the go. We explored innovative design concepts and interaction patterns to create a mobile
+ interface that seamlessly complemented the desktop experience.
+
+ Furthermore, we developed a comprehensive design system that provided DNAnexus with a set of
+ standardized components, styles, and guidelines for maintaining consistency and coherence across their
+ entire platform. This design system not only facilitated faster iteration and development but also
+ empowered DNAnexus's internal teams to collaborate more effectively and efficiently.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
window.open("mailto:vickkietrake@gmail.com");
});
});
-// // Call the splittingjs to transform the data-splitting texts to spans of chars
+
+//?Call the splittingjs to transform the data-splitting texts to spans of chars
// Splitting();
+gsap.registerPlugin(SplitText);
+
const splitchars = document.querySelectorAll(".split-char");
splitchars.forEach((splitchar) => {
@@ -79,6 +82,8 @@ document.addEventListener("DOMContentLoaded", function () {
function lenisSmooth() {
if (innerWidth > 767) {
+ // let logoGif = document.querySelector(".l4__right div");
+
const lenis = new Lenis({
duration: 3,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
diff --git a/js/preloader/galleryController.js b/js/preloader/galleryController.js
index 8c165f7b..180c6e8a 100755
--- a/js/preloader/galleryController.js
+++ b/js/preloader/galleryController.js
@@ -1,17 +1,6 @@
import { calcWinsize, getRandomInteger } from "./utils.js";
import GalleryItem from "./galleryItem.js";
-gsap.registerPlugin(SplitText);
-
-const splitchars = document.querySelectorAll(".split-chars");
-
-splitchars.forEach((splitchar) => {
- new SplitText(splitchar, {
- type: "chars",
- charsClass: "char",
- });
-});
-
// Calculate the viewport size
let winsize = calcWinsize();
window.addEventListener("resize", () => (winsize = calcWinsize()));
@@ -23,8 +12,6 @@ export default class GalleryController {
galleryEl: galleryEl,
title: document.querySelector(".title-uzi"),
};
- this.DOM.titleChars = this.DOM.title.querySelectorAll(".char");
- this.titleCharsTotal = this.DOM.titleChars.length;
this.DOM.galleryItemElems = [...this.DOM.galleryEl.querySelectorAll(".gallery__item")];
this.galleryItems = [];
this.DOM.galleryItemElems.forEach((el) => this.galleryItems.push(new GalleryItem(el)));
@@ -33,19 +20,8 @@ export default class GalleryController {
this.intro();
}
intro() {
- // let's start by animating the main intro text
- const timeline = gsap.timeline().to(
- this.DOM.title,
- {
- duration: 1,
- ease: "expo",
- startAt: { y: "10%" },
- y: "0%",
- opacity: 1,
- },
- 0
- );
-
+ // let's start by defining timeline
+ const timeline = gsap.timeline();
// now let's center the images (stack)
for (const [pos, item] of this.galleryItems.entries()) {
timeline.set(
@@ -85,21 +61,6 @@ export default class GalleryController {
// scroll.update();
}, "startAnimation")
- // animate the main title characters out and fade them out too
- .to(
- this.DOM.titleChars,
- {
- duration: 1,
- ease: "expo",
- x: (pos, target) => {
- return -40 * (Math.floor(this.titleCharsTotal / 2) - pos);
- },
- opacity: 0,
- stagger: { from: "center" },
- },
- "startAnimation"
- )
-
// the other images in the stack will animate its translation values randomly
.to(
otherImages,
diff --git a/js/preloader/index.js b/js/preloader/index.js
index ac1e2a64..3695c464 100755
--- a/js/preloader/index.js
+++ b/js/preloader/index.js
@@ -1,9 +1,19 @@
import { preloadImages } from "./utils.js";
import GalleryController from "./galleryController.js";
+let animationLine = document.querySelector(".loader-line-mask");
+let logoLoaded = document.querySelector(".loadedlogo");
+
// Preload images and fonts
-Promise.all([preloadImages(".gallery__item-imginner")]).then(() => {
- document.body.classList.remove("loading");
- // Initialize the GalleryController
- new GalleryController(document.querySelector(".gallery"));
-});
+preloadImages(".gallery__item-imginner")
+ .then(() => {
+ document.body.classList.remove("loading"); // Remove loading class
+ animationLine.style.animationPlayState = "paused"; // Pause the animation
+
+ // Initialize the GalleryController
+ new GalleryController(document.querySelector(".gallery"));
+ })
+
+ .catch((error) => {
+ console.error("An error occurred:", error);
+ });
diff --git a/public/bundle.js b/public/bundle.js
index 27dd67a2..ffc3fb5c 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -1,2 +1,2 @@
/*! For license information please see bundle.js.LICENSE.txt */
-(()=>{let e=e=>document.querySelector(e),t=e=>document.querySelectorAll(e);"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("./offline-uzitrake.js").catch((e=>console.log("Error:",e)))})),t(".emailme").forEach((e=>{e.addEventListener("click",(function(){window.open("mailto:vickkietrake@gmail.com")}))}));document.querySelectorAll(".split-char").forEach((e=>{new SplitText(e,{type:"chars,words",charsClass:"char",wordsClass:"word"})})),document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let r=e(".time");function o(){var e=new Date;r.innerHTML=e.toTimeString().substr(0,5)}o(),setInterval((()=>{o()}),1e3);let i=e(".button-menu"),n=e(".button-close"),a=t(".menu-will-open"),s=e(".mf-cursor");function l(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(r){e.raf(r),requestAnimationFrame(t)}))}}if(a.forEach((e=>{i.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),s&&(s.style.display="none")}),1e3)})),n.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),s&&(s.style.display="block")}),1e3)}))})),l(),window.addEventListener("resize",l),gsap.registerPlugin(ScrollTrigger),innerWidth>767){t("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),r=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:r,onEnter:()=>r.play()})})),t("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),r=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:r,toggleActions:"play none none none"})}))}if(innerWidth>767){let C=e(".empty");function c(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:C,start:"top bottom",end:"bottom 60%",scrub:!0}}).to(C,{y:"-40vh",ease:"expo.out"})}c(),window.addEventListener("resize",c)}const g=[...t("[data-effect28]")];if(g){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});g.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),r=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{p.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let m=e(".knob"),f=e(".dark-toggle"),h=e("body"),w=e(".mf-cursor"),y=!1;if(f.addEventListener("click",(()=>{y=!y,gsap.timeline().to(m,{x:()=>y?18:0,duration:.4,ease:"expo.in"}),t(".portfolio-map a").forEach((e=>{gsap.set(e,{color:y?"#fff":"#000"})})),h.classList.toggle("dark-mode"),w.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(e(".mf-cursor")){function v(){innerWidth<768&&(e(".mf-cursor").style.display="none")}v()}window.addEventListener("resize",v),gsap.registerPlugin(ScrollToPlugin);let E=e(".tocontact"),T=e(".toworks"),b=e(".tohero"),M=e(".toabout");E.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),T.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),b.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),M.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let L=t(".portfolio-map a"),k=e("body"),S=getComputedStyle(k).backgroundColor,x=getComputedStyle(k).color,A=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{A.play()},onLeaveBack:()=>{A.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{A.reverse()}}}),L.forEach((e=>{A.fromTo(e,{color:x},{color:S,duration:.4,ease:"power1.out"})}))}),0)}));e(".email-box");let r=e(".in-world-btn-wrap"),o=e(".meeting-content-bottom"),i=gsap.timeline({});i.to(r,{scaleY:0,scaleX:0}),i.fromTo(o,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),ScrollTrigger.create({trigger:r,start:"top 80%",animation:i,onEnter:()=>i.play(),onLeaveBack:()=>i.reverse()});let n=gsap.timeline();n.to(r,{duration:.9,transform:"scale(1,1.25)"}),r.addEventListener("mouseenter",(()=>{n.play()})),r.addEventListener("mouseleave",(()=>{n.reverse()}))})();
\ No newline at end of file
+(()=>{let e=e=>document.querySelector(e),t=e=>document.querySelectorAll(e);"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("./offline-uzitrake.js").catch((e=>console.log("Error:",e)))})),t(".emailme").forEach((e=>{e.addEventListener("click",(function(){window.open("mailto:vickkietrake@gmail.com")}))})),gsap.registerPlugin(SplitText);document.querySelectorAll(".split-char").forEach((e=>{new SplitText(e,{type:"chars,words",charsClass:"char",wordsClass:"word"})})),document.addEventListener("DOMContentLoaded",(function(){setTimeout((()=>{let r=e(".time");function o(){var e=new Date;r.innerHTML=e.toTimeString().substr(0,5)}o(),setInterval((()=>{o()}),1e3);let i=e(".button-menu"),n=e(".button-close"),a=t(".menu-will-open"),s=e(".mf-cursor");function l(){if(innerWidth>767){const e=new Lenis({duration:3,easing:e=>Math.min(1,1.001-Math.pow(2,-10*e)),direction:"vertical",gestureDirection:"vertical",smooth:!0,smoothTouch:!1,touchMultiplier:2,infinite:!1,autoResize:!0});requestAnimationFrame((function t(r){e.raf(r),requestAnimationFrame(t)}))}}if(a.forEach((e=>{i.addEventListener("click",(()=>{setTimeout((()=>{e.classList.add("menu-is-open"),s&&(s.style.display="none")}),1e3)})),n.addEventListener("click",(()=>{setTimeout((()=>{e.classList.remove("menu-is-open"),s&&(s.style.display="block")}),1e3)}))})),l(),window.addEventListener("resize",l),gsap.registerPlugin(ScrollTrigger),innerWidth>767){t("[line-triggerX]").forEach((function(e){const t=e.getAttribute("line-triggerX"),r=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out"}});return t.fromTo(e,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:r,onEnter:()=>r.play()})})),t("[line-triggerY]").forEach((function(e){const t=e.getAttribute("line-triggerY"),r=function(e){const t=gsap.timeline({defaults:{duration:2,ease:"power2.out",delay:1.2}});return t.fromTo(e,{scaleY:1,opacity:1,transformOrigin:"bottom"},{scaleY:0,opacity:0}),t}(e);ScrollTrigger.create({trigger:t,start:"top 80%",animation:r,toggleActions:"play none none none"})}))}if(innerWidth>767){let C=e(".empty");function c(){gsap.registerPlugin(ScrollTrigger),gsap.timeline({scrollTrigger:{trigger:C,start:"top bottom",end:"bottom 60%",scrub:!0}}).to(C,{y:"-40vh",ease:"expo.out"})}c(),window.addEventListener("resize",c)}const g=[...t("[data-effect28]")];if(g){gsap.registerPlugin(ScrollTrigger),gsap.registerPlugin(SplitText);new SplitText("[data-effect28]",{type:"words,lines,chars",wordsClass:"content__title word",charsClass:"char",linesClass:"lines"});g.forEach((e=>{const t=[...e.querySelectorAll(".word")];for(const e of t){const t=e.querySelectorAll(".char"),r=t.length;gsap.fromTo(t,{"will-change":"transform, filter",transformOrigin:"50% 100%",scale:e=>{const t=e{const t=e{const t=e{p.forEach((function(e,t){e.getAttribute("data-image"),gsap.timeline().addLabel("rotate,+=0").to(e,{transform:"rotate3d(0, 1, 0, 180deg)",perspective:"1000px",duration:1.2,ease:"power2.in",id:t+1},"rotate").add((()=>{e.classList.add(`menu-image${t}`)}))}))}));let m=e(".knob"),f=e(".dark-toggle"),h=e("body"),w=e(".mf-cursor"),y=!1;if(f.addEventListener("click",(()=>{y=!y,gsap.timeline().to(m,{x:()=>y?18:0,duration:.4,ease:"expo.in"}),t(".portfolio-map a").forEach((e=>{gsap.set(e,{color:y?"#fff":"#000"})})),h.classList.toggle("dark-mode"),w.classList.add("-exclusion")})),innerWidth>767){new MouseFollower}if(e(".mf-cursor")){function v(){innerWidth<768&&(e(".mf-cursor").style.display="none")}v()}window.addEventListener("resize",v),gsap.registerPlugin(ScrollToPlugin);let E=e(".tocontact"),T=e(".toworks"),b=e(".tohero"),M=e(".toabout");E.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:".free-time",ease:"expo.out"})})),T.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".works",offsetY:50},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),b.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".content-hero"},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})})),M.addEventListener("click",(()=>{gsap.to(window,{duration:3,scrollTo:{y:".intro-port",offsetY:10},ease:e=>Math.min(1,1.001-Math.pow(2,-10*e))})}));let L=t(".portfolio-map a"),k=e("body"),S=getComputedStyle(k).backgroundColor,x=getComputedStyle(k).color,A=gsap.timeline({paused:!0,scrollTrigger:{trigger:".free-time",start:"top center",markers:!1,onEnter:()=>{A.play()},onLeaveBack:()=>{A.reverse()}}});gsap.to(window,{scrollTrigger:{trigger:"body",start:"top top",onEnter:()=>{A.reverse()}}}),L.forEach((e=>{A.fromTo(e,{color:x},{color:S,duration:.4,ease:"power1.out"})}))}),0)}));e(".email-box");let r=e(".in-world-btn-wrap"),o=e(".meeting-content-bottom"),i=gsap.timeline({});i.to(r,{scaleY:0,scaleX:0}),i.fromTo(o,{scaleX:1,opacity:1,transformOrigin:"center center"},{scaleX:0,opacity:0}),ScrollTrigger.create({trigger:r,start:"top 80%",animation:i,onEnter:()=>i.play(),onLeaveBack:()=>i.reverse()});let n=gsap.timeline();n.to(r,{duration:.9,transform:"scale(1,1.25)"}),r.addEventListener("mouseenter",(()=>{n.play()})),r.addEventListener("mouseleave",(()=>{n.reverse()}))})();
\ No newline at end of file
diff --git a/public/css/portfolio-hero.css b/public/css/portfolio-hero.css
index 8d11fd46..0f6b3fff 100644
--- a/public/css/portfolio-hero.css
+++ b/public/css/portfolio-hero.css
@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}:root{font-size:15px;--screen-width:calc(100vw - 7px);--gutter:5px;--paddSmall:25px}html{overflow-x:hidden;overflow-y:scroll}body{margin:0;--color-black:#000;--color-white:#fff;--color-bg:#ebebeb;--color-biege:#e3dacd;--stick-black:#000;--hero-font:8vw;--hero-sub-font:1.3rem;--size-submain:3rem;--size-2rem:2rem;--theme-color:#d29dd2;--email-font:8vw;--font-1:grotesk-diamond;--font-2:LA-LUXE;--font-3:grotesk;background-color:var(--color-bg);color:var(--color-black);font-family:var(--font-1),sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:max-content;overflow:hidden;text-rendering:optimizeSpeed;--hc-sm:clamp(0.7rem,0.35vi + 0.61rem,0.89rem);--hc-base:clamp(0.88rem,0.57vi + 0.73rem,1.19rem);--hc-md:clamp(1.09rem,0.89vi + 0.87rem,1.58rem);--hc-lg:clamp(1.37rem,1.35vi + 1.03rem,2.11rem);--hc-xl:clamp(1.71rem,2.01vi + 1.21rem,2.81rem);--hc-xxl:clamp(2.14rem,2.93vi + 1.4rem,3.75rem);--hc-xxxl:clamp(2.67rem,4.23vi + 1.61rem,5rem)}.dark-mode{--color-black:#fff!important;--color-white:#000!important;--color-bg:#000!important;--color-biege:#fff!important}@font-face{font-display:swap;font-family:LA-LUXE;src:url(https://raw.githubusercontent.com/vickkie/uzitrake/main/Bricolage%20Grotesque.woff2) format("woff2")}@font-face{font-display:swap;font-family:AdornScript;src:url(../fonts/AdornStoryScript.woff) format("woff")}a{color:var(--color-black);text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid #fff}.hover-line{display:inline-block;overflow:hidden;position:relative;white-space:nowrap}.hover-line:before{background:currentColor;content:"";height:1px;position:absolute;top:92%;transform-origin:0 50%;transition:transform .3s;width:100%}.hover-line:hover:before{transform:scaleX(0);transform-origin:100% 50%}.hidden{display:none}main{grid-template-columns:100%;grid-template-rows:100svh}.frame,main{display:grid}.frame{align-content:space-between;align-items:center;font-size:1rem;grid-area:1/1/2/2;grid-template-areas:"author dropdown dropdown ... " "linehead linehead linehead linehead" "... ... ... ..." "links links links links" "title title title title";grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto 1fr auto;height:100svh;padding:1rem 1rem .5rem;pointer-events:none;z-index:10}.frame--menu-open{color:var(--color-black)}.frame__title{font-size:inherit;font-weight:400;grid-area:title;justify-self:center;margin:.5rem 0 0}.frame__links{align-self:end;display:flex;flex-wrap:wrap;grid-area:links;justify-self:center}.frame__links a{margin:0 .5rem}.frame__author{font-family:var(--font-1);font-size:.9rem;font-weight:900;grid-area:author;margin:0}.frame__button{grid-area:dropdown;justify-self:center}.frame--menu-open .frame__author{opacity:0;pointer-events:none}.menu-is-open{height:100svh;overflow:hidden}.frame__contact{display:grid;font-family:var(--font-1);font-size:.9rem;grid-column:1/1;grid-template-columns:1fr 14px;justify-self:end;grid-column-gap:3px;align-items:center;cursor:pointer;font-weight:900;padding-bottom:4px;padding-right:10px}.scroll-now{align-items:center;display:flex;grid-column:1/1;grid-row:7/8;justify-content:center}.scroll-now svg{transform:scale(3) rotate(135deg)}.frame--menu-open .frame__heading-sub{opacity:0;pointer-events:none}.frame a,.frame button{pointer-events:auto}.button-menu{cursor:pointer;display:inline-grid;place-items:center}.button-menu svg{transition:transform .5s ease}.button-menu:focus-visible,.button-menu:hover{fill:var(--color-black)}.button-menu:hover svg{transform:scale(1.1)}.frame--menu-open .button-menu{opacity:0;pointer-events:none}.content-hero{display:grid;grid-area:1/1/2/2;grid-template-columns:1fr;grid-template-rows:40px 1fr 1fr 1fr 1fr 1fr 1fr;height:100svh;position:relative;width:100vw;z-index:2}.portfolio-map{display:grid;height:fit-content;padding-right:30px;position:fixed;right:0;top:50px;width:max-content;z-index:4}.portfolio-map ul{color:var(--color-black);display:flex;flex-direction:column;font-family:inherit;font-size:12px;list-style:none;padding:0;text-align:right;width:fit-content}.portfolio-map a{color:var(--color-black);cursor:pointer;text-rendering:optimizeSpeed}.content__l1{cursor:default;display:grid;font-weight:600;grid-column:auto;grid-row:2/4;grid-template-columns:20vw 1fr 1fr;line-height:.75;text-align:center}.l1__left{align-items:center;display:flex;font-family:var(--font-2);font-size:var(--hero-font);grid-column:2/3;justify-content:flex-end;padding-right:30px}.l1__right{display:flex;flex-direction:column;font-size:1.5vw;grid-column:3/4;place-content:space-evenly;align-content:flex-start;flex-wrap:wrap;text-align:left}.content__l2{display:grid;font-weight:600;grid-column:auto;grid-row:4/5;grid-template-columns:1fr 2fr;will-change:opacity,transform}.l2__left{align-items:flex-end;display:flex;flex-direction:row;font-size:1rem;place-content:center;width:100}.l2__right{align-items:center;display:grid;font-family:var(--font-2);font-size:var(--hero-font);justify-content:start;text-align:left}.rotatework{align-items:center;animation:rotatearound 15s linear infinite;display:flex;justify-content:center;width:12vh}.rotatework svg{height:12vh}@keyframes rotatearound{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.content__l3{display:grid;grid-column:auto;grid-row:5/6;grid-template-columns:2fr 3fr;will-change:opacity,transform}.l3__left{align-content:center;display:flex;flex-wrap:wrap;font-stretch:condensed;justify-content:end;padding-right:10px}.l3__right{display:flex;flex-direction:column;font-family:var(--font-1);font-size:var(--hero-sub-font);justify-content:center;text-align:left;word-break:break-word}.content__l4{display:grid;font-size:var(--hero-font);font-weight:600;grid-column:auto;grid-row:6/7;grid-template-columns:2fr 1fr}.l4__right{align-items:center;display:flex}.l4__right .div{background:url(../img/works/0763.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:100px;display:grid;height:80%;width:40%}.l4__left{align-items:center;display:flex;font-family:var(--font-2);font-size:var(--hero-font);justify-content:end;padding:0 30px;text-align:left}.button-enter{cursor:not-allowed;margin-top:4vh;transition:transform .5s ease}.button-enter:hover{transform:translateX(15px) rotate(-40deg)}.menu-wrap{background:var(--color-bg);display:grid;grid-area:1/1/2/2;grid-template-columns:100%;grid-template-rows:100svh;opacity:0;pointer-events:none;position:relative;z-index:11}.menu-wrap.menu-wrap--open{opacity:1;pointer-events:auto}.overlay{grid-area:1/1/2/2;height:100%;pointer-events:none;position:relative;width:100%;z-index:1000}.tiles{display:flex;flex-direction:column;height:150vh;justify-content:center;left:50%;opacity:.5;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(22.5deg)}.tiles__line{animation:runner 10s linear infinite;display:flex;transform:translateX(25%)}.tiles__line:nth-child(2){animation-duration:16s}.tiles__line:nth-child(3){animation-duration:22s}@keyframes runner{to{transform:translateX(-25%)}}.tiles__line-img{--tile-margin:3vw;background-position:50% 50%;background-size:cover;border-radius:50%;flex:none;height:30vh;margin:var(--tile-margin);width:30vh}.tiles__line-img--large{border-radius:20vh;width:100svh}.button-close{margin:1rem 2rem!important;position:absolute;right:calc(50vw - 60px);top:0;stroke:var(--color-black);fill:none;cursor:pointer}.button-close:focus-visible,.button-close:hover{fill:var(--color-black)}.frame__line{background-color:#374b41;display:grid;grid-area:linehead;height:2px;width:100%}@media screen and (min-width:53em){.frame{font-size:1.5rem;grid-template-areas:"author dropdown contactme" "linehead linehead linehead " "... ... ..." "title links links";grid-template-columns:390px 1fr 390px}.frame__title{align-self:end;justify-self:start;margin:0 3rem 0 0}.frame__links{display:flex;justify-self:start;padding:0}.frame__links a:not(:last-child){margin-right:.5rem}.frame__heading-main{font-size:2.15rem}.frame__heading-sub{font-size:1rem}.menu__item-tiny{font-size:2rem}}.icon--menuUzi{height:20px;width:40px}@media screen and (min-width:768px){::-webkit-scrollbar{height:100%;opacity:0;position:absolute;right:0;top:0;transform-origin:center right;transition:transform .3s,opacity .3s;width:7px}::-webkit-scrollbar-thumb{background-color:#585858;border-radius:10px;cursor:-webkit-grab;cursor:grab;margin:2px;opacity:.5;position:absolute;right:0;top:0;width:7px}::-webkit-scrollbar-track{width:10px}}.intro-port{background-color:var(--color-bg);display:grid;grid-template-columns:2fr 1fr;grid-template-rows:10vh 30vh 1fr 1fr;max-height:fit-content;min-height:100svh;padding:20vh 0 2vh;position:relative;transition:all .3s linear;width:100vw;z-index:2;grid-row-gap:20px;border-bottom:.052vw solid var(--color-black)}.designer-image{grid-area:designer-image}.designer-image svg{height:30vw}.designer-desc{grid-area:designer-desc;padding:0 40px}.proof-experience{align-items:center;display:grid;grid-area:proof-experience;grid-template-columns:repeat(3,1fr);padding:40px 0;position:relative}.years-xp{display:flex;flex-direction:column}.xp-head{font-size:13vw;text-align:center}.xp-footer{font-size:2vw;text-align:center}.more-xp,.projects-xp{display:flex;flex-direction:column}.tomato{color:#c35ec3}.hero-section{background-color:var(--color-bg);position:relative;z-index:2}.google-eyes{height:100px;position:absolute;right:0;top:10px;width:100px}.eyes-cont{align-items:center;background-color:var(--color-white);border-radius:50%;display:flex;height:100%;justify-content:center;width:100%}.slide{align-items:stretch;background-color:var(--color-black);display:flex;height:100svh;overflow:hidden;position:relative;transition-duration:.3s;z-index:5}.we-talk{display:grid;grid-template-rows:1fr 1fr;height:100%;width:100%}.talk-now{align-content:end;color:var(--color-white);display:grid;font-size:11vw;grid-row:1/2;text-align:center}.reach-out{align-items:center;display:grid;grid-row:2/3;justify-content:center}.button-r{border:none;color:var(--color-white);cursor:pointer;display:inline-block;font-family:inherit;font-size:15px;margin:0;padding:1.5rem 3rem;pointer-events:auto;position:relative;transform:scale(2.5) translateY(-20px)}@media screen and (max-width:767px){:root{--screen-width:100vw}.project__header__linkb{border-bottom-left-radius:29px;border-bottom-right-radius:29px}.mid-larger{font-size:var(--hc-xl)!important;line-height:2.5rem!important}.button-r.button--fenrir{transform:scale(1.5)}.work-areas-spans span{padding:.2rem 1rem;text-transform:uppercase}body{--hero-font:8vw;--hero-sub-font:0.7rem;--size-submain:1.9rem}.l3__left svg{height:40px}.content__l3{grid-template-columns:1fr 4fr}.l4__right .div{height:73%;width:54%}.content__l1{display:grid;grid-template-columns:8vw 1fr 1fr}.l1__right{font-size:var(--hero-sub-font)}.dev-header{text-align:center}}.button--fenrir{background:none;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);font-family:var(--font-1),sans-serif;font-size:.85rem;font-weight:700;height:120px;padding:0;text-transform:uppercase;width:120px}.button--fenrir span{color:var(--color-bg);font-size:6px}.progress-p{background-color:transparent;border:none;height:80px;left:calc(50% - 40px);position:absolute;top:calc(50% - 40px);transition:transform .4s cubic-bezier(.7,0,.3,1);width:80px}.button--fenrir:hover .progress-p{transform:scale3d(1.2,1.2,1)}.progress__circle,.progress__path{fill:none;stroke:#b8b6b654;stroke-width:1px}.button--fenrir:focus-visible .progress__circle{fill:rgba(252,196,63,.4)}.progress__path{stroke:var(--color-white);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s cubic-bezier(.7,0,.3,1)}.button--fenrir:hover .progress__path{stroke-dashoffset:0}.cross-svg{height:100px;top:0;width:100px}.cross-svg,.socials-loww{background-color:transparent;left:0;position:absolute}.socials-loww{border-top:1px solid var(--color-white);bottom:0;height:50px;width:100%}.hs-social-link{align-items:center;border:1px solid var(--color-bg);border-radius:50%;color:var(--color-white);display:flex;font-size:16px;height:30px;justify-content:center;margin-top:8px;text-decoration:none;transition:all .27s ease-out;width:30px}.me-1{margin-right:.25rem}.d-inline-flex{display:inline-flex}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.uzi-icons-y svg{height:14px;transform:rotateY(180deg) rotate(180deg)}.uzi-icons-y svg,.uzi-icons-y svg path{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hs-social-link:hover{background:var(--color-white);text-decoration:none}.hs-social-link:hover .uzi-icons-y svg path,.inverse-socials .uzi-icons-y svg path{fill:var(--color-black)}.intro-port-menu{display:grid;font-size:.67rem;font-weight:700;grid-area:intro-port-menu;grid-template-columns:repeat(3,1fr) 100px;grid-template-rows:1fr;line-height:1.3;padding:0 10px;position:relative;text-transform:uppercase}.top-border{top:0;will-change:transform,opacity}.bottom-border,.top-border{background-color:var(--color-black);height:.052vw;left:0;margin:0;opacity:1;position:absolute;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}.bottom-border{bottom:0;will-change:transform}.dim-header{color:#5d5b5d;padding:5px 0}.frame__line__low{background-color:#374b41;display:grid;grid-column:auto;grid-row:8/9;height:.052vw;width:100%}.guide-line{background-color:var(--color-black);height:15.5vh;left:0;margin:0 auto;position:absolute;right:0;top:-15.5vh;width:.052vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);will-change:transform}.-blink{animation:blink 1s steps(1) infinite backwards;transform:scale(.5)}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}.status{display:inline-flex}.signature{display:grid;font-family:AdornScript;font-size:3rem;font-weight:600;grid-column:4/5;text-align:center;text-transform:lowercase}@media screen and (min-width:512px) and (max-width:767px){.intro-port-menu{grid-template-columns:1fr 1fr 1fr}.signature.s1{display:none}}@media screen and (max-width:511px){.intro-port-menu{grid-template-columns:1fr 1fr}.lets-connect{display:none}.cross-svg,.google-eyes{transform:scale(.6)}.signature.s1{display:none}.dev-header{font-size:1.2rem;text-align:left}.section__header{padding:0!important}.design-areas{display:flex;flex-direction:column;font-size:var(--size-submain)}}@media screen and (max-width:375px){.design-areas{flex-direction:row;padding:0 0 20px}}.footer{align-content:center;background-color:var(--theme-color);bottom:0;display:grid;grid-template-areas:"uzitrake uzitrake uzitrake" "uzitrake uzitrake uzitrake" "copyright year available";grid-template-columns:repeat(3,1fr);grid-template-rows:30px 1fr 30px;justify-items:center;min-height:40vh;position:fixed;transform:translateZ(0);transition:all .3s ease-in-out;width:100%;z-index:1}.copyright-footer{grid-area:copyright}.copyright-footer,.year-footer{align-items:center;color:var(--stick-black);display:grid;font-size:.7rem;justify-content:center}.year-footer{grid-area:year}.footer-author svg{color:var(--stick-black);height:13vw;width:6vw}.available-y{align-items:center;color:var(--stick-black);display:flex;font-size:.7rem;grid-area:available;justify-content:center}.footer-low-line{background:var(--color-black);grid-column:1/4;grid-row:3/4;height:.052vw;position:relative;width:100vw}.button-menu{fill:var(--color-black)}.cross-svg path{stroke:var(--color-white)}.uzi-icons-y path{stroke:var(--color-black);fill:var(--color-white)}.socials-loww .other-links{display:flex;justify-content:center}@media screen and (max-width:768px){.project{font-size:17px!important;left:31vw!important}.gallery__item{height:78px;width:60px}}.project{color:var(--color-white);font-size:30px;left:40vw;position:absolute;top:20%}.uzi-icons-y{align-items:center;display:flex;text-rendering:geometricPrecision}@media (max-width:400px){.footer{grid-template-areas:"uzitrake uzitrake " "uzitrake uzitrake " "copyright year ";grid-template-columns:repeat(2,1fr);grid-template-rows:30px 1fr 30px}.menu__item-title{font-size:9.5vw!important}}.content__text img{height:400px;object-fit:cover;object-position:center center;width:600px}.work-areas{display:grid;grid-area:work-areas;grid-template-columns:1fr;min-height:40vh;padding:20px 40px;grid-column-gap:10px;border-top:.052vw solid}.dev-header{font-family:inherit;font-size:var(--size-submain)}.dev-subheader{font-family:inherit;font-size:2rem;text-align:center}.work-areas-spans{display:flex;flex-wrap:wrap;grid-template-columns:auto;grid-column-gap:10px}.work-areas-spans span{align-items:center;border:1px solid var(--color-black);border-radius:25px;display:flex;margin:.4rem 0;max-height:44px;padding:.2rem 2rem;text-align:center;text-transform:uppercase;width:fit-content}.intro-port{grid-template-areas:"intro-port-menu intro-port-menu" "designer-desc designer-image" "designer-desc designer-image" "work-areas work-areas" "proof-experience proof-experience"}.design-areas{font-size:var(--size-submain)}.tag{align-items:center;border-radius:35px;display:flex;font-size:16px;justify-content:center;margin-left:auto;margin-right:auto;padding:.7rem 1rem .5rem;position:absolute;right:22%;transform:rotate(-5deg);width:fit-content;z-index:2}.latest-tag img{height:78px;width:auto}.size-sm{font-family:var(--font-2);font-size:1.5rem}.works-svg svg{height:3rem}.dev-forlio{display:grid;font-size:var(--size-submain);grid-template-columns:1fr 1fr 1fr;margin-bottom:15vh;position:relative}.spacing-arrow-inner{background-color:#5d5b5d;height:8px;width:80%}.spacing-arrow{align-items:center;display:flex;justify-content:center;position:relative}.italic{font-style:italic}.starsvg{left:-10px;position:absolute;top:20%}.head-desc{padding-top:30px}@media screen and (max-width:767px){.intro-port{grid-template-areas:"intro-port-menu" "designer-desc" "designer-image " "work-areas " "proof-experience ";grid-template-rows:auto}.dev-forlio,.intro-port{display:grid;grid-template-columns:1fr}.dev-forlio{font-size:var(--size-submain);grid-template-rows:1fr 1fr 1fr;margin-bottom:10vh;padding-left:28px;position:relative}.designer-desc{padding:0 20px}.designer-image{align-items:center;display:grid;grid-area:designer-image;justify-content:center}.head-desc{padding-top:30px;text-align:center}.designer-desc{grid-area:designer-desc;padding:8vh 20px}.tag{padding:.3rem .5rem}.empty{z-index:1!important}}.stick-fill:hover{background:#000;background-position:100%;color:#fff;transition:background-position .5s ease}.more-work{display:grid;grid-template-areas:"greatwork morework logowork";grid-template-columns:100px 1fr 30px;height:fit-content;max-height:50svh;max-width:100vw}.where-morework{align-items:center;display:flex;font-size:var(--size-submain);grid-area:morework;justify-content:center;position:relative}.logo-work{align-content:center;display:grid;grid-area:logowork;justify-self:end}.great-work{grid-area:greatwork}.free-time{background-color:var(--stick-black);border-top-left-radius:2rem;border-top-right-radius:2rem;display:grid;grid-template-areas:"hola-wrapper" "..." "see-hyper ";grid-template-columns:repeat(3,1fr);grid-template-rows:32px 20px auto;height:fit-content;min-height:100svh;position:relative;width:var(--screen-width);z-index:4}.free-time .med-left,.free-time .med-right{position:absolute;width:2rem}.free-time .med-right{right:0;transform:rotate(90deg)}.hola-wrapper{border-top-left-radius:35px;border-top-right-radius:35px;grid-area:hola-wrapper;height:max-content;overflow:visible;width:var(--screen-width)}.hola-wrapper,.lets-you{align-items:center;background-color:var(--stick-black);display:flex;justify-content:center}.lets-you{border-radius:2rem;transform:translateY(-50%);width:41%}.same-you{color:var(--color-white);font-size:1.1rem}.yoyo-main{display:flex;grid-area:yoyo}.yoyo{color:var(--color-white);display:flex;width:100%}.yoyo,.yoyo-headline{font-size:var(--hero-font);justify-content:center}.yoyo-headline{align-items:center;color:var(--stick-black);display:inline-flex;position:relative}@media (min-width:812px){.yoyo-headline:before{height:22vw;left:calc(-2vw - 1px);width:26vw}}.yoyo-background{height:100%;left:0;position:absolute;scale:1.3;top:0;width:100%}.arrow-below{display:flex;grid-column:1/4;grid-row:3/4;justify-content:center;width:100%}.arrow-below svg{height:9rem;width:7rem}.decoration{left:10px;position:absolute;top:0;width:10.8rem}.image-collab{display:flex;grid-column:1/4;grid-row:4/5;height:140px;justify-content:center}.image-collab img{height:100%;height:140px;width:auto}.mail-wrapper{display:flex;grid-column:1/4;grid-row:5/6;height:fit-content;justify-content:center;padding:10px 0;width:100%}.mail-box{color:var(--stick-black);font-size:var(--size-2rem);overflow:hidden;width:fit-content}.email-wrapper{display:flex;grid-column:1/4;grid-row:6/7;height:fit-content;justify-content:center;padding:10px 0}.email-box{background-color:var(--color-white);border:2px solid var(--color-black);border-radius:135px;color:var(--stick-black);cursor:pointer;font-size:calc(var(--email-font) - 3vw);padding:1rem 2rem;position:relative;width:fit-content}.email-itself{color:var(--color-bg)}.this-email{height:77%;position:absolute;right:-13%;top:10%;width:auto}.this-email svg{height:100%;width:auto}.this-socials{align-items:center;display:flex;grid-column:1/4;grid-row:7/8;height:fit-content;justify-content:center;padding:10vh 0;position:relative;text-align:center}.this-socials-text{color:var(--color-white);font-size:var(--size-2rem);text-transform:uppercase}.copy-page__toggle-button{left:-18%;position:absolute;top:6px;transform:rotate(305deg)}@media screen and (max-width:767px){.copy-page__toggle-button{display:none}}@media (max-width:1919px){.toggle-button{height:8.3rem;width:9.5rem}}.toggle-button{all:unset;cursor:pointer;display:block;height:6rem;position:relative;width:6.5rem;--toggle-transition:0.5s ease-in-out}.email-box button,.toggle-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.email-box button{margin:-.4rem;padding:.4rem}.toggle-button__label,.toggle-button__label:after{display:block;position:absolute;transition:var(--page-transition)}.toggle-button__label{border:1px solid var(--color-black);border-radius:25px;color:var(--bg-color-content);font-weight:var(--font-light);padding:3px 9px 0 11px;transform-origin:right center;width:fit-content}.email-box:hover .toggle-button__star{animation:rotatearound 2s linear}.toggle-button__label-1{bottom:0;left:0}.toggle-button__label-2{bottom:0;right:0;transform:rotate(40deg) translateX(-3.4rem)}@media (max-width:1919px){.p1,.p1-italic{font-size:1.4rem}}.p1,.p1-italic{font-family:inherit;font-size:1.2rem;font-weight:300;letter-spacing:.015em;line-height:1.7}@media (max-width:1919px){.toggle-button__label[data-v-2d76716c]:after{height:2.5rem;left:2px;top:3px;width:6.1rem}}.toggle-button__label[data-v-2d76716c]:after{border:1px solid var(--bg-color-content);border-radius:3rem;content:"";height:3rem;left:0;top:4px;width:7.7rem}.toggle-button__label[data-v-2d76716c],.toggle-button__label[data-v-2d76716c]:after{display:block;position:absolute;transition:var(--page-transition)}.toggle-button__label[data-v-2d76716c]{bottom:0;color:var(--bg-color-content);font-weight:var(--font-light);padding:3px 9px 0 11px;right:0;transform-origin:right center}@media (max-width:1919px){.toggle-button__star[data-v-2d76716c]{height:26px;width:26px}}.toggle-button__star[data-v-2d76716c]{bottom:0;position:absolute;right:0}.empty{border-bottom-left-radius:2rem;border-bottom-right-radius:2rem;height:40vh;position:relative;z-index:4}.wiggle-wrapper{background-color:var(--theme-color)}.wiggle{background:var(--stick-black);background-position:top;background-repeat:no-repeat;background-size:cover;height:fit-content;overflow:hidden;z-index:6;grid-row-gap:30px;border-bottom-left-radius:2rem;border-bottom-right-radius:2rem;padding-bottom:1rem}.wiggle-svg{background:var(--color-white);border-radius:29px;grid-column:1/4;grid-row:1/6;margin:auto;position:relative;width:100%;width:calc(100vw - 26px);z-index:5}.wiggle-star-wrapper{align-items:center;background:transparent;color:var(--color-bg);display:flex;grid-area:starsvg;justify-content:center;z-index:6}.wiggle-star{height:auto;width:70px;fill:var(--color-bg);stroke:var(--color-bg)}.wiggle-star svg{height:auto;width:100px}.uzi-n-u{align-items:top;display:flex;grid-area:uziyou;height:max-content;justify-content:center;z-index:5}.u-n-uzi{color:var(--color-bg);font-family:inherit;font-size:var(--email-font)}@media screen and (max-width:767px){.wiggle{display:grid}#logo-36{width:40px}.great-work img{width:82px}.more-work{grid-template-areas:"greatwork morework logowork";grid-template-columns:82px 1fr 30px;margin:0 -20px}.lets-you{width:75%}.lets-make img{height:30px!important}}@media screen and (max-width:425px){.socials-spans{flex-direction:column;justify-self:center;width:fit-content}.socials-spans span{padding:11px 22px}.intro__button{height:52px!important;width:52px!important}.wiggle{display:grid}.yoyo,.yoyo-headline{font-size:calc(var(--size-2rem) + 5vw)}.this-email{height:57%!important}}.wiggle-socials{display:flex}.wiggle-socials svg{align-self:center;height:30px;justify-self:center}.black-div{background-color:var(--color-black);grid-area:empty;z-index:5}.lets-make{color:var(--color-bg);font-size:var(--email-font);grid-area:letsmake;z-index:6}.intro__button,.lets-make{align-items:center;display:flex;justify-content:center;position:relative}.intro__button{background:#fff;border:1px solid var(--color-black);border-radius:50%;box-shadow:-3px -2px 0 var(--color-black);cursor:pointer;height:77px;justify-self:center;margin-top:1rem;width:76px}.intro__button-svg{width:60%}.intro__button:hover{box-shadow:0 0 0 var(--color-bg);transform:translate3d(1px,2px,0)}.social-buttons{display:flex;gap:20px;grid-area:buttons;height:max-content;justify-content:center;padding:20px 0;z-index:6}.app-footer__marquee{backdrop-filter:blur(4px);color:var(--color-black);font-size:calc(.8925rem + 6.43571vw);font-weight:400;padding:.25em 0;white-space:nowrap;--marquee-animation-duration:40s;font-family:var(--font-2)}.u-marquee{--marquee-gap:1ch;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.u-marquee,.u-marquee__content{align-items:center;display:flex;gap:var(--marquee-gap)}.u-marquee__content{animation:marquee var(--marquee-animation-duration) linear infinite;flex-shrink:0;justify-content:space-around;max-width:-moz-fit-content;max-width:fit-content}.u-marquee__content>*{white-space:nowrap}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(calc(-100% - var(--marquee-gap)))}}.grid{bottom:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;justify-content:center;left:0;position:absolute;top:0;width:100%}.grid-lines{background:var(--color-black);height:100%;opacity:.25;width:1px}.meeting-content-bottom{border-bottom:4px solid var(--theme-color);bottom:0;display:flex;font-family:OPPOSans-Medium;height:79px;justify-content:center;left:0;position:absolute;text-align:center;width:100%}.meeting-content-bottom .in-world-btn-wrap{align-items:center;background:url(../img/svg/lakeme.svg) no-repeat 50%;bottom:-4px;display:flex;height:75px;justify-content:center;position:relative;transform-origin:bottom;width:750px}.meeting-content-bottom .in-world-btn{align-items:center;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-size:20px;height:50px;justify-content:center;margin-top:10px;width:165px}.image-icon{display:flex}.image-icon-span{background-position:50%;background-repeat:no-repeat;display:inline-block}.p-canvas-webgl{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.mid-larger{color:var(--color-white);font-size:var(--hc-xxl);text-align:center}.italicc{font-style:italic;position:relative}.italicc:before{background:linear-gradient(90deg,#fff,#f000ff);bottom:0;content:attr(data-text);height:100%;left:0;mix-blend-mode:multiply;pointer-events:none;position:absolute;right:0;top:0;width:300px;z-index:3}.section-info-wrap{margin-bottom:2rem}.holder{background-color:#000;border-radius:2rem;grid-area:see-hyper;padding:.1rem;position:relative;z-index:6}.project__headerb{border:1px solid #fff;border-radius:2rem;color:#fff;display:flex;height:410px;justify-content:space-between;margin:.5rem;position:relative}@media screen and (max-width:767px){.project__headerb{flex-direction:column}}.project__header__contentb{flex:1;justify-content:space-between;position:relative}.project__header__contentb,.project__header__linkb{display:flex;flex-direction:column;height:100%;padding:.5rem}.project__header__linkb{border:1px solid #fff;justify-content:flex-end;text-transform:uppercase;white-space:nowrap}.project__header__informationb{font-size:var(--hc-base);position:relative;text-transform:uppercase}.project__header__titleb{font-size:var(--hc-xl);padding-right:.25rem;text-transform:uppercase}.project__header__descriptionb{font-size:var(--hc-md);line-height:1.2;margin-top:auto;padding-right:.25rem}@media (min-width:769px){[data-gl-text][data-gl-text-active]{color:var(--color-white)}}.project__header__link__textb{display:inline-block;font-size:var(--hc-xxl);padding-right:1rem}@media screen and (min-width:768px){.project__header__contentb{padding:.5rem 2rem;position:relative}.project__header__linkb{border-bottom-right-radius:29px;border-top-right-radius:29px}}.btn{margin:0 var(--gutter) 0 0;transform:translateY(150%);width:225px}.btn,.menu-item a{background:0 0;border-radius:clamp(25px,1.7361111111vw,33.3333333333px);line-height:clamp(44px,3.4722222222vw,66.6666666667px);overflow:hidden;position:relative;transform:translateZ(0)}.flexCE{align-items:center}.flexSB{justify-content:space-between}.flex{display:flex;flex-wrap:wrap}button{cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:left}body,button{color:#181818}.btn .mot,.menu-item a .mot{flex:0 0 100%;padding:0 0 0 var(--paddSmall)}a,body,div,p,span{user-select:text!important}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;appearance:none;-moz-appearance:none;-webkit-appearance:none;border:0;box-sizing:border-box;outline:0;position:relative;text-rendering:optimizeLegibility}.btn .mot span,.menu-item a .mot span{display:block;transition:.15s}@media (max-width:1270px){.btn .icon,.menu-item a .icon{width:54px}}.btn .icon,.menu-item a .icon{align-items:center;display:flex;height:clamp(44px,3.4722222222vw,66.6666666667px);justify-content:center;padding:0 10px 0 0;position:absolute;right:0;top:0;width:57px}.btn .icon,.btn .mot,.menu-item a .icon,.menu-item a .mot{background:#fff;border-radius:clamp(25px,1.7361111111vw,33.3333333333px);transition:.15s}.btn .icon svg,.menu-item a .icon svg{height:auto;width:clamp(24px,1.875vw,36px)}@media screen and (min-width:768px){.btn:hover .mot,.menu-item a:hover .mot{transform:translateX(calc(-44px - var(--gutter)))}}@media screen and (max-width:768px){.btn:hover .mot,.menu-item a:hover .mot{transform:translate(calc(-3.47vw - var(--gutter)))}}@media screen and (min-width:768px){.btn:hover .icon,.menu-item a:hover .icon{transform:translateX(10px)}}@media screen and (min-width:768px) and (max-width:1270px){.btn:hover .mot span,.menu-item a:hover .mot span,.ping{transform:translate(calc(44px + var(--gutter)))}}@media screen and (min-width:768px){.btn:hover .mot span,.menu-item a:hover .mot span,.ping{transform:translate(calc(3.47vw + var(--gutter)))}.smooth-button-wrapper{padding:2rem 0;scale:1.6}}.smooth-button-wrapper{background:var(--stick-black);display:flex;justify-content:center}.footer-cta_list{grid-column-gap:1rem;grid-row-gap:1rem;align-items:center;display:flex;justify-content:center;padding:2rem 0}.icon-text-wrap{grid-column-gap:.5rem;grid-row-gap:.5rem;align-items:flex-start;display:flex;justify-content:flex-start}.icon-text_text{color:var(--color-white);font-size:.875rem;line-height:1.45;transform:translateY(2px)}.icon-text_icon-svg{color:#ef53fa;height:1.5rem;width:1.5rem}@media screen and (max-width:479px){.footer-cta_list{align-items:start;display:flex;flex-flow:column;justify-content:center;padding:2rem}}.ping{display:inline-flex;gap:10px;left:-15px}.ping-video{background:url(../img/22.gif);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;height:2rem;margin:auto;position:relative;width:2rem}
\ No newline at end of file
+*,:after,:before{box-sizing:border-box}:root{font-size:15px;--screen-width:calc(100vw - 7px);--gutter:5px;--paddSmall:25px}html{overflow-x:hidden;overflow-y:scroll}body{margin:0;--color-black:#000;--color-white:#fff;--color-bg:#ebebeb;--color-biege:#e3dacd;--stick-black:#000;--stick-white:#fff;--hero-font:8vw;--hero-sub-font:1.3rem;--size-submain:3rem;--size-2rem:2rem;--theme-color:#d29dd2;--email-font:8vw;--font-1:grotesk-diamond;--font-2:LA-LUXE;--font-3:grotesk;background-color:var(--color-bg);color:var(--color-black);font-family:var(--font-1),sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:max-content;overflow:hidden;text-rendering:optimizeSpeed;--hc-sm:clamp(0.7rem,0.35vi + 0.61rem,0.89rem);--hc-base:clamp(0.88rem,0.57vi + 0.73rem,1.19rem);--hc-md:clamp(1.09rem,0.89vi + 0.87rem,1.58rem);--hc-lg:clamp(1.37rem,1.35vi + 1.03rem,2.11rem);--hc-xl:clamp(1.71rem,2.01vi + 1.21rem,2.81rem);--hc-xxl:clamp(2.14rem,2.93vi + 1.4rem,3.75rem);--hc-xxxl:clamp(2.67rem,4.23vi + 1.61rem,5rem)}.dark-mode{--color-black:#fff!important;--color-white:#000!important;--color-bg:#000!important;--color-biege:#fff!important}@font-face{font-display:swap;font-family:LA-LUXE;src:url(../fonts/BricolageGrotesque.woff2) format("woff2")}@font-face{font-display:swap;font-family:AdornScript;src:url(../fonts/AdornStoryScript.woff) format("woff")}a{color:var(--color-black);text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid #fff}.hover-line{display:inline-block;overflow:hidden;position:relative;white-space:nowrap}.hover-line:before{background:currentColor;content:"";height:1px;position:absolute;top:92%;transform-origin:0 50%;transition:transform .3s;width:100%}.hover-line:hover:before{transform:scaleX(0);transform-origin:100% 50%}.hidden{display:none}main{grid-template-columns:100%;grid-template-rows:100svh}.frame,main{display:grid}.frame{align-content:space-between;align-items:center;font-size:1rem;grid-area:1/1/2/2;grid-template-areas:"author dropdown dropdown ... " "linehead linehead linehead linehead" "... ... ... ..." "links links links links" "title title title title";grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto 1fr auto;height:100svh;padding:1rem 1rem .5rem;pointer-events:none;z-index:10}.frame--menu-open{color:var(--color-black)}.frame__title{font-size:inherit;font-weight:400;grid-area:title;justify-self:center;margin:.5rem 0 0}.frame__links{align-self:end;display:flex;flex-wrap:wrap;grid-area:links;justify-self:center}.frame__links a{margin:0 .5rem}.frame__author{font-family:var(--font-1);font-size:.9rem;font-weight:900;grid-area:author;margin:0}.frame__button{grid-area:dropdown;justify-self:center}.frame--menu-open .frame__author{opacity:0;pointer-events:none}.menu-is-open{height:100svh;overflow:hidden}.frame__contact{display:grid;font-family:var(--font-1);font-size:.9rem;grid-column:1/1;grid-template-columns:1fr 14px;justify-self:end;grid-column-gap:3px;align-items:center;cursor:pointer;font-weight:900;padding-bottom:4px;padding-right:10px}.scroll-now{align-items:center;display:flex;grid-column:1/1;grid-row:7/8;justify-content:center}.scroll-now svg{transform:scale(3) rotate(135deg)}.frame--menu-open .frame__heading-sub{opacity:0;pointer-events:none}.frame a,.frame button{pointer-events:auto}.button-menu{cursor:pointer;display:inline-grid;place-items:center}.button-menu svg{transition:transform .5s ease}.button-menu:focus-visible,.button-menu:hover{fill:var(--color-black)}.button-menu:hover svg{transform:scale(1.1)}.frame--menu-open .button-menu{opacity:0;pointer-events:none}.content-hero{display:grid;grid-area:1/1/2/2;grid-template-columns:1fr;grid-template-rows:40px 1fr 1fr 1fr 1fr 1fr 1fr;height:100svh;position:relative;width:100vw;z-index:2}.portfolio-map{display:grid;height:fit-content;padding-right:30px;position:fixed;right:0;top:50px;width:max-content;z-index:4}.portfolio-map ul{color:var(--color-black);display:flex;flex-direction:column;font-family:inherit;font-size:12px;list-style:none;padding:0;text-align:right;width:fit-content}.portfolio-map a{color:var(--color-black);cursor:pointer;text-rendering:optimizeSpeed}.content__l1{cursor:default;display:grid;font-weight:600;grid-column:auto;grid-row:2/4;grid-template-columns:20vw 1fr 1fr;line-height:.75;text-align:center}.l1__left{align-items:center;display:flex;font-family:var(--font-2);font-size:var(--hero-font);grid-column:2/3;justify-content:flex-end;padding-right:30px}.l1__right{display:flex;flex-direction:column;font-size:1.5vw;grid-column:3/4;place-content:space-evenly;align-content:flex-start;flex-wrap:wrap;text-align:left}.content__l2{display:grid;font-weight:600;grid-column:auto;grid-row:4/5;grid-template-columns:1fr 2fr;will-change:opacity,transform}.l2__left{align-items:flex-end;display:flex;flex-direction:row;font-size:1rem;place-content:center;width:100}.l2__right{align-items:center;display:grid;font-family:var(--font-2);font-size:var(--hero-font);justify-content:start;text-align:left}.rotatework{align-items:center;animation:rotatearound 15s linear infinite;display:flex;justify-content:center;width:12vh}.rotatework svg{height:12vh}@keyframes rotatearound{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.content__l3{display:grid;grid-column:auto;grid-row:5/6;grid-template-columns:2fr 3fr;will-change:opacity,transform}.l3__left{align-content:center;display:flex;flex-wrap:wrap;font-stretch:condensed;justify-content:end;padding-right:10px}.l3__right{display:flex;flex-direction:column;font-family:var(--font-1);font-size:var(--hero-sub-font);justify-content:center;text-align:left;word-break:break-word}.content__l4{display:grid;font-size:var(--hero-font);font-weight:600;grid-column:auto;grid-row:6/7;grid-template-columns:2fr 1fr}.l4__right{align-items:center;display:flex}.l4__right .div{background:url(../img/works/0763.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:100px;display:grid;height:80%;width:40%}.l4__left{align-items:center;display:flex;font-family:var(--font-2);font-size:var(--hero-font);justify-content:end;padding:0 30px;text-align:left}.button-enter{cursor:not-allowed;margin-top:4vh;transition:transform .5s ease}.button-enter:hover{transform:translateX(15px) rotate(-40deg)}.menu-wrap{background:var(--color-bg);display:grid;grid-area:1/1/2/2;grid-template-columns:100%;grid-template-rows:100svh;opacity:0;pointer-events:none;position:relative;z-index:11}.menu-wrap.menu-wrap--open{opacity:1;pointer-events:auto}.overlay{grid-area:1/1/2/2;height:100%;pointer-events:none;position:relative;width:100%;z-index:1000}.tiles{display:flex;flex-direction:column;height:150vh;justify-content:center;left:50%;opacity:.5;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(22.5deg)}.tiles__line{animation:runner 10s linear infinite;display:flex;transform:translateX(25%)}.tiles__line:nth-child(2){animation-duration:16s}.tiles__line:nth-child(3){animation-duration:22s}@keyframes runner{to{transform:translateX(-25%)}}.tiles__line-img{--tile-margin:3vw;background-position:50% 50%;background-size:cover;border-radius:50%;flex:none;height:30vh;margin:var(--tile-margin);width:30vh}.tiles__line-img--large{border-radius:20vh;width:100svh}.button-close{margin:1rem 2rem!important;position:absolute;right:calc(50vw - 60px);top:0;stroke:var(--color-black);fill:none;cursor:pointer}.button-close:focus-visible,.button-close:hover{fill:var(--color-black)}.frame__line{background-color:#374b41;display:grid;grid-area:linehead;height:2px;width:100%}@media screen and (min-width:53em){.frame{font-size:1.5rem;grid-template-areas:"author dropdown contactme" "linehead linehead linehead " "... ... ..." "title links links";grid-template-columns:390px 1fr 390px}.frame__title{align-self:end;justify-self:start;margin:0 3rem 0 0}.frame__links{display:flex;justify-self:start;padding:0}.frame__links a:not(:last-child){margin-right:.5rem}.frame__heading-main{font-size:2.15rem}.frame__heading-sub{font-size:1rem}.menu__item-tiny{font-size:2rem}}.icon--menuUzi{height:20px;width:40px}@media screen and (min-width:768px){::-webkit-scrollbar{height:100%;opacity:0;position:absolute;right:0;top:0;transform-origin:center right;transition:transform .3s,opacity .3s;width:7px}::-webkit-scrollbar-thumb{background-color:#585858;border-radius:10px;cursor:-webkit-grab;cursor:grab;margin:2px;opacity:.5;position:absolute;right:0;top:0;width:7px}::-webkit-scrollbar-track{width:10px}}.intro-port{background-color:var(--color-bg);display:grid;grid-template-columns:2fr 1fr;grid-template-rows:10vh 30vh 1fr 1fr;max-height:fit-content;min-height:100svh;padding:20vh 0 2vh;position:relative;transition:all .3s linear;width:100vw;z-index:2;grid-row-gap:20px;border-bottom:.052vw solid var(--color-black)}.designer-image{grid-area:designer-image}.designer-image svg{height:30vw}.designer-desc{grid-area:designer-desc;padding:0 40px}.proof-experience{align-items:center;display:grid;grid-area:proof-experience;grid-template-columns:repeat(3,1fr);padding:40px 0;position:relative}.years-xp{display:flex;flex-direction:column}.xp-head{font-size:13vw;text-align:center}.xp-footer{font-size:2vw;text-align:center}.more-xp,.projects-xp{display:flex;flex-direction:column}.tomato{color:#c35ec3}.hero-section{background-color:var(--color-bg);position:relative;z-index:2}.google-eyes{height:100px;position:absolute;right:0;top:10px;width:100px}.eyes-cont{align-items:center;background-color:var(--color-white);border-radius:50%;display:flex;height:100%;justify-content:center;width:100%}.slide{align-items:stretch;background-color:var(--color-black);display:flex;height:100svh;overflow:hidden;position:relative;transition-duration:.3s;z-index:5}.we-talk{display:grid;grid-template-rows:1fr 1fr;height:100%;width:100%}.talk-now{align-content:end;color:var(--color-white);display:grid;font-size:11vw;grid-row:1/2;text-align:center}.reach-out{align-items:center;display:grid;grid-row:2/3;justify-content:center}.button-r{border:none;color:var(--color-white);cursor:pointer;display:inline-block;font-family:inherit;font-size:15px;margin:0;padding:1.5rem 3rem;pointer-events:auto;position:relative;transform:scale(2.5) translateY(-20px)}@media screen and (max-width:767px){:root{--screen-width:100vw}.project__header__linkb{border-bottom-left-radius:29px;border-bottom-right-radius:29px}.project__header__link__textb{text-align:center}.mid-larger{font-size:var(--hc-xl)!important;line-height:2.5rem!important}.button-r.button--fenrir{transform:scale(1.5)}.work-areas-spans span{padding:.2rem 1rem;text-transform:uppercase}body{--hero-font:8vw;--hero-sub-font:0.7rem;--size-submain:1.9rem}.l3__left svg{height:40px}.content__l3{grid-template-columns:1fr 4fr}.l4__right .div{height:73%;width:54%}.content__l1{display:grid;grid-template-columns:8vw 1fr 1fr}.l1__right{font-size:var(--hero-sub-font)}.dev-header{text-align:center}}.button--fenrir{background:none;-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);font-family:var(--font-1),sans-serif;font-size:.85rem;font-weight:700;height:120px;padding:0;text-transform:uppercase;width:120px}.button--fenrir span{color:var(--color-bg);font-size:6px}.progress-p{background-color:transparent;border:none;height:80px;left:calc(50% - 40px);position:absolute;top:calc(50% - 40px);transition:transform .4s cubic-bezier(.7,0,.3,1);width:80px}.button--fenrir:hover .progress-p{transform:scale3d(1.2,1.2,1)}.progress__circle,.progress__path{fill:none;stroke:#b8b6b654;stroke-width:1px}.button--fenrir:focus-visible .progress__circle{fill:rgba(252,196,63,.4)}.progress__path{stroke:var(--color-white);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s cubic-bezier(.7,0,.3,1)}.button--fenrir:hover .progress__path{stroke-dashoffset:0}.cross-svg{height:100px;top:0;width:100px}.cross-svg,.socials-loww{background-color:transparent;left:0;position:absolute}.socials-loww{border-top:1px solid var(--color-white);bottom:0;height:50px;width:100%}.hs-social-link{align-items:center;border:1px solid var(--color-bg);border-radius:50%;color:var(--color-white);display:flex;font-size:16px;height:30px;justify-content:center;margin-top:8px;text-decoration:none;transition:all .27s ease-out;width:30px}.me-1{margin-right:.25rem}.d-inline-flex{display:inline-flex}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.uzi-icons-y svg{height:14px;transform:rotateY(180deg) rotate(180deg)}.uzi-icons-y svg,.uzi-icons-y svg path{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hs-social-link:hover{background:var(--color-white);text-decoration:none}.hs-social-link:hover .uzi-icons-y svg path,.inverse-socials .uzi-icons-y svg path{fill:var(--color-black)}.intro-port-menu{display:grid;font-size:.67rem;font-weight:700;grid-area:intro-port-menu;grid-template-columns:repeat(3,1fr) 100px;grid-template-rows:1fr;line-height:1.3;padding:0 10px;position:relative;text-transform:uppercase}.top-border{top:0;will-change:transform,opacity}.bottom-border,.top-border{background-color:var(--color-black);height:.052vw;left:0;margin:0;opacity:1;position:absolute;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}.bottom-border{bottom:0;will-change:transform}.dim-header{color:#5d5b5d;padding:5px 0}.frame__line__low{background-color:#374b41;display:grid;grid-column:auto;grid-row:8/9;height:.052vw;width:100%}.guide-line{background-color:var(--color-black);height:15.5vh;left:0;margin:0 auto;position:absolute;right:0;top:-15.5vh;width:.052vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);will-change:transform}.-blink{animation:blink 1s steps(1) infinite backwards;transform:scale(.5)}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}.status{display:inline-flex}.signature{display:grid;font-family:AdornScript;font-size:3rem;font-weight:600;grid-column:4/5;text-align:center;text-transform:lowercase}@media screen and (min-width:512px) and (max-width:767px){.intro-port-menu{grid-template-columns:1fr 1fr 1fr}.signature.s1{display:none}}@media screen and (max-width:511px){.intro-port-menu{grid-template-columns:1fr 1fr}.lets-connect{display:none}.cross-svg,.google-eyes{transform:scale(.6)}.signature.s1{display:none}.dev-header{font-size:1.2rem;text-align:left}.section__header{padding:0!important}.design-areas{display:flex;flex-direction:column;font-size:var(--size-submain)}}@media screen and (max-width:375px){.design-areas{flex-direction:row;padding:0 0 20px}}.footer{align-content:center;background-color:var(--theme-color);bottom:0;display:grid;grid-template-areas:"uzitrake uzitrake uzitrake" "uzitrake uzitrake uzitrake" "copyright year available";grid-template-columns:repeat(3,1fr);grid-template-rows:30px 1fr 30px;justify-items:center;min-height:40vh;position:fixed;transform:translateZ(0);transition:all .3s ease-in-out;width:100%;z-index:1}.copyright-footer{grid-area:copyright}.copyright-footer,.year-footer{align-items:center;color:var(--stick-black);display:grid;font-size:.7rem;justify-content:center}.year-footer{grid-area:year}.footer-author svg{color:var(--stick-black);height:13vw;width:6vw}.available-y{align-items:center;color:var(--stick-black);display:flex;font-size:.7rem;grid-area:available;justify-content:center}.footer-low-line{background:var(--color-black);grid-column:1/4;grid-row:3/4;height:.052vw;position:relative;width:100vw}.button-menu{fill:var(--color-black)}.cross-svg path{stroke:var(--color-white)}.uzi-icons-y path{stroke:var(--color-black);fill:var(--color-white)}.socials-loww .other-links{display:flex;justify-content:center}@media screen and (max-width:768px){.project{font-size:17px!important;left:31vw!important}.gallery__item{height:78px;width:60px}}.project{color:var(--color-white);font-size:30px;left:40vw;position:absolute;top:20%}.uzi-icons-y{align-items:center;display:flex;text-rendering:geometricPrecision}@media (max-width:400px){.footer{grid-template-areas:"uzitrake uzitrake " "uzitrake uzitrake " "copyright year ";grid-template-columns:repeat(2,1fr);grid-template-rows:30px 1fr 30px}.menu__item-title{font-size:9.5vw!important}}.content__text img{height:400px;object-fit:cover;object-position:center center;width:600px}.work-areas{display:grid;grid-area:work-areas;grid-template-columns:1fr;min-height:40vh;padding:20px 40px;grid-column-gap:10px;border-top:.052vw solid}.dev-header{font-family:inherit;font-size:var(--size-submain)}.dev-subheader{font-family:inherit;font-size:2rem;text-align:center}.work-areas-spans{display:flex;flex-wrap:wrap;grid-template-columns:auto;grid-column-gap:10px}.work-areas-spans span{align-items:center;border:1px solid var(--color-black);border-radius:25px;display:flex;margin:.4rem 0;max-height:44px;padding:.2rem 2rem;text-align:center;text-transform:uppercase;width:fit-content}.intro-port{grid-template-areas:"intro-port-menu intro-port-menu" "designer-desc designer-image" "designer-desc designer-image" "work-areas work-areas" "proof-experience proof-experience"}.design-areas{font-size:var(--size-submain)}.tag{align-items:center;border-radius:35px;display:flex;font-size:16px;justify-content:center;margin-left:auto;margin-right:auto;padding:.7rem 1rem .5rem;position:absolute;right:22%;transform:rotate(-5deg);width:fit-content;z-index:2}.latest-tag img{height:78px;width:auto}.size-sm{font-family:var(--font-2);font-size:1.5rem}.works-svg svg{height:3rem}.dev-forlio{display:grid;font-size:var(--size-submain);grid-template-columns:1fr 1fr 1fr;margin-bottom:15vh;position:relative}.spacing-arrow-inner{background-color:#5d5b5d;height:8px;width:80%}.spacing-arrow{align-items:center;display:flex;justify-content:center;position:relative}.italic{font-style:italic}.starsvg{left:-10px;position:absolute;top:20%}.head-desc{padding-top:30px}@media screen and (max-width:767px){.intro-port{grid-template-areas:"intro-port-menu" "designer-desc" "designer-image " "work-areas " "proof-experience ";grid-template-rows:auto}.dev-forlio,.intro-port{display:grid;grid-template-columns:1fr}.dev-forlio{font-size:var(--size-submain);grid-template-rows:1fr 1fr 1fr;margin-bottom:10vh;padding-left:28px;position:relative}.designer-desc{padding:0 20px}.designer-image{align-items:center;display:grid;grid-area:designer-image;justify-content:center}.head-desc{padding-top:30px;text-align:center}.designer-desc{grid-area:designer-desc;padding:8vh 20px}.tag{padding:.3rem .5rem}.empty{z-index:1!important}}.stick-fill:hover{background:#000;background-position:100%;color:#fff;transition:background-position .5s ease}.more-work{display:grid;grid-template-areas:"greatwork morework logowork";grid-template-columns:100px 1fr 30px;height:fit-content;max-height:50svh;max-width:100vw}.where-morework{align-items:center;display:flex;font-size:var(--size-submain);grid-area:morework;justify-content:center;position:relative}.logo-work{align-content:center;display:grid;grid-area:logowork;justify-self:end}.great-work{grid-area:greatwork}.free-time{background-color:var(--stick-black);border-top-left-radius:2rem;border-top-right-radius:2rem;display:grid;grid-template-areas:"hola-wrapper" "..." "see-hyper ";grid-template-columns:repeat(3,1fr);grid-template-rows:32px 20px auto;height:fit-content;min-height:100svh;position:relative;width:var(--screen-width);z-index:4}.free-time .med-left,.free-time .med-right{position:absolute;width:2rem}.free-time .med-right{right:0;transform:rotate(90deg)}.hola-wrapper{border-top:1px solid var(--color-link-hover);border-top-left-radius:35px;border-top-right-radius:35px;grid-area:hola-wrapper;height:max-content;overflow:visible;width:var(--screen-width)}.hola-wrapper,.lets-you{align-items:center;background-color:var(--stick-black);display:flex;justify-content:center}.lets-you{border-radius:2rem;transform:translateY(-50%);width:41%}.same-you{color:var(--stick-white);font-size:1.1rem}.yoyo-main{display:flex;grid-area:yoyo}.yoyo{color:var(--color-white);display:flex;width:100%}.yoyo,.yoyo-headline{font-size:var(--hero-font);justify-content:center}.yoyo-headline{align-items:center;color:var(--stick-black);display:inline-flex;position:relative}@media (min-width:812px){.yoyo-headline:before{height:22vw;left:calc(-2vw - 1px);width:26vw}}.yoyo-background{height:100%;left:0;position:absolute;scale:1.3;top:0;width:100%}.arrow-below{display:flex;grid-column:1/4;grid-row:3/4;justify-content:center;width:100%}.arrow-below svg{height:9rem;width:7rem}.decoration{left:10px;position:absolute;top:0;width:10.8rem}.image-collab{display:flex;grid-column:1/4;grid-row:4/5;height:140px;justify-content:center}.image-collab img{height:100%;height:140px;width:auto}.mail-wrapper{display:flex;grid-column:1/4;grid-row:5/6;height:fit-content;justify-content:center;padding:10px 0;width:100%}.mail-box{color:var(--stick-black);font-size:var(--size-2rem);overflow:hidden;width:fit-content}.email-wrapper{display:flex;grid-column:1/4;grid-row:6/7;height:fit-content;justify-content:center;padding:10px 0}.email-box{background-color:var(--color-white);border:2px solid var(--color-black);border-radius:135px;color:var(--stick-black);cursor:pointer;font-size:calc(var(--email-font) - 3vw);padding:1rem 2rem;position:relative;width:fit-content}.email-itself{color:var(--color-bg)}.this-email{height:77%;position:absolute;right:-13%;top:10%;width:auto}.this-email svg{height:100%;width:auto}.this-socials{align-items:center;display:flex;grid-column:1/4;grid-row:7/8;height:fit-content;justify-content:center;padding:10vh 0;position:relative;text-align:center}.this-socials-text{color:var(--color-white);font-size:var(--size-2rem);text-transform:uppercase}.copy-page__toggle-button{left:-18%;position:absolute;top:6px;transform:rotate(305deg)}@media screen and (max-width:767px){.copy-page__toggle-button{display:none}}@media (max-width:1919px){.toggle-button{height:8.3rem;width:9.5rem}}.toggle-button{all:unset;cursor:pointer;display:block;height:6rem;position:relative;width:6.5rem;--toggle-transition:0.5s ease-in-out}.email-box button,.toggle-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.email-box button{margin:-.4rem;padding:.4rem}.toggle-button__label,.toggle-button__label:after{display:block;position:absolute;transition:var(--page-transition)}.toggle-button__label{border:1px solid var(--color-black);border-radius:25px;color:var(--bg-color-content);font-weight:var(--font-light);padding:3px 9px 0 11px;transform-origin:right center;width:fit-content}.email-box:hover .toggle-button__star{animation:rotatearound 2s linear}.toggle-button__label-1{bottom:0;left:0}.toggle-button__label-2{bottom:0;right:0;transform:rotate(40deg) translateX(-3.4rem)}@media (max-width:1919px){.p1,.p1-italic{font-size:1.4rem}}.p1,.p1-italic{font-family:inherit;font-size:1.2rem;font-weight:300;letter-spacing:.015em;line-height:1.7}@media (max-width:1919px){.toggle-button__label[data-v-2d76716c]:after{height:2.5rem;left:2px;top:3px;width:6.1rem}}.toggle-button__label[data-v-2d76716c]:after{border:1px solid var(--bg-color-content);border-radius:3rem;content:"";height:3rem;left:0;top:4px;width:7.7rem}.toggle-button__label[data-v-2d76716c],.toggle-button__label[data-v-2d76716c]:after{display:block;position:absolute;transition:var(--page-transition)}.toggle-button__label[data-v-2d76716c]{bottom:0;color:var(--bg-color-content);font-weight:var(--font-light);padding:3px 9px 0 11px;right:0;transform-origin:right center}@media (max-width:1919px){.toggle-button__star[data-v-2d76716c]{height:26px;width:26px}}.toggle-button__star[data-v-2d76716c]{bottom:0;position:absolute;right:0}.empty{border-bottom-left-radius:2rem;border-bottom-right-radius:2rem;height:40vh;position:relative;z-index:4}.wiggle-wrapper{background-color:var(--theme-color)}.wiggle{background:var(--stick-black);background-position:top;background-repeat:no-repeat;background-size:cover;height:fit-content;overflow:hidden;z-index:6;grid-row-gap:30px;border-bottom-left-radius:2rem;border-bottom-right-radius:2rem;padding-bottom:1rem}.wiggle-svg{background:var(--stick-white);border-radius:29px;grid-column:1/4;grid-row:1/6;margin:auto;position:relative;width:100%;width:calc(100vw - 26px);z-index:5}.wiggle-star-wrapper{align-items:center;background:transparent;color:var(--color-bg);display:flex;grid-area:starsvg;justify-content:center;z-index:6}.wiggle-star{height:auto;width:70px;fill:var(--color-bg);stroke:var(--color-bg)}.wiggle-star svg{height:auto;width:100px}.uzi-n-u{align-items:top;display:flex;grid-area:uziyou;height:max-content;justify-content:center;z-index:5}.u-n-uzi{color:var(--color-bg);font-family:inherit;font-size:var(--email-font)}@media screen and (max-width:767px){.wiggle{display:grid}#logo-36{width:40px}.great-work img{width:82px}.more-work{grid-template-areas:"greatwork morework logowork";grid-template-columns:82px 1fr 30px;margin:0 -20px}.lets-you{width:75%}.lets-make img{height:30px!important}}@media screen and (max-width:425px){.socials-spans{flex-direction:column;justify-self:center;width:fit-content}.socials-spans span{padding:11px 22px}.intro__button{height:52px!important;width:52px!important}.wiggle{display:grid}.yoyo,.yoyo-headline{font-size:calc(var(--size-2rem) + 5vw)}.this-email{height:57%!important}}.wiggle-socials{display:flex}.wiggle-socials svg{align-self:center;height:30px;justify-self:center}.black-div{background-color:var(--color-black);grid-area:empty;z-index:5}.lets-make{color:var(--color-bg);font-size:var(--email-font);grid-area:letsmake;z-index:6}.intro__button,.lets-make{align-items:center;display:flex;justify-content:center;position:relative}.intro__button{background:var(--stick-white);border:1px solid var(--color-black);border-radius:50%;box-shadow:-3px -2px 0 var(--stick-black);cursor:pointer;height:77px;justify-self:center;margin-top:1rem;width:76px}.intro__button-svg{width:60%}.intro__button:hover{box-shadow:0 0 0 var(--color-bg);transform:translate3d(1px,2px,0)}.social-buttons{display:flex;gap:20px;grid-area:buttons;height:max-content;justify-content:center;padding:20px 0;z-index:6}.app-footer__marquee{backdrop-filter:blur(4px);color:var(--color-black);font-size:calc(.8925rem + 6.43571vw);font-weight:400;padding:.25em 0;white-space:nowrap;--marquee-animation-duration:40s;font-family:var(--font-2)}.u-marquee{--marquee-gap:1ch;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.u-marquee,.u-marquee__content{align-items:center;display:flex;gap:var(--marquee-gap)}.u-marquee__content{animation:marquee var(--marquee-animation-duration) linear infinite;flex-shrink:0;justify-content:space-around;max-width:-moz-fit-content;max-width:fit-content}.u-marquee__content>*{white-space:nowrap}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(calc(-100% - var(--marquee-gap)))}}.grid{bottom:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;justify-content:center;left:0;position:absolute;top:0;width:100%}.grid-lines{background:var(--color-black);height:100%;opacity:.25;width:1px}.meeting-content-bottom{border-bottom:4px solid var(--theme-color);bottom:0;display:flex;font-family:OPPOSans-Medium;height:79px;justify-content:center;left:0;position:absolute;text-align:center;width:100%}.meeting-content-bottom .in-world-btn-wrap{align-items:center;background:url(../img/svg/lakeme.svg) no-repeat 50%;bottom:-4px;display:flex;height:75px;justify-content:center;position:relative;transform-origin:bottom;width:750px}.meeting-content-bottom .in-world-btn{align-items:center;color:#fff;cursor:pointer;display:flex;flex-direction:column;font-size:20px;height:50px;justify-content:center;margin-top:10px;width:165px}.image-icon{display:flex}.image-icon-span{background-position:50%;background-repeat:no-repeat;display:inline-block}.p-canvas-webgl{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.mid-larger{color:var(--stick-white);font-size:var(--hc-xxl);text-align:center}.italicc{font-style:italic;position:relative}.italicc:before{background:linear-gradient(90deg,#fff,#f000ff);bottom:0;content:attr(data-text);height:100%;left:0;mix-blend-mode:multiply;pointer-events:none;position:absolute;right:0;top:0;width:300px;z-index:3}.section-info-wrap{margin-bottom:2rem}.holder{background-color:#000;border-radius:2rem;grid-area:see-hyper;padding:.1rem;position:relative;z-index:6}.project__headerb{border:1px solid #fff;border-radius:2rem;color:#fff;display:flex;height:410px;justify-content:space-between;margin:.5rem;position:relative}@media screen and (max-width:767px){.project__headerb{flex-direction:column}}.project__header__contentb{flex:1;justify-content:space-between;position:relative}.project__header__contentb,.project__header__linkb{display:flex;flex-direction:column;height:100%;padding:.5rem}.project__header__linkb{border:1px solid #fff;justify-content:flex-end;text-transform:uppercase;white-space:nowrap}.project__header__informationb{font-size:var(--hc-base);position:relative;text-transform:uppercase}.project__header__titleb{font-size:var(--hc-xl);padding-right:.25rem;text-transform:uppercase}.project__header__descriptionb{font-size:var(--hc-md);line-height:1.2;margin-top:auto;padding-right:.25rem}@media (min-width:769px){[data-gl-text][data-gl-text-active]{color:var(--stick-white)}}.project__header__link__textb{display:inline-block;font-size:var(--hc-xxl);padding-right:1rem}@media screen and (min-width:768px){.project__header__contentb{padding:.5rem 2rem;position:relative}.project__header__linkb{border-bottom-right-radius:29px;border-top-right-radius:29px}}.btn{margin:0 var(--gutter) 0 0;transform:translateY(150%);width:225px}.btn,.menu-item a{background:0 0;border-radius:clamp(25px,1.7361111111vw,33.3333333333px);line-height:clamp(44px,3.4722222222vw,66.6666666667px);overflow:hidden;position:relative;transform:translateZ(0)}.flexCE{align-items:center}.flexSB{justify-content:space-between}.flex{display:flex;flex-wrap:wrap}button{cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:left}.btn .mot,.menu-item a .mot{flex:0 0 100%;padding:0 0 0 var(--paddSmall)}a,body,div,p,span{user-select:text!important}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;appearance:none;-moz-appearance:none;-webkit-appearance:none;border:0;box-sizing:border-box;outline:0;position:relative;text-rendering:optimizeLegibility}.btn .mot span,.menu-item a .mot span{display:block;transition:.15s}@media (max-width:1270px){.btn .icon,.menu-item a .icon{width:54px}}.btn .icon,.menu-item a .icon{align-items:center;display:flex;height:clamp(44px,3.4722222222vw,66.6666666667px);justify-content:center;padding:0 10px 0 0;position:absolute;right:0;top:0;width:57px}.btn .icon,.btn .mot,.menu-item a .icon,.menu-item a .mot{background:#fff;border-radius:clamp(25px,1.7361111111vw,33.3333333333px);transition:.15s}.btn .icon svg,.menu-item a .icon svg{height:auto;width:clamp(24px,1.875vw,36px)}@media screen and (min-width:768px){.btn:hover .mot,.menu-item a:hover .mot{transform:translateX(calc(-44px - var(--gutter)))}}@media screen and (max-width:768px){.btn:hover .mot,.menu-item a:hover .mot{transform:translate(calc(-3.47vw - var(--gutter)))}}@media screen and (min-width:768px){.btn:hover .icon,.menu-item a:hover .icon{transform:translateX(10px)}}@media screen and (min-width:768px) and (max-width:1270px){.btn:hover .mot span,.menu-item a:hover .mot span,.ping{transform:translate(calc(44px + var(--gutter)))}}@media screen and (min-width:768px){.btn:hover .mot span,.menu-item a:hover .mot span,.ping{transform:translate(calc(3.47vw + var(--gutter)))}.smooth-button-wrapper{padding:2rem 0;scale:1.6}}.smooth-button-wrapper{background:var(--stick-black);display:flex;justify-content:center}.footer-cta_list{grid-column-gap:1rem;grid-row-gap:1rem;align-items:center;display:flex;justify-content:center;padding:2rem 0}.icon-text-wrap{grid-column-gap:.5rem;grid-row-gap:.5rem;align-items:flex-start;display:flex;justify-content:flex-start}.icon-text_text{color:var(--stick-white);font-size:.875rem;line-height:1.45;transform:translateY(2px)}.icon-text_icon-svg{color:#ef53fa;height:1.5rem;width:1.5rem}@media screen and (max-width:479px){.footer-cta_list{align-items:start;display:flex;flex-flow:column;justify-content:center;padding:2rem}}.ping{display:inline-flex;gap:10px;left:-15px}.ping-video{background:url(../img/22.gif);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;height:2rem;margin:auto;position:relative;width:2rem}@media screen and (max-width:767px){.vertical-centered-box .content{transform:scale(1.7)}.vertical-centered-box .loader-circle{transform:scale(1.2)}}@media screen and (min-width:768px){.vertical-centered-box .content{transform:scale(2.3)}.vertical-centered-box .loader-circle{transform:scale(1.6)}}.loader-circle{border-radius:50%;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.1);width:120px}.loader-circle,.loader-line-mask{height:120px;left:50%;margin-left:-60px;margin-top:-60px;position:absolute;top:50%}.loader-line-mask{animation:rotate 1.2s linear infinite;-webkit-mask-image:-webkit-linear-gradient(top,#000,transparent);overflow:hidden;transform-origin:60px 60px;width:60px}.loader-line-mask .loader-line{border-radius:50%;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.5);height:120px;width:120px}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.logo-loaded{height:30%;margin:auto;position:relative}.loadedlogo{display:flex;height:100%;width:100%;z-index:-1}.content{height:100vh;pointer-events:none;position:fixed;right:0;top:0;width:100%;z-index:2000}
\ No newline at end of file
diff --git a/public/css/preloader.css b/public/css/preloader.css
index 4f3048bb..f3d9d4aa 100644
--- a/public/css/preloader.css
+++ b/public/css/preloader.css
@@ -1 +1 @@
-@font-face{font-display:swap;font-family:grotesk;src:url(../fonts/overused-grotesk/OverusedGrotesk-Medium.woff) format("woff")}@font-face{font-display:swap;font-family:grotesk-diamond;src:url(../fonts/DiamondGrotesk.woff) format("woff")}.title-uzi{align-items:center;align-self:center;align-self:start;color:#d898d8;display:flex;font-family:grotesk-diamond,sans-serif;font-size:12vw;font-weight:600;grid-area:1/1/3/3;height:100vh;justify-content:center;justify-self:center;margin:0;pointer-events:none;position:relative;text-rendering:optimizeSpeed;text-transform:uppercase;width:100%;z-index:1}.preloader{bottom:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100vh;left:0;opacity:1;position:fixed;top:0;transform-origin:center;width:100vw;z-index:1000000}.noscroll{height:100vh;overflow:hidden}.gallery__item{display:grid;grid-template-areas:"gallery-image";grid-template-columns:100%;height:130px;margin:0;position:absolute;width:100px}.gallery__item-img{grid-area:gallery-image;overflow:hidden;position:relative;transform:translateZ(0);width:100%;will-change:transform,opacity}.gallery__item:first-of-type{left:10%;top:10%}.gallery__item:nth-of-type(2){right:10%;top:20%}.gallery__item:nth-of-type(3){bottom:20%;left:10%}.gallery__item:nth-of-type(4){bottom:10%;right:10%}.gallery__item-imginner{background-size:cover;height:100%}.overlay__row:first-child{grid-column:1/2;grid-row:1/2;transform-origin:0 100%}.overlay__row:nth-child(2){grid-column:2/3;grid-row:1/2;transform-origin:100% 0}.overlay__row{background:var(--color-black);position:relative;transform:scaleY(1);will-change:transform}.menu-image0{background-image:url(../img/works/22.jpg)!important;background-size:cover}.menu-image1{background-image:url(../img/works/12.jpg)!important;background-size:cover}.menu-image2{background-image:url(../img/works/13.jpg)!important;background-size:cover}.menu-image3{background-image:url(../img/works/16.jpg)!important;background-size:cover}.dark-toggle{stroke:var(--color-black);height:40px;width:65px}.knob{stroke:var(--color-white)}.footer-author{color:var(--stick-black);cursor:pointer;display:grid;font-display:swap;font-family:inherit;font-size:12vw;font-weight:100;grid-area:uzitrake;margin:0;position:relative;text-transform:uppercase;transform:translateZ(0)}
\ No newline at end of file
+@font-face{font-display:swap;font-family:grotesk;src:url(../fonts/overused-grotesk/OverusedGrotesk-Medium.woff) format("woff")}@font-face{font-display:swap;font-family:grotesk-diamond;src:url(../fonts/DiamondGrotesk.woff) format("woff")}.title-uzi{align-items:center;align-self:center;align-self:start;color:#d898d8;display:flex;font-family:grotesk-diamond,sans-serif;font-size:12vw;font-weight:600;grid-area:1/1/3/3;height:100vh;justify-content:center;justify-self:center;margin:0;pointer-events:none;position:relative;text-rendering:optimizeSpeed;text-transform:uppercase;width:100%;z-index:1}.preloader{bottom:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100vh;left:0;opacity:1;position:fixed;top:0;transform-origin:center;width:100vw;z-index:1000000}.noscroll{height:100vh;overflow:hidden}.gallery{position:static}.gallery__item{display:grid;grid-template-areas:"gallery-image";grid-template-columns:100%;height:130px;margin:0;position:absolute;width:100px}.gallery__item-img{grid-area:gallery-image;overflow:hidden;position:relative;transform:translateZ(0);width:100%;will-change:transform,opacity}.gallery__item:first-of-type{left:-50%;top:10%}.gallery__item:nth-of-type(2){right:-50%;top:20%}.gallery__item:nth-of-type(3){bottom:20%;left:-50%}.gallery__item:nth-of-type(4){bottom:10%;right:-50%}.gallery__item-imginner{background-size:cover;height:100%}.overlay__row:first-child{grid-column:1/2;grid-row:1/2;transform-origin:0 100%}.overlay__row:nth-child(2){grid-column:2/3;grid-row:1/2;transform-origin:100% 0}.overlay__row{background:var(--color-black);position:relative;transform:scaleY(1);will-change:transform}.menu-image0{background-image:url(../img/works/22.jpg)!important;background-size:cover}.menu-image1{background-image:url(../img/works/12.jpg)!important;background-size:cover}.menu-image2{background-image:url(../img/works/13.jpg)!important;background-size:cover}.menu-image3{background-image:url(../img/works/16.jpg)!important;background-size:cover}.dark-toggle{stroke:var(--color-black);height:40px;width:65px}.knob{stroke:var(--color-white)}.footer-author{color:var(--stick-black);cursor:pointer;display:grid;font-display:swap;font-family:inherit;font-size:12vw;font-weight:100;grid-area:uzitrake;margin:0;position:relative;text-transform:uppercase;transform:translateZ(0)}
\ No newline at end of file
diff --git a/public/css/works.css b/public/css/works.css
index eed80276..736223ae 100644
--- a/public/css/works.css
+++ b/public/css/works.css
@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}:root{font-size:16px}body{margin:0;--cursor-stroke:#000;--cursor-fill:none;--cursor-stroke-width:1px;--hot-tomato:#ff3227;font-weight:300;line-height:1;overflow-x:hidden}.oh{overflow:hidden}@media screen and (max-width:768px){html{overflow-x:hidden}}a{color:var(--color-link);text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid red}.unbutton{background:none;border:0;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}.works{background-color:var(--color-bg);padding:3rem 2rem;position:relative;z-index:3}.field-year-abibae{grid-area:abibae;padding-top:30px;text-align:center}.frame{position:relative}.heading{font-family:var(--font-1),sans-serif;font-size:6vw;font-size:clamp(2rem,6vw,5rem);font-weight:300;line-height:1.1}.heading .splitting .char,.heading .splitting .word{display:flex}.heading--item{display:flex;justify-content:center}.char-wrap{overflow:hidden;position:relative}.char,.char-wrap{display:inline-block}.char{will-change:transform}.heading>span{display:flex}.heading>span:first-child{font-size:clamp(2rem,8vw,9rem)}.heading>span:nth-child(2){margin-top:-2vw;text-transform:lowercase}.item{margin:15vh 0 20vh}.items{counter-reset:projectcounter}.content__imgwrap,.item__imgwrap{align-items:center;border-radius:40px;display:flex;min-height:325px;overflow:hidden;width:100%;will-change:transform}.content__img,.item__img{background-position:50% 50%;background-size:cover;height:100%;min-height:325px;width:100%;will-change:transform}.item__meta{font-size:.67rem;font-weight:500;line-height:1.3;margin:.85rem 0 2rem;overflow:hidden;text-transform:uppercase}.item__meta-row{display:block;overflow:hidden;position:relative}.item__meta-row span{display:block;will-change:transform}.item__enter{display:none;will-change:transform}.item__enter-circle{fill:none;stroke:var(--color-black);stroke-width:1px;will-change:transform,opacity}.item__excerpt{align-content:center;display:grid;justify-content:center;line-height:1.2;will-change:transform}.item__excerpt-link{color:var(--color-black);cursor:pointer;display:inline-block;font-weight:500;line-height:1;overflow:hidden;position:relative}.item__excerpt-link span{display:inline-block;padding-bottom:10px;position:relative}.item__excerpt-link span:after{background:var(--color-black);content:"";height:2px;left:0;position:absolute;top:calc(100% - 10px);transform-origin:100% 0;transition:transform .2s;width:100%}.item__excerpt-link span:hover:after{transform:scaleX(0)}.content{height:100vh;pointer-events:none;position:fixed;right:0;top:0;width:100%;z-index:2000}.content .heading{font-size:10vw;font-size:clamp(2rem,10vw,6rem);margin-bottom:5rem}.content .heading>span:first-child{font-size:14vw;font-size:clamp(2rem,14vw,10rem)}.content__article{background:var(--color-bg);height:0;overflow:hidden}.content__article--open{height:100%;overflow-y:scroll;padding:0 0 20vh;pointer-events:auto}.content__article .heading{font-family:var(--font-1);grid-area:proje-head;margin:10px;text-align:center}.content__text{grid-area:proje-details;line-height:1.2;margin:0 auto;padding:0 3rem;will-change:transform}.content__text p{margin:1.5rem 0}.landing-font{font-size:.9rem}.case-no,.landing-font{font-family:var(--font-2)}.case-no{display:flex;grid-area:case-no;place-content:end}.project-image{border-radius:30px;display:block;grid-area:proje-image;margin:5rem 0;max-height:fit-content;min-height:200px;overflow:hidden}.content__back{cursor:pointer;left:2rem;opacity:0;position:absolute;top:2rem}.content__back svg{height:35px}.content__back path{stroke:var(--color-black);stroke-width:2px}.project-task{grid-area:proje-task}.project-role,.project-task{display:flex;flex-direction:column;font-size:1.2rem;font-weight:500;padding:0 20px}.project-role{grid-area:proje-role}.content-works{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:20px;grid-template-areas:"backbutton ... ... case-no" "proje-head proje-head proje-head proje-head" "proje-task proje-task proje-role proje-role" "proje-image proje-image proje-image proje-image" "proje-details proje-details proje-details proje-details" "design-maq design-maq design-maq design-maq" "product-img1 product-img1 product-img2 product-img2" "product-img3 product-img3 product-img3 product-img3" "abibae abibae abibae abibae";padding:10px 30px}.content__article--open~.content__back{pointer-events:auto}@media screen and (max-width:996px) and (min-width:768px){.item{display:grid;grid-template-areas:"heading heading heading heading" "image image image enter" "meta meta excerpt ... ";grid-template-columns:auto;grid-template-rows:minmax(200px,25vh) minmax(380px,30vh) auto;position:relative}.item:before{position:absolute}.item--invert{grid-template-areas:"heading heading heading heading" "enter image image image" "meta meta meta meta" "... ... excerpt ...";grid-template-columns:1fr 2fr 1fr 1fr}.item__imgwrap{grid-area:image}.item__img{height:100%;width:100%}.item__enter{align-items:center;align-self:center;display:flex;grid-area:enter;justify-content:center;justify-self:center;max-height:400px;max-width:400px;position:relative;z-index:1000}.item__enter-circle{cursor:pointer;flex:none;pointer-events:none}.item__meta{grid-area:meta}.item--invert .item__meta{justify-self:end;text-align:right}.item__excerpt{grid-area:excerpt}.item__excerpt p{margin:0 0 1.5rem}.heading>span{justify-content:center}.heading--item{align-self:self-start;grid-area:heading;justify-self:center;margin:0;text-align:center}}@media screen and (min-width:997px){.item{display:grid;grid-template-areas:"... heading heading heading heading" "... image image image enter" "... meta meta excerpt ... ";grid-template-columns:70px 1fr auto 360px 1fr;grid-template-rows:minmax(200px,25vh) minmax(380px,30vh) auto;position:relative}.item:before{position:absolute}.item--invert{grid-template-areas:"heading heading heading heading ..." "enter image image image ..." "... ... excerpt meta ...";grid-template-columns:1fr auto 360px 1fr 70px}.item__imgwrap{grid-area:image}.item__img{height:100%;width:100%}.item__enter{align-items:center;align-self:center;display:flex;grid-area:enter;justify-content:center;justify-self:center;max-height:400px;max-width:400px;position:relative;z-index:1000}.item__enter-circle{cursor:pointer;flex:none;pointer-events:none}.item__meta{grid-area:meta}.item--invert .item__meta{justify-self:end;text-align:right}.item__excerpt{grid-area:excerpt}.item__excerpt p{margin:0 0 1.5rem}.heading>span{justify-content:center}.heading--item{align-self:self-start;grid-area:heading;justify-self:center;margin:0;text-align:center}}.section__header{align-items:center;border-bottom:1px solid var(--color-black);display:flex;justify-content:space-around;margin-bottom:4rem;padding:4vh 8vw;position:relative;width:100%}.section__year{color:var(--color-text-alt)}.section__title,.section__title--medium{font-size:clamp(1.5rem,12vw,9rem)}.section__title{font-family:inherit;font-weight:300;line-height:.9;margin:5vh 0 6vh;text-transform:uppercase}h2{display:block;font-size:1.5em;font-weight:700;margin-block-end:.83em;margin-block-start:.83em;margin-inline-end:0;margin-inline-start:0}@media (any-pointer:fine){.cursor-round{display:block;left:0;pointer-events:none;position:fixed;top:0;z-index:5000}.cursor__inner{fill:var(--cursor-fill);stroke:var(--color-black);stroke-width:var(--cursor-stroke-width);opacity:.7}}.viewcase{color:var(--color-black);display:block}.hidden-explore,.viewcase{left:45%;pointer-events:none;position:absolute;top:48%}.hidden-explore{display:none;opacity:0}.item:before{align-items:center;border-left:3px solid;color:var(--color-black);content:counters(projectcounter,".",decimal-leading-zero);counter-increment:projectcounter;display:flex;font-size:clamp(1rem,10px,1.5rem);font-weight:200;left:0;line-height:1;opacity:1;padding-left:1rem;top:0;transform:translateX(-1rem);transition:transform .3s,opacity .3s}@media (max-width:366px){.content__img,.content__imgwrap,.item__img,.item__imgwrap{min-height:225px}.l4__right .div{height:84%;width:68%}}.content__text{display:grid;grid-template-areas:"aim solution" "how achieved";grid-template-columns:1fr 3fr;grid-template-rows:repeat(2,1fr)}.project-aim{grid-area:aim}.project-sol{grid-area:solution}.main-aim{font-size:35px;margin-top:1.5rem}.mid-font p{font-size:1.2rem}.how-solution{grid-area:how}.achieved-solution{grid-area:achieved}@media screen and (max-width:815px){.content__text{display:grid;grid-template-areas:"aim" "solution" "how" "achieved";grid-template-columns:1fr;grid-template-rows:60px 1fr 60px 1fr}.content-works{display:grid;grid-template-columns:repeat(4,1fr);grid-row-gap:20px;grid-template-areas:"backbutton ... case-no case-no" "proje-head proje-head proje-head proje-head" "proje-image proje-image proje-image proje-image" "proje-task proje-task proje-task proje-task " "proje-role proje-role proje-role proje-role" "proje-details proje-details proje-details proje-details" "design-maq design-maq design-maq design-maq" "product-img1 product-img1 product-img2 product-img2" "product-img3 product-img3 product-img3 product-img3" "abibae abibae abibae"}.project-role,.project-task{font-weight:300}.project-image{margin:10px 0}}@media screen and (max-width:570px){.content__text{grid-template-rows:60px 1fr 60px;padding:0}.project-role,.project-task{padding:0!important}.design-marquee{grid-area:design-maq;height:max-content}.content-works{grid-template-areas:"backbutton ... case-no case-no" "proje-head proje-head proje-head proje-head" "proje-image proje-image proje-image proje-image" "proje-task proje-task proje-task proje-task " "proje-role proje-role proje-role proje-role" "proje-details proje-details proje-details proje-details" "design-maq design-maq design-maq design-maq" "product-img1 product-img1 product-img1 product-img1" "product-img2 product-img2 product-img2 product-img2" "product-img3 product-img3 product-img3 product-img3" "abibae abibae abibae abibae"}}@media (max-width:375px){.content-works{padding:10px 15px!important}.works{padding:3rem 1.3rem!important}}.innerImg .innerMask{display:block;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:cover;-webkit-mask-size:cover}.inset,.introRond svg{height:100%;left:0;top:0;width:100%}.project-image img{display:block;height:100%;object-fit:cover;width:100%}.product-image1,.product-image2{align-items:center;display:flex;height:100%;justify-content:center;object-fit:cover;object-position:center;overflow:hidden;width:100%}.product-image1{border-radius:25px;grid-area:product-img1}.product-image2{border-radius:25px;grid-area:product-img2}.product-image3{border-radius:25px;grid-area:product-img3;margin-top:50px;max-height:500px;overflow:hidden}.product-image1 img,.product-image2 img,.product-image3 img{display:block;height:100%;object-fit:cover;width:100%}.design-marquee{grid-area:design-maq;max-height:270px}
\ No newline at end of file
+*,:after,:before{box-sizing:border-box}:root{font-size:16px}body{margin:0;--cursor-stroke:#000;--cursor-fill:none;--cursor-stroke-width:1px;--hot-tomato:#ff3227;font-weight:300;line-height:1;overflow-x:hidden}.oh{overflow:hidden}@media screen and (max-width:768px){html{overflow-x:hidden}}a{color:var(--color-link);text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid red}.unbutton{background:none;border:0;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}.works{background-color:var(--color-bg);padding:3rem 2rem;position:relative;z-index:3}.field-year-abibae{grid-area:abibae;padding-top:30px;text-align:center}.frame{position:relative}.heading{font-family:var(--font-1),sans-serif;font-size:6vw;font-size:clamp(2rem,6vw,5rem);font-weight:300;line-height:1.1}.heading .splitting .char,.heading .splitting .word{display:flex}.heading--item{display:flex;justify-content:center}.char-wrap{overflow:hidden;position:relative}.char,.char-wrap{display:inline-block}.char{will-change:transform}.heading>span{display:flex}.heading>span:first-child{font-size:clamp(2rem,8vw,9rem)}.heading>span:nth-child(2){margin-top:-2vw;text-transform:lowercase}.item{margin:15vh 0 20vh}.items{counter-reset:projectcounter}.content__imgwrap,.item__imgwrap{align-items:center;border-radius:40px;display:flex;min-height:325px;overflow:hidden;width:100%;will-change:transform}.content__img,.item__img{background-position:50% 50%;background-size:cover;height:100%;min-height:325px;width:100%;will-change:transform}.item__meta{font-size:.67rem;font-weight:500;line-height:1.3;margin:.85rem 0 2rem;overflow:hidden;text-transform:uppercase}.item__meta-row{display:block;overflow:hidden;position:relative}.item__meta-row span{display:block;will-change:transform}.item__enter{display:none;will-change:transform}.item__enter-circle{fill:none;stroke:var(--color-black);stroke-width:1px;will-change:transform,opacity}.item__excerpt{align-content:center;display:grid;justify-content:center;line-height:1.2;will-change:transform}.item__excerpt-link{color:var(--color-black);cursor:pointer;display:inline-block;font-weight:500;line-height:1;overflow:hidden;position:relative}.item__excerpt-link span{display:inline-block;padding-bottom:10px;position:relative}.item__excerpt-link span:after{background:var(--color-black);content:"";height:2px;left:0;position:absolute;top:calc(100% - 10px);transform-origin:100% 0;transition:transform .2s;width:100%}.item__excerpt-link span:hover:after{transform:scaleX(0)}.content .heading{font-size:10vw;font-size:clamp(2rem,10vw,6rem);margin-bottom:5rem}.content .heading>span:first-child{font-size:14vw;font-size:clamp(2rem,14vw,10rem)}.content__article{background:var(--color-bg);height:0;overflow:hidden}.content__article--open{height:100%;overflow-y:scroll;padding:0 0 20vh;pointer-events:auto}.content__article .heading{font-family:var(--font-1);grid-area:proje-head;margin:10px;text-align:center}.content__text{grid-area:proje-details;line-height:1.2;margin:0 auto;padding:0 3rem;will-change:transform}.content__text p{margin:1.5rem 0}.landing-font{font-size:.9rem}.case-no,.landing-font{font-family:var(--font-2)}.case-no{display:flex;grid-area:case-no;place-content:end}.project-image{border-radius:30px;display:block;grid-area:proje-image;margin:5rem 0;max-height:fit-content;min-height:200px;overflow:hidden}.content__back{cursor:pointer;left:2rem;opacity:0;position:absolute;top:2rem}.content__back svg{height:35px}.content__back path{stroke:var(--color-black);stroke-width:2px}.project-task{grid-area:proje-task}.project-role,.project-task{display:flex;flex-direction:column;font-size:1.2rem;font-weight:500;padding:0 20px}.project-role{grid-area:proje-role}.content-works{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:20px;grid-template-areas:"backbutton ... ... case-no" "proje-head proje-head proje-head proje-head" "proje-task proje-task proje-role proje-role" "proje-image proje-image proje-image proje-image" "proje-details proje-details proje-details proje-details" "design-maq design-maq design-maq design-maq" "product-img1 product-img1 product-img2 product-img2" "product-img3 product-img3 product-img3 product-img3" "abibae abibae abibae abibae";padding:10px 30px}.content__article--open~.content__back{pointer-events:auto}@media screen and (max-width:996px) and (min-width:768px){.item{display:grid;grid-template-areas:"heading heading heading heading" "image image image enter" "meta meta excerpt ... ";grid-template-columns:auto;grid-template-rows:minmax(200px,25vh) minmax(380px,30vh) auto;position:relative}.item:before{position:absolute}.item--invert{grid-template-areas:"heading heading heading heading" "enter image image image" "meta meta meta meta" "... ... excerpt ...";grid-template-columns:1fr 2fr 1fr 1fr}.item__imgwrap{grid-area:image}.item__img{height:100%;width:100%}.item__enter{align-items:center;align-self:center;display:flex;grid-area:enter;justify-content:center;justify-self:center;max-height:400px;max-width:400px;position:relative;z-index:1000}.item__enter-circle{cursor:pointer;flex:none;pointer-events:none}.item__meta{grid-area:meta}.item--invert .item__meta{justify-self:end;text-align:right}.item__excerpt{grid-area:excerpt}.item__excerpt p{margin:0 0 1.5rem}.heading>span{justify-content:center}.heading--item{align-self:self-start;grid-area:heading;justify-self:center;margin:0;text-align:center}}@media screen and (min-width:997px){.item{display:grid;grid-template-areas:"... heading heading heading heading" "... image image image enter" "... meta meta excerpt ... ";grid-template-columns:70px 1fr auto 360px 1fr;grid-template-rows:minmax(200px,25vh) minmax(380px,30vh) auto;position:relative}.item:before{position:absolute}.item--invert{grid-template-areas:"heading heading heading heading ..." "enter image image image ..." "... ... excerpt meta ...";grid-template-columns:1fr auto 360px 1fr 70px}.item__imgwrap{grid-area:image}.item__img{height:100%;width:100%}.item__enter{align-items:center;align-self:center;display:flex;grid-area:enter;justify-content:center;justify-self:center;max-height:400px;max-width:400px;position:relative;z-index:1000}.item__enter-circle{cursor:pointer;flex:none;pointer-events:none}.item__meta{grid-area:meta}.item--invert .item__meta{justify-self:end;text-align:right}.item__excerpt{grid-area:excerpt}.item__excerpt p{margin:0 0 1.5rem}.heading>span{justify-content:center}.heading--item{align-self:self-start;grid-area:heading;justify-self:center;margin:0;text-align:center}}.section__header{align-items:center;border-bottom:1px solid var(--color-black);display:flex;justify-content:space-around;margin-bottom:4rem;padding:4vh 8vw;position:relative;width:100%}.section__year{color:var(--color-text-alt)}.section__title,.section__title--medium{font-size:clamp(1.5rem,12vw,9rem)}.section__title{font-family:inherit;font-weight:300;line-height:.9;margin:5vh 0 6vh;text-transform:uppercase}h2{display:block;font-size:1.5em;font-weight:700;margin-block-end:.83em;margin-block-start:.83em;margin-inline-end:0;margin-inline-start:0}@media (any-pointer:fine){.cursor-round{display:block;left:0;pointer-events:none;position:fixed;top:0;z-index:5000}.cursor__inner{fill:var(--cursor-fill);stroke:var(--color-black);stroke-width:var(--cursor-stroke-width);opacity:.7}}.viewcase{color:var(--color-black);display:block}.hidden-explore,.viewcase{left:45%;pointer-events:none;position:absolute;top:48%}.hidden-explore{display:none;opacity:0}.item:before{align-items:center;border-left:3px solid;color:var(--color-black);content:counters(projectcounter,".",decimal-leading-zero);counter-increment:projectcounter;display:flex;font-size:clamp(1rem,10px,1.5rem);font-weight:200;left:0;line-height:1;opacity:1;padding-left:1rem;top:0;transform:translateX(-1rem);transition:transform .3s,opacity .3s}@media (max-width:366px){.content__img,.content__imgwrap,.item__img,.item__imgwrap{min-height:225px}.l4__right .div{height:84%;width:68%}}.content__text{display:grid;grid-template-areas:"aim solution" "how achieved";grid-template-columns:1fr 3fr;grid-template-rows:repeat(2,1fr)}.project-aim{grid-area:aim}.project-sol{grid-area:solution}.main-aim{font-size:35px;margin-top:1.5rem}.mid-font p{font-size:1.2rem}.how-solution{grid-area:how}.achieved-solution{grid-area:achieved}@media screen and (max-width:815px){.content__text{display:grid;grid-template-areas:"aim" "solution" "how" "achieved";grid-template-columns:1fr;grid-template-rows:60px 1fr 60px 1fr}.content-works{display:grid;grid-template-columns:repeat(4,1fr);grid-row-gap:20px;grid-template-areas:"backbutton ... case-no case-no" "proje-head proje-head proje-head proje-head" "proje-image proje-image proje-image proje-image" "proje-task proje-task proje-task proje-task " "proje-role proje-role proje-role proje-role" "proje-details proje-details proje-details proje-details" "design-maq design-maq design-maq design-maq" "product-img1 product-img1 product-img2 product-img2" "product-img3 product-img3 product-img3 product-img3" "abibae abibae abibae"}.project-role,.project-task{font-weight:300}.project-image{margin:10px 0}}@media screen and (max-width:570px){.content__text{grid-template-rows:60px 1fr 60px;padding:0}.project-role,.project-task{padding:0!important}.design-marquee{grid-area:design-maq;height:max-content}.content-works{grid-template-areas:"backbutton ... case-no case-no" "proje-head proje-head proje-head proje-head" "proje-image proje-image proje-image proje-image" "proje-task proje-task proje-task proje-task " "proje-role proje-role proje-role proje-role" "proje-details proje-details proje-details proje-details" "design-maq design-maq design-maq design-maq" "product-img1 product-img1 product-img1 product-img1" "product-img2 product-img2 product-img2 product-img2" "product-img3 product-img3 product-img3 product-img3" "abibae abibae abibae abibae"}}@media (max-width:375px){.content-works{padding:10px 15px!important}.works{padding:3rem 1.3rem!important}}.innerImg .innerMask{display:block;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:cover;-webkit-mask-size:cover}.inset,.introRond svg{height:100%;left:0;top:0;width:100%}.project-image img{display:block;height:100%;object-fit:cover;width:100%}.product-image1,.product-image2{align-items:center;display:flex;height:100%;justify-content:center;object-fit:cover;object-position:center;overflow:hidden;width:100%}.product-image1{border-radius:25px;grid-area:product-img1}.product-image2{border-radius:25px;grid-area:product-img2}.product-image3{border-radius:25px;grid-area:product-img3;margin-top:50px;max-height:500px;overflow:hidden}.product-image1 img,.product-image2 img,.product-image3 img{display:block;height:100%;object-fit:cover;width:100%}.design-marquee{grid-area:design-maq;max-height:270px}
\ No newline at end of file
diff --git a/public/fonts/BricolageGrotesque.woff2 b/public/fonts/BricolageGrotesque.woff2
new file mode 100644
index 00000000..d1164d08
Binary files /dev/null and b/public/fonts/BricolageGrotesque.woff2 differ
diff --git a/public/img/masks/uzipreload-logo.webp b/public/img/masks/uzipreload-logo.webp
new file mode 100644
index 00000000..29d1cf34
Binary files /dev/null and b/public/img/masks/uzipreload-logo.webp differ
diff --git a/public/img/svg/6157c1f7fe50ed002d43.svg b/public/img/svg/6157c1f7fe50ed002d43.svg
new file mode 100644
index 00000000..96ac6817
--- /dev/null
+++ b/public/img/svg/6157c1f7fe50ed002d43.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/index.html b/public/index.html
index 07603b65..3b83d415 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,15 @@
-UZITRAKE ✦ PORTFOLIO arrow drop close Our work CREATIVE FREELANCER DEVELOPER UX/UI DESIGNER
specializing in web development for brands worldwide Web dev innovation driven by strategy and precision
+ view case + explore in
Lumina ✺Branding April — 2023 CLIENT : Lumina
+ view case + explore in
Hypercritical ✺Web design March — 2024 Hypercritical studio
+ view case + explore in
Trakexcel ✺Web design March — 2023 Trakexcel Agency
+ view case + explore
DNAnexus ✺Brand design December — 2022 CLIENT : experimental
+ view case
Uzitrake ✺Web Design January — 2023 Personal
Discover more work On socials ❈
Lumina CASE 01-04
TASK - Our goal with the design and rebranding initiative was to establish a modern and cohesive visual identity that reflects the company's values and resonates with its target audience. We aimed to create a unique brand experience that enhances brand recognition and fosters a strong connection with customers.
FIELD - BRANDING ,DESIGN
ROLE - Art designer,Designer
RECOGNITION - The product design has received acclaim for its innovative and minimalist approach, solidifying its position as a standout solution in the industry.
Lumina, a skincare product company, faced several challenges in establishing its brand identity and online presence. The company struggled with low brand recognition, difficulty in conveying the benefits of its products, and limited customer engagement on its existing website..
This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.
Throughout our partnership, As the developer responsible for designing Lumina's product branding and website, I addressed these challenges by implementing a comprehensive solution. Through extensive market research and collaboration with Lumina's team, I developed a cohesive brand identity that resonated with the target audience and differentiated Lumina from competitors. This involved creating visually appealing packaging designs that conveyed the premium quality and efficacy of Lumina's skincare products.
Hypercritical CASE 02-04
TASK- My objective was to design a website for Hypercritical web design studio that is exceptionally attractive and visually appealing. Every aspect of the design was crafted to captivate visitors and leave a lasting impression, ensuring that the website stands out amidst the digital landscape.
FIELD - Web Development
ROLE - Designer / Programmer
RECOGNITION - Our website has garnered attention for its innovative design and user-friendly interface. It has been praised by industry experts and users alike for its intuitive navigation and engaging content, establishing it as a standout platform in our field.
Hypercritical Studio, renowned for its exacting standards in website and app design, embarked on a mission to redefine commitment and demonstrate its prowess to partners. Tasked with this challenge, we undertook to elevate their vision, recognizing the pivotal role of captivating design in resonating with their target audience. As our collaboration unfolded, our focus naturally extended to optimizing user engagement and refining the user experience.
Our journey with Hypercritical Studio encompassed the development of a visually arresting design system and the meticulous refinement of digital touchpoints to ensure a frictionless user journey across all platforms. Working in tandem with the some collaborators, we delved deep into the vision and objectives, harnessing innovative design strategies to drive impactful results.
Trakexcel CASE 02-04
TASK- My objective was to design a website for Trakexcel agency that is exceptionally attractive and visually appealing. Every aspect of the design was crafted to captivate visitors and leave a lasting impression, ensuring that the website stands out amidst the digital landscape.
FIELD - Web Development
ROLE - Lead Programmer
RECOGNITION - Our website has garnered attention for its innovative design and user-friendly interface. It has been praised by industry experts and users alike for its intuitive navigation and engaging content, establishing it as a standout platform in our field.
Trakexcel Agency, a leading provider of marketing and analytics solutions, aimed to revolutionize its online presence and brand image. Recognizing the importance of a captivating design that resonates with its target audience, they entrusted us with this mission. As our collaboration progressed, our focus extended to enhancing user engagement and streamlining the user experience.
This project involved the creation of a visually stunning design system and the refinement of digital touchpoints to ensure a seamless user journey across all platforms. We worked closely with the Trakexcel team to understand use the vision and objectives, and implemented innovative design strategies to achieve their goals effectively.
Throughout our collaboration, we undertook various initiatives to enhance Trakexcel's online presence. We began by optimizing the website's interface and user experience, focusing on improving navigation and visual appeal. Subsequently, we delved into mobile design, exploring new app directions and refining user interactions to optimize engagement. Additionally, we revamped the onboarding process, redesigning flows and incorporating custom illustrations to communicate Trakexcel's brand story effectively. Our ultimate achievement was the development of a comprehensive design system that ensured consistency and efficiency across all design, product, and engineering endeavors.
Uzitrake CASE 04-04
TASK - Crafting a captivating portfolio as a UX/UI designer presented a unique challenge. I needed a platform that not only showcased my design prowess but also effectively communicated my artistic vision and directorial leadership.
FIELD - UX/UI DESIGN , PORTFOLIO
ROLE - Designer, Developer
RECOGNISION - Digitally Fit Awards 2023 - Kenya
As a programmer and UX/UI designer, I recognized the importance of showcasing my skills and projects effectively to potential clients and employers. However, creating a portfolio that truly reflected my expertise and creativity posed a significant challenge. I needed a platform that not only highlighted my technical abilities but also conveyed my design sensibilities and problem-solving approach in a compelling manner.
To provide further context and insight into my design process, I needed to include case studies for select projects, detailing my approach, challenges faced, and key learnings.
To address this challenge, I approached the design and development of my portfolio with a strategic mindset, focusing on three key aspects: showcasing my technical proficiency, demonstrating my design expertise, and providing insight into my problem-solving process. First and foremost, I leveraged my programming skills to create a clean, modern, and responsive website using HTML, CSS, and JavaScript. I ensured that the site was optimized for performance and accessibility, reflecting my commitment to delivering high-quality digital experiences. In terms of design, I employed user-centered principles to craft an intuitive and visually engaging interface. I carefully curated my portfolio projects, selecting a diverse range of work that showcased my versatility and creativity across different domains and platforms Throughout the development process, I iterated on the design and content based on feedback from peers, mentors, and potential users, ensuring that my portfolio effectively showcased my skills and resonated with its intended audience.
DNAnexus CASE 03-04
TASK - Refining and enhancing the user interface and design of their platform, akin to the meticulous arrangement of five Imprimaturs on a title-page
FIELD - RE-BRANDING, DESIGN
ROLE - Development Collaborator
RECOGNISION - These are the pretty responsories, these are the dear antiphonies, that so bewitched of late our prelates and their chaplains with the goodly echo they made
DNAnexus, a leading provider of cloud-based data management and analysis solutions for genomics research, faced challenges in optimizing their user interface and experience for researchers and bioinformatics professionals. As the demand for genomic data analysis grew, they recognized the importance of enhancing their platform's usability and functionality to meet the evolving needs of their users. They sought a design partner with expertise in both genomics technology and user-centered design principles to help them overcome these challenges.
This project entailed developing a robust design system and refining digital touchpoints, ensuring a seamless user experience across their app ecosystem with a design partner capable of adapting to their continuously evolving requirements.
As part of our collaboration, we also focused on enhancing the mobile experience of the platform, recognizing the importance of accessibility and flexibility for users who need to access genomic data on the go. We explored innovative design concepts and interaction patterns to create a mobile interface that seamlessly complemented the desktop experience. Furthermore, we developed a comprehensive design system that provided DNAnexus with a set of standardized components, styles, and guidelines for maintaining consistency and coherence across their entire platform. This design system not only facilitated faster iteration and development but also empowered DNAnexus's internal teams to collaborate more effectively and efficiently.
Don’t settle for basic. Your brand deserves more