Update about page and github workflow.

.github/workflows/svelte_check.yml

@@ -3,6 +3,8 @@ name: Run_Svelte_Check_on_PRs
 on:
   pull_request:
 
+  workflow_dispatch:
+
 env:
   WALLABAG_MAX_ARTICLES: ${{ secrets.WALLABAG_MAX_ARTICLES }}
   WALLABAG_MAX_PAGES: ${{ secrets.WALLABAG_MAX_PAGES }}
@@ -27,17 +29,17 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: pnpm-setup
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 10
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.18.2
+          node-version: 22.x
           cache: 'pnpm'
 
       - name: Install dependencies

src/lib/util/logoIcons.svelte

@@ -1,5 +1,4 @@
 <script module>
-	import { ExternalLink } from 'lucide-svelte';
 	export { blueSkyIcon, dockerIcon, drizzleIcon, honoIcon, gitHubIcon, linkedInIcon, lucideIcon, nextDotJsIcon, reactIcon, svelteIcon, typescriptIcon, xIcon };
 </script>
 

src/routes/about/+page.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
-	import cruise from '$lib/assets/images/cruise.png?enhanced';
+	import orange_derp from "../../lib/assets/images/orange_derp.jpg?enhanced";
-	import orange_derp from '$lib/assets/images/orange_derp.jpg?enhanced';
+	import tortie_derp from "../../lib/assets/images/tortie_derp.jpg?enhanced";
-	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?enhanced';
+	import turnip from "../../lib/assets/images/turnip.svg?enhanced";
-	import turnip from '$lib/assets/images/turnip.svg';
+	import type { Course } from "../../lib/types/courses";
-	import type { Course } from '$lib/types/courses';
+	import {
-	import { dockerIcon, drizzleIcon, nextDotJsIcon, reactIcon, svelteIcon, typescriptIcon } from '$lib/util/logoIcons.svelte';
+		dockerIcon,
-	import CourseCard from './CourseCard.svelte';
+		drizzleIcon,
-	import TechListItem from './TechListItem.svelte';
+		nextDotJsIcon,
-	import courseData from './course.json';
+		reactIcon,
-	import ExternalLink from '$lib/components/ExternalLink.svelte';
+		svelteIcon,
+		typescriptIcon,
+		honoIcon,
+	} from "../../lib/util/logoIcons.svelte";
+	import CourseCard from "./CourseCard.svelte";
+	import courseData from "./course.json";
+	import ExternalLink from "../../lib/components/ExternalLink.svelte";
 
 	const courses: Course[] = courseData.courses;
 </script>
@@ -18,66 +24,116 @@
 		<h1>About</h1>
 		<p>Hey! My name is Bradley Shellnut.</p>
 		<p>
-			I'm {new Date().getFullYear() - 1991} years old and I am a full stack
+			I'm {new Date().getFullYear() - 1991} years old and I am a full stack software
-			software engineer who's interested in new tech and not afraid to
+			engineer who's interested in new tech and not afraid to discover new interests.
-			discover new interests.
 		</p>
 	</div>
 	<div>
 		<h2>More deets</h2>
 		<p>
-			I graduated from Cal Poly San Luis Obispo in 2013 with a Bachelor's
+			I graduated from Cal Poly San Luis Obispo in 2013 with a Bachelor's degree
-			degree in Computer Engineering.{' '}
+			in Computer Engineering.{" "}
-			<span class="emoji" title="Software + Hardware">
+			<span class="emoji" title="Software + Hardware"> 💻 </span>
-				💻
-			</span>
 		</p>
 		<p>
 			At work I develop in Java Spring, Spring Boot, PostgreSQL, and React /
 			Angular.
 		</p>
 		<p>
-			At home I delve into other frameworks, languages, and platforms such
+			At home I delve into other frameworks, languages, and platforms such as:
-			as:
 		</p>
 		<div class="tech-list">
 			<ExternalLink
-			  iconData={{ type: 'svg', icon: svelteIcon, iconClass: 'center' }}
+				iconData={{ type: "svg", icon: svelteIcon, iconClass: "center" }}
-				linkData={{ href: 'https://svelte.dev', ariaLabel: 'Svelte', title: 'Svelte', target: '_blank', clazz: "tech-list-item", textDecoration: 'none' }}
+				linkData={{
-				textData={{ text: "Svelte", showIcon: true, location: 'bottom' }}
+					href: "https://svelte.dev",
+					ariaLabel: "Svelte",
+					title: "Svelte",
+					target: "_blank",
+					clazz: "tech-list-item",
+					textDecoration: "none",
+				}}
+				textData={{ text: "Svelte", showIcon: true, location: "bottom" }}
 			/>
 			<ExternalLink
-			  iconData={{ type: 'svg', icon: typescriptIcon, iconClass: 'center' }}
+				iconData={{ type: "svg", icon: honoIcon, iconClass: "center" }}
-				linkData={{ href: 'https://www.typescriptlang.org/', ariaLabel: 'TypeScript', title: 'TypeScript', target: '_blank', clazz: "tech-list-item", textDecoration: 'none' }}
+				linkData={{
-				textData={{ text: "TypeScript", showIcon: true, location: 'bottom' }}
+					href: "https://hono.dev",
+					ariaLabel: "Hono",
+					title: "Hono",
+					target: "_blank",
+					clazz: "tech-list-item",
+					textDecoration: "none",
+				}}
+				textData={{ text: "Hono", showIcon: true, location: "bottom" }}
 			/>
 			<ExternalLink
