Updating

package.json

@@ -22,7 +22,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.2",
-		"@sveltejs/kit": "^1.15.10",
+		"@sveltejs/kit": "^1.15.11",
 		"@typescript-eslint/eslint-plugin": "^5.59.2",
 		"@typescript-eslint/parser": "^5.59.2",
 		"eslint": "^8.39.0",

src/components/Footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { name } from '../data/NameTitle';
+	import { name } from '../data/Data';
 </script>
 
 <div class="text-center">

src/components/NameTitle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import { name, title, location } from '../data/NameTitle';
+	import { name, title, location } from '../data/Data';
 
 	export let mode: String;
 

src/components/ViewItemContent.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
 	import AboutMe from './ViewItems/AboutMe.svelte';
-	import Experience from './ViewItems/Experience.svelte';
-	import Competencies from './ViewItems/Competencies.svelte';
+	import CareerAndSkills from './ViewItems/CareerAndSkills.svelte';
 	import Portfolio from './ViewItems/Portfolio.svelte';
-	import Hobbies from './ViewItems/Hobbies.svelte';
-	import Links from './ViewItems/Links.svelte';
-	import AboutThisSite from './ViewItems/AboutThisSite.svelte';
+	import LinksAndAbout from './ViewItems/LinksAndAbout.svelte';
 
 	export let viewItemId: number;
 </script>
