change the font of my name

Hetari · Jul 28, 2024 · c6d1d5a · c6d1d5a
1 parent a7f7e62
commit c6d1d5a
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -1,71 +1,129 @@
 <!doctype html>
 <html lang="en">
-
   <head>
     <!-- Basic Meta Tags -->
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <meta name="description"
-      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage">
-    <meta name="keywords"
-      content="full-stack developer,frontend developer,backend developer,freelance creative developer,freelance,web developer,portfolio,ebraheem alhetari,ابراهيم الهتاري,software engineer,web development,programming,coding,portfolio,portfolio website,ebraheem,alhetari,hetari">
-    <meta name="author" content="Ebraheem Alhetari">
-    <meta itemprop="image" content="http://hetari.github.io/portfolio/assets/profile-dtKvApsu.webp">
-
+    <meta
+      name="description"
+      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage"
+    />
+    <meta
+      name="keywords"
+      content="full-stack developer,frontend developer,backend developer,freelance creative developer,freelance,web developer,portfolio,ebraheem alhetari,ابراهيم الهتاري,software engineer,web development,programming,coding,portfolio,portfolio website,ebraheem,alhetari,hetari"
+    />
+    <meta name="author" content="Ebraheem Alhetari" />
+    <meta
+      itemprop="image"
+      content="http://hetari.github.io/portfolio/assets/profile-dtKvApsu.webp"
+    />
 
     <!-- Open Graph Meta Tags  -->
     <meta property="og:image:type" content="image/jpeg" />
-    <meta property="og:image:width" content="2400" />
-    <meta property="og:image:height" content="1260" />
-    <meta property="og:image" content="https://hetari.github.io/portfolio/assets/profile-dtKvApsu.webp">
-    <meta property="og:title" content="Ebraheem Alhetari - Full-Stack Developer">
-    <meta property="og:description"
-      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage">
-    <meta property="og:url" content="https://hetari.github.io/portfolio/">
-    <meta property="og:site_name" content="Ebraheem Alhetari — Freelance Web Developer" />
-    <meta property="og:type" content="website">
+    <meta property="og:image:width" content="1100" />
+    <meta property="og:image:height" content="1000" />
+    <meta
+      property="og:image"
+      content="https://hetari.github.io/portfolio/assets/profile-dtKvApsu.webp"
+    />
+    <meta
+      property="og:title"
+      content="Ebraheem Alhetari - Full-Stack Developer"
+    />
+    <meta
+      property="og:description"
+      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage"
+    />
+    <meta property="og:url" content="https://hetari.github.io/portfolio/" />
+    <meta
+      property="og:site_name"
+      content="Ebraheem Alhetari — Freelance Web Developer"
+    />
+    <meta property="og:type" content="website" />
     <meta property="og:locale:alternate" content="ar_AR" />
     <meta property="og:site_name" content="Ebraheem Alhetari" />
 
     <!-- Twitter Card Meta Tags -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Ebraheem Alhetari - Full-Stack Developer" />
-    <meta name="twitter:description"
-      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage" />
+    <meta
+      name="twitter:title"
+      content="Ebraheem Alhetari - Full-Stack Developer"
+    />
+    <meta
+      name="twitter:description"
+      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage"
+    />
     <meta name="twitter:image:type" content="image/jpeg" />
     <meta name="twitter:image:width" content="2400" />
     <meta name="twitter:image:height" content="1260" />
-    <meta name="twitter:image:alt"
-      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage." />
-    <meta name="twitter:image" content="https://hetari.github.io/portfolio/assets/profile-dtKvApsu.webp" />
+    <meta
+      name="twitter:image:alt"
+      content="Ebraheem Alhetari - A freelance who is experienced in full-Stack Developer helping startups all around the world gain their unfair advantage."
+    />
+    <meta
+      name="twitter:image"
+      content="https://hetari.github.io/portfolio/assets/profile-dtKvApsu.webp"
+    />
     <meta name="twitter:url" content="https://hetari.github.io/portfolio/" />
 
     <!-- Canonical Tag -->
     <link rel="canonical" href="https://hetari.github.io/portfolio/" />
 
     <!-- Robots Meta Tags -->
-    <meta name="robots" content="index,follow">
-    <meta name="googlebot" content="index,follow">
+    <meta name="robots" content="index,follow" />
+    <meta name="googlebot" content="index,follow" />
 
     <!-- Additional Meta Tags -->
-    <meta name="revisit-after" content="7 days">
-    <meta name="generator" content="Visual Studio Code">
-    <meta name="mssmarttagspreventparsing" content="true">
-    <meta name="no-cache" content="no-cache">
-    <meta name="google" content="notranslate">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="revisit-after" content="7 days" />
+    <meta name="generator" content="Visual Studio Code" />
+    <meta name="mssmarttagspreventparsing" content="true" />
+    <meta name="no-cache" content="no-cache" />
+    <meta name="google" content="notranslate" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
     <!-- Favicon and Apple Touch Icons -->
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="/apple-touch-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="/apple-touch-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="/apple-touch-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/apple-touch-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/apple-touch-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/apple-touch-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/apple-touch-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-touch-icon-180x180.png"
+    />
 
     <title>Ebraheem Alhetari - Full-Stack Developer</title>
   </head>
@@ -74,5 +132,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-
-</html>
+</html>
diff --git a/src/animations/index.ts b/src/animations/index.ts
@@ -269,7 +269,7 @@ const animateHeroNav = () => {
     ease: 'power4.inOut',
   });
 
