Moved to Vue. Making it ✨Vuetiful✨

astro.config.mjs

@@ -1,7 +1,7 @@
 // @ts-check
 import { defineConfig } from "astro/config";
 
-import solidJs from "@astrojs/solid-js";
+import vue from "@astrojs/vue";
 
 import node from "@astrojs/node";
 
@@ -16,7 +16,7 @@ export default defineConfig({
   build: {
     inlineStylesheets: "always",
   },
-  integrations: [solidJs(), icon()],
+  integrations: [vue(), icon()],
 
   adapter: node({
     mode: "standalone",

package.json

@@ -10,20 +10,20 @@
   },
   "dependencies": {
     "@astrojs/node": "^9.5.2",
-    "@astrojs/solid-js": "^5.1.3",
+    "@astrojs/vue": "^5.1.4",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/roboto-slab": "^5.2.8",
+    "@heroicons/vue": "^2.2.0",
     "@tailwindcss/vite": "^4.1.18",
-    "astro": "^5.16.10",
+    "astro": "^5.16.15",
     "astro-icon": "^1.1.5",
     "nodemailer": "^7.0.12",
-    "solid-heroicons": "^3.2.4",
-    "solid-js": "^1.9.10",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "vue": "^3.5.27"
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.0.10",
     "@types/nodemailer": "^7.0.5",
     "daisyui": "^5.5.14"
   }

src/components/StatusIndicator.tsx

@@ -1,63 +0,0 @@
-import { createSignal, createEffect, onCleanup } from "solid-js";
-
-type StatusColor = "green" | "yellow" | "red";
-
-interface StatusResponse {
-  text: string;
-  color: StatusColor;
-}
-
-const colorClasses: Record<StatusColor, string> = {
-  green: "bg-success",
-  yellow: "bg-warning",
-  red: "bg-error",
-};
-
-export default function StatusIndicator() {
-  const [statusText, setStatusText] = createSignal("Accepting new clients");
-  const [statusColor, setStatusColor] = createSignal<StatusColor>("green");
-  const [isLoaded, setIsLoaded] = createSignal(false);
-
-  createEffect(() => {
-    const controller = new AbortController();
-
-    const fetchStatus = async () => {
-      try {
-        const response = await fetch("/api/status", {
-          signal: controller.signal,
-        });
-        if (response.ok) {
-          const data: StatusResponse = await response.json();
-          setStatusText(data.text);
-          setStatusColor(data.color);
-        }
-      } catch (error) {
-        if (error instanceof Error && error.name !== "AbortError") {
-          console.error("Failed to fetch status:", error);
-        }
-      } finally {
-        setIsLoaded(true);
-      }
-    };
-
-    fetchStatus();
-
-    onCleanup(() => controller.abort());
-  });
-
-  return (
-    <div
-      class={`inline-flex items-center gap-2 bg-white/10 text-white px-4 py-2 rounded-full text-sm font-medium mb-8 border border-white/10 transition-opacity duration-300 ${isLoaded() ? "opacity-100" : "opacity-0"}`}
-    >
-      <span class="relative flex h-2 w-2">
-        <span
-          class={`animate-ping absolute inline-flex h-full w-full rounded-full ${colorClasses[statusColor()]} opacity-75`}
-        ></span>
-        <span
-          class={`relative inline-flex rounded-full h-2 w-2 ${colorClasses[statusColor()]}`}
-        ></span>
-      </span>
-      {statusText()}
-    </div>
-  );
-}

src/components/StatusIndicator.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
+type StatusColor = "green" | "yellow" | "red";
+
+interface StatusResponse {
+    text: string;
+    color: StatusColor;
+}
+
+const colorClasses: Record<StatusColor, string> = {
+    green: "bg-success",
+    yellow: "bg-warning",
+    red: "bg-error",
+};
+
+const statusText = ref("Accepting new clients");
+const statusColor = ref<StatusColor>("green");
+const isLoaded = ref(false);
+
+let controller: AbortController | null = null;
+
+onMounted(() => {
+    controller = new AbortController();
+
+    const fetchStatus = async () => {
+        try {
+            const response = await fetch("/api/status", {
+                signal: controller?.signal,
+            });
+            if (response.ok) {
+                const data: StatusResponse = await response.json();
+                statusText.value = data.text;
+                statusColor.value = data.color;
+            }
+        } catch (error) {
+            if (error instanceof Error && error.name !== "AbortError") {
+                console.error("Failed to fetch status:", error);
+            }
+        } finally {
+            isLoaded.value = true;
+        }
+    };
+
+    fetchStatus();
+});
+
+onUnmounted(() => {
+    if (controller) {
+        controller.abort();
+    }
+});
+</script>
+
+<template>
+    <div
+        :class="`inline-flex items-center gap-2 bg-white/10 text-white px-4 py-2 rounded-full text-sm font-medium mb-8 border border-white/10 transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`"
+    >
+        <span class="relative flex h-2 w-2">
+            <span
+                :class="`animate-ping absolute inline-flex h-full w-full rounded-full ${colorClasses[statusColor]} opacity-75`"
+            ></span>
+            <span
+                :class="`relative inline-flex rounded-full h-2 w-2 ${colorClasses[statusColor]}`"
+            ></span>
+        </span>
+        {{ statusText }}
+    </div>
+</template>

src/components/sections/ContactSection.tsx

@@ -1,256 +0,0 @@
-import { createSignal, type Component } from "solid-js";
-import { Show } from "solid-js/web";
-import { Icon } from "solid-heroicons";
-import {
-  xCircle,
-  checkCircle,
-  paperAirplane,
-  envelope,
-} from "solid-heroicons/outline";
-import { siteConfig } from "../../config/site";
-
-const ContactSection: Component = () => {
-  const [firstName, setFirstName] = createSignal("");
-  const [lastName, setLastName] = createSignal("");
-  const [email, setEmail] = createSignal("");
-  const [company, setCompany] = createSignal("");
-  const [service, setService] = createSignal("");
-  const [budget, setBudget] = createSignal("");
-  const [message, setMessage] = createSignal("");
-  const [status, setStatus] = createSignal<
-    "idle" | "sending" | "success" | "error"
-  >("idle");
-  const [errorMessage, setErrorMessage] = createSignal("");
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    setStatus("sending");
-    setErrorMessage("");
-
-    try {
-      const response = await fetch("/api/contact", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          subject: `New Contact Form Message from ${firstName()} ${lastName()}`,
-          message: `From: ${firstName()} ${lastName()}
-Email: ${email()}
-Company: ${company() || "Not specified"}
-Service Needed: ${service() || "Not specified"}
-Budget: ${budget() || "Not specified"}
-
-Project Details:
-${message()}`,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || data.message || "Failed to send message");
-      }
-
-      setStatus("success");
-      setFirstName("");
-      setLastName("");
-      setEmail("");
-      setCompany("");
-      setService("");
-      setBudget("");
-      setMessage("");
-      setTimeout(() => setStatus("idle"), 3000);
-    } catch (error) {
-      setStatus("error");
-      setErrorMessage(
-        error instanceof Error ? error.message : "Failed to send message",
-      );
-      console.error("Submission error:", error);
-    }
-  };
-
-  return (
-    <section id="contact" class="py-20 lg:py-28 bg-base-200">
-      <div class="max-w-7xl mx-auto px-6">
-        <div class="text-center mb-16">
-          <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
-            {siteConfig.contact.mainTitle}
-          </h2>
-        </div>
-
-        <div class="max-w-2xl mx-auto">
-          <div class="card bg-base-100 border border-base-300/50 shadow-xl">
-            <div class="card-body p-8 lg:p-10">
-              <form class="space-y-6" onSubmit={handleSubmit}>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-                  <fieldset class="fieldset">
-                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
-                      {siteConfig.contact.form.firstName}
-                    </legend>
-                    <input
-                      type="text"
-                      name="firstName"
-                      class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
-                      required
-                      value={firstName()}
-                      onInput={(e) => setFirstName(e.currentTarget.value)}
-                      disabled={status() === "sending"}
-                      placeholder={siteConfig.contact.form.placeholders.firstName}
-                    />
-                  </fieldset>
-                  <fieldset class="fieldset">
-                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
-                      {siteConfig.contact.form.lastName}
-                    </legend>
-                    <input
-                      type="text"
-                      name="lastName"
-                      class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
-                      required
-                      value={lastName()}
-                      onInput={(e) => setLastName(e.currentTarget.value)}
-                      disabled={status() === "sending"}
-                      placeholder={siteConfig.contact.form.placeholders.lastName}
-                    />
-                  </fieldset>
-                </div>
-
-                <fieldset class="fieldset">
-                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
-                    {siteConfig.contact.form.email}
-                  </legend>
-                  <input
-                    type="email"
-                    name="email"
-                    class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
-                    required
-                    value={email()}
-                    onInput={(e) => setEmail(e.currentTarget.value)}
-                    disabled={status() === "sending"}
-                    placeholder={siteConfig.contact.form.placeholders.email}
-                  />
-                </fieldset>
-
-                <fieldset class="fieldset">
-                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
-                    {siteConfig.contact.form.company}
-                  </legend>
-                  <input
-                    type="text"
-                    name="company"
-                    class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
-                    value={company()}
-                    onInput={(e) => setCompany(e.currentTarget.value)}
-                    disabled={status() === "sending"}
-                    placeholder={siteConfig.contact.form.placeholders.company}
-                  />
-                </fieldset>
-
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-                  <fieldset class="fieldset">
-                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
-                      {siteConfig.contact.form.service}
-                    </legend>
-                    <select
-                      name="service"
-                      aria-label="Service Needed"
-                      class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
-                      value={service()}
-                      onChange={(e) => setService(e.currentTarget.value)}
-                      disabled={status() === "sending"}
-                    >
-                      <option value="">{siteConfig.contact.form.selectPlaceholders.service}</option>
-                      {siteConfig.contact.form.services.map((s) => (
-                        <option value={s.value}>{s.label}</option>
-                      ))}
-                    </select>
-                  </fieldset>
-                  <fieldset class="fieldset">
-                    <legend class="fieldset-legend text-sm font-semibold text-base-content">
-                      {siteConfig.contact.form.budget}
-                    </legend>
-                    <select
-                      name="budget"
-                      aria-label="Project Budget"
-                      class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
-                      value={budget()}
-                      onChange={(e) => setBudget(e.currentTarget.value)}
-                      disabled={status() === "sending"}
-                    >
-                      <option value="">{siteConfig.contact.form.selectPlaceholders.budget}</option>
-                      {siteConfig.contact.form.budgets.map((b) => (
-                        <option value={b.value}>{b.label}</option>
-                      ))}
-                    </select>
-                  </fieldset>
-                </div>
-
-                <fieldset class="fieldset">
-                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
-                    {siteConfig.contact.form.message}
-                  </legend>
-                  <textarea
-                    id="project-details"
-                    name="message"
-                    class="textarea textarea-bordered h-36 w-full resize-none bg-base-100 focus:border-primary focus:outline-primary"
-                    placeholder={siteConfig.contact.form.placeholders.message}
-                    required
-                    value={message()}
-                    onInput={(e) => setMessage(e.currentTarget.value)}
-                    disabled={status() === "sending"}
-                  />
-                </fieldset>
-
-                <Show when={status() === "error"}>
-                  <div role="alert" class="alert alert-error">
-                    <Icon path={xCircle} class="stroke-current shrink-0 h-5 w-5" />
-                    <span class="text-sm">
-                      {errorMessage() || siteConfig.contact.form.error}
-                    </span>
-                  </div>
-                </Show>
-
-                <Show when={status() === "success"}>
-                  <div role="alert" class="alert alert-success">
-                    <Icon path={checkCircle} class="stroke-current shrink-0 h-5 w-5" />
-                    <span class="text-sm">{siteConfig.contact.form.success}</span>
-                  </div>
-                </Show>
-
-                <button
-                  type="submit"
-                  class="btn btn-primary btn-lg w-full shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300"
-                  disabled={status() === "sending"}
-                >
-                  {status() === "sending" ? (
-                    <>
-                      <span class="loading loading-spinner loading-sm"></span>
-                      {siteConfig.contact.form.sending}
-                    </>
-                  ) : (
-                    <>
-                      <Icon path={paperAirplane} class="w-5 h-5" />
-                      {siteConfig.contact.form.submit}
-                    </>
-                  )}
-                </button>
-              </form>
-            </div>
-          </div>
-
-          <div class="mt-10 text-center">
-            <p class="text-base-content/60 mb-4">{siteConfig.contact.direct.text}</p>
-            <a
-              href={`mailto:${siteConfig.contact.direct.email}`}
-              class="link font-medium inline-flex items-center gap-2 text-base-content hover:text-primary"
-            >
-              <Icon path={envelope} class="w-5 h-5" />
-              {siteConfig.contact.direct.email}
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default ContactSection;

src/components/sections/ContactSection.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  XCircleIcon,
+  CheckCircleIcon,
+  PaperAirplaneIcon,
+  EnvelopeIcon,
+} from '@heroicons/vue/24/outline';
+import { siteConfig } from "../../config/site";
+
+const firstName = ref("");
+const lastName = ref("");
+const email = ref("");
+const company = ref("");
+const service = ref("");
+const budget = ref("");
+const message = ref("");
+const status = ref<"idle" | "sending" | "success" | "error">("idle");
+const errorMessage = ref("");
+
+const handleSubmit = async (e: Event) => {
+  status.value = "sending";
+  errorMessage.value = "";
+
+  try {
+    const response = await fetch("/api/contact", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        subject: `New Contact Form Message from ${firstName.value} ${lastName.value}`,
+        message: `From: ${firstName.value} ${lastName.value}
+Email: ${email.value}
+Company: ${company.value || "Not specified"}
+Service Needed: ${service.value || "Not specified"}
+Budget: ${budget.value || "Not specified"}
+
+Project Details:
+${message.value}`,
+      }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data.error || data.message || "Failed to send message");
+    }
+
+    status.value = "success";
+    firstName.value = "";
+    lastName.value = "";
+    email.value = "";
+    company.value = "";
+    service.value = "";
+    budget.value = "";
+    message.value = "";
+    setTimeout(() => status.value = "idle", 3000);
+  } catch (error) {
+    status.value = "error";
+    errorMessage.value =
+      error instanceof Error ? error.message : "Failed to send message";
+    console.error("Submission error:", error);
+  }
+};
+</script>
+
+<template>
+  <section id="contact" class="py-20 lg:py-28 bg-base-200">
+    <div class="max-w-7xl mx-auto px-6">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl lg:text-4xl font-bold text-base-content mb-4">
+          {{ siteConfig.contact.mainTitle }}
+        </h2>
+      </div>
+
+      <div class="max-w-2xl mx-auto">
+        <div class="card bg-base-100 border border-base-300/50 shadow-xl">
+          <div class="card-body p-8 lg:p-10">
+            <form class="space-y-6" @submit.prevent="handleSubmit">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                    {{ siteConfig.contact.form.firstName }}
+                  </legend>
+                  <input
+                    type="text"
+                    name="firstName"
+                    class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                    required
+                    v-model="firstName"
+                    :disabled="status === 'sending'"
+                    :placeholder="siteConfig.contact.form.placeholders.firstName"
+                  />
+                </fieldset>
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                    {{ siteConfig.contact.form.lastName }}
+                  </legend>
+                  <input
+                    type="text"
+                    name="lastName"
+                    class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                    required
+                    v-model="lastName"
+                    :disabled="status === 'sending'"
+                    :placeholder="siteConfig.contact.form.placeholders.lastName"
+                  />
+                </fieldset>
+              </div>
+
+              <fieldset class="fieldset">
+                <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                  {{ siteConfig.contact.form.email }}
+                </legend>
+                <input
+                  type="email"
+                  name="email"
+                  class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                  required
+                  v-model="email"
+                  :disabled="status === 'sending'"
+                  :placeholder="siteConfig.contact.form.placeholders.email"
+                />
+              </fieldset>
+
+              <fieldset class="fieldset">
+                <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                  {{ siteConfig.contact.form.company }}
+                </legend>
+                <input
+                  type="text"
+                  name="company"
+                  class="input input-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                  v-model="company"
+                  :disabled="status === 'sending'"
+                  :placeholder="siteConfig.contact.form.placeholders.company"
+                />
+              </fieldset>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                    {{ siteConfig.contact.form.service }}
+                  </legend>
+                  <select
+                    name="service"
+                    aria-label="Service Needed"
+                    class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                    v-model="service"
+                    :disabled="status === 'sending'"
+                  >
+                    <option value="">{{ siteConfig.contact.form.selectPlaceholders.service }}</option>
+                    <option v-for="s in siteConfig.contact.form.services" :key="s.value" :value="s.value">
+                      {{ s.label }}
+                    </option>
+                  </select>
+                </fieldset>
+                <fieldset class="fieldset">
+                  <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                    {{ siteConfig.contact.form.budget }}
+                  </legend>
+                  <select
+                    name="budget"
+                    aria-label="Project Budget"
+                    class="select select-bordered w-full bg-base-100 focus:border-primary focus:outline-primary"
+                    v-model="budget"
+                    :disabled="status === 'sending'"
+                  >
+                    <option value="">{{ siteConfig.contact.form.selectPlaceholders.budget }}</option>
+                    <option v-for="b in siteConfig.contact.form.budgets" :key="b.value" :value="b.value">
+                      {{ b.label }}
+                    </option>
+                  </select>
+                </fieldset>
+              </div>
+
+              <fieldset class="fieldset">
+                <legend class="fieldset-legend text-sm font-semibold text-base-content">
+                  {{ siteConfig.contact.form.message }}
+                </legend>
+                <textarea
+                  id="project-details"
+                  name="message"
+                  class="textarea textarea-bordered h-36 w-full resize-none bg-base-100 focus:border-primary focus:outline-primary"
+                  :placeholder="siteConfig.contact.form.placeholders.message"
+                  required
+                  v-model="message"
+                  :disabled="status === 'sending'"
+                />
+              </fieldset>
+
+              <div v-if="status === 'error'" role="alert" class="alert alert-error">
+                <XCircleIcon class="stroke-current shrink-0 h-5 w-5" />
+                <span class="text-sm">
+                  {{ errorMessage || siteConfig.contact.form.error }}
+                </span>
+              </div>
+
+              <div v-if="status === 'success'" role="alert" class="alert alert-success">
+                <CheckCircleIcon class="stroke-current shrink-0 h-5 w-5" />
+                <span class="text-sm">{{ siteConfig.contact.form.success }}</span>
+              </div>
+
+              <button
+                type="submit"
+                class="btn btn-primary btn-lg w-full shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300"
+                :disabled="status === 'sending'"
+              >
+                <template v-if="status === 'sending'">
+                  <span class="loading loading-spinner loading-sm"></span>
+                  {{ siteConfig.contact.form.sending }}
+                </template>
+                <template v-else>
+                  <PaperAirplaneIcon class="w-5 h-5" />
+                  {{ siteConfig.contact.form.submit }}
+                </template>
+              </button>
+            </form>
+          </div>
+        </div>
+
+        <div class="mt-10 text-center">
+          <p class="text-base-content/60 mb-4">{{ siteConfig.contact.direct.text }}</p>
+          <a
+            :href="`mailto:${siteConfig.contact.direct.email}`"
+            class="link font-medium inline-flex items-center gap-2 text-base-content hover:text-primary"
+          >
+            <EnvelopeIcon class="w-5 h-5" />
+            {{ siteConfig.contact.direct.email }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/components/sections/HeroSection.astro

@@ -1,7 +1,7 @@
 ---
 import { siteConfig } from "../../config/site";
 import { Icon } from "astro-icon/components";
-import StatusIndicator from "../StatusIndicator.tsx";
+import StatusIndicator from "../StatusIndicator.vue";
 
 const rotatingText = (siteConfig.hero as any).rotatingText as
     | { text: string; className: string }[]

src/pages/index.astro

@@ -6,7 +6,7 @@ import { siteConfig } from "../config/site";
 import HeroSection from "../components/sections/HeroSection.astro";
 import ServicesSection from "../components/sections/ServicesSection.astro";
 import AboutSection from "../components/sections/AboutSection.astro";
-import ContactSection from "../components/sections/ContactSection.tsx";
+import ContactSection from "../components/sections/ContactSection.vue";
 
 const pageMetaInfo = {
     title: siteConfig.name,