From 08d32edbbbc08cda143148ec0c889d914282ddf5 Mon Sep 17 00:00:00 2001
From: Hetari <hetari4py@gmail.com>
Date: Sun, 8 Sep 2024 22:52:30 +0300
Subject: [PATCH] update the content

---
 src/components/common/Nav.vue        |  9 +++-----
 src/components/sections/Contact.vue  |  6 ++++--
 src/components/sections/Services.vue | 32 +++++++++++-----------------
 src/components/sections/Works.vue    |  2 +-
 src/components/sections/aboutMe.vue  |  4 ++--
 src/data.ts                          |  2 +-
 tailwind.config.js                   | 13 +++++++++++
 7 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/components/common/Nav.vue b/src/components/common/Nav.vue
index 259f34c..ff94e0a 100644
--- a/src/components/common/Nav.vue
+++ b/src/components/common/Nav.vue
@@ -76,12 +76,9 @@
     class="padding-x absolute inset-0 z-20 h-fit -translate-y-full pt-6 will-change-auto"
   >
     <nav class="flex justify-between">
-      <MagneticEffect
-        :magnetoStrengthVal="20"
-        :magnetoTextStrengthVal="10"
-        divId="name-container"
-        textId="name"
-      >
+      <!-- :magnetoStrengthVal="20"
+        :magnetoTextStrengthVal="10" -->
+      <MagneticEffect divId="name-container" textId="name">
         <div id="name-container" class="group -m-10 h-fit cursor-pointer p-10">
           <h1
             id="name"
diff --git a/src/components/sections/Contact.vue b/src/components/sections/Contact.vue
index 29f0c86..c156ca6 100644
--- a/src/components/sections/Contact.vue
+++ b/src/components/sections/Contact.vue
@@ -16,8 +16,10 @@
       ></video>
       <!-- :style="'background-image: url(' + contact + ') !important; '" -->
       <div class="flex-center z-10 flex-col gap-y-10">
-        <p class="heading-4 text-center font-mono text-flax-smoke-300">
-          (Need an unfair advantage?)
+        <p
+          class="heading-4 max-w-[30ch] text-center font-mono text-flax-smoke-300"
+        >
+          Your design is a masterpiece waiting to become alive.
         </p>
         <h1
           id="make-it-happen"
diff --git a/src/components/sections/Services.vue b/src/components/sections/Services.vue
index 5f7e1c4..36040ad 100644
--- a/src/components/sections/Services.vue
+++ b/src/components/sections/Services.vue
@@ -19,13 +19,12 @@
         <p
           class="heading-4 font-fancy col-span-8 w-full text-balance sm:font-semibold md:col-span-5"
         >
-          My obsession is to craft memorable digital experiences that represent
-          your brand, serve a meaningful purpose, and drive tangible business
-          results.
+          User-Friendly interface don't happen by chance, they are built with
+          intention. I code intuitive responsive solutions that make your users'
+          journey effortless
         </p>
       </div>
     </div>
-    <!--  pb-10 md:pb-[3%] 3xl:pb-[5%] items-end justify-end -->
 
     <div class="relative mt-12 w-full lg:mt-[10%]">
       <div class="mt-12 flex flex-col justify-between gap-y-16">
@@ -40,15 +39,6 @@
           class="sticky border-t border-flax-smoke-500/50 bg-[#0B0B0A]"
           :class="getStyle(index)"
         />
-        <!-- :class="getCardClass(index)" -->
-        <!-- 
-        <ServicesCard
-          class="sticky top-[calc(5.75rem_+_20vh)] mb-[11.5rem] border-t border-flax-smoke-500/50 bg-[#0B0B0A] lg:top-[calc(8rem_+_10vh)] lg:mb-[16rem]"
-        />
-
-        <ServicesCard
-          class="sticky top-[calc(11.5rem_+_20vh)] mb-[5.75rem] border-t border-flax-smoke-500/50 bg-[#0B0B0A] lg:top-[calc(16rem_+_10vh)] lg:mb-[8rem]"
-        /> -->
       </div>
     </div>
   </section>
@@ -60,13 +50,13 @@
   import { onBeforeMount, onMounted, ref } from 'vue';
   import { ServicesCard } from '..';
 
-  const whatIDo = ref('What I do /');
+  const whatIDo = ref('My services /');
 
   const servicesCardProps = [
     {
       title: 'Web Development',
-      body: 'I create unique, custom-coded websites that are tailored to your brand. I focus on scalability, performance, accessibility, and engaging animations for a memorable experience.',
-      headings: ['Modern Websites', 'Motion & Animations', 'SEO Optimized'],
+      body: 'I create custom-coded websites specifically for your brand. I focus on making sure they are scalable, fast, accessible, and have engaging animations to provide a memorable experience for users.',
+      headings: ['Modern Websites', 'Motion & Animations', 'Scalability'],
       shape: `<svg viewBox="0 0 200 200"  xmlns="http://www.w3.org/2000/svg">
   <path d="M100 0C103.395 53.7596 146.24 96.6052 200 100C146.24 103.395 103.395 146.24 100 200C96.6052 146.24 53.7596 103.395 0 100C53.7596 96.6052 96.6052 53.7596 100 0Z"/>
   </svg>
@@ -74,7 +64,7 @@
     },
     {
       title: 'Advanced Solutions',
-      body: "I craft cutting-edge web applications that push the boundaries of what's possible online. From progressive web apps to complex integrations, I bring innovation and technical expertise to every project.",
+      body: 'I specialize in developing advanced web applications that redefine the possibilities of online platforms, crafting progressive web apps and integrating complex systems.',
       headings: [
         'Progressive Web Apps',
         'Complex Integrations',
@@ -87,8 +77,12 @@
     },
     {
       title: 'Code Optimization',
-      body: 'Your website deserves to be seen, speed, and responsiveness. By optimizing load times, improving user experiences and SEO, I ensure your site runs smoothly and efficiently.',
-      headings: ['Technical SEO', 'Responsive Design', 'Speed Optimization'],
+      body: 'Your website deserves to be seen, speed, and responsiveness. By optimizing load times, improving user experiences, I ensure your site runs smoothly and efficiently.',
+      headings: [
+        'Modern Frameworks',
+        'Responsive Design',
+        'Speed Optimization',
+      ],
       shape: `<svg  viewBox="0 0 200 200"  xmlns="http://www.w3.org/2000/svg">
   <path d="M100 0L170.711 29.2893L200 100L170.711 170.711L100 200L29.2893 170.711L0 100L29.2893 29.2893L100 0Z" />
   </svg>
diff --git a/src/components/sections/Works.vue b/src/components/sections/Works.vue
index 132a618..bdf3259 100644
--- a/src/components/sections/Works.vue
+++ b/src/components/sections/Works.vue
@@ -123,7 +123,7 @@
     return useWindowSize().width.value < 768;
   });
   const index = ref(0);
-  const selectedWorks = ref('Selected Works /');
+  const selectedWorks = ref('Selected Projects /');
   const selectedWorksProps = [
     {
       id: 0,
diff --git a/src/components/sections/aboutMe.vue b/src/components/sections/aboutMe.vue
index ba111e2..a8f087d 100644
--- a/src/components/sections/aboutMe.vue
+++ b/src/components/sections/aboutMe.vue
@@ -79,7 +79,7 @@
   import { textSplitterIntoChar } from '@/functions';
   import { onBeforeMount, onMounted, ref } from 'vue';
 
-  const aboutMe = ref('Selected Works /');
+  const aboutMe = ref('ٍSelected Projects /');
 
   // const initialPath = ref(`M0 0H${width.value}  V${height.value} H0 Z`);
   // const targetPath = ref(
@@ -88,7 +88,7 @@
 
   onBeforeMount(() => {
     aboutMe.value = textSplitterIntoChar(
-      'Programmer, Developer, Animator/',
+      'Programmer, Developer, Web-animator/',
       true,
       true,
     );
diff --git a/src/data.ts b/src/data.ts
index 49563c8..88bd4d2 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -11,7 +11,7 @@ const navLinks = [
     url: '#services',
   },
   {
-    label: 'Works',
+    label: 'Projects',
     url: '#works',
   },
   {
diff --git a/tailwind.config.js b/tailwind.config.js
index f323c30..39b2850 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,6 +26,19 @@ export default {
         //   900: '#4d4641',
         //   950: '#282422',
         // },
+        // 'black-haze': {
+        //   50: '#f5f7f8',
+        //   100: '#ecf0f2',
+        //   200: '#d6dee1',
+        //   300: '#b1c2c8',
+        //   400: '#87a1a9',
+        //   500: '#68868f',
+        //   600: '#536c76',
+        //   700: '#445860',
+        //   800: '#3b4a51',
+        //   900: '#344046',
+        //   950: '#232b2e',
+        // },
 
         'flax-smoke': {
           50: '#f4f4f1',