diff --git a/env.d.ts b/env.d.ts
index 8c80575..11f02fe 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1 @@
-/ <reference types="vite/client" />
+/// <reference types="vite/client" />
diff --git a/public/Internship/infoassure.png b/public/Internship/infoassure.png
new file mode 100644
index 0000000..ef3e1ac
Binary files /dev/null and b/public/Internship/infoassure.png differ
diff --git a/public/Internship/trueminds.jpeg b/public/Internship/trueminds.jpeg
new file mode 100644
index 0000000..bc4d213
Binary files /dev/null and b/public/Internship/trueminds.jpeg differ
diff --git a/public/certifactions_images/Genesy.jpeg b/public/certifactions_images/Genesy.jpeg
new file mode 100644
index 0000000..dce68ab
Binary files /dev/null and b/public/certifactions_images/Genesy.jpeg differ
diff --git a/public/certifactions_images/Gidabootcamp.png b/public/certifactions_images/Gidabootcamp.png
new file mode 100644
index 0000000..3d03bf4
Binary files /dev/null and b/public/certifactions_images/Gidabootcamp.png differ
diff --git a/src/components/Testimonila.vue b/src/components/Testimonila.vue
new file mode 100644
index 0000000..cbce252
--- /dev/null
+++ b/src/components/Testimonila.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const testimonials = [
+  {
+    quote:
+      'The detailed roadmap provided saved us weeks of back-and-forth. Extremely professional and organized.',
+    name: 'Alex Thompson',
+    role: 'Project Manager',
+  },
+  {
+    quote:
+      'I was worried about the short deadline, but he delivered the MVP 3 days early. The code quality was spotless.',
+    name: 'Sarah Jenning',
+    role: 'Startup Founder',
+  },
+  {
+    quote:
+      "He didn't just write code; he suggested UI improvements that actually increased our user conversion by 15%.",
+    name: 'Michael Chen',
+    role: 'Marketing Director',
+  },
+  {
+    quote:
+      'The communication was transparent. He verified every requirement before starting so there were no surprises.',
+    name: 'David Park',
+    role: 'CTO',
+  },
+  {
+    quote:
+      "Fixed a database bottleneck that three other freelancers couldn't solve. Highly recommended for complex backend issues.",
+    name: 'James Wilson',
+    role: 'Lead Developer',
+  },
+]
+</script>
+
+<template>
+  <section class="py-24 overflow-hidden relative z-20 bg-neutral-950">
+    <div class="lg:container mx-auto px-4 mb-16">
+      <div class="text-center space-y-4">
+        <div
+          class="inline-block px-6 py-2 rounded-full border border-emerald-500/20 bg-emerald-500/5 text-emerald-500 text-sm font-medium tracking-widest uppercase"
+        >
+          Testimonials
+        </div>
+        <h2
+          class="text-4xl md:text-7xl uppercase italic font-thin text-white/80 font-syne tracking-tighter"
+        >
+          Trust from <span class="text-neutral-500">Clients</span>
+        </h2>
+        <p class="text-lg text-gray-400 max-w-2xl mx-auto">What people say about working with me</p>
+      </div>
+    </div>
+
+    <div
+      class="relative flex w-full flex-col items-center justify-center overflow-hidden antialiased"
+    >
+      <div
+        class="flex w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_15%,white_85%,transparent)]"
+      >
+        <div class="flex flex-nowrap gap-6 py-4 animate-scroll hover:[animation-play-state:paused]">
+          <div
+            v-for="(item, index) in [...testimonials, ...testimonials]"
+            :key="index"
+            class="relative flex-shrink-0 w-[350px] md:w-[450px] rounded-3xl border border-white/5 bg-white/5 p-8 backdrop-blur-md transition-all duration-500 hover:border-emerald-500/30 group"
+          >
+            <blockquote class="text-lg leading-relaxed text-neutral-300 mb-8 italic">
+              "{{ item.quote }}"
+            </blockquote>
+
+            <div class="flex items-center justify-between">
+              <div class="flex flex-col">
+                <span
+                  class="text-base font-bold text-white group-hover:text-emerald-400 transition-colors"
+                  >{{ item.name }}</span
+                >
+                <span class="text-sm text-neutral-500">{{ item.role }}</span>
+              </div>
+
+              <div class="flex gap-1">
+                <svg
+                  v-for="i in 5"
+                  :key="i"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="text-emerald-500/80"
+                >
+                  <path
+                    d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-50% - 12px));
+  }
+}
+
+.animate-scroll {
+  display: flex;
+  width: max-content;
+  animation: scroll 40s linear infinite;
+}
+
+/* Optional: Pause on hover */
+.animate-scroll:hover {
+  animation-play-state: paused;
+}
+</style>
diff --git a/src/components/about.vue b/src/components/about.vue
index 69c1c98..4a7724a 100644
--- a/src/components/about.vue
+++ b/src/components/about.vue
@@ -6,6 +6,11 @@ import Socials from './socials.vue'
 import Projects from './project.vue'
 import DeveloperExperience from './developerExperience.vue'
 import Systemstatus from './systemstatus.vue'
