Feat/about (#45)

* feat: update aboutme

* chore: lint and typo

* chore : lint

* chore: remove music icon

* chore :lint

src/config/project.js

@@ -13,13 +13,13 @@ const Works = [
 	},
 	{
 		name: "Hybrid Mobile App",
-		description: "QQ Music / We Sing Living Room.",
+		description: "QQ Music livestreaming Room.",
 		href: "/project/tme",
 		background: "/tme.webp",
 	},
 ];
 
-const OpenSourceProjects = [
+const SideProjects = [
 	{
 		name: "Comments",
 		description: "Add comments to your website.",
@@ -28,10 +28,10 @@ const OpenSourceProjects = [
 	},
 	{
 		name: "daviddong.me",
-		description: "Personal website template.",
+		description: "My website.",
 		href: "/project/website",
 		background: "/daviddong.webp",
 	},
 ];
 
-export { Works, OpenSourceProjects };
+export { Works, SideProjects };

src/pages/index/+Page.jsx

@@ -1,6 +1,8 @@
+import { Badge } from "@/components/ui/badge";
 import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";
 import { Tag } from "@/components/ui/tag";
-import { OpenSourceProjects, Works } from "@/config/project";
+import { SideProjects, Works } from "@/config/project";
+import { navigate } from "vike/client/router";
 const ProjectLists = ({ title, items }) => (
 	<section>
 		<h3>{title}</h3>
@@ -15,7 +17,7 @@ const ProjectLists = ({ title, items }) => (
 export default function Page() {
 	return (
 		<article className="prose prose-p:text-neutral-500 p-12">
-			<h1>Hey, I'm Haoyu</h1>
+			<h1>Hi, I'm Haoyu</h1>
 			{/* about me */}
 			<section>
 				<div className="text-neutral-500">
@@ -30,19 +32,40 @@ export default function Page() {
 				</div>
 				<br />
 				<div className="text-neutral-500">
-					In my free time, I usually
-					<Tag text="play guitar" tooltip="R&B, Neo Soul, Gospel" />
-					and
-					<Tag text="watch movies" tooltip="Thriller, Tragicomedy" />. My favorite director is Woody
-					Allen.
+					In my free time, I usually play guitar and watch movies. You can watch my
+					<Badge
+						variant="outline"
+						className="px-2 mx-1 text-sm hover:cursor-pointer"
+						onClick={() => {
+							navigate("/music");
+						}}
+					>
+						🎸 music video
+					</Badge>
+					and view my favorite
+					<Badge
+						variant="outline"
+						className="px-2 mx-1 text-sm hover:cursor-pointer"
+						onClick={() => {
+							navigate("/list");
+						}}
+					>
+						📃 art list
+					</Badge>
 				</div>
 				<p>
-					Recently, I moved to Hong Kong and am seeking a software development position. Please feel
-					free to contact me!
+					I recently moved to Hong Kong and am actively seeking a software development position.
+					Feel free to reach out to me!
+				</p>
+				<p>
+					Email me at{" "}
+					<span className="font-mono text-neutral-800 hover:underline hover:underline-offset-2">
+						hi@daviddong.me
+					</span>
 				</p>
 			</section>
 			<ProjectLists title="Works" items={Works} />
-			<ProjectLists title="Open Source Projects" items={OpenSourceProjects} />
+			<ProjectLists title="Side Projects" items={SideProjects} />
 		</article>
 	);
 }

src/pages/list/+Page.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function Page() {
+	return (
+		<div className="h-screen w-full prose flex flex-col justify-center items-center font-serif">
+			<h1>Music List</h1>
+			<h1>Movie List</h1>
+		</div>
+	);
+}

src/pages/music/+Page.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Page() {
+	return (
+		<div className="h-screen w-full prose flex flex-col justify-center items-center font-serif">
+			<h1>Music</h1>
+		</div>
+	);
+}

src/pages/project/index/+Page.jsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { OpenSourceProjects, Works } from "@/config/project";
+import { SideProjects, Works } from "@/config/project";
 import React from "react";
 import { navigate } from "vike/client/router";
 
@@ -26,7 +26,7 @@ export default function Page() {
 	return (
 		<main className="prose prose-p:text-neutral-500 p-12 h-screen">
 			<ProjectLists title="Works" items={Works} />
-			<ProjectLists title="Open Source Projects" items={OpenSourceProjects} />
+			<ProjectLists title="Side Projects" items={SideProjects} />
 		</main>
 	);
 }

src/pages/project/index/+onBeforePrerenderStart.js

@@ -1,7 +1,7 @@
 // Environment: Node.js
-import { OpenSourceProjects, Works } from "@/config/project";
+import { SideProjects, Works } from "@/config/project";
 export { onBeforePrerenderStart };
 async function onBeforePrerenderStart() {
-	const lists = [...OpenSourceProjects, ...Works];
+	const lists = [...SideProjects, ...Works];
 	return lists.map((list) => list.href);
 }