diff --git a/.prettierrc b/.prettierrc
index 3667846..8c3f990 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,13 +2,19 @@
   "printWidth": 150,
   "arrowParens": "avoid",
   "tabWidth": 2,
-  "plugins": ["prettier-plugin-astro"],
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-svelte"],
   "overrides": [
     {
       "files": "*.astro",
       "options": {
         "parser": "astro"
       }
+    },
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
     }
   ]
 }
diff --git a/README.md b/README.md
index 60f0057..c7c86cd 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ My personal portfolio built with Astro and TailwindCSS.
 
 Deployed at siri-dev.vercel.app. I am too cheap to buy the siri.dev domain :(
 
+Design heavily inspired by [nexxel](https://nexxel.dev)'s site
+
 ## Technologies
 
 - Astro
diff --git a/astro.config.ts b/astro.config.ts
index 919a0a0..15699d9 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -1,16 +1,23 @@
 import { defineConfig } from "astro/config";
-
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 import vercel from "@astrojs/vercel/static";
 import icon from "astro-icon";
+import svelte from "@astrojs/svelte";
 
+// https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx(), sitemap(), icon({ iconDir: "src/components/icons" })],
-  build: { format: "file" },
+  integrations: [tailwind(), mdx(), sitemap(), icon({
+    iconDir: "src/components/icons"
+  }), svelte()],
+  build: {
+    format: "file"
+  },
   site: "https://siri-dev.vercel.app",
   adapter: vercel({
-    webAnalytics: { enabled: true },
-  }),
-});
+    webAnalytics: {
+      enabled: true
+    }
+  })
+});
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 4d6f598..14afd0f 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index a0b73d2..028cb77 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,23 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.0.1",
-    "@iconify-json/mdi": "^1.1.66",
-    "@vercel/analytics": "^1.2.2",
-    "astro": "^4.0.6",
-    "astro-icon": "^1.1.0",
+    "@astrojs/mdx": "^3.1.9",
+    "@astrojs/svelte": "^6.0.1",
+    "@iconify-json/mdi": "^1.2.1",
+    "@vercel/analytics": "^1.4.1",
+    "astro": "^4.16.13",
+    "astro-icon": "^1.1.2",
     "astro-tweet": "github:Dev-Siri/astro-tweet"
   },
   "devDependencies": {
-    "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/tailwind": "^5.1.0",
-    "@astrojs/vercel": "^6.1.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-astro": "^0.12.3",
-    "tailwindcss": "^3.4.1"
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/tailwind": "^5.1.2",
+    "@astrojs/vercel": "^7.8.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-svelte": "^3.2.8",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3",
+    "svelte": "^5.2.3"
   }
 }
