From 98802dc862d54c33bc75bc477a9cbff91917c84b Mon Sep 17 00:00:00 2001
From: SquidSpirit <squid@squidspirit.com>
Date: Wed, 23 Jul 2025 03:26:55 +0800
Subject: [PATCH] BLOG-58 feat: add FirstView and SelfTags components, refactor
 Footer, and update main page structure

---
 .../src/lib/common/framework/ui/Footer.svelte |  3 -
 .../lib/home/framework/ui/FirstView.svelte    | 17 ++++
 .../src/lib/home/framework/ui/SelfTags.svelte | 77 +++++++++++++++++++
 frontend-v2/src/routes/+page.svelte           |  9 ++-
 4 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 frontend-v2/src/lib/home/framework/ui/FirstView.svelte
 create mode 100644 frontend-v2/src/lib/home/framework/ui/SelfTags.svelte

diff --git a/frontend-v2/src/lib/common/framework/ui/Footer.svelte b/frontend-v2/src/lib/common/framework/ui/Footer.svelte
index 1f12e13..b0814d1 100644
--- a/frontend-v2/src/lib/common/framework/ui/Footer.svelte
+++ b/frontend-v2/src/lib/common/framework/ui/Footer.svelte
@@ -1,6 +1,3 @@
-<script lang="ts">
-</script>
-
 <div class="border-t border-gray-300">
 	<div
 		class="mx-auto flex max-w-screen-xl flex-col items-center justify-center gap-4 px-4 py-12 md:flex-row md:px-6"
diff --git a/frontend-v2/src/lib/home/framework/ui/FirstView.svelte b/frontend-v2/src/lib/home/framework/ui/FirstView.svelte
new file mode 100644
index 0000000..371ae8f
--- /dev/null
+++ b/frontend-v2/src/lib/home/framework/ui/FirstView.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import SelfTags from '$lib/home/framework/ui/SelfTags.svelte';
+</script>
+
+<div
+	class="mx-auto flex min-h-content-height max-w-screen-xl flex-col justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6"
+>
+	<h2 class="text-3xl font-bold text-gray-800 md:text-6xl">Hello 大家好！</h2>
+	<h1 class="flex flex-row items-center gap-x-2 text-4xl font-extrabold text-gray-800 md:text-7xl">
+		<span>我是</span>
+		<div class="rounded-lg bg-blue-600 px-1.5 py-1">
+			<span class="text-white">Squid</span>
+		</div>
+		<span>魷魚</span>
+	</h1>
+	<SelfTags />
+</div>
diff --git a/frontend-v2/src/lib/home/framework/ui/SelfTags.svelte b/frontend-v2/src/lib/home/framework/ui/SelfTags.svelte
new file mode 100644
index 0000000..b35dd60
--- /dev/null
+++ b/frontend-v2/src/lib/home/framework/ui/SelfTags.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+
+	const tagsCollection = [
+		'APP',
+		'C++',
+		'Design Pattern',
+		'Docker',
+		'Flutter',
+		'Go',
+		'Java',
+		'LINER',
+		'Linux',
+		'Python',
+		'Squid',
+		'TypeScript',
+		'中央大學',
+		'全端',
+		'分享',
+		'前端',
+		'後端',
+		'教學',
+		'暴肝',
+		'知識',
+		'碼農',
+		'科技',
+		'科普',
+		'程式設計',
+		'資工系',
+		'軟體工程',
+		'遊戲',
+		'魷魚'
+	];
+
+	// Initialize with placeholder to prevent flickering
+	let showingTags: string[] = $state(['']);
+	let isTagsVisible: boolean = $state(false);
+
+	let interval: ReturnType<typeof setInterval> | null = null;
+
+	onMount(() => {
+		shuffleTags();
+		isTagsVisible = true;
+
+		interval = setInterval(() => {
+			isTagsVisible = false;
+			setTimeout(() => {
+				shuffleTags();
+				isTagsVisible = true;
+			}, 500);
+		}, 4000);
+	});
+
+	onDestroy(() => {
+		if (interval != null) {
+			clearInterval(interval);
+			interval = null;
+		}
+	});
+
+	function shuffleTags() {
+		showingTags = [...tagsCollection].sort(() => Math.random() - 0.5);
+	}
+</script>
+
+<div
+	class={`relative w-full max-w-screen-md transition-opacity duration-500 ${isTagsVisible ? 'opacity-100' : 'opacity-0'}`}
+>
+	<div
+		class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent via-60% to-white"
+	></div>
+	<div class="flex flex-row items-center gap-x-2 overflow-hidden">
+		{#each showingTags as tag (tag)}
+			<span class="text-nowrap text-gray-400"># {tag}</span>
+		{/each}
+	</div>
+</div>
diff --git a/frontend-v2/src/routes/+page.svelte b/frontend-v2/src/routes/+page.svelte
index cc88df0..226e475 100644
--- a/frontend-v2/src/routes/+page.svelte
+++ b/frontend-v2/src/routes/+page.svelte
@@ -1,2 +1,7 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	import FirstView from '$lib/home/framework/ui/FirstView.svelte';
+</script>
+
+<div>
+	<FirstView />
+</div>