feat: themeing - Bug fixes

src/components/Experience.jsx

@@ -3,13 +3,13 @@ import JobCard from "./JobCard";
 import { createSignal } from "solid-js";
 
 const Experience = () => {
-	const [jobs, setJobs] = createSignal([
+	const [jobs, _] = createSignal([
 		{
 			title: "Software Developer Engineer Intern",
 			company: "Amazon (Delivery Extensions Team)",
 			location: "Toronto, Ontario, Canada",
 			range: "May 2025 - July 2025",
-			url: "",
+			url: "https://amazon.jobs/content/en/teams/ftr",
 		},
 		{
 			title: "Software Engineer Intern",
@@ -21,9 +21,10 @@ const Experience = () => {
 	]);
 
 	return (
-		<section class="mt-6 mx-auto px-4">
-			<h2 class="mt-6 text-xl font-bold mb-8">Experience</h2>
-			<div>
+		<section class="mt-16 px-4">
+			<h2 class="text-xl text-nord-1 font-bold mb-6">Experience</h2>
+
+			<div class="!flex !flex-col !gap-0.5v ml-2h">
 				<For each={jobs()}>{(job) => <JobCard job={job} />}</For>
 			</div>
 		</section>

src/components/JobCard.jsx

@@ -1,13 +1,13 @@
 const JobCard = (props) => {
 	return (
-		<div class="mb-8">
+		<div class="p-4">
 			<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">
+			<p class="text-nord-1 mb-4">
 				{props.job.range} | {props.job.location}
 			</p>
 		</div>

src/components/Layout.tsx

@@ -22,17 +22,22 @@ export const Layout: ParentComponent = (props) => {
 			<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-nord-3 text-2v leading-2 font-bold">
-						~/minhtrannhat
+						~/minh
 					</a>
 
 					<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={"/"}>
+							<A
+								end
+								class="hover:underline hover:text-nord10"
+								activeClass="font-bold"
+								href={"/"}
+							>
 								Home
 							</A>
 							<A
 								end
-								class="hover:underline"
+								class="hover:underline hover:text-nord10"
 								activeClass="font-bold"
 								href={"/articles"}
 							>
@@ -40,20 +45,21 @@ export const Layout: ParentComponent = (props) => {
 							</A>
 							<A
 								end
-								class="hover:underline"
+								class="hover:underline hover:text-nord10"
 								activeClass="font-bold"
 								href={"/tags"}
 							>
 								Tags
 							</A>
-							<a
+							<A
+								class="hover:text-nord10"
 								href="/resume.pdf"
 								target="_blank"
 								rel="noreferrer"
 								onClick={() => changeFavicon("./favicon.ico")}
 							>
 								Resume
-							</a>
+							</A>
 						</ul>
 					</nav>
 				</header>

src/components/Markdown.tsx

@@ -42,7 +42,7 @@ const Pre: ParentComponent<{ lang: string; lines?: string; file?: string }> = (
 
 	return (
 		<div class="my-1v">
-			<div class="bg-black text-white dark:bg-white dark:text-black flex justify-between px-1h text-sm leading-1">
+			<div class="bg-nord2 text-nord12 flex justify-between px-1h text-sm leading-1">
 				<Show when={props.file} fallback={<span aria-hidden />}>
 					<span>{props.file}</span>
 				</Show>
@@ -186,9 +186,9 @@ export const PostImage: Component<{
 	);
 };
 
-export const Aside: ParentComponent = (props) => (
+export const Notes: ParentComponent = (props) => (
 	<aside class="border-l-2 border-black dark:border-white pl-1h mt-1v">
-		<div class="uppercase text-sm leading-1 font-medium select-none">Aside</div>
+		<div class="uppercase text-sm leading-1 font-medium select-none">Notes</div>
 		<div class="[&_*:first-child]:mt-0">{props.children}</div>
 	</aside>
 );