diff --git a/src/components/BookItem.astro b/src/components/BookItem.astro
index b2d35e2..913ab7a 100644
--- a/src/components/BookItem.astro
+++ b/src/components/BookItem.astro
@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import SocialMediaLink from "../components/SocialMediaLink.astro";
+import ProceedToCheckout from "../islands/ProceedToCheckout.svelte";
 
 export interface Props {
   title: string;
@@ -24,9 +25,7 @@ const { title, authors, imageUrl, price, imageSize } = Astro.props;
     <h5 class="text-balance">{authors} "{title}" O'Rly Book</h5>
     <p class="text-md text-gray-400 mt-2">${price}</p>
     <div class="flex flex-col w-fit">
-      <button type="button" class="bg-white text-black p-2 px-4 rounded-full my-4 hover:bg-gray-200 duration-200" data-id="checkout-btn">
-        Proceed to Checkout
-      </button>
+      <ProceedToCheckout client:load />
       <div class="flex gap-2">
         <span class="text-md">By</span>
         <SocialMediaLink username="@IroncladDev" variant="twitter">IroncladDev</SocialMediaLink>
@@ -34,11 +33,3 @@ const { title, authors, imageUrl, price, imageSize } = Astro.props;
     </div>
   </section>
 </article>
-
-<script>
-  const checkoutButtons = document.querySelectorAll<HTMLButtonElement>("[data-id=checkout-btn]");
-
-  const RICKROLL_URL = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
-
-  checkoutButtons.forEach(checkoutButton => checkoutButton.addEventListener("click", () => window.open(RICKROLL_URL)));
-</script>
diff --git a/src/components/GalleryPicture.astro b/src/components/GalleryPicture.astro
index fc2029d..fcba6d7 100644
--- a/src/components/GalleryPicture.astro
+++ b/src/components/GalleryPicture.astro
@@ -27,9 +27,15 @@ const { index, location, height, width } = Astro.props;
     {width}
   />
   <div class="hidden absolute justify-center inset-0 h-full items-center group-hover:flex">
-    <Icon name="mdi:map-marker" height={25} width={25} color="red" />
-    <p>
-      {location}
+    <Icon name="mdi:map-marker-outline" height={25} width={25} />
+    <p aria-label={location} class="gallery-picture-location ml-1">
+      {location.toLowerCase()}
     </p>
   </div>
 </a>
+
+<style>
+  .gallery-picture-location {
+    word-spacing: -5px;
+  }
+</style>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 1f98057..bf189b9 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -10,9 +10,16 @@ import AnimatedSiriLogo from "./AnimatedSiriLogo.astro";
   <section class="items-center hidden lg:flex justify-around ml-auto">
     {
       links.map(navLink => (
-        <a class="hover:text-white text-gray-300 duration-200 rounded-md p-2 transform-gpu px-10" href={`/${navLink}`}>
-          {`${navLink.charAt(0).toUpperCase()}${navLink.slice(1)}`}
-        </a>
+        <div class="relative">
+          <a class="hover:text-white text-gray-300 duration-200 rounded-md p-2 transform-gpu px-10" href={`/${navLink}`}>
+            {navLink}
+          </a>
+          {Astro.url.pathname === `/${navLink}` && (
+            <span transition:name="indicator" class={`absolute inset-0 left-[37%] top-[90%] text-gray-300`}>
+              ^^^
+            </span>
+          )}
+        </div>
       ))
     }
   </section>
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index db8ddcc..0b6013a 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -30,11 +30,11 @@ const linkProps = link?.includes("http")
     }
   </section>
   <section class="p-4 absolute z-10 mt-auto bottom-0 h-32">
-    <p class="text-4xl font-bold leading-normal">
-      {name}
+    <p class="text-3xl mt-3 font-bold leading-normal">
+      {name.toString()}
     </p>
-    <p class="ml-1 text-gray-400 w-full" title={description}>
-      {description.length >= 60 ? `${description.slice(0, 60)}...` : description}
+    <p class="ml-1 text-sm text-gray-400 w-full" title={description}>
+      {description.length >= 55 ? `${description.slice(0, 55)}...` : description}
     </p>
   </section>
   <section class="relative h-full">
diff --git a/src/components/SideMenu.astro b/src/components/SideMenu.astro
index 3877c86..83c0b49 100644
--- a/src/components/SideMenu.astro
+++ b/src/components/SideMenu.astro
@@ -4,11 +4,11 @@ import { links } from "../data";
 
 <aside
   id="side-menu"
