프로젝트 컴포넌트 추가 및 스타일 수정

src/app/page.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import Image from "@/profile.avif";
 import Timeline from "@/components/TimeLine";
 import Contact from "@/components/Contact";
+import Projects from "@/components/Projects";
 
 export function Page() {
 	const [age, setAge] = useState<number>(0);
@@ -104,6 +105,11 @@ export function Page() {
 
 				<div className="border-t-1 border-muted rounded-full my-4" />
 
+				<Projects />
+
+				<div className="border-t-1 border-muted rounded-full mt-8" />
+
+
 				<Timeline />
 				<div className="border-t-1 border-muted rounded-full mt-8" />
 

src/components/Projects.tsx

@@ -0,0 +1,40 @@
+import ProjectsComponents from "./ProjectsComponents";
+
+const projects = [
+    {
+        name: "team-neko/two_hearts",
+        url: "https://chromewebstore.google.com/detail/fhbjjhpphmigcniggnhgoepaodgoobdk?utm_source=item-share-cb",
+        description: "Two Hearts는 Chrome 확장 프로그램으로, 새탭을 더 간단명료하게 보여줍니다.",
+        techStack: ["Bun", "Chrome", "TypeScript", "React"]
+    },
+    {
+        name: "imnyang/today.isangjeong",
+        url: "https://github.com/imnyang/today.isangjeong",
+        description: "친구들과 간단하게 학교의 급식을 공유하기 위해 고안한 프로젝트입니다.\n원래 Python으로 작성되었지만 현재는 TypeScript로 재작성되었습니다.",
+        techStack: ["Bun", "TypeScript", "Instagram"]
+    },
+    {
+        name: "team-neko/dynamic-kawaii",
+        url: "https://github.com/team-neko/dynamic-kawaii",
+        description: "Dynamic Kawaii는 Visual Studio Code의 몇 안되는 핑크색 다크모드입니다.",
+        techStack: ["VSCode", "json"]
+    },
+    {
+        name: "imnyang/tsh",
+        url: "https://github.com/imnyang/tsh",
+        description: "tsh는 Rust로 작성된 CLI Trash Bin입니다.",
+        techStack: ["Rust", "trash"]
+    }
+];
+
+export default function Projects() {
+    return (
+        <div id="projects">
+            <div className="space-y-8">
+                {projects.map((project, index) => (
+                    <ProjectsComponents key={index} project={project} />
+                ))}
+            </div>
+        </div>
+    )
+}

src/components/ProjectsComponents.tsx

@@ -0,0 +1,38 @@
+type Project = {
+    name: string;
+    url: string;
+    description: string;
+    techStack: string[];
+};
+
+export default function ProjectsComponents({ project }: { project: Project }) {
+    return (
+        <div>
+            <div>
+                <h1 className="text-xl mb-2">
+                    <a href={project.url} target="_blank" rel="noopener noreferrer">
+                        {project.name}
+                    </a>
+                </h1>
+                <p className="text-sm text-muted-forceground font-light mb-2">
+                    {project.description.split('\n').map((line, idx) => (
+                        <span key={idx}>
+                            {line}
+                            <br />
+                        </span>
+                    ))}
+                </p>
+                <div>
+                    {project.techStack.map((tech, idx) => (
+                        <span
+                            key={idx}
+                            className="inline-block bg-accent text-accent-foreground text-xs mr-2 px-2.5 py-0.5 rounded select-none"
+                        >
+                            {tech}
+                        </span>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

src/index.css

@@ -1,5 +1,4 @@
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR&family=Noto+Color+Emoji&display=swap');
-
 @import "../styles/globals.css";
 
 @layer base {
@@ -18,7 +17,7 @@
 }
 
 * {
-	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-family: 'IBM Plex Sans KR', sans-serif;
 }
 
 .font-ntype {

styles/globals.css

@@ -16,7 +16,7 @@
   --secondary: hsl(340 25% 95%);
   --secondary-foreground: hsl(240 5.9% 10%);
   --muted: hsl(340 20% 95%);
-  --muted-foreground: hsl(340 10% 40%);
+  --muted-foreground: hsl(340 10% 60%);
   --accent: hsl(340 25% 94%);
   --accent-foreground: hsl(240 5.9% 10%);
   --destructive: hsl(0 84.2% 60.2%);
@@ -53,7 +53,7 @@
   --secondary: hsl(296, 18%, 15%);
   --secondary-foreground: hsl(0 0% 98%);
   --muted: hsl(296, 18%, 15%);
-  --muted-foreground: hsl(240 5% 64.9%);
+  --muted-foreground: hsl(240 5% 68%);
   --accent: hsl(296, 18%, 15%);
   --accent-foreground: hsl(0 0% 98%);
   --destructive: hsl(0 62.8% 30.6%);