feat: skeleton

src/components/Experience.jsx

@@ -0,0 +1,33 @@
+import { For } from "solid-js";
+import JobCard from "./JobCard";
+import { createSignal } from "solid-js";
+
+const Experience = () => {
+	const [jobs, setJobs] = createSignal([
+		{
+			title: "Software Developer Engineer Intern",
+			company: "Amazon (Delivery Extensions Team)",
+			location: "Toronto, Ontario, Canada",
+			range: "May 2025 - July 2025",
+			url: "",
+		},
+		{
+			title: "Software Engineer Intern",
+			company: "Cisco Systems",
+			location: "Remote",
+			range: "January 2023 - May 2023",
+			url: "https://developer.cisco.com/docs/modeling-labs/cat-9000v/",
+		},
+	]);
+
+	return (
+		<section class="mt-6 mx-auto px-4">
+			<h2 class="mt-6 text-xl font-bold mb-8">Experience</h2>
+			<div>
+				<For each={jobs()}>{(job) => <JobCard job={job} />}</For>
+			</div>
+		</section>
+	);
+};
+
+export default Experience;

src/components/JobCard.jsx

@@ -0,0 +1,17 @@
+const JobCard = (props) => {
+	return (
+		<div class="mb-8">
+			<h3 class="font-bold text-xl">
+				{props.job.title} @
+				<a href={props.job.url} class="text-blue-500 hover:text-blue-600">
+					{props.job.company}
+				</a>
+			</h3>
+			<p class="text-gray-600 mb-4">
+				{props.job.range} | {props.job.location}
+			</p>
+		</div>
+	);
+};
+
+export default JobCard;

src/components/Layout.tsx

@@ -1,12 +1,5 @@
 import { A } from "@solidjs/router";
 import type { ParentComponent } from "solid-js";
-import { clientOnly } from "@solidjs/start";
-
-const DarkModeToggle = clientOnly(() =>
-	import("./DarkModeToggle").then((r) => ({
-		default: r.DarkModeToggle,
-	})),
-);
 
 function changeFavicon(newFaviconPath: string) {
 	const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
@@ -26,16 +19,14 @@ export const Layout: ParentComponent = (props) => {
 			<a href="#main-content" class="sr-only">
 				Skip to main content
 			</a>
-			<div class="flex flex-col min-h-screen pt-2v py-1v px-2h max-w-thread mx-auto relative overflow-x-hidden leading-1 box-border decoration-2 underline-offset-2">
+			<div class="bg-nord-6 flex flex-col min-h-screen pt-2v py-1v px-2h max-w-full mx-auto relative overflow-x-hidden leading-1 box-border decoration-2 underline-offset-2">
 				<header class="flex flex-col items-center justify-center gap-2v px-4h py-2v">
-					<a href="/" class="text-2v leading-2 font-bold">
+					<a href="/" class="text-nord-3 text-2v leading-2 font-bold">
 						~/minhtrannhat
 					</a>
 
-					<DarkModeToggle />
-
-					<nav>
-						<ul class="flex items-center gap-7h">
+					<nav class="container mx-auto px-4 py-4">
+						<ul class="flex flex-wrap justify-center items-center gap-6">
 							<A end class="hover:underline" activeClass="font-bold" href={"/"}>
 								Home
 							</A>
@@ -70,8 +61,6 @@ export const Layout: ParentComponent = (props) => {
 				<main id="main-content" class="mt-1v flex-auto">
 					{props.children}
 				</main>
-
-				<div class="debug-grid" />
 			</div>
 		</>
 	);