FEAT: Work experience section added! To mimic the projects, but it comes before.

src/components/projects.svelte

@@ -92,8 +92,8 @@
 	if (error) console.error(error);
 </script>
 
-<div class="">
+<div class="mt-24">
-	<h2 class="py-2 text-xl font-semibold text-blue-300">PROJECTS</h2>
+	<h2 class="py-2 text-xl font-semibold text-blue-300 border-b-1 border-gray-600">PROJECTS</h2>
 	{#if error}
 		<p class="my-4 text-red-300 italic">
 			<span class="font-semibold not-italic">Error {error.code}:</span>

src/components/work.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let company: string;
+	export let position: string;
+	export let timeframe: string;
+	export let description: string;
+</script>
+
+<div class="my-8 w-full">
+	<h2 class="py-2 text-2xl font-semibold text-blue-200">{company}</h2>
+	<p class="text-sm text-gray-200 font-semibold">
+		{position} <span class="font-normal italic">({timeframe})</span>
+	</p>
+	<p class="py-4 text-gray-200">{description}</p>
+</div>

src/components/workExperience.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import Work from "./work.svelte";
+	import { onMount } from 'svelte';
+
+	/**
+	 * Work data interface, this will be used to store the work
+	 * experience data. This is important for type checking and
+	 * validation.
+	 */
+	interface WorkData {
+		company: string;
+		position: string;
+		timeframe: string;
+		description: string;
+	}
+
+	/**
+	 * Server error interface, this will be used to store the error message if the server request fails.
+	 */
+	interface ServerError {
+		message: string;
+		code: number;
+	}
+
+	/**
+	 * Path to the work data on the server.
+	 */
+	const workDataPath: string = '/work/data.json';
+
+	/**
+	 * Store the work data in an array of objects;
+	 */
+	let workExp: WorkData[] = [];
+
+	/**
+	 * Store the error message if the server request fails.
+	 * Will be null if the request is successful.
+	 */
+	let error: ServerError | null = null;
+
+	/**
+	 * Fetch the work experience form the server.
+	 */
+	onMount(async() => {
+		try {
+			// Paths are relative to /static
+			// Svelte deploys /static for me!
+			const response = await fetch(workDataPath);
+			if (!response.ok) {
+				error = {
+					message:
+						'Failed to retrieve work experience data. Please try again later. If the issue persists, contact me!',
+					code: response.status
+				};
+				return;
+			}
+			const data = await response.json();
+
+			// Validate the data (Important!):
+			if (Array.isArray(data)) {
+				workExp = data.map((exp) => {
+					// TODO: Sort the projects by date
+					// This will either require a custom function or a new data system
+					return {
+						company: exp.company || '',
+						position: exp.position || '',
+						description: exp.description || '',
+						timeframe: exp.timeframe || '',
+					};
+				});
+			} else {
+				error = {
+					message:
+						'Data was not in valid format. Please try again later. If the issue persists, contact me!',
+					code: 400
+				};
+			}
+		} catch (err) {
+			error = {
+				message: `${err} Please try again later. If the issue persists, contact me!`,
+				code: 500
+			};
+		}
+	});
+
+	// If an error occurs, log it to the console
+	if (error) console.error(error);
+</script>
+
+<div class="">
+	<h2 class="py-2 text-xl font-semibold text-blue-300 border-b-1 border-gray-600">WORK EXPERIENCE</h2>
+	{#if error}
+		<p class="my-4 text-red-300 italic">
+			<span class="font-semibold not-italic">Error {error.code}:</span>
+			{error.message}
+		</p>
+	{:else}
+		{#each workExp as exp}
+			<Work {...exp} />
+		{/each}
+	{/if}
+</div>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Projects from '../components/projects.svelte';
+	import Work from '../components/workExperience.svelte';
 	import Skills from '../components/skills.svelte';
 </script>
 
@@ -23,6 +24,7 @@
 <div class="mt-12 flex w-full flex-col md:mt-24 md:flex-row">
 	<div class="flex-1 md:w-2/3 md:flex-none">
 		<div class="w-full px-4 md:w-3/4 md:px-0">
+			<Work />
 			<Projects />
 		</div>
 	</div>

static/work/data.json

@@ -0,0 +1,32 @@
+[
+  {
+    "company": "Poppin' Jobs",
+    "position": "Junior Backend Engineer",
+    "description": "Develop and maintain backend services using .NET and C#. Collaborate with frontend developers to integrate APIs and enhance user experiences. Work with SQL Server for database design, optimization, and management. Assist in implementing cloud solutions on Azure, ensuring scalability and reliability. Write unit tests and participate in code reviews to maintain code quality. Troubleshoot and resolve technical issues as they arise.",
+    "timeframe": "March 2025 - Present"
+  },
+  {
+    "company": "Bottom line Business Solutions",
+    "position": "IT Technician & Staff Accountant",
+    "description": "Completing data entry tasks and bank statement reconciliation. Building and hosting a web application to manage client data. On-site hosting with home server, including VPN.",
+    "timeframe": "June 2020 - Present"
+  },
+  {
+    "company": "Data Annotation Tech",
+    "position": "Contractor - AI Model Trainer",
+    "description": "Training AI models by answering questions and solving programming problems.",
+    "timeframe": "January 2025 - Present"
+  },
+  {
+    "company": "Backcountry Horsemen of California",
+    "position": "Web Developer",
+    "description": "Developed and hosted a new website while maintaining the current website. Managed domain, SSL licensing, and managed online presence.",
+    "timeframe": "September 2023 - April 2024"
+  },
+  {
+    "company": "Looksee Internship",
+    "position": "Backend Engineer",
+    "description": "Developed an HTTP back end serving video content to a mobile application. Managed and deployed a live demo application. Created architecture for secure client/server communication.",
+    "timeframe": "January 2024 - February 2024"
+  }
+]