refactor(color): change the color schema

src/App.vue

@@ -29,15 +29,6 @@
       <Hero />
       <Services />
     </main>
-    <!-- <div class="relative z-20 h-screen min-h-screen w-full overflow-x-clip">
-      11
-    </div>
-    <div class="relative z-20 h-screen min-h-screen w-full overflow-x-clip">
-      22
-    </div>
-    <div class="relative z-20 h-screen min-h-screen w-full overflow-x-clip">
-      33
-    </div> -->
   </div>
 </template>
 

src/animations/index.ts

@@ -6,7 +6,12 @@ import { Ref } from 'vue';
 gsap.registerPlugin(ScrollTrigger);
 gsap.registerPlugin(MotionPathHelper);
 
-const animateSplitText = (id: string, duration: number = 0.8, stagger: number = 0.005, delay: number = 0.3) => {
+const animateSplitText = (
+  id: string,
+  duration: number = 0.8,
+  stagger: number = 0.005,
+  delay: number = 0.3,
+) => {
   gsap.to(id, {
     scrollTrigger: {
       trigger: id,
@@ -20,7 +25,7 @@ const animateSplitText = (id: string, duration: number = 0.8, stagger: number =
     stagger: stagger,
     ease: 'power4.inOut',
   });
-}
+};
 const navbarScale = (selector: string, trigger: string) => {
   gsap.fromTo(
     selector,
@@ -209,7 +214,7 @@ const animateLoadingPath = (path: Ref<SVGPathElement>, targetPath: string) => {
       onStart: () => {
         setTimeout(() => {
           animateHeroNav();
-        }, 500);
+        }, 250);
       },
     },
     '<20%',
@@ -275,8 +280,8 @@ const animateHeroNav = () => {
     ease: 'power4.inOut',
   });
 
-  animateSplitText('#whoAmI .letters')
-  
+  animateSplitText('#whoAmI .letters');
+
   gsap.to(['#location', '#art'], {
     opacity: 1,
     scale: 1,

src/components/BurgerMenuBtn.vue

@@ -3,10 +3,10 @@
     <div v-bind="$attrs" class="fixed right-7 top-7 z-[20]">
       <div
         id="magneto"
-        class="flex-center size-[4.5rem] cursor-pointer rounded-full bg-fancy ease-in-out"
+        class="flex-center bg-flax-smoke-500 size-[4.5rem] cursor-pointer rounded-full ease-in-out"
       >
         <span
-          class="w-[100%] text-center before:bg-primary after:bg-primary"
+          class="before:bg-flax-smoke-200 after:bg-flax-smoke-200 w-[100%] text-center"
           id="magnetoText"
         ></span>
       </div>

src/components/MyEnName.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="w-full fill-secondary"
+    class="fill-flax-smoke-800 w-full"
     viewBox="0 0 817 107"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/components/common/Button.vue

@@ -1,18 +1,18 @@
 <template>
   <a
     id="button"
-    class="leading-base group pointer-events-auto relative h-full transform-none overflow-hidden rounded-full border border-fourthly bg-tertiary px-5 py-2 text-[1rem] font-semibold uppercase tracking-normal text-primary sm:text-sm"
+    class="leading-base text-flax-smoke-100 bg-flax-smoke-950 border-flax-smoke-600 group pointer-events-auto relative h-full transform-none overflow-hidden rounded-full border px-5 py-2 text-[1rem] font-semibold uppercase tracking-normal sm:text-sm"
     target="_blank"
     :href="url"
   >
     <span
-      class="ease-expo flex-center absolute bottom-0 left-0 z-10 my-auto size-full w-full translate-y-full rounded-t-[15rem] bg-quinary font-fancy transition-all duration-700 group-hover:translate-y-0 group-hover:rounded-none"
+      class="ease-expo flex-center bg-flax-smoke-500 absolute bottom-0 left-0 z-10 my-auto size-full w-full translate-y-full rounded-t-[15rem] font-fancy transition-all duration-700 group-hover:translate-y-0 group-hover:rounded-none"
     >
       {{ label }}</span
     >
 
     <span
-      class="after:ease-expo flex-center relative z-20 overflow-hidden transition-all after:absolute after:left-0 after:inline-block after:translate-y-0 after:text-primary after:transition-all after:duration-700 after:content-[attr(after)] group-hover:after:-translate-y-[100%]"
+      class="after:ease-expo flex-center after:text-flax-smoke-200 relative z-20 overflow-hidden transition-all after:absolute after:left-0 after:inline-block after:translate-y-0 after:transition-all after:duration-700 after:content-[attr(after)] group-hover:after:-translate-y-[100%]"
     >
       <span
         class="ease-expo font-fancy transition-all duration-700 group-hover:-translate-y-full"

src/components/common/Nav.vue

@@ -17,12 +17,12 @@
     tabindex="0"
     id="navbar"
     @keydown.esc="esc()"
-    class="fixed right-0 top-[1%] z-[9998] h-[98vh] w-full translate-x-full select-none divide-dotted rounded-s-lg bg-tertiary p-10 focus:outline-none max-md:w-[98%] md:w-3/5 md:px-20 lg:w-2/5"
+    class="bg-flax-smoke-900 fixed right-0 top-[1%] z-[9998] h-[98vh] w-full translate-x-full select-none divide-dotted rounded-s-lg p-10 focus:outline-none max-md:w-[98%] md:w-3/5 md:px-20 lg:w-2/5"
   >
     <Circles id="circles" class="absolute right-0 top-0 opacity-25" />
     <div class="flex h-full flex-col items-center justify-between">
       <div class="relative z-[19] w-full">
-        <ul class="mt-12 font-bold text-primary md:mt-24" id="navLinks">
+        <ul class="text-flax-smoke-50 mt-12 font-bold md:mt-24" id="navLinks">
           <li
             class="overflow-y-clip"
             v-for="l in navbarLinks"
@@ -34,7 +34,7 @@
               class="group my-2 flex w-fit translate-y-full cursor-pointer items-center justify-start leading-none"
             >
               <span
-                class="h-4 w-4 scale-0 rounded-full bg-primary opacity-0 transition-all duration-300 ease-in-out group-hover:scale-100 group-hover:opacity-100"
+                class="bg-flax-smoke-50 h-4 w-4 scale-0 rounded-full opacity-0 transition-all duration-300 ease-in-out group-hover:scale-100 group-hover:opacity-100"
               ></span>
               <p
                 class="-translate-x-5 font-fancy transition-all duration-300 ease-in-out group-hover:translate-x-5"
@@ -47,7 +47,7 @@
       </div>
 
       <div class="w-full">
-        <div class="mt-2 h-full font-normal text-primary">
+        <div class="text-flax-smoke-50 mt-2 h-full font-normal">
           <p class="text-left text-sm font-bold uppercase">Email address</p>
           <Link
             class="h-6 font-medium tracking-wider"
@@ -80,7 +80,7 @@
         <div id="name-container" class="group -m-10 h-fit cursor-pointer p-10">
           <h1
             id="name"
-            class="flex items-start font-fancy text-3xl font-extrabold uppercase text-secondary"
+            class="flex items-start font-fancy text-3xl font-extrabold uppercase"
           >
             hetari<span
               class="!inline !origin-center font-title text-xl transition-transform duration-500 ease-in-out group-hover:rotate-[360deg]"
@@ -92,13 +92,13 @@
 
       <div class="flex">
         <p
-          class="cursor-default select-none font-fancy text-lg font-bold uppercase text-fancy max-2xl:text-sm max-md:hidden"
+          class="text-flax-smoke-400 cursor-default select-none font-fancy text-lg font-bold uppercase max-2xl:text-sm max-md:hidden"
         >
           available for work and collaboration
         </p>
 
         <ul
-          class="ps-5 text-2xl font-normal text-secondary max-xl:ps-10 max-lg:text-xl max-md:text-lg"
+          class="ps-5 text-2xl font-medium max-xl:ps-10 max-lg:text-xl max-md:text-lg"
         >
           <Link
             v-for="l in navLinks"

src/components/design/LoadingScreen.vue

@@ -6,14 +6,14 @@
   >
     <div class="size-full w-full flex-col">
       <svg
-        class="absolute top-0 z-0 h-[calc(100%_+_300px)] w-full fill-tertiary brightness-50"
+        class="fill-flax-smoke-800 absolute top-0 z-0 h-[calc(100%_+_300px)] w-full brightness-50"
       >
         <path ref="path" class="w-full" :d="pathData"></path>
       </svg>
       <div
         id="text"
         style="transform: translateZ(0px)"
-        class="z-[1] flex size-full flex-col items-center justify-center text-center text-4xl font-bold text-primary/75 opacity-0 md:text-6xl"
+        class="text-flax-smoke-50/75 z-[1] flex size-full flex-col items-center justify-center text-center text-4xl font-bold opacity-0 md:text-6xl"
         :class="{ 'text-4xl font-bold md:text-6xl': true }"
       >
         <p class="overflow-clip">

src/components/design/ModernArtShape.vue

@@ -5,9 +5,18 @@
       viewBox="0 0 72 68"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M72 36L36 0L0 36H12L36 12L60 36H72Z" fill="#938F8A" />
-      <path d="M72 52L36 16L0 52H12L36 28L60 52H72Z" fill="#6B645C" />
-      <path d="M72 68L36 32L0 68H12L36 44L60 68H72Z" fill="#938F8A" />
+      <path
+        d="M72 36L36 0L0 36H12L36 12L60 36H72Z"
+        class="fill-flax-smoke-900"
+      />
+      <path
+        d="M72 52L36 16L0 52H12L36 28L60 52H72Z"
+        class="fill-flax-smoke-700"
+      />
+      <path
+        d="M72 68L36 32L0 68H12L36 44L60 68H72Z"
+        class="fill-flax-smoke-600"
+      />
     </svg>
   </div>
 </template>

src/components/design/Star.vue

@@ -4,7 +4,7 @@
     <span>
       <svg
         style="vertical-align: top"
-        class="hide inline-block size-[calc((50vw)_/_24_*_1.9)] animate-[spin_5s_linear_infinite] fill-secondary"
+        class="hide fill-flax-smoke-800 inline-block size-[calc((50vw)_/_24_*_1.9)] animate-[spin_5s_linear_infinite]"
         viewBox="0 0 75 76"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

src/components/sections/Hero.vue

@@ -45,7 +45,7 @@
           id="profile-container"
           class="group relative z-10 col-span-3 hidden aspect-[3/3.5] size-full origin-top select-none flex-col rounded-lg md:flex"
         >
-          <div class="overlay absolute inset-0 z-[2] bg-primary"></div>
+          <div class="overlay bg-flax-smoke-50 absolute inset-0 z-[2]"></div>
           <img
             id="profile-img"
             :src="profile"
@@ -72,13 +72,13 @@
             <p
               v-html="whoAmI"
               id="whoAmI"
-              class="who-am-i text-fluid-body max-w-[33ch] overflow-clip text-balance text-start font-medium leading-snug text-tertiary/80"
+              class="who-am-i text-fluid-body max-w-[33ch] overflow-clip text-balance text-start font-medium leading-snug"
             ></p>
           </div>
 
           <div
             id="location"
-            class="column-gap flex scale-0 items-start justify-between text-tertiary opacity-0"
+            class="column-gap text-flax-smoke-950 flex scale-0 items-start justify-between opacity-0"
           >
             <div class="text-sm font-normal">
               <p class="font-fancy">{{ locationPlace }}</p>
@@ -112,9 +112,7 @@
     whoAmI.value = textSplitter(whoAmI.value);
   });
 
-  onMounted(() => {
-    
-  })
+  onMounted(() => {});
 </script>
 
 <style scoped>

src/components/sections/Services.vue

@@ -6,11 +6,13 @@
     <h1
       id="what-i-do"
       v-html="whatIDo"
-      class="font-fancy text-4xl font-extrabold uppercase sm:text-7xl md:text-8xl lg:text-9xl"
+      class="text-flax-smoke-50 font-fancy text-4xl font-extrabold uppercase sm:text-7xl md:text-8xl lg:text-9xl"
     ></h1>
 
-    <div class="mt-14 flex items-center justify-end gap-[5%]">
-      <p class="self-start text-2xl text-quinary">( SERVICES )</p>
+    <div
+      class="text-flax-smoke-300 mt-14 flex items-center justify-end gap-[5%]"
+    >
+      <p class="text-flax-smoke-300/85 self-start text-2xl">( SERVICES )</p>
       <p class="w-1/3 self-start text-3xl font-semibold text-fancy">
         My obsession is to craft memorable digital experiences that represent
         your brand, serve a meaningful purpose, and drive tangible business

src/style.css

@@ -63,30 +63,24 @@
 
   ::-moz-selection {
     /* Code for Firefox */
-    @apply bg-fourthly text-primary;
+    @apply text-flax-smoke-100 bg-flax-smoke-800;
   }
 
   ::selection {
-    @apply bg-fourthly text-primary;
+    @apply text-flax-smoke-100 bg-flax-smoke-800;
   }
 }
 
 @layer components {
   .light-theme {
-    @apply bg-primary text-primary;
-  }
-
-  .dark-theme {
-    @apply bg-primary text-primary;
+    @apply bg-flax-smoke-100 text-flax-smoke-800;
   }
 
   .flex-center {
     @apply flex items-center justify-center;
   }
 
   .common-padding {
-    /* @apply px-2 py-6 sm:px-4 sm:py-8 md:px-12 md:py-8 lg:px-28 lg:py-10; */
-    /* @apply px-2 pt-6 sm:px-4 sm:pt-8 md:px-12 md:pt-8 lg:px-48 lg:pt-12; */
     @apply padding-x padding-y;
   }
 
@@ -113,7 +107,4 @@
   .leading-base {
     line-height: 130%;
   }
-  /* .nav-link {
-    @apply cursor-pointer;
-  } */
 }

tailwind.config.js

@@ -9,12 +9,33 @@ export default {
         fancy: ['Bricolage Grotesque'],
       },
       colors: {
-        primary: '#E6E6E1',
-        secondary: '#3d3a36',
-        tertiary: '#393632',
-        fourthly: '#857E74',
-        fancy: '#A09C98',
-        quinary: '#7c7c73',
+        // 'timber-wolf': {
+        //   50: '#f7f6f5',
+        //   100: '#ecebe8',
+        //   200: '#d8d5cf',
+        //   300: '#c0bbb1',
+        //   400: '#a69d91',
+        //   500: '#94887b',
+        //   600: '#877a6f',
+        //   700: '#71665d',
+        //   800: '#5d544f',
+        //   900: '#4d4641',
+        //   950: '#282422',
+        // },
+
+        'flax-smoke': {
+          50: '#f4f4f1',
+          100: '#e8e8df',
+          200: '#d2d3c3',
+          300: '#b6b79f',
+          400: '#9b9c7f',
+          500: '#838566',
+          600: '#62644c',
+          700: '#4d4e3d',
+          800: '#404133',
+          900: '#38392e',
+          950: '#1c1d16',
+        },
       },
       screens: {
         '2xs': '420px',