-  class="flex animate-slide flex-col items-center bg-dark-gray w-2/4 sm:w-1/4 pt-10 ml-[50%] sm:ml-[75%] h-screen gap-2 mt-[100px] fixed z-50 border-l-2 border-t-2 border-semi-dark-gray rounded-l-md"
+  class="flex animate-slide pr-[4%] flex-col items-center bg-dark-gray w-2/4 sm:w-1/4 pt-4 ml-[50%] sm:ml-[75%] h-screen gap-2 mt-[100px] fixed z-50 border-l-2 border-t-2 border-semi-dark-gray rounded-l-md"
 >
   {
     links.map(navLink => (
-      <a class="p-4 bg-black w-3/4 rounded-full justify-center hover:scale-105 duration-200 flex" href={`/${navLink}`}>
+      <a class="p-4 w-3/4 rounded-full justify-center hover:scale-105 duration-200 flex" href={`/${navLink}`}>
         {`${navLink.charAt(0).toUpperCase()}${navLink.slice(1)}`}
       </a>
     ))
diff --git a/src/data.ts b/src/data.ts
index 580e056..d55146a 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -1,5 +1,11 @@
 export const links = ["blog", "projects", "gallery", "book"];
 
+export const location = "Kolkata, India";
+export const designation = {
+  default: "CEO @ htmx.org (multi-billion)",
+  alternative: "CTO @ Twitter Shitposting Org™",
+};
+
 export const socialLinks = [
   {
     name: "Youtube",
diff --git a/src/islands/AnimatedText.svelte b/src/islands/AnimatedText.svelte
new file mode 100644
index 0000000..09e8e72
--- /dev/null
+++ b/src/islands/AnimatedText.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  const { text, animationSpeed = 90, staticText = "" } = $props();
+
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";
+
+  let currentText = $state("");
+  let resolved = 0;
+
+  function scrambleText() {
+    let output = "";
+
+    for (let i = 0; i < text.length; i++) {
+      if (i < resolved) {
+        output += text[i];
+      } else {
+        output += chars[Math.floor(Math.random() * chars.length)];
+      }
+    }
+
+    currentText = output;
+
+    if (resolved < text.length) {
+      setTimeout(() => {
+        resolved++;
+        scrambleText();
+      }, animationSpeed);
+    }
+  }
+
+  $effect(() => {
+    scrambleText();
+  });
+</script>
+
+{`${currentText}${staticText}`}
+<!-- In case of no JS, the text can still be shown -->
+<noscript>{text}{staticText}</noscript>
diff --git a/src/islands/HoverTextAnimation.svelte b/src/islands/HoverTextAnimation.svelte
new file mode 100644
index 0000000..5953d0a
--- /dev/null
+++ b/src/islands/HoverTextAnimation.svelte
@@ -0,0 +1,25 @@
+<script>
+  import AnimatedText from "./AnimatedText.svelte";
+
+  const { defaultText, replaceText, staticText = "" } = $props();
+
+  let showingDefault = $state(true);
+  let hoveredOnce = $state(false);
+
+  function handleMouseEnter() {
+    showingDefault = false;
+    hoveredOnce = true;
+  }
+</script>
+
+<span role="presentation" onmouseenter={handleMouseEnter} onmouseleave={() => (showingDefault = true)}>
+  {#if showingDefault}
+    {#if !hoveredOnce}
+      {`${defaultText}${staticText}`}
+    {:else}
+      <AnimatedText text={defaultText} {staticText} animationSpeed={20} />
+    {/if}
+  {:else}
+    <AnimatedText text={replaceText} {staticText} animationSpeed={20} />
+  {/if}
+</span>
diff --git a/src/islands/ProceedToCheckout.svelte b/src/islands/ProceedToCheckout.svelte
new file mode 100644
index 0000000..20c33cb
--- /dev/null
+++ b/src/islands/ProceedToCheckout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  const RICKROLL_URL = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+</script>
+
+<button
+  type="button"
+  class="bg-white text-black p-2 px-4 rounded-full my-4 hover:bg-gray-200 duration-200"
+  on:click={() => window.open(RICKROLL_URL)}
+>
+  Proceed to Checkout
+</button>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 471db7d..4508b80 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,11 +1,18 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
 
+import AnimatedText from "../islands/AnimatedText.svelte";
+
 const blogPosts = await Astro.glob("./blog/**/*.mdx");
 ---
 
 <BaseLayout title="Blog" path="/blog" description="I like to post about my life, comparison of the technologies I use and other cool stuff here.">
-  <h4>Dev-Siri's Blog</h4>
+  <h4>
+    dev-siri's
+    <span class="font-semibold">
+      <AnimatedText client:load text="blog" animationSpeed={50} />
+    </span>
+  </h4>
   <ul class="list-[none!important]">
     {
       blogPosts
@@ -17,8 +24,8 @@ const blogPosts = await Astro.glob("./blog/**/*.mdx");
         .map(({ frontmatter, url }) => (
           <li class="py-0">
             <a href={url} class="text-start">
-              <h6 transition:name={frontmatter.title}>{frontmatter.title}</h6>
-              <p class="text-gray-400 -mt-5">{frontmatter.publishdate}</p>
+              <h6 transition:name={frontmatter.title}>{frontmatter.title.toLowerCase()}</h6>
+              <p class="text-gray-400 -mt-5">{frontmatter.publishdate.toLowerCase()}</p>
             </a>
           </li>
         ))
diff --git a/src/pages/book.astro b/src/pages/book.astro
index c83c6d2..a1bde9f 100644
--- a/src/pages/book.astro
+++ b/src/pages/book.astro
@@ -1,10 +1,16 @@
 ---
 import BookItem from "../components/BookItem.astro";
+import AnimatedText from "../islands/AnimatedText.svelte";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout title="Get My Book" description="Get my O'Rly Book" path="/book" class="text-start">
-  <h4 class="mt-2">Get my O'Rly Books</h4>
+  <h4 class="mt-2">
+    dev-siri's
+    <span class="font-semibold">
+      <AnimatedText client:load text="books" animatedSpeed={50} />
+    </span>
+  </h4>
   <BookItem
     title="BaguetteMaxxing Deepfakes 🥖🇫🇷"
     authors="Dev-Siri"
diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro
index cdc09c0..de2502d 100644
--- a/src/pages/gallery.astro
+++ b/src/pages/gallery.astro
@@ -1,10 +1,16 @@
 ---
 import GalleryPicture from "../components/GalleryPicture.astro";
+import AnimatedText from "../islands/AnimatedText.svelte";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout title="Gallery" description="Pictures I took, when touching grass." path="/gallery">
-  <h4 class="mt-2">Dev-Siri's Gallery</h4>
+  <h4 class="mt-2">
+    dev-siri's
+    <span class="font-semibold">
+      <AnimatedText client:load text="gallery" animationSpeed={50} />
+    </span>
+  </h4>
   <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
     <div class="grid gap-4">
       <GalleryPicture index={1} location="Varanasi, India" height={575} width={1280} />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b3cdd51..3627c7a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,4 +1,10 @@
 ---
+import { Icon } from "astro-icon/components";
+
+import { designation, location } from "../data";
+
+import AnimatedText from "../islands/AnimatedText.svelte";
+import HoverTextAnimation from "../islands/HoverTextAnimation.svelte";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
 const blogPosts = await Astro.glob("./blog/**/*.mdx");
@@ -6,14 +12,31 @@ const blogPosts = await Astro.glob("./blog/**/*.mdx");
 
 <BaseLayout title="Hi I'm Dev-Siri, Web & Flutter Developer">
   <section>
-    <h4>Hi I'm Dev-Siri</h4>
+    <h4>
+      <AnimatedText client:load text="hi i'm" />
+      <b>
+        <AnimatedText client:load text="dev-siri" />
+      </b>
+    </h4>
+    <div class="flex items-center gap-1 text-gray-400 mb-2">
+      <Icon name="mdi:map-marker-outline" height={20} width={20} />
+      <p aria-label={location} class="cursor-default">
+        {location.toLowerCase()}
+      </p>
+    </div>
+    <div class="flex items-center gap-1 text-gray-400 mb-4">
+      <Icon name="mdi:domain" height={20} width={20} />
+      <p aria-label={`${designation.default} / ${designation.alternative}`} class="cursor-default">
+        <HoverTextAnimation client:load defaultText={designation.default.toLowerCase()} replaceText={designation.alternative.toLowerCase()} />
+      </p>
+    </div>
     <p class="text-lg mb-6">
-      Just another dude into programming. Spends a lot of his time on Twitter, writes code. what else do I even have to say here? Can go, rust, htmx,
+      just another dude into programming. spends a lot of his time on twitter, writes code. what else do i even have to say here? can go, rust, htmx,
       the only technologies you need to know right now.
     </p>
   </section>
   <section id="blog">
-    <h4>Recent Blog Posts</h4>
+    <h4>recent blog posts</h4>
     <ul class="list-[none!important]">
       {
         blogPosts
@@ -26,8 +49,8 @@ const blogPosts = await Astro.glob("./blog/**/*.mdx");
           .map(({ frontmatter, url }) => (
             <li class="py-0">
               <a href={url}>
-                <h6 transition:name={frontmatter.title}>{frontmatter.title}</h6>
-                <p class="text-gray-400 -mt-5">{frontmatter.publishdate}</p>
+                <h6 transition:name={frontmatter.title}>{frontmatter.title.toLowerCase()}</h6>
+                <p class="text-gray-400 -mt-5">{frontmatter.publishdate.toLowerCase()}</p>
               </a>
             </li>
           ))
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 57765df..bf3c88d 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,12 +1,18 @@
 ---
 import ProjectCard from "../components/ProjectCard.astro";
+import AnimatedText from "../islands/AnimatedText.svelte";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
 import { projects } from "../data";
 ---
 
 <BaseLayout title="Projects" description="My creations showcased." path="/projects">
-  <h4 class="mt-4">Projects</h4>
+  <h4 class="mt-4">
+    dev-siri's
+    <span class="font-semibold">
+      <AnimatedText client:load text="projects" animationSpeed={50} />
+    </span>
+  </h4>
   <aside class="grid grid-cols-1 md:grid-cols-2 min-[1129px]:grid-cols-3 mt-8 gap-10">
     {projects.map(project => <ProjectCard {...project} />)}
   </aside>
diff --git a/src/styles/blog.css b/src/styles/blog.css
index e92fb6b..29cb922 100644
--- a/src/styles/blog.css
+++ b/src/styles/blog.css
@@ -1,14 +1,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: "Geist-Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("/fonts/Geist-Mono.woff2") format("woff2");
-}
-
 main ul {
   @apply list-disc;
 }
@@ -21,11 +13,6 @@ main blockquote {
   @apply bg-semi-dark-gray mt-3 rounded-md p-5 text-gray-400 border-l-8 my-4;
 }
 
-code,
-.astro-code code .line > span {
-  font-family: "Geist-Mono", sans-serif;
-}
-
 .astro-code {
   @apply bg-semi-dark-gray rounded-md my-5 p-5;
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index bb9150e..00408a1 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,35 +3,45 @@
 
 @font-face {
   font-family: "Geist";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
   src: url("/fonts/Geist.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Geist-Mono";
+  font-style: normal;
   font-weight: 400;
   font-display: swap;
+  src: url("/fonts/Geist-Mono.woff2") format("woff2");
 }
 
 ::selection {
   background-color: rgba(0, 166, 255, 0.301);
 }
 
+*::-webkit-scrollbar {
+  @apply hidden;
+}
+
+*:not(.astro-tweet-theme *) {
+  font-family: "Geist-Mono", sans-serif;
+  @apply scroll-smooth;
+}
+
 /* Override astro-tweet's default theme */
 .astro-tweet-theme {
   --tweet-bg-color: #1c1c1c;
   --tweet-bg-color-hover: #212121;
   --tweet-border: 1px solid #3b3b3b;
+  font-family: "Geist", sans-serif !important ;
 }
 
 html {
   color-scheme: dark;
 }
 
-*::-webkit-scrollbar {
-  @apply hidden;
-}
-
-* {
-  font-family: "Geist", sans-serif;
-  @apply scroll-smooth;
-}
-
 .spin {
   animation: spinning 3s linear infinite;
 }
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..cf44f38
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@astrojs/svelte";
+
+export default {
+  preprocess: vitePreprocess(),
+};
diff --git a/tsconfig.json b/tsconfig.json
index 8e6bde1..78f6453 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "astro/tsconfigs/strictest",
+  "include": ["src"],
   "compilerOptions": {
     "jsx": "preserve"
   }