Add mobile styles, social icons and README badges

src/lib/components/desktop/Desktop.svelte

@@ -16,7 +16,6 @@
 	}: { pageOpen: boolean; pageTitle: string; pageIcon: string; pageKey: string; children: Snippet } =
 		$props();
 
-	const gapInPixels = 10;
 	const narrowWidth = 768;
 
 	let areaWidth = $state(1280);
@@ -44,7 +43,7 @@
 
 	function styleFor(id: string): string {
 		const rect = layout.get(id);
-		return rect ? tileStyle(rect, gapInPixels) : 'display: none';
+		return rect ? tileStyle(rect, isNarrow ? 4 : 10) : 'display: none';
 	}
 </script>
 
@@ -151,12 +150,8 @@
 	}
 
 	@media (max-width: 767px) {
-		.icons-layer :global(.desktop-icons) {
-			grid-auto-flow: row;
-			grid-template-columns: repeat(auto-fill, 112px);
-			grid-template-rows: none;
-			grid-auto-rows: 104px;
-			justify-content: center;
+		.icons-layer {
+			overflow-y: auto;
 		}
 	}
 </style>

src/lib/components/desktop/DesktopIcons.svelte

@@ -2,10 +2,12 @@
 	import Icon from '@iconify/svelte';
 	import { desktop } from '#lib/content';
 	import { runDesktopAction } from '#lib/desktop/actions';
+
+	const icons = desktop.iconGroups.flatMap((group) => group.icons);
 </script>
 
 <nav class="desktop-icons" aria-label="Desktop">
-	{#each desktop.icons as item (item.label)}
+	{#each icons as item (item.label)}
 		<button class="desktop-icon" title={item.label} onclick={() => runDesktopAction(item.open)}>
 			<span class="icon-box">
 				<Icon icon={item.icon} width="36" />
@@ -19,9 +21,9 @@
 	.desktop-icons {
 		display: grid;
 		grid-auto-flow: column;
-		grid-template-rows: repeat(auto-fill, 104px);
-		grid-auto-columns: 112px;
-		gap: 6px;
+		grid-template-rows: repeat(auto-fill, 100px);
+		grid-auto-columns: 116px;
+		gap: 4px;
 		height: 100%;
 		padding: 4px;
 		align-content: start;
@@ -32,7 +34,7 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 7px;
-		padding: 6px 4px;
+		padding: 6px 2px;
 		background: none;
 		border: none;
 		color: var(--foreground);
@@ -69,11 +71,12 @@
 	.icon-label {
 		max-width: 100%;
 		padding: 1px 6px;
+		overflow: hidden;
 		background: color-mix(in srgb, var(--background) 88%, transparent);
 		font-size: 13px;
 		line-height: 1.35;
-		text-align: center;
-		word-break: break-word;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 
 	.desktop-icon:hover .icon-label,
@@ -81,4 +84,15 @@
 		background: var(--accent);
 		color: var(--background);
 	}
+
+	@media (max-width: 767px) {
+		.desktop-icons {
+			grid-auto-flow: row;
+			grid-template-columns: repeat(auto-fill, 104px);
+			grid-template-rows: none;
+			grid-auto-rows: 100px;
+			justify-content: center;
+			height: auto;
+		}
+	}
 </style>

src/lib/components/desktop/Launcher.svelte

@@ -19,7 +19,8 @@
 		open: { page: page.path }
 	}));
 
-	const iconEntries: LauncherEntry[] = desktop.icons
+	const iconEntries: LauncherEntry[] = desktop.iconGroups
+		.flatMap((group) => group.icons)
 		.filter((item) => !('page' in item.open))
 		.map((item) => ({
 			label: item.label,
@@ -172,4 +173,18 @@
 	.empty {
 		padding: 0.5rem;
 	}
+
+	@media (max-width: 640px) {
+		.launcher {
+			top: calc(var(--bar-height) + 8px);
+		}
+
+		.results {
+			max-height: 60dvh;
+		}
+
+		.result {
+			padding: 0.6rem 0.5rem;
+		}
+	}
 </style>

src/lib/components/desktop/Window.svelte

@@ -144,5 +144,17 @@
 		flex: 1;
 		min-height: 0;
 		overflow: auto;
+		overscroll-behavior: contain;
+	}
+
+	@media (max-width: 640px) {
+		.title-bar {
+			height: 36px;
+		}
+
+		.close-button {
+			width: 34px;
+			height: 34px;
+		}
 	}
 </style>

src/lib/components/models/ModelViewer.svelte

@@ -146,4 +146,11 @@
 		padding: 0.3rem 0.6rem;
 		font-size: 0.75rem;
 	}
+
+	@container (max-width: 600px) {
+		.canvas-area {
+			height: 280px;
+			touch-action: none;
+		}
+	}
 </style>

src/lib/components/shell/Bar.svelte

@@ -78,7 +78,12 @@
 
 	@media (max-width: 640px) {
 		.bar {
-			font-size: 12px;
+			padding: 0 4px;
+			font-size: 13px;
+		}
+
+		.bar :global(.tray-button) {
+			width: 36px;
 		}
 	}
 </style>

src/lib/components/shell/Clock.svelte

@@ -20,13 +20,15 @@
 
 <span class="clock full">{now ? formatClock(now) : ''}</span>
 <span class="clock short">{now ? formatClock(now).split(' ').slice(1).join(' ') : ''}</span>
+<span class="clock time-only">{now ? formatClock(now).split(' ').at(-1) : ''}</span>
 
 <style>
 	.clock {
 		white-space: nowrap;
 	}
 
-	.short {
+	.short,
+	.time-only {
 		display: none;
 	}
 
@@ -39,4 +41,14 @@
 			display: inline;
 		}
 	}
+
+	@media (max-width: 420px) {
+		.short {
+			display: none;
+		}
+
+		.time-only {
+			display: inline;
+		}
+	}
 </style>

src/lib/components/shell/PopupCard.svelte

@@ -55,4 +55,14 @@
 		padding: 0.4rem;
 		background: var(--background);
 	}
+
+	@media (max-width: 640px) {
+		.popup {
+			position: fixed;
+			top: calc(var(--bar-height) + 6px);
+			right: 8px;
+			left: 8px;
+			width: auto;
+		}
+	}
 </style>

src/lib/components/shell/Workspaces.svelte

@@ -68,7 +68,7 @@
 		}
 
 		.workspace {
-			width: 20px;
+			width: 22px;
 		}
 	}
 

src/lib/components/terminal/Fetch.svelte

@@ -16,7 +16,6 @@
 		['Name', profile.displayName],
 		['Title', profile.title],
 		['Uptime', `${uptimeDays} days`],
-		['School', profile.education.school],
 		['Languages', (profile.skills.Languages ?? []).slice(0, 5).join(', ')]
 	]);
 </script>

src/lib/components/terminal/Terminal.svelte

@@ -142,6 +142,7 @@
 	.terminal {
 		height: 100%;
 		overflow-y: auto;
+		overscroll-behavior: contain;
 		padding: 0.75rem 1.1rem 1.5rem;
 		line-height: 1.5;
 		cursor: text;
@@ -185,4 +186,15 @@
 		font: inherit;
 		caret-color: var(--foreground);
 	}
+
+	@media (max-width: 640px) {
+		.terminal {
+			padding: 0.6rem 0.7rem 1.25rem;
+			font-size: 14px;
+		}
+
+		input {
+			font-size: 16px;
+		}
+	}
 </style>

src/lib/components/ui/ProfileIntro.svelte

@@ -45,4 +45,18 @@
 	p {
 		margin: 0.5rem 0 0;
 	}
+
+	@container (max-width: 520px) {
+		.profile-intro {
+			gap: 0.9rem;
+		}
+
+		img {
+			width: 110px;
+		}
+
+		h1 {
+			font-size: 1.3rem;
+		}
+	}
 </style>

src/lib/content/types.ts

@@ -34,6 +34,7 @@ export interface LabeledLink {
 export interface Experience {
 	role: string;
 	organization: string;
+	school?: string;
 	employmentType?: string;
 	period: string;
 	highlights: string[];
@@ -128,6 +129,11 @@ export interface Model3D {
 
 export type DesktopAction = { page: string } | { terminal: string } | { url: string };
 
+export interface DesktopIconGroup {
+	name: string;
+	icons: DesktopIcon[];
+}
+
 export interface DesktopIcon {
 	label: string;
 	icon: string;
@@ -143,7 +149,7 @@ export interface Workspace {
 export interface DesktopContent {
 	defaultTheme: string;
 	workspaces: Workspace[];
-	icons: DesktopIcon[];
+	iconGroups: DesktopIconGroup[];
 	startupCommand: string;
 }
 

src/lib/terminal/commands/whoami.ts

@@ -23,7 +23,6 @@ function whoamiOutput(): OutputBlock[] {
 		line(span('─'.repeat(header.length), 'muted')),
 		field('alias', profile.displayName),
 		field('role', profile.title),
-		field('school', `${profile.education.school}, ${profile.education.degree}`),
 		...(currentRole ? [field('now', span(currentRole.role, 'orange'), span(' @ ', 'muted'), currentRole.organization)] : []),
 		...(interests.length ? [field('interests', ...joinWithDots(interests.map((interest) => span(interest, 'magenta'))))] : []),
 		blankLine,