feat: add ai, data-visualization, tme (#58)

* feat: change picture name

* feat: add llm route

* chore: lint

* chore: remove music route

* chore: lint

* fix: remove build error use client info

* feat: add placeholder project index page

* fix: typo

* feat: add ai project desc

* chore: lint

* fix: img alt

* chore: lint

* feat: change llm name to ai

* fix: typo

* feat: add data-visualization project desc

* chore: lint

* feat: add map data visualization

* chore: lint

* feat: remove dot background

* feat: add tme project

* chore: lint

package.json

@@ -32,7 +32,6 @@
     "date-fns": "^3.6.0",
     "framer-motion": "^11.2.10",
     "lucide-react": "^0.395.0",
-    "mini-svg-data-uri": "^1.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.3.0",

src/components/ui/dock.jsx

@@ -1,4 +1,3 @@
-"use client";
 import { cn } from "@/lib/utils";
 import { cva } from "class-variance-authority";
 import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";

src/config/project.js

@@ -1,9 +1,9 @@
 const Works = [
 	{
-		name: "Large Language Model",
+		name: "AI Diagnosis Assistant",
 		description: "Medical field chat application.",
-		href: "/project/llm",
-		background: "/llm.webp",
+		href: "/project/ai",
+		background: "/ai.webp",
 	},
 	{
 		name: "Data Visualization",
@@ -30,7 +30,7 @@ const SideProjects = [
 		name: "daviddong.me",
 		description: "My website.",
 		href: "/project/website",
-		background: "/daviddong.webp",
+		background: "/website.webp",
 	},
 ];
 

src/pages/+Layout.jsx

@@ -1,9 +1,9 @@
 export default function LayoutDefault({ children }) {
 	const year = new Date().getFullYear();
 	return (
-		<div className="w-full h-full bg-dot-black/[0.2] selection:text-blue-500 selection:bg-blue-100 flex flex-col items-center">
+		<div className="w-full  selection:text-blue-500 selection:bg-blue-100 flex flex-col items-center">
 			<main className="h-full w-full flex justify-center items-center flex-col">{children}</main>
-			<footer className="w-full text-center text-sm text-neutral-400">
+			<footer className="w-full text-center text-sm text-neutral-400 relative bottom-0">
 				<p>© {year} David Dong. All rights reserved.</p>
 			</footer>
 		</div>

src/pages/index/+Page.jsx

@@ -40,18 +40,7 @@ export default function Page() {
 				</div>
 				<br />
 				<div className="text-neutral-500">
-					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"
-						data-umami-event="Music Button"
-						onClick={() => {
-							navigate("/music");
-						}}
-					>
-						🎸 music video
-					</Badge>
-					and view my favorite
+					In my free time, I usually play guitar and watch movies. Here is a list of my favorites
 					<Badge
 						variant="outline"
 						className="px-2 mx-1 text-sm hover:cursor-pointer"
@@ -60,8 +49,9 @@ export default function Page() {
 							navigate("/list");
 						}}
 					>
-						📃 art list
+						📃
 					</Badge>
+					.
 				</div>
 				<p>
 					I recently moved to Hong Kong and am actively seeking a software development position.
@@ -72,6 +62,7 @@ export default function Page() {
 					<span className="font-mono text-neutral-800 hover:underline hover:underline-offset-2">
 						hi@daviddong.me
 					</span>
+					.
 				</p>
 			</section>
 			<ProjectLists title="Works" items={Works} />

src/pages/list/+Page.jsx

@@ -1,13 +1,15 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { MovieCover, MovieList } from "./components/movie";
 import { SongCover, SongList } from "./components/music";
+import { VideoCover, VideoList } from "./components/video";
 
 export default function Page() {
 	return (
 		<Tabs defaultValue="Music" className="h-full w-96 mt-12 p-4">
-			<TabsList className="grid w-full grid-cols-2 mb-4 ">
+			<TabsList className="grid w-full grid-cols-3 mb-4 ">
 				<TabsTrigger value="Music">Music</TabsTrigger>
 				<TabsTrigger value="Movies">Movies</TabsTrigger>
+				<TabsTrigger value="Videos">Videos</TabsTrigger>
 			</TabsList>
 
 			<TabsContent value="Music" className="flex flex-col h-full justify-center items-center">
@@ -19,6 +21,11 @@ export default function Page() {
 				<MovieCover />
 				<MovieList />
 			</TabsContent>
+
+			<TabsContent value="Videos" className="flex flex-col h-full justify-center items-center">
+				<VideoCover />
+				<VideoList />
+			</TabsContent>
 		</Tabs>
 	);
 }

src/pages/music/components/MusicCover.jsx → src/pages/list/components/video/VideoCover.jsx

@@ -1,4 +1,4 @@
-export default function MusicCover() {
+export default function VideoCover() {
 	return (
 		<div className="flex flex-col justify-center items-center gap-2">
 			<div className="rounded-md w-72 h-72 drop-shadow-md border bg-gradient-to-br from-gray-100 via-pink-50 to-red-700 p-4">

src/pages/music/components/MusicList.jsx → src/pages/list/components/video/VideoList.jsx

@@ -1,10 +1,10 @@
 import { MusicPlayIcon } from "@/components/ui/icons";
 import { Music } from "@/config/project";
 
-function MusicItem({ imageUrl, url, name, author }) {
+function VideoItem({ imageUrl, url, name, author }) {
 	const backgroundImageUrl = `/music/${imageUrl}.jpg`;
 	return (
-		<div className="group flex justify-center items-center hover:bg-zinc-100 hover:rounded-md p-2">
+		<div className="group hover:bg-zinc-100 hover:rounded-md p-2">
 			<div
 				style={{ backgroundImage: `url(${backgroundImageUrl})` }}
 				className="relative rounded-md drop-shadow-sm border min-w-56 h-36 bg-cover bg-center flex justify-center items-center"
@@ -17,19 +17,19 @@ function MusicItem({ imageUrl, url, name, author }) {
 					}}
 				/>
 			</div>
-			<div className="flex flex-col justify-center ml-2 w-full">
-				<div className="text-black/80 text-md font-normal">{name}</div>
+			<div className="flex flex-col justify-center ml-2 w-full mt-2">
+				<div className="text-black/80  font-normal">{name}</div>
 				<div className="text-black/50 text-sm font-normal">{author}</div>
 			</div>
 		</div>
 	);
 }
 
-export default function MusicList() {
+export default function VideoList() {
 	return (
 		<div className="flex flex-col p-1 space-y-2">
 			{Music.map((song) => (
-				<MusicItem
+				<VideoItem
 					key={song.name}
 					imageUrl={song.imageUrl}
 					url={song.url}

src/pages/list/components/video/index.jsx

@@ -0,0 +1,4 @@
+import VideoCover from "./VideoCover";
+import VideoList from "./VideoList";
+
+export { VideoCover, VideoList };

src/pages/project/+Layout.jsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+	return <article className="prose p-12">{children}</article>;
+}

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

@@ -0,0 +1,62 @@
+import ChatPageDialog from "./assets/chat-page-dialog.png";
+import ChatPageImage from "./assets/chat-page-img.png";
+import ChatPageMain from "./assets/chat-page-main.png";
+import LiteratureSearch from "./assets/literature-search.png";
+import Plugin from "./assets/plugin.png";
+export default function Page() {
+	return (
+		<div className="flex flex-col">
+			<div className="font-medium text-base flex flex-col gap-1">
+				<p className="my-0">AI Diagnosis Assistant</p>
+				<p className="my-0">2023 · Front-End Developer · Peking University Institute</p>
+			</div>
+			<p>Developed a chat application in medical field.</p>
+			<div className="flex flex-col space-y-12">
+				<div className="flex flex-col justify-center items-center">
+					<div className="space-y-4">
+						<img
+							src={ChatPageMain}
+							alt="chat-page-main"
+							className="bg-gray-50 border rounded-md my-0"
+						/>
+						<img
+							src={ChatPageDialog}
+							alt="chat-page-dialog"
+							className="bg-gray-50 border rounded-md my-0"
+						/>
+					</div>
+
+					<p className="my-0 mt-4 text-sm font-medium">Chat Page</p>
+					<p className="my-0 text-neutral-400 text-sm">
+						You can view previous conversations or start a new one.
+					</p>
+				</div>
+				<div className="flex flex-col justify-center items-center">
+					<img src={Plugin} alt="plugin" className="bg-gray-50 border rounded-md my-0" />
+					<p className="my-0 mt-4 text-sm font-medium">Plugin System</p>
+					<p className="my-0 text-neutral-400 text-sm">Different roles have different plugins.</p>
+				</div>
+
+				<div className="flex flex-col justify-center items-center">
+					<img
+						src={ChatPageImage}
+						alt="chat-page-image"
+						className="bg-gray-50 border rounded-md my-0"
+					/>
+					<p className="my-0 mt-4 text-sm font-medium">Multimodal</p>
+					<p className="my-0 text-neutral-400 text-sm">Model can understand images.</p>
+				</div>
+
+				<div className="flex flex-col justify-center items-center">
+					<img
+						src={LiteratureSearch}
+						alt="literature-search"
+						className="bg-gray-50 border rounded-md my-0"
+					/>
+					<p className="my-0 mt-4 text-sm font-medium">Literature Search</p>
+					<p className="my-0 text-neutral-400 text-sm">Cite literature in conversations.</p>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,8 @@
+export default function Page() {
+	return (
+		<>
+			<h1>Hello</h1>
+			<h2>Comments</h2>
+		</>
+	);
+}

src/pages/project/data-visualization/+Page.jsx

@@ -0,0 +1,63 @@
+import { Separator } from "@/components/ui/separator";
+import Baked from "./assets/baked.jpg";
+import EchartMap from "./assets/map.gif";
+import Model from "./assets/model.png";
+import Texture from "./assets/texture.png";
+export default function Page() {
+	return (
+		<div className="flex flex-col">
+			<div className="font-medium text-base flex flex-col gap-1">
+				<p className="my-0">Data Visualization</p>
+				<p className="my-0">2023-2024 · Front-End Developer · Peking University Institute</p>
+			</div>
+			<p>A series of data visualization projects.</p>
+			<div className="flex flex-col space-y-12">
+				<div className="flex flex-col justify-center items-center">
+					<iframe
+						scrolling="no"
+						src="https://desktop.daviddong.me"
+						title="desktop"
+						className="w-full h-72 border rounded-md overflow-hidden"
+					/>
+					{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+					<p
+						className="my-0 mt-4 text-sm font-medium hover:underline hover:cursor-pointer"
+						onClick={() => {
+							window.location.href = "https://desktop.daviddong.me";
+						}}
+					>
+						My Desktop Website
+					</p>
+				</div>
+				<div className="flex flex-col justify-center items-center">
+					<img src={Model} alt="model" className="bg-gray-50 border rounded-md my-0" />
+					<p className="my-0 mt-4 text-sm font-medium">Model</p>
+					<p className="my-0 text-neutral-400 text-sm">Create models in Blender.</p>
+				</div>
+				<div className="flex flex-col justify-center items-center">
+					<img src={Baked} alt="baked" className="bg-gray-50 border rounded-md my-0" />
+					<p className="my-0 mt-4 text-sm font-medium">Baked</p>
+					<p className="my-0 text-neutral-400 text-sm">
+						Baking in Blender to generate textures and improve loading performance.
+					</p>
+				</div>
+
+				<div className="flex flex-col justify-center items-center">
+					<img src={Texture} alt="texture" className="bg-gray-50 border rounded-md my-0" />
+
+					<p className="my-0 mt-4 text-sm font-medium">Texture & Shader</p>
+					<p className="my-0 text-neutral-400 text-sm">
+						Apply noise texture in the shader to generate a smoke effect.
+					</p>
+				</div>
+				<Separator />
+
+				<div className="flex flex-col justify-center items-center">
+					<img src={EchartMap} alt="map" className="bg-gray-50 border rounded-md my-0" />
+					<p className="my-0 mt-4 text-sm font-medium">Map</p>
+					<p className="my-0 text-neutral-400 text-sm">Implement map interaction using ECharts</p>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -24,9 +24,9 @@ const ProjectLists = ({ title, items }) => (
 
 export default function Page() {
 	return (
-		<main className="prose prose-p:text-neutral-500 p-12 h-screen">
+		<>
 			<ProjectLists title="Works" items={Works} />
 			<ProjectLists title="Side Projects" items={SideProjects} />
-		</main>
+		</>
 	);
 }

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

@@ -0,0 +1,27 @@
+import game from "./assets/game.gif";
+import rank from "./assets/rank.gif";
+export default function Page() {
+	return (
+		<div className="flex flex-col">
+			<div className="font-medium text-base flex flex-col gap-1">
+				<p className="my-0">Hybrid Mobile App</p>
+				<p className="my-0">2022 · Intern Software Developer · Tencent Music</p>
+			</div>
+			<p>Hybrid app development for QQ Music and WeSing.</p>
+			<div className="flex flex-col space-y-12">
+				<div className="flex flex-col justify-center items-center">
+					<img src={game} alt="game" className="bg-gray-50 border rounded-md my-0" />
+					<p className="my-0 mt-4 text-sm font-medium">Mini game</p>
+					<p className="my-0 text-neutral-400 text-sm">Mini-games in the live streaming room</p>
+				</div>
+				<div className="flex flex-col justify-center items-center">
+					<img src={rank} alt="rank" className="bg-gray-50 border rounded-md my-0" />
+					<p className="my-0 mt-4 text-sm font-medium">Rank List</p>
+					<p className="my-0 text-neutral-400 text-sm">
+						View the ranking of users in the live streaming room
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,8 @@
+export default function Page() {
+	return (
+		<>
+			<h1>Hello</h1>
+			<h2>Website</h2>
+		</>
+	);
+}