add final touch

Hetari · Sep 6, 2024 · d2892dd · d2892dd
1 parent 0119f67
commit d2892dd
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,58 @@
-# Vue 3 + TypeScript + Vite
+# Ebraheem Alhetari - Full-Stack Developer Portfolio
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Welcome to my portfolio! I'm **Ebraheem Alhetari**, a full-stack developer and freelancer with a passion for creating immersive web experiences. Specializing in **Vue.js**, **GSAP** animations, and **Tailwind CSS**, I craft elegant, responsive, and fully animated websites.
 
-## Recommended Setup
+## 🛠 Tech Stack
 
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+This portfolio showcases my expertise in modern web technologies, including:
 
-- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
+- **Vue.js** (with Composition API & TypeScript)
+- **GSAP** (for stunning animations)
+- **Tailwind CSS** (for efficient styling)
+- **Lenis** (smooth scrolling)
+- **vue3-lottie** (Lottie animations)
+- **Vite.js** (fast development and build tool)
+
+## ✨ Features
+
+My entire portfolio is a dynamic and animated experience, designed to capture attention and showcase my skills. A key aspect is its visually captivating UI, originally designed by the talented freelancer **Huy Nguyen**, whom I acknowledge and credit for allowing me to use and clone his design.
+
+## 🔍 Portfolio Sections
+
+- **Loading Screen**: A fully animated, immersive start to the experience.
+- **Hero**: A powerful introduction highlighting my name and expertise.
+- **Services**: An overview of what I offer as a developer.
+- **Marquee**: An interactive, scrolling display of key highlights.
+- **My Works**: A collection of my best projects, demonstrating my skills.
+- **About Me**: A deep dive into who I am as a developer.
+- **Testimonials**: Real feedback from people I've worked with.
+- **Contact Me**: Easily get in touch via the contact form.
+- **Footer**: Site navigation and social links.
+
+## 🚀 Getting Started
+
+To view the project locally, follow these steps:
+
+```bash
+# Clone the repository
+git clone https://github.com/hetari/portfolio
+
+# Navigate to the project directory
+cd portfolio
+
+# Install dependencies
+npm install
+
+# Run the development server
+npm run dev
+```
+
+You can now view the portfolio on `http://localhost:5173` in your browser.
+
+## 🌱 Future Plans
+
+I am continuously improving my portfolio and plan to add **Arabic language support** soon, making it fully bilingual for both English and Arabic users.
+
+## 🎨 Acknowledgments
+
+I would like to extend a special thank you to **Huy Nguyen** for his original UI design, which I have cloned with his permission. His creative vision has been instrumental in shaping the look and feel of this portfolio.
diff --git a/index.html b/index.html
@@ -1,7 +1,19 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta name="color-scheme" content="light dark" />
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <noscript
+      ><link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap"
+    /></noscript>
+
+    <meta name="color-scheme" content="dark" />
 
     <!-- Basic Meta Tags -->
     <meta charset="UTF-8" />

diff --git a/src/assets/videos/index.ts b/src/assets/videos/index.ts
@@ -1,5 +1,8 @@
 import earthLottie from './earth.json';
 import contact from './contact.mp4';
-import work1 from './work1.mp4';
+import work1 from './work1.webm';
+import work2 from './work2.webm';
+import work3 from './work3.webm';
+import work4 from './work4.webm';
 
-export { earthLottie, contact, work1 };
+export { earthLottie, contact, work1, work2, work3, work4 };
diff --git a/src/assets/videos/work1.mp4 b/src/assets/videos/work1.mp4
diff --git a/src/assets/videos/work1.webm b/src/assets/videos/work1.webm
diff --git a/src/assets/videos/work2.webm b/src/assets/videos/work2.webm
diff --git a/src/assets/videos/work3.webm b/src/assets/videos/work3.webm
diff --git a/src/assets/videos/work4.webm b/src/assets/videos/work4.webm
diff --git a/src/components/sections/Contact.vue b/src/components/sections/Contact.vue
@@ -1,5 +1,6 @@
 <template>
   <section
+  id="contact-section"
     class="relative min-h-svh w-full select-none overflow-y-clip p-[4vh]"
   >
     <div

diff --git a/src/components/sections/People.vue b/src/components/sections/People.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- common-padding  -->
   <section
