feat: add comments and daviddong.me desc

src/components/ui/bento-grid.jsx

@@ -29,12 +29,8 @@ const BentoCard = ({ name, className, background, description, href }) => {
 			/>
 			<Separator className="md:hidden" />
 			<div className="pointer-events-none z-10  flex transform-gpu flex-col gap-1 md:p-6 pl-4 transition-all duration-200 group-hover:opacity-0">
-				<h3 className="text-md font-semibold text-neutral-700 dark:text-neutral-300">
-					{name}
-				</h3>
-				<p className="max-w-lg text-neutral-400 text-sm">
-					{description}
-				</p>
+				<h3 className="text-md font-semibold text-neutral-700 dark:text-neutral-300">{name}</h3>
+				<p className="max-w-lg text-neutral-400 text-sm">{description}</p>
 			</div>
 		</div>
 	);

src/config/project.js

@@ -20,18 +20,18 @@ const Works = [
 ];
 
 const SideProjects = [
-	{
-		name: "Comments",
-		description: "Add comments to your website.",
-		href: "/project/comments",
-		background: "/comments.webp",
-	},
 	{
 		name: "daviddong.me",
 		description: "My website.",
 		href: "/project/website",
 		background: "/website.webp",
 	},
+	{
+		name: "Comments",
+		description: "Add comments to your website.",
+		href: "/project/comments",
+		background: "/comments.webp",
+	},
 ];
 
 const SONG_BASEURL = "https://img1.doubanio.com/lpic/";

src/pages/+Layout.jsx

@@ -3,7 +3,7 @@ export default function LayoutDefault({ children }) {
 	return (
 		<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 relative bottom-0">
+			<footer className="w-full text-center text-sm text-neutral-700 relative bottom-0">
 				<p>© {year} David Dong. All rights reserved.</p>
 			</footer>
 		</div>

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

@@ -1,8 +1,24 @@
+import Comments from "./assets/comments.gif";
 export default function Page() {
 	return (
-		<>
-			<h1>Hello</h1>
-			<h2>Comments</h2>
-		</>
+		<div className="flex flex-col">
+			<div className="font-medium text-base flex flex-col gap-1">
+				<p className="my-0">Comments</p>
+				<p className="my-0">2023 · Maintainer</p>
+			</div>
+			<p>Add comments to your website.</p>
+			<div className="flex flex-col justify-center items-center">
+				<img src={Comments} alt="comments" className="bg-gray-50 border rounded-md my-0" />
+				{/* 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://github.com/DongHY1/comments";
+					}}
+				>
+					Comments
+				</p>
+			</div>
+		</div>
 	);
 }

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

@@ -1,8 +1,31 @@
+import DavidDongMobile from "./assets/daviddong-mobile.png";
 export default function Page() {
 	return (
-		<>
-			<h1>Hello</h1>
-			<h2>Website</h2>
-		</>
+		<div className="flex flex-col">
+			<div className="font-medium text-base flex flex-col gap-1">
+				<p className="my-0">daviddong.me</p>
+				<p className="my-0">2024 · Maintainer</p>
+			</div>
+			<p>My Personal Website.</p>
+			<div className="flex flex-col justify-center items-center">
+				<div className="flex max-w-full w-3/4">
+					<img
+						src={DavidDongMobile}
+						alt="daviddong-mobile"
+						className="bg-gray-50 border rounded-md my-0"
+					/>
+				</div>
+
+				{/* 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://github.com/DongHY1/daviddong.me";
+					}}
+				>
+					daviddong.me
+				</p>
+			</div>
+		</div>
 	);
 }