-  gsap.to('#svg-my-en-name path', {
+  gsap.to('#svg-my-en-name g path', {
     y: 0,
     duration: 0.8,
     ease: 'power4.inOut',

diff --git a/src/components/MyEnName.vue b/src/components/MyEnName.vue
@@ -1,5 +1,58 @@
 <template>
   <svg
+    class="w-full fill-flax-smoke-900"
+    viewBox="-0.986 137.36 592.342 73.279"
+    style="enable-background: new 0 0 595.3 841.9"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g transform="matrix(1.26098, 0, 0, 1.26098, -74.435867, -304.372864)">
+      <path
+        class="translate-y-full"
+        d="M58.3,408.1v-57.7h14.2v57.7H58.3z M68.7,361.9v-11.5h34v11.5H68.7z M68.7,384.3v-10.4h29.9v10.4H68.7z M68.7,408.1v-11.5
+		h34.2v11.5H68.7z"
+      ></path>
+      <path
+        class="translate-y-full"
+        d="M111.3,408.1v-57.7h24.5c3.6,0,6.8,0.3,9.7,0.9c2.9,0.6,5.3,1.5,7.3,2.8c2,1.3,3.5,2.8,4.6,4.8c1,1.9,1.6,4.2,1.6,6.9
+		c0,2.3-0.5,4.3-1.4,6c-1,1.7-2.5,3.1-4.5,4.2c-2.1,1-4.8,1.7-8.2,2.1v1.3c5.7,0.3,9.8,1.7,12.5,4.1c2.7,2.4,4,5.5,4,9.5
+		c0,3.4-0.9,6.2-2.7,8.4c-1.8,2.2-4.4,3.9-7.9,5c-3.5,1.1-7.7,1.7-12.8,1.7H111.3z M124.9,374.6h8.8c3.9,0,6.8-0.6,8.7-1.7
+		c1.9-1.1,2.8-2.8,2.8-5c0-2.2-0.9-3.7-2.6-4.8c-1.7-1-4.3-1.5-7.8-1.5h-9.9V374.6z M124.9,396.9h12.5c3.4,0,5.9-0.5,7.6-1.5
+		c1.7-1,2.5-2.6,2.5-4.8c0-2.4-1-4.2-3-5.3c-2-1.2-5-1.7-9-1.7h-10.6V396.9z"
+      ></path>
+      <path
+        class="translate-y-full"
+        d="M169.8,408.1v-57.7h24.4c3,0,5.8,0.2,8.3,0.7c2.5,0.5,4.8,1.2,6.8,2.1c2,1,3.7,2.1,5.1,3.5c1.4,1.3,2.5,2.9,3.2,4.7
+		c0.7,1.8,1.1,3.8,1.1,6c0,2-0.3,3.8-1,5.4c-0.6,1.6-1.6,3-2.9,4.3c-1.3,1.3-3,2.3-4.9,3.1c-2,0.8-4.3,1.4-7,1.7v1.1
+		c3.4,0.3,6,1,7.9,2.2c1.9,1.2,3.3,2.7,4.3,4.6c1,1.9,1.8,4.1,2.5,6.6l3.2,11.7h-15.6l-2.4-10.8c-0.5-2.2-1.1-4-2-5.2
+		c-0.8-1.3-2-2.2-3.4-2.7c-1.4-0.5-3.1-0.7-5.2-0.7h-8.2v19.5H169.8z M183.9,378.1h9.1c3.5,0,6.2-0.7,8.1-2c1.9-1.3,2.8-3.4,2.8-6.3
+		c0-2.9-0.9-5-2.6-6.4c-1.7-1.4-4.4-2.1-8-2.1h-9.4V378.1z"
+      ></path>
+      <path
+        class="translate-y-full"
+        d="M223.9,408.1l19.5-57.7h20.1l19.4,57.7h-15.3L254,361.5h-1.2l-13.6,46.6H223.9z M235.3,397.5v-9.6h38.2v9.6H235.3z"
+      ></path>
+      <path
+        class="translate-y-full"
+        d="M289.3,408.1v-57.7h14.2v57.7H289.3z M298.4,384.8v-11.5h33.8v11.5H298.4z M326.1,408.1v-57.7h14.1v57.7H326.1z"
+      ></path>
+      <path
+        class="translate-y-full"
+        d="M350.9,408.1v-57.7h14.2v57.7H350.9z M361.3,361.9v-11.5h34v11.5H361.3z M361.3,384.3v-10.4h29.9v10.4H361.3z M361.3,408.1
+		v-11.5h34.2v11.5H361.3z"
+      ></path>
+      <path
+        class="translate-y-full"
+        d="M403.9,408.1v-57.7h14.2v57.7H403.9z M414.4,361.9v-11.5h34v11.5H414.4z M414.4,384.3v-10.4h29.9v10.4H414.4z M414.4,408.1
+		v-11.5h34.2v11.5H414.4z"
+      ></path>
+      <path
+        class="translate-y-full"
+        d="M457,408.1v-57.7h21.2l14.2,41.3h0.3l13.9-41.3h20.1v57.7h-13.3l0.6-43.4h-0.8l-15.7,43.4h-11.7l-15.5-43.4h-0.8l0.6,43.4
+		H457z"
+      ></path>
+    </g>
+  </svg>
+  <!-- <svg
     class="w-full fill-flax-smoke-800"
     viewBox="0 0 817 107"
     fill="none"
@@ -45,5 +98,5 @@
       class="translate-y-full"
       d="M679.401 0.318179H707.087L736.328 71.6591H737.572L766.814 0.318179H794.5V106.5H772.724V37.3885H771.843L744.364 105.982H729.536L702.058 37.1293H701.176V106.5H679.401V0.318179Z"
     />
-  </svg>
+  </svg> -->
 </template>
diff --git a/src/components/design/Star.vue b/src/components/design/Star.vue
@@ -4,7 +4,7 @@
     <span>
       <svg
         style="vertical-align: top"
-        class="hide fill-flax-smoke-800 inline-block size-[calc((50vw)_/_24_*_1.9)] animate-[spin_5s_linear_infinite]"
+        class="hide heading-size inline-block animate-[spin_5s_linear_infinite] fill-flax-smoke-900"
         viewBox="0 0 75 76"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/sections/Hero.vue b/src/components/sections/Hero.vue
@@ -6,7 +6,7 @@
     >
       <div class="relative flex w-full flex-col items-center">
         <div class="w-full items-end overflow-clip">
-          <div class="flex w-full items-start">
+          <div class="flex w-full items-start gap-10">
             <MyName />
             <Star id="star" class="hide-on-mobile translate-x-full" />
           </div>

diff --git a/src/style.css b/src/style.css
@@ -137,6 +137,10 @@
   .heading-2 {
     font-size: var(--heading-2);
   }
+  .heading-size {
+    width: var(--heading-1--alt);
+    height: var(--heading-1--alt);
+  }
   .heading-1 {
     font-size: var(--heading-1);
   }