@@ -14,16 +11,10 @@
 	{#if viewItemId == 0}
 		<AboutMe />
 	{:else if viewItemId == 1}
-		<Experience />
+		<CareerAndSkills />
 	{:else if viewItemId == 2}
-		<Competencies />
-	{:else if viewItemId == 3}
 		<Portfolio />
-	{:else if viewItemId == 4}
-		<Hobbies />
-	{:else if viewItemId == 5}
-		<Links />
-	{:else if viewItemId == 6}
-		<AboutThisSite />
+	{:else if viewItemId == 3}
+		<LinksAndAbout />
 	{/if}
 </div>

src/components/ViewItems/AboutMe.svelte

@@ -1,57 +1,6 @@
 <script lang="ts">
-	import { name, title, location } from '../../data/NameTitle';
-	import type { ListItem } from '../../data/Types';
+	import { name, title, location, personalList, hobbiesList } from '../../data/Data';
 	import List from '../utils/List.svelte';
-
-	const getAge = () => {
-		const now = new Date();
-		const birth = new Date('10 Mar 1984 12:00:00 GMT+8');
-		return Math.floor(
-			(now.getMonth() - birth.getMonth() + 12 * (now.getFullYear() - birth.getFullYear())) / 12
-		);
-	};
-
-	const personalList: ListItem[] = [
-		{
-			name: 'Birth name',
-			content: 'Pao-Hsiang Wang (王寶翔)'
-		},
-		{
-			name: 'Nationality',
-			content: 'Taiwan (R.O.C.)'
-		},
-		{
-			name: 'Year of birth',
-			content: `1984 (age ${getAge()})`,
-			footnote: 'The age is auto-updated'
-		},
-		{
-			name: 'Gender',
-			content: 'Male ♂'
-		},
-		{
-			name: 'Height',
-			content: '178 cm (5′ 10″)'
-		},
-		{
-			name: 'Blood type',
-			content: 'A'
-		},
-		{
-			name: 'Zodiac sign',
-			content: 'Pisces ♓'
-		},
-		{
-			name: 'Myers-Briggs Type Indicator (MBTI)',
-			content: 'ISTJ',
-			footnote: '(The Investigator/Inspector/Logistician)'
-		},
-		{
-			name: 'Marital status',
-			content: 'Single/unmarried',
-			footnote: "I'm heterosexual. Ask me out for a coffee if you dare... 😊"
-		}
-	];
 </script>
 
 <p><span class="h4">Hello there!</span></p>
@@ -92,14 +41,51 @@
 <p>
 	<br />
 </p>
+<p class="text-center">
+	<img src="/about-me/profile.jpg" width="450px" alt="profile" class="rounded-5 p-2 m-2" />
+	<br />
+	<span class="small codetext-white-50"> Selfie with a Polaroid SX-70 Sonar </span>
+</p>
+<p>
+	<br />
+</p>
 <p>
 	<List list={personalList} title="Personal Facts" />
 </p>
 <p>
 	<br />
 </p>
 <p class="text-center">
-	<img src="/about-me/profile.jpg" width="450px" alt="profile" class="rounded-5 p-2 m-2" />
+	<img src="/about-me/camera.jpg" width="550px" alt="camera" class="rounded-5 p-2 m-2" />
 	<br />
-	<span class="small codetext-white-50"> Selfie with a Polaroid SX-70 Sonar </span>
+	<span class="small codetext-white-50">
+		Two of my favorite things: camera and coffee. (The camera is a Eastern Germany-made Zeiss Ikon
+		Ercona; this copy is possibly manufactured in early 1950s)</span
+	>
+</p>
+<p>
+	<br />
+</p>
+<p>
+	<List list={hobbiesList} title="Interests and Hobbies" />
+</p>
+<p>
+	<br />
+</p>
+<p class="text-center">
+	<img src="/about-me/sakura.jpg" width="500px" alt="sakura" class="rounded-5 p-2 m-2" />
+	<br />
+	<span class="small codetext-white-50"
+		>Cherry blossoms on medium format still film, Kumamoto Castle, Japan, 2018.</span
+	>
+</p>
+<p>
+	<br />
+</p>
+<p class="text-center">
+	<img src="/about-me/diy.jpg" width="500px" alt="diy" class="rounded-5 p-2 m-2" />
+	<br />
+	<span class="small codetext-white-50"
+		>Japanese-made, hand-assembled Billy doll houses refitted with DIY lights and other stuff.</span
+	>
 </p>

src/components/ViewItems/CareerAndSkills.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import {
+		professionalList,
+		educationList,
+		clubList,
+		certList,
+		softwareList,
+		generalSkillsList
+	} from '../../data/Data';
+	import List from '../utils/List.svelte';
+</script>
+
+<p>
+	<List list={softwareList} title="Software Development Skills" />
+</p>
+<p>
+	<span class="small"
+		>*Note: I use Eclipse, Java and several MVC-based J2EE web frameworks (Struts 2, JavaServer
+		Faces 2, Spring 3) in my first job but I no longer consider them as my work skills. I have once
+		tried Spring Boot for creating testing micrcoservices recently and that's pretty about it.</span
+	>
+</p>
+<p>
+	<span class="small"
+		>I also revisited Quick Basic and TinyBasic in order to rewrite a piece of code I wrote as a
+		kid.</span
+	>
+</p>
+<p>
+	<span class="small">See <kbd>Portfolio</kbd> for my selection of programming works.</span>
+</p>
+<p>
+	<br />
+</p>
+<p>
+	<List list={generalSkillsList} title="General Skills" />
+</p>
+<p>
+	<span class="small">*Note: see <kbd>Portfolio</kbd> for my list of published works.</span>
+</p>
+<p>
+	<br />
+</p>
+<p class="text-center">
+	<img src="/about-me/work.jpg" width="550px" alt="work" class="rounded-5 p-2 m-2" />
+	<br />
+	<span class="small codetext-white-50">FST Network office's common area (before relocated).</span>
+</p>
+<p>
+	<br />
+</p>
+<p>
+	<List list={professionalList} title="Professional Experience" />
+</p>
+<p>
+	<span class="small"
+		>*Note: See <kbd>Competencies</kbd> for my available skills and <kbd>Links</kbd> for my full résumés.</span
+	>
+</p>
+<p>
+	<br />
+</p>
+<p>
+	<List list={educationList} title="Education" />
+</p>
+<p>
+	<span class="small"
+		>*Note: <kbd>Public Finance</kbd> focuses on government tax, accounting and financial policies, which
+		is quite different from private sector banking and finance, and for which I had no interest at all.</span
+	>
+</p>
+<p>
+	<br />
+</p>
+<p>
+	<List list={clubList} title="Club" />
+</p>
+<p>
+	<br />
+</p>
+<p>
+	<List list={certList} title="Certification" />
+</p>