User updating

alankrantas · Jun 30, 2024 · 89cd169 · 89cd169
1 parent d55f79b
commit 89cd169
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 37 deletions.
diff --git a/.github/workflows/github-pages-deploy.yml b/.github/workflows/github-pages-deploy.yml
@@ -45,7 +45,7 @@ jobs:
       - name: Upload Artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "./build"
+          path: './build'
 
       - name: Deploy to GitHub Pages
         uses: actions/deploy-pages@v4
diff --git a/src/components/NameTitle.svelte b/src/components/NameTitle.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
+	import { fade } from 'svelte/transition';
+
 	import { createEventDispatcher } from 'svelte';
 
 	import { screenSize } from '../data/Store';
 	import info from '../data/BasicInfo.json';
 
 	export let mode: String;
+	let titleIndex = 0;
 
 	const dispatch = createEventDispatcher<{ setViewId: number }>();
+
+	setInterval(() => {
+		titleIndex = titleIndex >= info.title.length - 1 ? 0 : titleIndex + 1;
+	}, 2500);
 </script>
 
 {#if mode == 'main'}
@@ -23,7 +30,13 @@
 					</span>
 					<span class="h5"> &nbsp;|&nbsp; </span>
 					<span class="h4">
-						{info.title}
+						{#each info.title as title, index}
+							{#if index == titleIndex}
+								<span in:fade={{ duration: 750 }}>
+									{title}
+								</span>
+							{/if}
+						{/each}
 					</span>
 				</p>
 				<p class="text-white-50">
@@ -50,7 +63,13 @@
 					</span>
 					<span class="h5"> &nbsp;|&nbsp; </span>
 					<span class="h4">
-						{info.title}
+						{#each info.title as title, index}
+							{#if index == titleIndex}
+								<span in:fade={{ duration: 750 }}>
+									{title}
+								</span>
+							{/if}
+						{/each}
 					</span>
 				{:else}
 					<p>
@@ -60,7 +79,13 @@
 					</p>
 					<p>
 						<span class="h4">
-							{info.title}
+							{#each info.title as title, index}
+								{#if index == titleIndex}
+									<span in:fade={{ duration: 750 }}>
+										{title}
+									</span>
+								{/if}
+							{/each}
 						</span>
 					</p>
 				{/if}
@@ -122,7 +147,13 @@
 				</span>
 			</p>
 			<p class="h6 text-white-50 code p-md-1 m-md-1">
-				{info.title}
+				{#each info.title as title, index}
+					{#if index == titleIndex}
+						<span in:fade={{ duration: 750 }}>
+							{title}
+						</span>
+					{/if}
+				{/each}
 			</p>
 		</div>
 	{:else if $screenSize >= 576}
@@ -143,7 +174,13 @@
 					</span>
 				</p>
 				<p class="h6 text-white-50 code p-md-1 m-md-1">
-					{info.title}
+					{#each info.title as title, index}
+						{#if index == titleIndex}
+							<span in:fade={{ duration: 750 }}>
+								{title}
+							</span>
+						{/if}
+					{/each}
 				</p>
 			</div>
 			<div class="col-sm text-start">
@@ -165,7 +202,13 @@
 				</span>
 			</p>
 			<p class="h6 text-white-50 code p-md-1 m-md-1">
-				{info.title}
+				{#each info.title as title, index}
+					{#if index == titleIndex}
+						<span in:fade={{ duration: 750 }}>
+							{title}
+						</span>
+					{/if}
+				{/each}
 			</p>
 		</div>
 		<br />

diff --git a/src/components/viewItems/AboutMe.svelte b/src/components/viewItems/AboutMe.svelte
@@ -21,7 +21,7 @@
 <p><span class="h4">Hello there!</span></p>
 <p class="indent">
 	My name is <b>{info.name}</b>, a native Taiwanese born/raised and educated in {info.location}. I
-	am currently a {info.title.toLocaleLowerCase()} working for a software startup which creates a cloud-based
+	am currently a {info.title[0].toLowerCase()} working for a software startup which creates a cloud-based
 	data integration and data lineage platform.
 </p>
 <p class="indent">

diff --git a/src/data/BasicInfo.json b/src/data/BasicInfo.json
@@ -1,6 +1,6 @@
 {
 	"name": "Alan Wang",
-	"title": "Technical Writer",
+	"title": ["Technical Writer", "Software Engineer", "Translator"],
 	"location": "Taipei, Taiwan",
 	"industry": "software industry"
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -12,30 +12,29 @@
 
 	import info from '../data/BasicInfo.json';
 	import viewItems from '../data/ViewItems.json';
+
+	let webTitle = `Homepage of ${info.name} (${info.location}): ${info.title.map((item) => item.toLowerCase()).join('/')}`;
 </script>
 
 <svelte:window bind:innerWidth={$screenSize} />
 
 <svelte:head>
-	<title>{info.name}, {info.title} ({info.location}) - Homepage</title>
+	<title>{webTitle}</title>
 	<meta
 		name="description"
-		content={`Homepage for ${info.name}, ${info.title} - ${[...viewItems.map((item) => item.name)].join(', ')}`}
+		content={`${webTitle} - ${[...viewItems.map((item) => item.name)].join(', ')}`}
 	/>
 	<meta
 		name="keywords"
-		content={`${info.title}, ${info.industry}, homepage, personal, reseme, cv, job, talent, hiring, svelte, sveltekit, frontend`}
+		content={`${info.title.join(', ')}, ${info.industry}, homepage, personal, resume, cv, job, talent, hiring, svelte, sveltekit, frontend`}
 	/>
 	<meta property="og:url" content="https://alankrantas.github.io/" />
 	<meta property="og:type" content="website" />
-	<meta property="og:title" content={`${info.name}, ${info.title} (${info.location}) - Homepage`} />
-	<meta
-		property="og:site_name"
-		content={`${info.name}, ${info.title} (${info.location}) - Homepage`}
-	/>
+	<meta property="og:title" content={webTitle} />
+	<meta property="og:site_name" content={webTitle} />
 	<meta
 		property="og:description"
-		content={`Homepage for ${info.name}, ${info.title} - ${[...viewItems.map((item) => item.name)].join(', ')}`}
+		content={`${webTitle} - ${[...viewItems.map((item) => item.name)].join(', ')}`}
 	/>
 	<meta property="og:image:type" content="image/jpeg" />
 	<meta property="og:image" content="http://alankrantas.github.io/website/thumbnail.jpg" />
@@ -46,10 +45,7 @@
 	/>
 	<meta property="og:image:width" content="1200" />
 	<meta property="og:image:height" content="627" />
-	<meta
-		property="og:image:alt"
-		content={`${info.name}, ${info.title} (${info.location}) - Homepage`}
-	/>
+	<meta property="og:image:alt" content={webTitle} />
 </svelte:head>
 
 <slot />

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -20,7 +20,7 @@
 
 	viewItems[0].description = viewItems[0].description
 		.replace('<name>', info.name)
-		.replace('<title>', info.title.toLowerCase())
+		.replace('<title>', info.title.map((item) => item.toLowerCase()).join('/'))
 		.replace('<industry>', info.industry);
 
 	let ready = false;

diff --git a/yarn.lock b/yarn.lock
@@ -133,9 +133,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.1.tgz#361461e5cb3845d874e61731c11cfedd664d83a0"
-  integrity sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
+  integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
 
 "@eslint/eslintrc@^2.1.4":
   version "2.1.4"
@@ -340,9 +340,9 @@
   integrity sha512-/EBFydZDwfwFfFEuF1vzUseBoRziwKP7AoHAwv+Ot3M084sE/HTVBHf9mCmXfdM9ijprY5YEugZjleflncX5fQ==
 
 "@sveltejs/kit@^2.5.17":
-  version "2.5.17"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-2.5.17.tgz#e59e00be7a86021c897ce65a540740473535898e"
-  integrity sha512-wiADwq7VreR3ctOyxilAZOfPz3Jiy2IIp2C8gfafhTdQaVuGIHllfqQm8dXZKADymKr3uShxzgLZFT+a+CM4kA==
+  version "2.5.18"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-2.5.18.tgz#7435fcc026f156fc6e58775e3015e6fa72eebcd3"
+  integrity sha512-+g06hvpVAnH7b4CDjhnTDgFWBKBiQJpuSmQeGYOuzbO3SC3tdYjRNlDCrafvDtKbGiT2uxY5Dn9qdEUGVZdWOQ==
   dependencies:
     "@types/cookie" "^0.6.0"
     cookie "^0.6.0"
@@ -1216,9 +1216,9 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
     brace-expansion "^1.1.7"
 
 minimatch@^9.0.4:
-  version "9.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
-  integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
   dependencies:
     brace-expansion "^2.0.1"
 
@@ -1333,7 +1333,7 @@ periscopic@^3.1.0:
     estree-walker "^3.0.0"
     is-reference "^3.0.0"
 
-picocolors@^1.0.0:
+picocolors@^1.0.0, picocolors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
@@ -1370,12 +1370,12 @@ postcss-selector-parser@^6.1.0:
     util-deprecate "^1.0.2"
 
 postcss@^8.4.38:
-  version "8.4.38"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
-  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+  version "8.4.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
+  integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.0"
+    picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
 prelude-ls@^1.2.1: