Update Svelte and other dependencies

package.json

@@ -12,20 +12,19 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@tsconfig/svelte": "^4.0.1",
-    "autoprefixer": "^10.4.14",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/vite": "^4.0.12",
+    "@tsconfig/svelte": "^5.0.4",
     "husky": "^9.0.11",
-    "postcss": "^8.4.39",
-    "svelte": "^3.58.0",
-    "svelte-check": "^3.3.1",
-    "tailwindcss": "^3.3.2",
+    "svelte": "^5.22.6",
+    "svelte-check": "^4.1.5",
+    "tailwindcss": "^4.0.12",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.4",
+    "typescript": "^5.8.2",
     "vite": "^6.0.2"
   },
   "packageManager": "yarn@3.5.1",
   "dependencies": {
-    "tailwind-merge": "^2.5.5"
+    "tailwind-merge": "^3.0.2"
   }
 }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

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

tailwind.config.js

@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './index.html',
-    './src/**/*.svelte'
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-

vite.config.js

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+  plugins: [svelte(), tailwindcss()],
 })