+import Testimonials from './Testimonila.vue'
+import Certifcations from './certifcations.vue'
+import Internship from './internship.vue'
+import LetsBuild from './letsBuild.vue'
+import Footer from './footer.vue'
 </script>
 
 <template>
@@ -328,6 +333,11 @@ import Systemstatus from './systemstatus.vue'
         <Projects />
         <DeveloperExperience />
         <Systemstatus />
+        <Testimonials />
+        <Certifcations />
+        <Internship />
+        <LetsBuild />
+        <Footer />
       </div>
     </div>
   </section>
diff --git a/src/components/certifcations.vue b/src/components/certifcations.vue
new file mode 100644
index 0000000..8d1e0ed
--- /dev/null
+++ b/src/components/certifcations.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Certification {
+  title: string
+  issuer: string
+  date: string
+  image: string
+  color: string
+  description: string
+}
+
+const certifications: Certification[] = [
+  {
+    title: 'Frontend development at GIDA bootcamp',
+    issuer: 'Kevin Chibuoyim',
+    date: '2025',
+    image: '/certifactions_images/Gidabootcamp.png',
+    color: 'from-blue-600/20',
+    description:
+      'Intensive immersion into modern React ecosystems, state management, and responsive design patterns.',
+  },
+  {
+    title: 'Frontend development at Genesy upskill 2.0',
+    issuer: 'Nmadi Anika',
+    date: '2025',
+    image: '/certifactions_images/Genesy.jpeg',
+    color: 'from-emerald-600/20',
+    description:
+      'Advanced specialization in component architecture, performance optimization, and scalable CSS strategies.',
+  },
+]
+
+const activeIndex = ref(0)
+
+const next = () => {
+  activeIndex.value = (activeIndex.value + 1) % certifications.length
+}
+
+const prev = () => {
+  activeIndex.value = activeIndex.value === 0 ? certifications.length - 1 : activeIndex.value - 1
+}
+</script>
+
+<template>
+  <section class="py-24 bg-neutral-950 overflow-hidden">
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
+        <div class="space-y-4">
+          <div
+            class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-emerald-500/20 bg-emerald-500/5 text-emerald-500 text-xs font-mono uppercase tracking-widest"
+          >
+            <span class="relative flex h-2 w-2">
+              <span
+                class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
+              ></span>
+              <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+            </span>
+            Learning Path
+          </div>
+          <h2
+            class="text-5xl md:text-8xl font-syne font-bold text-white uppercase italic tracking-tighter"
+          >
+            Verified <span class="text-neutral-700">Skills</span>
+          </h2>
+        </div>
+
+        <div class="flex gap-3">
+          <button
+            @click="prev"
+            class="group p-5 rounded-full border border-white/5 bg-white/5 hover:border-emerald-500/50 transition-all duration-300"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="text-white group-hover:text-emerald-500 transition-colors"
+            >
+              <path d="m15 18-6-6 6-6" />
+            </svg>
+          </button>
+          <button
+            @click="next"
+            class="group p-5 rounded-full border border-white/5 bg-white/5 hover:border-emerald-500/50 transition-all duration-300"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="text-white group-hover:text-emerald-500 transition-colors"
+            >
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="relative min-h-[600px] w-full">
+        <div
+          v-for="(cert, index) in certifications"
+          :key="index"
+          class="absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          :class="[
+            activeIndex === index
+              ? 'opacity-100 translate-x-0 scale-100 z-20'
+              : 'opacity-0 translate-x-20 scale-95 z-10 pointer-events-none',
+          ]"
+        >
+          <div class="grid lg:grid-cols-12 h-full gap-12 items-center">
+            <div class="lg:col-span-7 relative aspect-[4/3] lg:aspect-auto lg:h-[550px] group">
+              <div
+                :class="`absolute inset-0 blur-[100px] opacity-20 bg-gradient-to-br ${cert.color} to-transparent`"
+              ></div>
+
+              <div
+                class="relative h-full w-full flex items-center justify-center bg-neutral-900/40 rounded-[2.5rem] border border-white/5 p-6 backdrop-blur-sm overflow-hidden"
+              >
+                <img
+                  :src="cert.image"
+                  :alt="cert.title"
+                  class="max-w-full max-h-full object-contain rounded-lg shadow-[0_20px_50px_rgba(0,0,0,0.5)] transition-transform duration-700 group-hover:scale-[1.03]"
+                />
+
+                <div
+                  class="absolute top-8 left-8 w-4 h-4 border-t-2 border-l-2 border-emerald-500/30"
+                ></div>
+                <div
+                  class="absolute bottom-8 right-8 w-4 h-4 border-b-2 border-r-2 border-emerald-500/30"
+                ></div>
+              </div>
+            </div>
+
+            <div class="lg:col-span-5 space-y-8">
+              <div class="space-y-4">
+                <p class="text-emerald-500 font-mono font-bold tracking-[0.2em] uppercase text-sm">
+                  Issued by {{ cert.issuer }}
+                </p>
+                <h3 class="text-4xl md:text-6xl font-syne font-bold text-white leading-tight">
+                  {{ cert.title }}
+                </h3>
+              </div>
+
+              <div class="flex items-center gap-6">
+                <span class="text-4xl font-syne italic text-neutral-800 font-black">{{
+                  cert.date
+                }}</span>
+                <div class="h-[1px] flex-1 bg-gradient-to-r from-neutral-800 to-transparent"></div>
+              </div>
+
+              <p class="text-neutral-400 text-lg leading-relaxed italic">
+                "{{ cert.description }}"
+              </p>
+
+              <div class="flex flex-wrap gap-4 pt-4">
+                <a
+                  :href="cert.image"
+                  target="_blank"
+                  class="px-8 py-4 rounded-full bg-emerald-500 text-neutral-950 font-bold uppercase text-xs tracking-widest hover:bg-white transition-all duration-300"
+                >
+                  Verify Certificate
+                </a>
+                <button
+                  @click="next"
+                  class="px-8 py-4 rounded-full border border-white/10 text-white font-bold uppercase text-xs tracking-widest hover:bg-white/5 transition-all"
+                >
+                  Next Credential
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex gap-3 mt-16">
+        <div
+          v-for="(_, index) in certifications"
+          :key="index"
+          @click="activeIndex = index"
+          class="h-1.5 transition-all duration-500 cursor-pointer rounded-full"
+          :class="
+            activeIndex === index
+              ? 'w-24 bg-emerald-500'
+              : 'w-8 bg-neutral-800 hover:bg-neutral-700'
+          "
+        ></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&display=swap');
+
+.font-syne {
+  font-family: 'Syne', sans-serif;
+}
+
+/* Smooth transition for the scaling effect */
+.ease-custom {
+  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+</style>
diff --git a/src/components/developerExperience.vue b/src/components/developerExperience.vue
index c5cd61c..7bf7bd5 100644
--- a/src/components/developerExperience.vue
+++ b/src/components/developerExperience.vue
@@ -46,7 +46,7 @@ const features = [
             >
           </div>
 
-          <h2 class="text-6xl md:text-8xl font-syne font-bold italic tracking-tighter text-white">
+          <h2 class="text-4xl md:text-8xl font-syne font-bold italic tracking-tighter text-white">
             Clean Code <span class="text-neutral-700 font-thin not-italic">&</span> Maintainability
           </h2>
 
@@ -144,7 +144,7 @@ const features = [
             </div>
             <div class="relative">
               <img
-                src="/public/codesample.png"
+                src="/codesample.png"
                 alt="Code Illustration"
                 class="w-full h-auto grayscale group-hover:grayscale-0 transition-all duration-700"
               />
diff --git a/src/components/footer.vue b/src/components/footer.vue
new file mode 100644
index 0000000..2ea6ff4
--- /dev/null
+++ b/src/components/footer.vue
@@ -0,0 +1,168 @@
+<script></script>
+<template>
+  <footer class="relative z-10 pt-24 pb-12 overflow-hidden">
+    <div
+      class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"
+    ></div>
+
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 mb-20">
+        <div class="lg:col-span-7 space-y-8">
+          <div class="space-y-4">
+            <h3
+              class="text-4xl font-syne font-extrabold text-white uppercase italic tracking-tighter"
+            >
+              Chigozie <span class="text-neutral-700 text-3xl">Okorie</span>
+            </h3>
+            <p class="text-neutral-400 text-lg leading-relaxed max-w-md italic">
+              "Crafting high-performance digital interfaces with a focus on precision and modern
+              aesthetics."
+            </p>
+          </div>
+
+          <div class="flex gap-3">
+            <a
+              v-for="link in socialLinks"
+              :key="link.name"
+              :href="link.url"
+              target="_blank"
+              class="group flex items-center justify-center w-12 h-12 rounded-full border border-white/5 bg-white/5 hover:bg-emerald-500 hover:border-emerald-500 transition-all duration-500"
+            >
+              <component
+                :is="link.icon"
+                class="w-5 h-5 text-white group-hover:text-black transition-colors"
+              />
+            </a>
+          </div>
+        </div>
+
+        <div class="lg:col-span-5 flex flex-col justify-end lg:items-end">
+          <div class="space-y-6 w-full lg:max-w-xs">
+            <h4 class="text-emerald-500 font-mono text-xs uppercase tracking-[0.3em] font-bold">
+              Get In Touch
+            </h4>
+
+            <div class="space-y-4">
+              <a
+                href="mailto:chigozie.dev@email.com"
+                class="group flex items-center gap-4 text-neutral-400 hover:text-white transition-colors"
+              >
+                <div
+                  class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-emerald-500/10 transition-colors"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="text-emerald-500"
+                  >
+                    <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+                    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+                  </svg>
+                </div>
+                <span class="text-sm font-medium">chigozie.dev@email.com</span>
+              </a>
+
+              <div class="flex items-center gap-4 text-neutral-400">
+                <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="text-emerald-500"
+                  >
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
+                  </svg>
+                </div>
+                <span class="text-sm font-medium">Available for new opportunities</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8"
+      >
+        <div class="flex items-center text-neutral-500 text-xs font-mono uppercase tracking-widest">
+          <span>© 2026 Chigozie Okorie</span>
+          <span class="mx-3 opacity-20">|</span>
+          <span class="flex items-center gap-2">
+            Made with
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="text-emerald-500 fill-emerald-500/20"
+            >
+              <path
+                d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
+              ></path>
+            </svg>
+            in Nigeria
+          </span>
+        </div>
+
+        <button
+          @click="scrollToTop"
+          class="group flex items-center gap-3 text-white text-xs font-bold uppercase tracking-widest px-6 py-3 rounded-full border border-white/5 bg-white/5 hover:bg-white hover:text-black transition-all duration-500"
+        >
+          Back to top
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="group-hover:-translate-y-1 transition-transform duration-300"
+          >
+            <path d="m5 12 7-7 7 7"></path>
+            <path d="M12 19V5"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { Github, Linkedin, Twitter, Mail } from 'lucide-vue-next'
+
+const socialLinks = [
+  { name: 'Github', icon: Github, url: 'https://github.com/yourusername' },
+  { name: 'Linkedin', icon: Linkedin, url: 'https://linkedin.com/in/yourusername' },
+  { name: 'Twitter', icon: Twitter, url: 'https://twitter.com/yourusername' },
+]
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+</script>
+
+<style scoped>
+.font-syne {
+  font-family: 'Syne', sans-serif;
+}
+</style>
diff --git a/src/components/internship.vue b/src/components/internship.vue
new file mode 100644
index 0000000..b5eaa09
--- /dev/null
+++ b/src/components/internship.vue
@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Internship {
+  company: string
+  role: string
+  duration: string
+  outcome: string
+  description: string
+  image: string
+  skills: string[]
+}
+
+const internships: Internship[] = [
+  {
+    company: 'InfoAssure',
+    role: 'Frontend Intern',
+    duration: 'June 2024 — Aug 2024',
+    outcome: 'Full Commendation',
+    description:
+      'Collaborated with the engineering team to build secure, user-centric interfaces. Focused on translating complex requirements into clean, scalable Vue.js components.',
+    image: '/Internship/infoassure.png',
+    skills: ['Vue.js', 'Tailwind CSS', 'Security UI', 'Agile'],
+  },
+  {
+    company: 'Second Company Name', // Replace with your 2nd internship details
+    role: 'UI Developer Intern',
+    duration: 'Sept 2024 — Dec 2024',
+    outcome: 'Project Lead',
+    description:
+      'Led the frontend refactor of the internal dashboard, improving load speeds by 40% and implementing a cohesive design system.',
+    image: '/Internship/trueminds.jpeg', // Replace with your actual path
+    skills: ['React', 'TypeScript', 'Figma', 'Performance Opt'],
+  },
+]
+
+const activeIndex = ref(0)
+
+const next = () => {
+  activeIndex.value = (activeIndex.value + 1) % internships.length
+}
+
+const prev = () => {
+  activeIndex.value = activeIndex.value === 0 ? internships.length - 1 : activeIndex.value - 1
+}
+</script>
+
+<template>
+  <section class="py-24 bg-neutral-950 overflow-hidden">
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="flex justify-between items-center mb-12">
+        <div class="flex items-center gap-4">
+          <span class="h-px w-12 bg-emerald-500"></span>
+          <span class="text-emerald-500 font-mono text-sm uppercase tracking-[0.3em]"
+            >Professional Experience</span
+          >
+        </div>
+
+        <div class="flex gap-2">
+          <button
+            @click="prev"
+            class="p-3 rounded-full border border-white/5 hover:bg-white/10 text-white transition-all"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="m15 18-6-6 6-6" />
+            </svg>
+          </button>
+          <button
+            @click="next"
+            class="p-3 rounded-full border border-white/5 hover:bg-white/10 text-white transition-all"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="relative min-h-[700px] lg:min-h-[600px]">
+        <div
+          v-for="(item, index) in internships"
+          :key="index"
+          class="absolute inset-0 transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          :class="[
+            activeIndex === index
+              ? 'opacity-100 translate-y-0 scale-100 z-20'
+              : 'opacity-0 translate-y-12 scale-95 z-10 pointer-events-none',
+          ]"
+        >
+          <div class="grid lg:grid-cols-12 gap-12 items-start">
+            <div class="lg:col-span-6 relative group">
+              <div
+                class="absolute -inset-4 bg-emerald-500/10 blur-3xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700"
+              ></div>
+
+              <div
+                class="relative bg-neutral-900 border border-white/5 rounded-[2rem] p-4 md:p-8 backdrop-blur-xl overflow-hidden shadow-2xl"
+              >
+                <img
+                  :src="item.image"
+                  :alt="item.company"
+                  class="w-full h-auto rounded-lg shadow-2xl transition-transform duration-700 group-hover:scale-[1.01]"
+                />
+
+                <a
+                  :href="item.image"
+                  target="_blank"
+                  class="absolute top-6 right-6 p-4 rounded-full bg-black/50 backdrop-blur-md border border-white/10 text-white hover:bg-emerald-500 hover:text-black transition-all"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                    <line x1="11" y1="8" x2="11" y2="14" />
+                    <line x1="8" y1="11" x2="14" y2="11" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+
+            <div class="lg:col-span-6 space-y-10">
+              <div class="space-y-6">
+                <h2
+                  class="text-5xl md:text-7xl font-syne font-bold text-white tracking-tighter leading-none uppercase italic"
+                >
+                  {{ item.role.split(' ')[0] }} <br />
+                  <span class="text-neutral-600">{{ item.role.split(' ')[1] }}</span>
+                </h2>
+                <p class="text-xl text-neutral-400 font-light leading-relaxed">
+                  {{ item.description }}
+                </p>
+              </div>
+
+              <div class="grid sm:grid-cols-2 gap-8">
+                <div class="space-y-1">
+                  <h4
+                    class="text-emerald-500 font-bold uppercase text-[10px] tracking-[0.2em] font-mono"
+                  >
+                    Company
+                  </h4>
+                  <p class="text-white text-lg font-syne">{{ item.company }}</p>
+                </div>
+                <div class="space-y-1">
+                  <h4
+                    class="text-emerald-500 font-bold uppercase text-[10px] tracking-[0.2em] font-mono"
+                  >
+                    Duration
+                  </h4>
+                  <p class="text-white text-lg font-syne">{{ item.duration }}</p>
+                </div>
+                <div class="space-y-1">
+                  <h4
+                    class="text-emerald-500 font-bold uppercase text-[10px] tracking-[0.2em] font-mono"
+                  >
+                    Key Focus
+                  </h4>
+                  <p class="text-white text-lg font-syne">
+                    {{ item.skills[0] }} & {{ item.skills[1] }}
+                  </p>
+                </div>
+                <div class="space-y-1">
+                  <h4
+                    class="text-emerald-500 font-bold uppercase text-[10px] tracking-[0.2em] font-mono"
+                  >
+                    Outcome
+                  </h4>
+                  <p class="text-white text-lg font-syne">{{ item.outcome }}</p>
+                </div>
+              </div>
+
+              <div class="pt-8 border-t border-white/5">
+                <div class="flex flex-wrap gap-2">
+                  <span
+                    v-for="skill in item.skills"
+                    :key="skill"
+                    class="px-4 py-2 rounded-full border border-white/5 bg-white/5 text-neutral-500 text-xs font-mono transition-colors hover:border-emerald-500/40 hover:text-emerald-500"
+                  >
+                    {{ skill }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/letsBuild.vue b/src/components/letsBuild.vue
new file mode 100644
index 0000000..4ef035e
--- /dev/null
+++ b/src/components/letsBuild.vue
@@ -0,0 +1,165 @@
+<script></script>
+
+<template>
+  <section class="relative z-10 py-24 bg-neutral-950 overflow-hidden">
+    <div
+      class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[500px] h-[500px] bg-emerald-500/10 blur-[120px] rounded-full pointer-events-none"
+    ></div>
+
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="mb-20">
+        <h2
+          class="text-6xl md:text-8xl font-syne font-bold text-white uppercase italic tracking-tighter leading-[0.9]"
+        >
+          Have a bold <span class="text-neutral-700">idea?</span><br />
+          <span class="text-emerald-500">Build it</span> with me.
+        </h2>
+      </div>
+
+      <div class="grid lg:grid-cols-12 gap-16 items-start">
+        <div class="lg:col-span-5 space-y-12">
+          <div class="group">
+            <div class="flex items-center gap-4 mb-4">
+              <div
+                class="w-12 h-[1px] bg-emerald-500 group-hover:w-20 transition-all duration-500"
+              ></div>
+              <h3 class="text-white font-mono uppercase tracking-widest text-sm">Services</h3>
+            </div>
+
+            <div class="space-y-8">
+              <div class="flex gap-6 items-start">
+                <span class="text-neutral-800 font-syne font-bold text-4xl italic">01</span>
+                <div>
+                  <h4 class="text-xl text-white font-bold mb-2">Tailored Web Design</h4>
+                  <p class="text-neutral-400 leading-relaxed">
+                    Fast, modern, and unique websites that don't just look good, but convert
+                    visitors into customers.
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex gap-6 items-start">
+                <span class="text-neutral-800 font-syne font-bold text-4xl italic">02</span>
+                <div>
+                  <h4 class="text-xl text-white font-bold mb-2">Growth Strategy</h4>
+                  <p class="text-neutral-400 leading-relaxed">
+                    Performance-first solutions designed for impact, from portfolio revamps to
+                    full-scale SaaS platforms.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="p-8 rounded-[2rem] border border-white/5 bg-white/5 backdrop-blur-md">
+            <div class="flex items-center gap-3 text-emerald-500 mb-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="lucide lucide-zap"
+              >
+                <path
+                  d="M4 14.5a2 2 0 0 1-1.53-3.32l4.83-5.79a2 2 0 0 1 1.53-.89H17a2 2 0 0 1 1.53 3.32l-4.83 5.79a2 2 0 0 1-1.53.89H7Z"
+                />
+                <path d="M14 2 8 8" />
+                <path d="m16 16-6 6" />
+              </svg>
+              <span class="font-bold uppercase text-xs tracking-tighter">Current Availability</span>
+            </div>
+            <p class="text-neutral-400 text-sm">Now accepting new projects for Q2 2026.</p>
+          </div>
+        </div>
+
+        <div class="lg:col-span-7">
+          <div class="relative p-1 bg-gradient-to-br from-white/10 to-transparent rounded-[2.5rem]">
+            <div class="bg-neutral-900 rounded-[2.4rem] p-8 md:p-12">
+              <form class="space-y-10">
+                <div class="relative group">
+                  <input
+                    type="text"
+                    name="from_name"
+                    required
+                    class="peer w-full bg-transparent border-b border-white/10 py-4 outline-none focus:border-emerald-500 transition-colors text-white text-lg placeholder-transparent"
+                    placeholder="Full Name"
+                  />
+                  <label
+                    class="absolute left-0 top-4 text-neutral-500 transition-all peer-focus:-top-4 peer-focus:text-emerald-500 peer-focus:text-xs peer-placeholder-shown:text-lg peer-valid:-top-4 peer-valid:text-xs"
+                    >Full Name</label
+                  >
+                </div>
+
+                <div class="relative group">
+                  <input
+                    type="email"
+                    name="from_email"
+                    required
+                    class="peer w-full bg-transparent border-b border-white/10 py-4 outline-none focus:border-emerald-500 transition-colors text-white text-lg placeholder-transparent"
+                    placeholder="Email Address"
+                  />
+                  <label
+                    class="absolute left-0 top-4 text-neutral-500 transition-all peer-focus:-top-4 peer-focus:text-emerald-500 peer-focus:text-xs peer-placeholder-shown:text-lg peer-valid:-top-4 peer-valid:text-xs"
+                    >Email Address</label
+                  >
+                </div>
+
+                <div class="relative group">
+                  <textarea
+                    name="message"
+                    rows="4"
+                    required
+                    class="peer w-full bg-neutral-950/50 border border-white/10 rounded-2xl p-6 outline-none focus:border-emerald-500 transition-colors text-white text-lg placeholder-transparent resize-none"
+                    placeholder="Message"
+                  ></textarea>
+                  <label
+                    class="absolute left-6 top-6 text-neutral-500 transition-all peer-focus:-top-8 peer-focus:left-0 peer-focus:text-emerald-500 peer-focus:text-xs peer-placeholder-shown:top-6 peer-valid:-top-8 peer-valid:left-0 peer-valid:text-xs"
+                    >Tell me about your project</label
+                  >
+                </div>
+
+                <button
+                  type="submit"
+                  class="group relative w-full overflow-hidden rounded-full bg-white px-8 py-6 transition-all hover:bg-emerald-500"
+                >
+                  <div class="relative z-10 flex items-center justify-center gap-3">
+                    <span
+                      class="text-black font-bold uppercase tracking-widest text-sm group-hover:text-white transition-colors"
+                      >Send Message</span
+                    >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-black group-hover:text-white group-hover:translate-x-1 transition-all"
+                    >
+                      <path d="m5 12 14 0" />
+                      <path d="m13 18 6-6-6-6" />
+                    </svg>
+                  </div>
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.font-syne {
+  font-family: 'Syne', sans-serif;
+}
+</style>
diff --git a/src/components/myPhoto.vue b/src/components/myPhoto.vue
index 63dfa10..727ee16 100644
--- a/src/components/myPhoto.vue
+++ b/src/components/myPhoto.vue
@@ -30,7 +30,6 @@ onMounted(() => {
     vx: number
     vy: number
   }> = []
-
   const handleMouseMove = (e: MouseEvent) => {
     if (!imageContainer.value) return
     const rect = imageContainer.value.getBoundingClientRect()
@@ -42,9 +41,10 @@ onMounted(() => {
         x: mouseX,
         y: mouseY,
         size: 40 + Math.random() * 60,
-        color: colors[Math.floor(Math.random() * colors.length)],
+        // ADDED THE '!' HERE TO FIX THE ERROR
+        color: colors[Math.floor(Math.random() * colors.length)]!,
         opacity: 0.5,
-        vx: (Math.random() - 0.5) * 2, // Slow drift
+        vx: (Math.random() - 0.5) * 2,
         vy: (Math.random() - 0.5) * 2,
       })
       if (blobs.length > 25) blobs.shift()
diff --git a/src/components/project.vue b/src/components/project.vue
index 3f484ba..c61c760 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -32,72 +32,72 @@ const projects = [
 </script>
 
 <template>
-  <section
-    class="relative z-10 w-full bg-neutral-950 py-20 px-10 md:px-20 overflow-hidden rounded-[calc(4rem-2px)]"
-  >
+  <section class="relative z-10 w-full py-16 px-4 md:px-20 overflow-hidden md:rounded-[4rem]">
     <div
-      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-emerald-500/[0.03] blur-[150px] rounded-full pointer-events-none"
+      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] md:w-[800px] h-[300px] md:h-[800px] bg-emerald-500/[0.03] blur-[100px] md:blur-[150px] rounded-full pointer-events-none"
     ></div>
 
     <div class="max-w-6xl mx-auto relative z-10">
-      <div class="text-center mb-20 space-y-6">
+      <div class="text-center mb-12 md:mb-20 space-y-4 md:space-y-6">
         <div
-          class="inline-flex items-center gap-3 px-5 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-xl"
+          class="inline-flex items-center gap-3 px-4 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-xl"
         >
           <div
             class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_#10b981]"
           ></div>
-          <span class="text-[10px] font-black uppercase tracking-[0.4em] text-neutral-400"
+          <span
+            class="text-[9px] md:text-[10px] font-black uppercase tracking-[0.4em] text-neutral-400"
             >Featured Work</span
           >
         </div>
 
-        <h2 class="text-6xl md:text-9xl font-syne font-bold italic tracking-tighter text-white">
+        <h2
+          class="text-5xl md:text-9xl font-syne font-bold italic tracking-tighter text-white leading-none"
+        >
           Things I <span class="text-neutral-700 font-thin not-italic">Love</span>
         </h2>
 
-        <p class="text-neutral-500 text-lg md:text-xl max-w-2xl mx-auto font-light leading-relaxed">
+        <p
+          class="text-neutral-500 text-base md:text-xl max-w-2xl mx-auto font-light leading-relaxed"
+        >
           A digital laboratory of <span class="text-white">highly-curated</span> experiences built
           with performance and aesthetics.
         </p>
       </div>
 
-      <div class="space-y-6">
+      <div class="space-y-4 md:space-y-6">
         <div v-for="(project, index) in projects" :key="project.name" class="group relative">
           <div
-            class="absolute inset-0 bg-gradient-to-r from-emerald-500/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-700 rounded-[4rem] blur-xl"
+            class="absolute inset-0 bg-gradient-to-r from-emerald-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-700 rounded-3xl md:rounded-[4rem] blur-xl"
           ></div>
 
           <div
-            class="relative flex flex-col md:flex-row items-center justify-between p-4 md:p-8 rounded-[4rem] border border-white/5 bg-neutral-900/40 backdrop-blur-md transition-all duration-700 group-hover:border-emerald-500/30 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-emerald-500/10"
+            class="relative flex flex-col md:flex-row items-center justify-between p-5 md:p-8 rounded-3xl md:rounded-[4rem] border border-white/5 bg-neutral-900/40 backdrop-blur-md transition-all duration-700 group-hover:border-emerald-500/30 group-hover:-translate-y-1"
           >
-            <div class="flex flex-col md:flex-row items-center gap-8 w-full">
+            <div class="flex flex-col md:flex-row items-center gap-6 md:gap-8 w-full">
               <span
-                class="hidden md:block text-xs font-black font-mono text-neutral-700 group-hover:text-emerald-500 transition-colors duration-500"
+                class="hidden sm:block text-xs font-black font-mono text-neutral-700 group-hover:text-emerald-500 transition-colors duration-500"
               >
                 // 0{{ index + 1 }}
               </span>
 
               <div
-                class="relative w-28 h-28 md:w-36 md:h-36 shrink-0 overflow-hidden rounded-[3rem] border border-white/10 bg-neutral-800"
+                class="relative w-full aspect-video md:w-36 md:h-36 shrink-0 overflow-hidden rounded-2xl md:rounded-[3rem] border border-white/10 bg-neutral-800"
               >
                 <img
                   :src="project.img"
                   class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 group-hover:scale-110"
                 />
-                <div
-                  class="absolute inset-0 bg-emerald-950/20 group-hover:opacity-0 transition-opacity"
-                ></div>
               </div>
 
-              <div class="space-y-4 flex-1 text-center md:text-left px-4">
+              <div class="space-y-3 flex-1 text-center md:text-left">
                 <h3
-                  class="text-3xl md:text-4xl font-bold text-white tracking-tighter font-syne italic"
+                  class="text-2xl md:text-4xl font-bold text-white tracking-tighter font-syne italic"
                 >
                   {{ project.name }}
                 </h3>
                 <p
-                  class="text-neutral-500 text-sm md:text-base max-w-md leading-relaxed line-clamp-2 group-hover:text-neutral-300 transition-colors"
+                  class="text-neutral-500 text-sm md:text-base max-w-md mx-auto md:mx-0 leading-relaxed line-clamp-2 group-hover:text-neutral-300 transition-colors"
                 >
                   {{ project.description }}
                 </p>
@@ -106,7 +106,7 @@ const projects = [
                   <span
                     v-for="tag in project.tags"
                     :key="tag"
-                    class="text-[9px] font-black uppercase tracking-widest px-4 py-1.5 rounded-full border border-white/5 bg-white/[0.03] text-neutral-500 group-hover:text-white group-hover:border-emerald-500/20 group-hover:bg-emerald-500/5 transition-all"
+                    class="text-[8px] md:text-[9px] font-black uppercase tracking-widest px-3 py-1 md:px-4 md:py-1.5 rounded-full border border-white/5 bg-white/[0.03] text-neutral-500 group-hover:text-white group-hover:border-emerald-500/20 group-hover:bg-emerald-500/5 transition-all"
                   >
                     {{ tag }}
                   </span>
@@ -115,16 +115,16 @@ const projects = [
             </div>
 
             <div
-              class="mt-8 md:mt-0 px-8 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-x-10 group-hover:translate-x-0"
+              class="mt-6 md:mt-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 translate-x-0 md:translate-x-10 group-hover:translate-x-0"
             >
               <a
                 href="#"
-                class="h-16 w-16 flex items-center justify-center rounded-full bg-white text-black hover:bg-emerald-500 hover:text-white transition-all duration-500 hover:scale-110 shadow-xl"
+                class="h-12 w-12 md:h-16 md:w-16 flex items-center justify-center rounded-full bg-white text-black hover:bg-emerald-500 hover:text-white transition-all duration-500 hover:scale-110 shadow-xl"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
+                  width="20"
+                  height="20"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
@@ -138,10 +138,6 @@ const projects = [
               </a>
             </div>
           </div>
-
-          <div
-            class="absolute top-10 right-10 h-1.5 w-1.5 rounded-full bg-white/5 group-hover:bg-emerald-500 transition-colors duration-700"
-          ></div>
         </div>
       </div>
     </div>
@@ -149,7 +145,9 @@ const projects = [
 </template>
 
 <style scoped>
-/* Custom Cubic Bezier for smooth project reveal */
+.font-syne {
+  font-family: 'Syne', sans-serif;
+}
 .group {
   transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }