Update Svelte and other dependencies

src/app.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

src/lib/SkillsSection.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Header from "./components/Header.svelte";
+  import Header from './components/Header.svelte'
 </script>
 
 <section class="container mx-auto px-4">
@@ -7,18 +7,22 @@
 
   <div class="content-center lg:text-lg">
     <table class="mx-auto sm:whitespace-nowrap">
-      <tr>
-        <th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Backend:</th>
-        <td class="block pb-4 sm:pb-0 sm:table-cell text-left">Ruby, Ruby on Rails, Node.js, Sinatra</td>
-      </tr>
-      <tr>
-        <th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Frontend:</th>
-        <td class="block pb-4 sm:pb-0 sm:table-cell text-left">ES6, TypeScript, React, Redux, CSS/Sass, Webpack, Vite</td>
-      </tr>
-      <tr>
-        <th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Data:</th>
-        <td class="block pb-4 sm:pb-0 sm:table-cell text-left">PostgreSQL, MySQL, Redis, Elasticsearch</td>
-      </tr>
+      <tbody>
+        <tr>
+          <th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Backend:</th>
+          <td class="block pb-4 sm:pb-0 sm:table-cell text-left">Ruby, Ruby on Rails, Node.js, Sinatra</td>
+        </tr>
+        <tr>
+          <th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Frontend:</th>
+          <td class="block pb-4 sm:pb-0 sm:table-cell text-left">ES6, TypeScript, React, Redux, CSS/Sass, Webpack,
+            Vite
+          </td>
+        </tr>
+        <tr>
+          <th class="block sm:table-cell font-bold w-auto pr-3 lg:pr-5 text-left">Data:</th>
+          <td class="block pb-4 sm:pb-0 sm:table-cell text-left">PostgreSQL, MySQL, Redis, Elasticsearch</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </section>

src/lib/components/Header.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
 <h1 class="text-center text-white text-3xl font-bold mt-20 mb-10">
-  <slot />
+  {@render children?.()}
 </h1>

src/lib/components/Hero.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-  export let title: string;
-  export let imageUrl: string;
-  export let imageAlt: string;
+  type Props = {
+    children?: any
+    title: string
+    imageUrl: string
+    imageAlt: string
+  };
+  let { children, title, imageUrl, imageAlt }: Props = $props()
 </script>
 
 <div class="px-6 py-1 pb-10 sm:pt-32 sm:pb-24 lg:px-8">
   <div class="mx-auto max-w-2xl text-center">
     <img class="mx-auto mb-6 w-32 h-32 lg:w-48 lg:h-48 rounded-full" src={imageUrl} alt={imageAlt} />
     <h2 class="text-4xl lg:text-6xl font-bold tracking-tight text-gray-100 sm:text-6x1">{title}</h2>
-    <slot />
+    {@render children?.()}
   </div>
 </div>

src/lib/components/Link.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import type { HTMLAnchorAttributes } from 'svelte/elements'
+  type LinkProps = { children: any, href: string; target: HTMLAnchorAttributes['target']; title?: HTMLAnchorAttributes['title'] }
 
-  export let href: string
-  export let target: HTMLAnchorAttributes['target']
-  export let title: HTMLAnchorAttributes['title'] = undefined
+  let { children, href, target, title }: LinkProps = $props()
 </script>
 
-<a class="text-cyan-200 hover:text-cyan-400 hover:border-b border-dotted" {href} {target} {title}><slot /></a>
+<a class="text-cyan-200 hover:text-cyan-400 hover:border-b border-dotted" {href} {target} {title}>{@render children?.()}</a>
 

src/main.ts

@@ -1,8 +1,9 @@
+import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
 
-const app = new App({
-  target: document.getElementById('app'),
+const app = mount(App, {
+  target: document.getElementById('app')!,
 })
 
 export default app