-			  iconData={{ type: 'svg', icon: drizzleIcon, iconClass: 'center' }}
+				iconData={{ type: "svg", icon: typescriptIcon, iconClass: "center" }}
-				linkData={{ href: 'https://orm.drizzle.team/', ariaLabel: 'Drizzle ORM', title: 'Drizzle ORM', target: '_blank', clazz: "tech-list-item", textDecoration: 'none' }}
+				linkData={{
-				textData={{ text: "Drizzle ORM", showIcon: true, location: 'bottom' }}
+					href: "https://www.typescriptlang.org/",
+					ariaLabel: "TypeScript",
+					title: "TypeScript",
+					target: "_blank",
+					clazz: "tech-list-item",
+					textDecoration: "none",
+				}}
+				textData={{ text: "TypeScript", showIcon: true, location: "bottom" }}
 			/>
 			<ExternalLink
-			  iconData={{ type: 'svg', icon: reactIcon, iconClass: 'center' }}
+				iconData={{ type: "svg", icon: drizzleIcon, iconClass: "center" }}
-				linkData={{ href: 'https://reactjs.org/', ariaLabel: 'React', title: 'React', target: '_blank', clazz: "tech-list-item", textDecoration: 'none' }}
+				linkData={{
-				textData={{ text: "React", showIcon: true, location: 'bottom' }}
+					href: "https://orm.drizzle.team/",
+					ariaLabel: "Drizzle ORM",
+					title: "Drizzle ORM",
+					target: "_blank",
+					clazz: "tech-list-item",
+					textDecoration: "none",
+				}}
+				textData={{ text: "Drizzle ORM", showIcon: true, location: "bottom" }}
 			/>
 			<ExternalLink
-			  iconData={{ type: 'svg', icon: nextDotJsIcon, iconClass: 'center' }}
+				iconData={{ type: "svg", icon: reactIcon, iconClass: "center" }}
-				linkData={{ href: 'https://nextjs.org/', ariaLabel: 'Next.js', title: 'Next.js', target: '_blank', clazz: "tech-list-item", textDecoration: 'none' }}
+				linkData={{
-				textData={{ text: "Next.js", showIcon: true, location: 'bottom' }}
+					href: "https://reactjs.org/",
+					ariaLabel: "React",
+					title: "React",
+					target: "_blank",
+					clazz: "tech-list-item",
+					textDecoration: "none",
+				}}
+				textData={{ text: "React", showIcon: true, location: "bottom" }}
 			/>
 			<ExternalLink
-			  iconData={{ type: 'svg', icon: dockerIcon, iconClass: 'center' }}
+				iconData={{ type: "svg", icon: nextDotJsIcon, iconClass: "center" }}
-				linkData={{ href: 'https://www.docker.com/', ariaLabel: 'Docker', title: 'Docker', target: '_blank', clazz: "tech-list-item", textDecoration: 'none' }}
+				linkData={{
-				textData={{ text: "Docker", showIcon: true, location: 'bottom' }}
+					href: "https://nextjs.org/",
+					ariaLabel: "Next.js",
+					title: "Next.js",
+					target: "_blank",
+					clazz: "tech-list-item",
+					textDecoration: "none",
+				}}
+				textData={{ text: "Next.js", showIcon: true, location: "bottom" }}
+			/>
+			<ExternalLink
+				iconData={{ type: "svg", icon: dockerIcon, iconClass: "center" }}
+				linkData={{
+					href: "https://www.docker.com/",
+					ariaLabel: "Docker",
+					title: "Docker",
+					target: "_blank",
+					clazz: "tech-list-item",
+					textDecoration: "none",
+				}}
+				textData={{ text: "Docker", showIcon: true, location: "bottom" }}
 			/>
 		</div>
 	</div>
 	<div>
 		<h2>Extracurricular</h2>
 		<p>
-			Outside of work I like to take tutorials from many instructors like
+			Outside of work I like to take tutorials from many instructors like those
-			those below:
+			below:
 		</p>
 		<div class="extracurricular">
 			{#each courses as course}
@@ -88,19 +144,17 @@
 	<div>
 		<h2>Other fun things about me&hellip;</h2>
 		<div style="display: grid;">
-			<p>
+			<p>Recently visited Taiwan and Japan.</p>
-				Recently cruised the Mediterranean.
-			</p>
 			<div
 				style="
 					display: grid;
 					grid-template-columns: minmax(200px, 400px);
 					align-items: center;
 					justify-content: center;
+					font-size: 5rem;
 				"
 			>
-				<enhanced:img src={cruise} alt="Clip art of a cruise ship. Cruise icons created by C-mo Box - Flaticon" />
+				🇹🇼 🇯🇵 🌸
-				<p class="center">Crusin'</p>
 			</div>
 		</div>
 		<div>
@@ -108,7 +162,15 @@
 			<div class="cat-pics">
 				<figure>
 					<enhanced:img src={tortie_derp} alt="Tortie Cat" />
-					<p class="center">Turnip <img class="icon" src={String(turnip)} width="25px" height="25px" alt="Turnip" /></p>
+					<p class="center">
+						Turnip <img
+							class="icon"
+							src={String(turnip)}
+							width="25px"
+							height="25px"
+							alt="Turnip"
+						/>
+					</p>
 				</figure>
 				<figure>
 					<enhanced:img src={orange_derp} alt="Tortie Cat" />