feat: add raytracing and react project

src/config/project.js

@@ -34,6 +34,22 @@ const OpenSourceProjects = [
 		background: "/images/website.webp",
 		keywords: ["personal website", "portfolio", "web development", "software engineer"]
 	},
+	{
+		name: "Raytracing",
+		description: "Raytracing algorithm in JavaScript.",
+		time: "2024",
+		href: "/project/raytracing",
+		background: "/images/raytracing.webp",
+		keywords: ["raytracing"]
+	},
+	{
+		name: "Mini React",
+		description: "A Minimal implementation of React.js and ReactDOM.",
+		time: "2024",
+		href: "/project/react",
+		background: "/images/react.webp",
+		keywords: ["react", "react-dom", "hooks"]
+	},
 	{
 		name: "Comments",
 		description: "Add comments to your website.",

src/pages/index/+Page.jsx

@@ -77,7 +77,7 @@ export default function Page() {
 				</p>
 			</section>
 			<ProjectLists title="Works" projects={Works} />
-			<ProjectLists title="Side Projects" projects={OpenSourceProjects} />
+			<ProjectLists title="Open Source Projects" projects={OpenSourceProjects} />
 		</article>
 	);
 }

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

@@ -0,0 +1,30 @@
+import { Image } from "@/components/ui/image";
+import { useData } from "vike-react/useData";
+export default function Page() {
+    const { project } = useData()
+    return (
+        <div className="flex flex-col">
+            <div className="font-medium text-base flex flex-col gap-1">
+                <p className="my-0 text-zinc-700">{project.name}</p>
+                <p className="my-0 text-zinc-500 text-sm">{project.time} · {project.description}</p>
+            </div>
+            <div className="flex flex-col space-y-12 mt-4">
+                <div className="flex flex-col justify-center items-center">
+                    <Image
+                        src="/images/raytracing.webp"
+                        alt="model"
+                        className="bg-gray-50 border rounded-md my-0"
+                    />
+                    <a
+                        aria-label="David Dong's GitHub project Mini-react"
+                        className="no-underline my-0 mt-4 text-sm font-medium hover:underline hover:cursor-pointer"
+                        href="https://github.com/DongHY1/raytracing-js"
+                    >
+                        Raytracing Website
+                    </a>
+                </div>
+            </div>
+        </div>
+
+    );
+}

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

@@ -0,0 +1,30 @@
+import { useData } from "vike-react/useData";
+export default function Page() {
+    const { project } = useData()
+    return (
+        <div className="flex flex-col">
+            <div className="font-medium text-base flex flex-col gap-1">
+                <p className="my-0 text-zinc-700">{project.name}</p>
+                <p className="my-0 text-zinc-500 text-sm">{project.time} · {project.description}</p>
+            </div>
+            <div className="flex flex-col space-y-12 mt-4">
+                <div className="flex flex-col justify-center items-center">
+                    <iframe
+                        scrolling="no"
+                        src="https://react.daviddong.me"
+                        title="react"
+                        className="w-full h-72 border rounded-md overflow-hidden"
+                    />
+                    <a
+                        aria-label="David Dong's GitHub project Mini-react"
+                        className="no-underline my-0 mt-4 text-sm font-medium hover:underline hover:cursor-pointer"
+                        href="https://github.com/DongHY1/Mini-React"
+                    >
+                        Mini React Website
+                    </a>
+                </div>
+            </div>
+        </div>
+
+    );
+}