talk: Nuxt + AI Vuejs Hamburg 2025 (#12)

zoey-kaiser · web-flow · commit fd6492af50f6 · 2025-09-11T11:43:51.000+02:00
diff --git a/app/app.config.ts b/app/app.config.ts
@@ -1,8 +1,23 @@
 export default defineAppConfig({
-  social: {
-    github: 'https://github.com/zoey-kaiser',
-    bsky: 'https://bsky.app/profile/zoeykaiser.com',
-    linkedIn: 'https://www.linkedin.com/in/zoeykaiser/',
-    email: 'zoeykaiser8@gmail.com'
-  }
+  contact: {
+    email: 'zoeykaiser8@gmail.com',
+    calLink: 'zoeykaiser/quick-chat',
+  },
+  socials: [
+    {
+      name: 'LinkedIn',
+      href: 'https://www.linkedin.com/in/zoeykaiser',
+      icon: 'mingcute:linkedin-line',
+    },
+    {
+      name: 'Bluesky',
+      href: 'https://bsky.app/profile/zoeykaiser.com',
+      icon: 'mingcute:bluesky-social-line',
+    },
+    {
+      name: 'GitHub',
+      href: 'https://github.com/zoey-kaiser',
+      icon: 'mingcute:github-line',
+    },
+  ]
 })
diff --git a/app/components/App/Footer.vue b/app/components/App/Footer.vue
@@ -1,19 +1,24 @@
 <script lang="ts" setup>
-const { social } = useAppConfig()
+const { socials } = useAppConfig()
 </script>
 
 <template>
   <footer class="bg-white">
     <div class="mx-auto max-w-7xl px-6 py-4 md:flex md:items-center md:justify-between lg:px-8">
       <div class="flex justify-center space-x-4 md:order-2">
-        <NuxtLink :to="social.linkedIn" :external="true" target="_blank">
-          <AppButton type="inverse" class="h-9 w-9 grid place-content-center">
-            <Icon name="mingcute:linkedin-line" size="20" />
-          </AppButton>
-        </NuxtLink>
-        <NuxtLink :to="social.github" :external="true" target="_blank">
-          <AppButton type="inverse" class="h-9 w-9 grid place-content-center">
-            <Icon name="mingcute:github-line" size="20" />
+        <NuxtLink
+          v-for="social in socials"
+          :key="social.href"
+          :to="social.href"
+          :external="true"
+          target="_blank"
+        >
+          <AppButton
+            :title="social.name"
+            type="inverse"
+            class="h-9 w-9 grid place-content-center"
+          >
+            <Icon :name="social.icon" size="20" />
           </AppButton>
         </NuxtLink>
       </div>
diff --git a/app/components/App/Navbar.vue b/app/components/App/Navbar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { social } = useAppConfig()
+const { socials } = useAppConfig()
 </script>
 
 <template>
@@ -32,19 +32,19 @@ const { social } = useAppConfig()
         </div>
 
         <div class="hidden md:flex items-center gap-2">
-          <NuxtLink :to="social.linkedIn" :external="true" target="_blank">
-            <AppButton type="inverse" class="h-9 w-9 grid place-content-center">
-              <Icon name="mingcute:linkedin-line" size="26" />
-            </AppButton>
-          </NuxtLink>
-          <NuxtLink :to="social.bsky" :external="true" target="_blank">
-            <AppButton type="inverse" class="h-9 w-9 grid place-content-center">
-              <Icon name="mingcute:bluesky-social-line" size="23" />
-            </AppButton>
-          </NuxtLink>
-          <NuxtLink :to="social.github" :external="true" target="_blank">
-            <AppButton type="inverse" class="h-9 w-9 grid place-content-center">
-              <Icon name="mingcute:github-line" size="23" />
+          <NuxtLink
+            v-for="social in socials"
+            :key="social.href"
+            :to="social.href"
+            :external="true"
+            target="_blank"
+          >
+            <AppButton
+              :title="social.name"
+              type="inverse"
+              class="h-9 w-9 grid place-content-center"
+            >
+              <Icon :name="social.icon" size="24" />
             </AppButton>
           </NuxtLink>
         </div>
diff --git a/app/components/Landing/Hero.vue b/app/components/Landing/Hero.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { social } = useAppConfig()
+const { contact } = useAppConfig()
 </script>
 
 <template>
@@ -14,20 +14,14 @@ const { social } = useAppConfig()
           Hi, I am Zoey!
         </h1>
         <p class="max-w-2xl mb-6 font-light text-gray-700 lg:mb-8 md:text-lg lg:text-xl">
-          I'm a developer who thrives on creating superb user interfaces and experiences,
-          ensuring my code reaches the highest standards while adeptly building and maintaining full-
-          stack applications.
+          I am a full stack developer based in Hamburg. I like turning ideas into intuitive user experiences and building apps that grow and scale together with you and your users. On the side, I speak at events and host the Hamburg Vue.js meetup.
         </p>
 
         <div class="flex items-center gap-2">
-          <AppButton
-            data-cal-link="zoeykaiser/sidebase"
-            data-cal-namespace="sidebase"
-            :data-cal-config="{ layout: 'month_view' }"
-          >
-            Schedule a meeting
+          <AppButton :data-cal-link="contact.calLink" :data-cal-config="{ layout: 'month_view' }">
+            Let's have a chat!
           </AppButton>
-          <NuxtLink :to="`mailto:${social.email}`">
+          <NuxtLink :to="`mailto:${contact.email}`">
             <AppButton :solid="false">
               Send me a mail
             </AppButton>
@@ -41,7 +35,7 @@ const { social } = useAppConfig()
           <div class="absolute top-3 left-3 h-full w-full bg-pastel-pink rounded-lg" />
           <img
             src="/profile.jpeg"
-            alt="profile picture"
+            alt="Picture of Zoey Kaiser"
             class="relative h-80 w-80 object-cover rounded-lg border-2 border-black"
           >
         </div>
diff --git a/app/components/Landing/Talks.vue b/app/components/Landing/Talks.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { diffDays, isAfter } from '@formkit/tempo'
+import { isAfter } from '@formkit/tempo'
 
 interface Link {
   label: string
@@ -47,11 +47,16 @@ const talks: Talk[] = [
     description: 'What if your Nuxt app could talk? Imagine an app that doesn’t just wait for clicks — it chats, understands your data, and even takes action. In this talk, we’ll explore why AI makes sense in your app, when it’s worth adding, and how to set it up without losing your mind. You’ll learn how to connect your app to its own data quickly and easily, turning a regular Nuxt app into one with a voice — and superpowers.',
     links: [
       {
-        label: 'Join',
-        href: 'https://www.meetup.com/hamburg-vue-js-meetup/events/310352654',
-        iconName: 'mingcute:user-add-2-line',
+        label: 'Slides',
+        href: '/talks/nuxt-and-ai-slides-25.pdf',
+        iconName: 'mingcute:presentation-1-line',
+      },
+      {
+        label: 'Code',
+        href: 'https://github.com/zoey-kaiser/talk-nuxt-and-ai-25',
+        iconName: 'mingcute:code-line',
         solid: true
-      }
+      },
     ]
   },
   {
@@ -63,7 +68,7 @@ const talks: Talk[] = [
     links: [
       {
         label: 'Slides',
-        href: '/talks/VueJSDE - Code with Conscience.pdf',
+        href: '/talks/code-with-conscience-slides-24.pdf',
         iconName: 'mingcute:presentation-1-line'
       },
       {
@@ -122,14 +127,21 @@ const talks: Talk[] = [
 
             <div class="flex flex-col lg:items-end gap-4">
               <p class="text-lg font-medium grow">
-                {{ formatDate(talk.date) }}
+                <NuxtTime :datetime="talk.date" year="numeric" month="long" day="numeric" />
+
                 <span v-if="isAfter(talk.date, new Date())">
-                  (In {{ diffDays(talk.date, new Date()) }} days)
+                  (<NuxtTime :datetime="talk.date" relative />)
                 </span>
               </p>
 
               <div class="flex items-center gap-2">
-                <NuxtLink v-for="link in talk.links" :key="link.href" :href="link.href" :external="true" target="_blank">
+                <NuxtLink
+                  v-for="link in talk.links"
+                  :key="link.href"
+                  :href="link.href"
+                  :external="true"
+                  target="_blank"
+                >
                   <AppButton type="primary" :solid="!!link.solid">
                     <div class="flex items-center gap-1">
                       <Icon v-if="link.iconName" :name="link.iconName" size="18" class="mb-[2px]" />
diff --git a/public/talks/code-with-conscience-slides-24.pdf b/public/talks/code-with-conscience-slides-24.pdf
diff --git a/public/talks/nuxt-and-ai-slides-25.pdf b/public/talks/nuxt-and-ai-slides-25.pdf
