updated version

.gitignore

@@ -10,3 +10,6 @@ node_modules
 .output
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+.vscode/
+*.log

package.json

@@ -10,18 +10,23 @@
 	},
 	"devDependencies": {
 		"@fontsource/fira-mono": "^4.5.10",
+		"@iconify/json": "^2.2.75",
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.5.0",
 		"@types/cookie": "^0.5.1",
 		"autoprefixer": "^10.4.14",
+		"npm": "^9.7.1",
 		"postcss": "^8.4.24",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.1.0-beta",
 		"vite": "^4.3.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"unplugin-icons": "^0.16.3"
+	}
 }

postcss.config.js

@@ -1,6 +1,8 @@
 export default {
   plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/app.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    @apply bg-bg-0;
+}

src/app.d.ts

@@ -1,12 +1,17 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="unplugin-icons/types/svelte" />
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
 }
 
+
+
 export {};

src/lib/components/NavBar.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import HomeIcon from "virtual:icons/bxs/home";
+  import GithubIcon from "virtual:icons/bxl/github";
+  import TwitterIcon from "virtual:icons/bxl/twitter";
+</script>
+
+<div class="nav-main">
+  <!-- Left Aligned Items -->
+  <div class="flex items-start mr-auto">
+    <div class="nav-item"><a href="/"><HomeIcon /></a></div>
+  </div>
+
+  <!-- Right Aligned Items -->
+  <div class="flex items-end">
+    <!-- GitHub Social -->
+    <div class="nav-item ml-auto">
+      <a href="https://github.com/quilldev"> <GithubIcon /></a>
+    </div>
+    <!--Twitter Social -->
+    <div class="nav-item ml-auto">
+      <a href="https://twitter.com/quilldev"><TwitterIcon /></a>
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  .nav-main {
+    @apply flex
+    items-start
+    bg-bg-0;
+  }
+
+  .nav-item {
+    @apply text-3xl 
+    px-2 
+    py-2 
+    border-b-2
+    border-bg-1
+    hover:border-accent-0;
+  }
+</style>

src/lib/components/TypeWriter.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  export let text = "";
+  export let updateMs = 200;
+
+  let idx = 0;
+  let current = "";
+  let forward = true;
+
+  let update = () => {
+    if (idx > text.length || (idx <= 0 && !forward)) {
+      forward = !forward;
+    }
+    current = text.slice(0, idx);
+
+    idx += forward ? 1 : -1;
+
+    setTimeout(update, updateMs);
+  };
+
+  update();
+  console.info("yo");
+</script>
+
+<section>
+  {current}
+</section>

src/routes/+layout.svelte

@@ -1,14 +1,13 @@
 <script>
-	import Header from './Header.svelte';
-	import './styles.css';
-	import '../app.css'
+  import "./styles.css";
+  import NavBar from "$lib/components/NavBar.svelte";
 </script>
 
 <div class="app">
-	<main>
-		<slot />
-	</main>
+  <NavBar />
+  <main>
+    <slot />
+  </main>
 
-	<footer>
-	</footer>
+  <footer />
 </div>

src/routes/+page.svelte

@@ -1,17 +1,81 @@
 <script lang="ts">
-  let x: number = 5;
+  import JavaIcon from "virtual:icons/logos/java";
+  import JavaScriptIcon from "virtual:icons/logos/javascript";
+  import TypeScriptIcon from "virtual:icons/logos/typescript-icon";
+  import RustIcon from "virtual:icons/logos/rust";
+  import ReactIcon from "virtual:icons/logos/react";
+  import VueIcon from "virtual:icons/logos/vue";
+  import SvelteIcon from "virtual:icons/logos/svelte-icon";
 </script>
 
 <section>
-  <div class="text-center">
-    <h1 class="text-3xl">
-      Welcome to Svelte!
-      <br />Current Count: {x}
-    </h1>
+  <p class="text-5xl pt-5 text-center">QuillDev</p>
 
-    <button class="border-2 p-2 bg-gray-950 text-white" on:click={() => x++}>Some button</button>
+  <!-- Section -->
+  <div
+    class="text-center rounded-3xl mx-8 bg-bg-0 p-8 border-bg-2 border-2 border-solid mt-4"
+  >
+    <!-- Who am I? -->
+    <div>
+      <div class="text-left">
+        <p class="text-5xl">Who is QuillDev?</p>
+        <p class="text-2xl mt-4">
+          Hello! I'm Robert Brunson aka QuillDev, a software engineer from North
+          Carolina.
+          <br />
+          I specialize in game development and design, as well as designing
+          <br />
+          and implementing microservices.
+        </p>
+      </div>
+
+      <br />
+      <br />
+
+      <!-- Experience Section -->
+      <div>
+        <p class="text-5xl text-center pb-4">Professional Experience</p>
+
+        <!-- experience list -->
+        <div class="text-2xl flex-col flex-wrap self-center border-bg-2">
+          <table class="m-auto rounded-full border-2 border-bg-2">
+            <tr>
+              <th class="space-2 p-2">Technology</th>
+              <th class="space-2 p-2">Experience</th>
+            </tr>
+            <tr>
+              <td class="exp-li"><JavaIcon class="mr-2" /> Java</td>
+              <td>4 years</td>
+            </tr>
+            <tr>
+              <td class="exp-li"><JavaScriptIcon class="mr-2" /> JavaScript</td>
+              <td>4 years</td>
+            </tr>
+            <tr>
+              <td class="exp-li"><TypeScriptIcon class="mr-2" /> TypeScript</td>
+              <td>4 years</td>
+            </tr>
+            <tr>
+              <td class="exp-li"><ReactIcon class="mr-2" />React</td>
+              <td>2 years</td>
+            </tr>
+            <tr>
+              <td class="exp-li"><RustIcon class="fill-white mr-2" />Rust</td>
+              <td>2 years</td>
+            </tr>
+            <tr>
+              <td class="exp-li"><SvelteIcon class="mr-2" />Svelte</td>
+              <td>1 year</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
   </div>
 </section>
 
 <style lang="postcss">
+  .exp-li {
+    @apply flex space-x-4 px-4 space-y-2 py-1;
+  }
 </style>

src/routes/+page.ts

@@ -1,3 +1,3 @@
 // since there's no dynamic data here, we can prerender
 // it so that it gets served as a static asset in production
-export const prerender = true;
+export const prerender = true;