package.json

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

postcss.config.js

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

src/app.css

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

src/lib/HeaderSection.svelte

@@ -13,7 +13,7 @@ import Hero from "./components/Hero.svelte";
       Senior web software engineer with strong technical and interpersonal skills
     </p>
     <p class="mt-4 text-lg lg:text-xl text-gray-300">
-      Based in San Antonio, Texas
+      Based in Chicago, Illinois
     </p>
   </Hero>
 </div>

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,22 +7,18 @@
 
   <div class="content-center lg:text-lg">
     <table class="mx-auto sm:whitespace-nowrap">
-      <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,
+        <td class="block pb-4 sm:pb-0 sm:table-cell text-left">ES6, TypeScript, React, Redux, CSS/Sass, Webpack, Vite</td>
-            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,7 +1,3 @@
-<script lang="ts">
-  let { children } = $props();
-</script>
-
 <h1 class="text-center text-white text-3xl font-bold mt-20 mb-10">
-  {@render children?.()}
+  <slot />
 </h1>

src/lib/components/Hero.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
-  type Props = {
+  export let title: string;
-    children?: any
+  export let imageUrl: string;
-    title: string
+  export let imageAlt: 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>
-    {@render children?.()}
+    <slot />
   </div>
 </div>

src/lib/components/Link.svelte

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

src/main.ts

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

tailwind.config.js

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

vite.config.js

@@ -1,8 +1,7 @@
 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(), tailwindcss()],
+  plugins: [svelte()],
 })