diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/deploy.yml
similarity index 100%
rename from .github/workflows/build-deploy.yml
rename to .github/workflows/deploy.yml
diff --git a/README.md b/README.md
index a11a0a6..3760db5 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <!-- AUTOMATION BADGES -->
 
 [![CodeQL](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/github-code-scanning/codeql)
-[![Build and Deploy](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/build-deploy.yml/badge.svg)](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/build-deploy.yml)
+[![Build and Deploy](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/deploy.yml/badge.svg)](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/deploy.yml)
 
 <!-- LOGO (OPTIONAL) -->
 
@@ -26,7 +26,7 @@ Feel free to use it as your own landing page if you like.
 
 ## Requirements
 
-You need to install the [Node.js](https://nodejs.dev/) and `npm` package manager first.
+You need to install the [Bun](https://bun.sh/) first.
 
 > Recommended IDE:
 > [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
@@ -44,9 +44,9 @@ You need to install the [Node.js](https://nodejs.dev/) and `npm` package manager
     ```sh
     cd webceyhan.github.io
     ```
-3. Install NPM packages.
+3. Install packages.
     ```sh
-    npm install
+    bun install
     ```
 4. Set your social link handles in .env file.
     ```sh
@@ -74,9 +74,9 @@ You need to install the [Node.js](https://nodejs.dev/) and `npm` package manager
 You can use following commands to do various task with the project.
 
 ```sh
-npm run dev             # start development server
-npm run build           # build for production
-npm run preview         # preview built application
+bun run dev             # start development server
+bun run build           # build for production
+bun run preview         # preview built application
 ```
 
 > Take a look at the other scripts in [`package.json`](./package.json)
@@ -90,7 +90,7 @@ npm run preview         # preview built application
 Start the development server to watch changes while you code.
 
 ```sh
-npm run dev
+bun run dev
 ```
 
 <br>
@@ -101,13 +101,13 @@ npm run dev
 Build the application for production.
 
 ```sh
-npm run build
+bun run build
 ```
 
 You can also preview the application after building it.
 
 ```sh
-npm run preview
+bun run preview
 ```
 
 <br>
@@ -117,9 +117,9 @@ npm run preview
 
 A GitHub Action will automatically deploy the project to GitHub Pages on every push.
 
-The workflow will build the project using npm and output the result to the `dist` folder which will be then pushed to the `gh-pages` branch.
+The workflow will build the project using bun and output the result to the `dist` folder which will be then pushed to the `gh-pages` branch.
 
-> See the details in [.github/workflows/build-and-deploy.yml](./.github/workflows/build-and-deploy.yml)
+> See the details in [.github/workflows/deploy.yml](./.github/workflows/deploy.yml)
 
 <br>
 <!-- REFERENCES ////////////////////////////////////////////////////////// -->
diff --git a/bun.lockb b/bun.lockb
index 10c2b4b..c8f49e7 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/AppParticles.client.vue b/components/AppParticles.vue
similarity index 100%
rename from components/AppParticles.client.vue
rename to components/AppParticles.vue
diff --git a/components/footer/SocialNav.vue b/components/footer/SocialNav.vue
index aba9736..e9fbbc1 100644
--- a/components/footer/SocialNav.vue
+++ b/components/footer/SocialNav.vue
@@ -3,9 +3,11 @@
 import Link from "@/components/ui/Link.vue";
 import type { SocialLink } from "~/server/types/social";
 
-defineProps<{
+interface Props {
   links: SocialLink[];
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/project/LanguageFilterNav.vue b/components/project/LanguageFilterNav.vue
index 28a4114..ee978a0 100644
--- a/components/project/LanguageFilterNav.vue
+++ b/components/project/LanguageFilterNav.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Language } from "~/server/types/repo";
 
+interface Props {
+  modelValue: string | null;
+  languages: Language[];
+}
+
 const emit = defineEmits(["update:modelValue"]);
 
-const props = defineProps<{
-  modelValue: string | null;
-  languages:  Language[];
-}>();
+const props = defineProps<Props>();
 
 const onToggle = (name: string) => {
   const active = props.modelValue === name;
diff --git a/components/project/LanguageList.vue b/components/project/LanguageList.vue
index 824d11d..9a2cfd9 100644
--- a/components/project/LanguageList.vue
+++ b/components/project/LanguageList.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { Language } from "~/server/types/repo";
 
-defineProps<{
+interface Props {
   languages: Language[];
-}>();
+}
+
+defineProps<Props>();
 
 // filter significant languages that has rate >= 1
 const filterSignificant = (languages: Language[]) => {
diff --git a/components/project/Repository.vue b/components/project/Repository.vue
index 371e0ff..3b04f1e 100644
--- a/components/project/Repository.vue
+++ b/components/project/Repository.vue
@@ -2,9 +2,11 @@
 import Link from "@/components/ui/Link.vue";
 import type { Repo } from "~/server/types/repo";
 
-defineProps<{
+interface Props {
   repo: Repo;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/project/RepositoryList.client.vue b/components/project/RepositoryList.vue
similarity index 93%
rename from components/project/RepositoryList.client.vue
rename to components/project/RepositoryList.vue
index 61bf06f..db916b3 100644
--- a/components/project/RepositoryList.client.vue
+++ b/components/project/RepositoryList.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { Repo } from "~/server/types/repo";
 
-defineProps<{
+interface Props {
   repos: Repo[];
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/project/TopicFilterNav.vue b/components/project/TopicFilterNav.vue
index ab32976..8e7cbac 100644
--- a/components/project/TopicFilterNav.vue
+++ b/components/project/TopicFilterNav.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Topic } from "~/server/types/repo";
 
-const emit = defineEmits(["update:modelValue"]);
-
-const props = defineProps<{
+interface Props {
   modelValue: string | null;
   topics: Topic[];
-}>();
+}
+
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps<Props>();
 
 const onToggle = (topic: string) => {
   const active = props.modelValue === topic;
diff --git a/components/project/TopicList.vue b/components/project/TopicList.vue
index e8b180a..3b18909 100644
--- a/components/project/TopicList.vue
+++ b/components/project/TopicList.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   topics?: string[];
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Avatar.vue b/components/ui/Avatar.vue
index 71a3d9f..d6dafde 100644
--- a/components/ui/Avatar.vue
+++ b/components/ui/Avatar.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   url: string;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Badge.vue b/components/ui/Badge.vue
index 1ab205d..b95aff4 100644
--- a/components/ui/Badge.vue
+++ b/components/ui/Badge.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { Variant } from "~/types/ui";
-
-defineProps<{
+interface Props {
   label?: string;
   variant?: Variant;
   outlined?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index 57afb65..d6dc31c 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import type { Variant } from "~/types/ui";
 
-defineEmits(["click"]);
-
-defineProps<{
+interface Props {
   label?: string;
   variant?: Variant;
   outline?: boolean;
@@ -12,7 +10,11 @@ defineProps<{
   small?: boolean;
   tiny?: boolean;
   micro?: boolean;
-}>();
+}
+
+defineEmits(["click"]);
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Card.vue b/components/ui/Card.vue
index 6830fce..d66854e 100644
--- a/components/ui/Card.vue
+++ b/components/ui/Card.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   title?: string;
   imageAside?: boolean;
   imageOverlay?: boolean;
   compact?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Collapse.vue b/components/ui/Collapse.vue
index 4947618..7ef1532 100644
--- a/components/ui/Collapse.vue
+++ b/components/ui/Collapse.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { AccordionInjection } from "~/types/ui";
 
-const props = defineProps<{
+interface Props {
   title: string;
   open?: boolean;
-}>();
+}
+
+const props = defineProps<Props>();
 
 const open = ref(props.open);
 
diff --git a/components/ui/Countdown.vue b/components/ui/Countdown.vue
index 61df25e..4fc0082 100644
--- a/components/ui/Countdown.vue
+++ b/components/ui/Countdown.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   value: number;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Divider.vue b/components/ui/Divider.vue
index 67f9932..56e2c9a 100644
--- a/components/ui/Divider.vue
+++ b/components/ui/Divider.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   label?: string;
   horizontal?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Heading.vue b/components/ui/Heading.vue
index d176e1c..db10f48 100644
--- a/components/ui/Heading.vue
+++ b/components/ui/Heading.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   large?: boolean;
   //   medium: boolean; // default
   small?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Icon.vue b/components/ui/Icon.vue
index 2553175..14e6839 100644
--- a/components/ui/Icon.vue
+++ b/components/ui/Icon.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   name: string;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Link.vue b/components/ui/Link.vue
index d1d9713..13fb377 100644
--- a/components/ui/Link.vue
+++ b/components/ui/Link.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Variant } from "~/types/ui";
 
-defineProps<{
+interface Props {
   label?: string;
   variant?: Variant;
   active?: boolean;
   hover?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Loader.vue b/components/ui/Loader.vue
index 421d484..2456295 100644
--- a/components/ui/Loader.vue
+++ b/components/ui/Loader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   spinner?: boolean;
   dots?: boolean;
   ring?: boolean;
@@ -9,7 +9,9 @@ defineProps<{
   small?: boolean;
   // medium: boolean
   large?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/ProgressBar.vue b/components/ui/ProgressBar.vue
index d045f28..c29dc00 100644
--- a/components/ui/ProgressBar.vue
+++ b/components/ui/ProgressBar.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Item } from "~/types/ui";
 
-defineProps<{
+interface Props {
   items: Item[];
   small?: boolean;
   //   medium: boolean; // default
   large?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/ui/Stat.vue b/components/ui/Stat.vue
index 166866f..40d8a38 100644
--- a/components/ui/Stat.vue
+++ b/components/ui/Stat.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   label?: string;
   value?: string | number;
   desc?: string;
   icon?: string;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 853e6e9..a5d8bac 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+    ssr: false,
     devtools: { enabled: true },
     modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
     css: ['~/assets/css/main.css', 'bootstrap-icons/font/bootstrap-icons.css'],
diff --git a/package.json b/package.json
index 22c8b84..08a738a 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@pinia/nuxt": "^0.5.1",
     "@types/node": "^20.9.0",
     "bootstrap-icons": "^1.11.1",
-    "bun-types": "^1.0.15",
+    "bun-types": "^1.0.19",
     "daisyui": "^4.0.3",
     "nuxt": "^3.8.2",
     "pinia": "^2.1.7",
diff --git a/server/constants/social.ts b/server/constants/social.ts
index 786f126..124a230 100644
--- a/server/constants/social.ts
+++ b/server/constants/social.ts
@@ -1,4 +1,4 @@
-import { SocialLink } from '../types/social';
+import type { SocialLink } from '../types/social';
 
 export const LINKS: SocialLink[] = [
     {