-    id="people-section"
-    class="will-change-transform common-padding relative mx-auto min-h-svh overflow-y-clip py-0"
+    id="testimonials-section"
+    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-transform"
   >
     <div
       class="grid w-full grid-cols-12 border-b-[1px] border-flax-smoke-300 pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"
@@ -19,7 +19,7 @@
         <p class="heading-6 text-nowrap text-center uppercase">
           ( Testimonials )
         </p>
-        <p class="heading-6 w-full text-balance font-fancy sm:max-w-[40ch]">
+        <p class="heading-6 font-fancy w-full text-balance sm:max-w-[40ch]">
           Here's what my clients say about our collaboration. Their satisfaction
           and meeting expectations are my top priorities, ensuring the best
           experience possible.
@@ -56,9 +56,9 @@
     });
   };
   onMounted(() => {
-    animatePeopleSectionLeave('#people-section');
+    animatePeopleSectionLeave('#testimonials-section');
   });
   onUpdated(() => {
-    animatePeopleSectionLeave('#people-section');
+    animatePeopleSectionLeave('#testimonials-section');
   });
 </script>
diff --git a/src/components/sections/Works.vue b/src/components/sections/Works.vue
@@ -68,14 +68,21 @@
                 class="flex-center z-10 aspect-[4/3] size-full overflow-clip rounded-lg object-cover"
               >
                 <!-- TODO: use mux player -->
-                <video :src="work.videoSrc" autoplay loop></video>
+                <video
+                  :src="work.videoSrc"
+                  autoplay
+                  loop
+                  muted
+                  @error="handleVideoError"
+                  type="video/webm"
+                ></video>
               </div>
             </div>
             <div class="leading-none">
               <p class="heading-6 mb-[1%] mt-[2%] !font-title">
                 {{ work.category }}
               </p>
-              <div class="flex items-center justify-between">
+              <div class="items-center justify-between sm:flex">
                 <h3 class="heading-3 !font-title font-bold uppercase">
                   {{ work.name }}
                 </h3>
@@ -104,11 +111,11 @@
 
 <script setup lang="ts">
   import { animateSplitText } from '@/animations';
-  import { work1 } from '@/assets/videos';
+  import { work1, work2, work3, work4 } from '@/assets/videos';
   import { textSplitterIntoChar } from '@/functions';
   import { computed, onBeforeMount, onMounted, ref } from 'vue';
   import gsap from 'gsap';
-  import { workBg1 } from '@/assets/images';
+  import { workBg1, workBg2, workBg3, workBg4 } from '@/assets/images';
   import { useWindowSize } from '@vueuse/core';
 
   const isSmallScreen = computed(() => {
@@ -127,8 +134,43 @@
       url: 'https://github.com/hetari/pyutube',
       year: '2024',
     },
+    {
+      id: 1,
+      name: 'Iphone 15 Clone',
+      category: 'Frontend & Animation & 3D',
+      tags: ['Animation', '3D'],
+      videoSrc: work2,
+      imageBg: workBg2,
+      url: 'https://github.com/Hetari/iphone15-pro-clone',
+      year: '2024',
+    },
+    {
+      id: 2,
+      name: 'Axon',
+      category: 'Frontend & Documentation',
+      tags: ['Vue.js', 'Tailwind', 'AI'],
+      videoSrc: work3,
+      imageBg: workBg3,
+      url: 'https://github.com/Hetari/axon',
+
+      year: '2024',
+    },
+    {
+      id: 3,
+      name: 'Blogy',
+      category: 'Frontend & Backend',
+      tags: ['Vue.js', 'Laravel'],
+      videoSrc: work4,
+      imageBg: workBg4,
+      url: 'https://github.com/Hetari/blog',
+      year: '2023',
+    },
   ];
 
+  const handleVideoError = (event: any) => {
+    console.error('Video failed to load:', event);
+  };
+
   // Reusable function to handle forward scroll animation
   const createForwardTimeline = (
     index: any,

diff --git a/src/data.ts b/src/data.ts
@@ -18,9 +18,13 @@ const navLinks = [
     label: 'About',
     url: '#about-me-section',
   },
+  {
+    label: 'Testimonials',
+    url: '#testimonials-section',
+  },
   {
     label: 'Contact',
-    url: '#',
+    url: '#contact-section',
   },
 ];
 const navbarLinks = [

diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght,[email protected],0..100&display=swap');
 
 .\@container {
   container-type: inline-size;