Updating

src/components/Footer.svelte

@@ -2,13 +2,13 @@
 	import { name } from '../data/NameTitle';
 </script>
 
-<div class="text-center text-white-50">
+<div class="text-center">
 	<div>
 		<a href="https://github.com/alankrantas/alankrantas.github.io" target="_blank">
 			<img src="/github-mark-white.svg" width="40px" alt="github-mark-white" class="shadow" />
 		</a>
 	</div>
-	<div class="p-2 m-2">
+	<div class="text-white-50 opacity-75 p-2 m-2">
 		<b>© {new Date().getFullYear()} {name}</b>
 	</div>
 </div>

src/components/NameTitle.svelte

@@ -19,7 +19,7 @@
 					{title}
 				</span>
 			</p>
-			<p class="text-white-50">
+			<p class="text-white-50 opacity-75">
 				<span class="lead code">
 					{location}
 				</span>
@@ -31,15 +31,15 @@
 	<div class="text-end">
 		<img
 			src="/about-me/profile.jpg"
-			width="140px"
+			width="135px"
 			alt="profile"
 			class="img-thumbnail rounded-circle shadow"
 		/>
 	</div>
 	<br />
 	<div class="text-end">
 		<p class="h2 text-white title">
-			<span class="badge bg-secondary">
+			<span class="badge bg-secondary opacity-75">
 				{name}
 			</span>
 		</p>

src/components/ViewItems/AboutThisSite.svelte

@@ -81,7 +81,7 @@
 </p>
 <p class="indent">
 	Although SvelteKit has a pretty neat routing system, I made this as a single-page application
-	(SPA) on purpose.
+	(SPA) on purpose. QueryString is added to create the illusion of routing between views.
 </p>
 <br />
 <List list={siteTechList} title="List of Resource for Building This Site" />

src/components/ViewItems/Portfolio.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { ListItem } from '../../data/Types';
-	import List from '../utils/List.svelte';
+	import type { WorkItem } from '../../data/Types';
+	import { editorialWorks } from '../../data/Works';
 </script>
 
 🚧 WORKING IN PROGRESS 🚧

src/components/utils/List.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ListItem } from '../data/Types';
+	import type { ListItem } from '../../data/Types';
 	import Link from './Link.svelte';
 
 	export let title: string;

src/data/Types.ts

@@ -1,8 +1,17 @@
 export interface ViewItem {
 	id: number;
 	name: string;
-	description?: string | null;
-	imgUrl?: string | null;
+	description?: string;
+	imgUrl?: string;
+}
+
+export interface WorkItem extends ViewItem {
+	subName?: string;
+	publisher?: string;
+	date?: string;
+	category?: string;
+	language?: string;
+	link?: string;
 }
 
 export interface ListItem {

src/data/Works.ts

@@ -0,0 +1,79 @@
+import type { WorkItem } from './Types';
+
+let id = 0;
+export const editorialWorks: WorkItem[] = [
+	{
+		id: id++,
+		name: 'Raspberry Pi 4: Python + AI Complete Application Bible',
+		subName: 'Raspberry Pi 樹莓派：Python x AI 超應用聖經',
+		description: '陳會安 / 2021',
+		publisher: 'Flag Publishing',
+		date: 'Jan 2022',
+		category: 'Programming: Python, machine learning, embedded',
+		language: 'Traditional Chinese',
+		link: 'https://www.flag.com.tw/books/product/F1786',
+		imgUrl: '/work/rpi.jpg'
+	},
+	{
+		id: id++,
+		name: 'Automated Machine Learning with AutoKeras: Deep learning made accessible for everyone with just few lines of coding',
+		subName: 'AutoML 自動化機器學習：用 AutoKeras 超輕鬆打造高效能 AI 模型',
+		description: 'Luis Sobrecueva / 2021',
+		publisher: 'Flag Publishing',
+		date: 'Dec 2021',
+		category: 'Programming: Python, machine learning, AutoML',
+		language: 'Traditional Chinese',
+		link: 'https://www.flag.com.tw/books/product/F1385',
+		imgUrl: '/work/automl.jpg'
+	},
+	{
+		id: id++,
+		name: 'Essential TypeScript: From Beginner to Pro',
+		subName:
+			'TypeScript 邁向專家之路：零基礎 JavaScript 打通 Angular、React 與 Vue.js 前端框架實戰',
+		description: 'Adam Freeman / 2019',
+		publisher: 'Flag Publishing',
+		date: 'Nov 2021',
+		category: 'JProgramming: avaScript, TypeScript, Angular, React, Vue.js',
+		language: 'Traditional Chinese',
+		link: 'https://www.flag.com.tw/books/product/F1485',
+		imgUrl: '/work/ts.jpg'
+	},
+	{
+		id: id++,
+		name: 'The The Go Workshop: Learn to Write Clean, Efficient Code and Build High-performance Applications with Go',
+		subName: '完全自學！Go 語言 (Golang) 實戰聖經',
+		description:
+			"Delio D'Anna, Andrew Hayes, Sam Hennessy, Jeremy Leasor, Gobin Sougrakpam, Daniel Szabo / 2019",
+		publisher: 'Flag Publishing',
+		date: 'Jul 2021',
+		category: 'Programming: Golang',
+		language: 'Traditional Chinese',
+		link: 'https://www.flag.com.tw/books/product/F1741',
+		imgUrl: '/work/go.jpg'
+	},
+	{
+		id: id++,
+		name: 'Python Workout: 50 Ten-minute Exercises',
+		subName: 'Python 刷題鍛鍊班：老手都刷過的 50 道程式題, 求職面試最給力',
+		description: 'Reuven M. Lerner / 2020',
+		publisher: 'Flag Publishing',
+		date: 'Jul 2021',
+		category: 'Programming: Python',
+		language: 'Traditional Chinese',
+		link: 'https://www.flag.com.tw/books/product/F1750',
+		imgUrl: '/work/workout.jpg'
+	},
+	{
+		id: id++,
+		name: 'Python Tricks: A Buffet of Awesome Python Features',
+		subName: 'Python 刷題鍛鍊班：老手都刷過的 50 道程式題, 求職面試最給力',
+		description: 'Dan Bader / 2017',
+		publisher: 'Flag Publishing',
+		date: 'Jul 2021',
+		category: 'Programming: Python',
+		language: 'Traditional Chinese',
+		link: 'https://www.flag.com.tw/books/product/FT746A',
+		imgUrl: '/work/trick.jpg'
+	}
+];

src/routes/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import { afterUpdate } from 'svelte';
 	import { fly, fade, crossfade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
@@ -17,11 +19,21 @@
 
 	$: selectedViewId = -1;
 
-	const handleSetViewId = (event: { detail: number }) => {
-		selectedViewId = event.detail;
+	const setViewId = (id: number) => {
+		if (id >= 0 && id <= viewItems.length - 1) {
+			selectedViewId = id;
+			$page.url.searchParams.set('view', String(selectedViewId));
+			goto(`/?${$page.url.searchParams.toString()}`);
+		} else {
+			selectedViewId = -1;
+			$page.url.searchParams.delete('view');
+			goto('/');
+		}
 		if (selectedViewId != -1) scrollToTop();
 	};
 
+	const handleSetViewId = (event: { detail: number }) => setViewId(event.detail);
+
 	afterUpdate(() => {
 		if (!ready) {
 			scrollToTop = () => {
@@ -30,6 +42,11 @@
 					behavior: 'auto'
 				});
 			};
+			try {
+				setViewId(Number($page.url.searchParams.get('view') ?? -1));
+			} catch (e) {
+				setViewId(-1);
+			}
 			ready = true;
 		}
 	});
@@ -40,7 +57,7 @@
 		easing: expoOut
 	});
 
-	const ViewItems: ViewItem[] = [
+	const viewItems: ViewItem[] = [
 		{
 			id: 0,
 			name: 'About Me',
@@ -101,7 +118,7 @@
 					<!-- view cards -->
 					<div class="row">
 						<div class="col p-2 m-2">
-							{#each ViewItems.filter((item) => item.id % 2 == 0) as viewItem (viewItem.id)}
+							{#each viewItems.filter((item) => item.id % 2 == 0) as viewItem (viewItem.id)}
 								{#if viewItem.id > 0}
 									<div>
 										<br /><br /><br />
@@ -114,7 +131,7 @@
 						</div>
 						<div class="col-sm-auto" />
 						<div class="col p-2 m-2">
-							{#each ViewItems.filter((item) => item.id % 2 != 0) as viewItem (viewItem.id)}
+							{#each viewItems.filter((item) => item.id % 2 != 0) as viewItem (viewItem.id)}
 								{#if viewItem.id == 1}
 									<div>
 										<br /><br /><br />
@@ -164,7 +181,7 @@
 					</div>
 					<!-- name buttons -->
 					<ul class="nav flex-column text-end pt-2 mt-2">
-						{#each ViewItems as viewItem (viewItem.id)}
+						{#each viewItems as viewItem (viewItem.id)}
 							<ViewItemNavBtn {viewItem} {selectedViewId} on:setViewId={handleSetViewId} />
 						{/each}
 					</ul>
@@ -180,7 +197,7 @@
 						<button
 							type="button"
 							class="btn btn-dark rounded-4 shadow"
-							on:click={() => (selectedViewId = -1)}
+							on:click={() => setViewId(-1)}
 						>
 							<span class="h6">Back to main</span>
 						</button>
@@ -189,7 +206,7 @@
 						<br />
 					</div>
 					<div>
-						{#each ViewItems as viewItem (viewItem.id)}
+						{#each viewItems as viewItem (viewItem.id)}
 							<div animate:flip={{ duration: 500, easing: expoOut }}>
 								{#if selectedViewId == viewItem.id}
 									<div in:fade={{ delay: 100, duration: 500, easing: expoOut }}>