impr: card

src/app/page.tsx

@@ -1,9 +1,26 @@
 import React from 'react'
+import { Project } from '@/typings/project'
+import { ProjectCard } from '@/components/ProjectCard'
 
 export default function Page() {
+  const projects: Project[] = [
+    {
+      name: 'test',
+      description: 'test',
+      category: 'Misc',
+      imageUrl: 'https://avatars.githubusercontent.com/u/48355802?v=4',
+      socials: {},
+      languages: ['Rust'],
+      tags: ['1.8', 'Fullstack'],
+    },
+  ]
+
   return (
     <div className="flex min-h-screen flex-col items-center p-4 md:p-8">
-      Matz Hilven
+      <div>Matz Hilven</div>
+      {projects.map((project: Project, index: number) => {
+        return <ProjectCard project={project} key={index} />
+      })}
     </div>
   )
 }

src/components/ProjectCard.tsx

@@ -5,5 +5,11 @@ type Props = {
 }
 
 export const ProjectCard = ({ project }: Props) => {
-  return <div>{project.name}</div>
+  return (
+    <div>
+      <div>{project.name}</div>
+      <div>{project.description}</div>
+      <img src={project.imageUrl} />
+    </div>
+  )
 }

src/typings/project.ts

@@ -12,7 +12,7 @@ export type Project = {
   description: string
   category: Category
   imageUrl: string
-  socials: Record<Social, string>
+  socials: Partial<Record<Social, string>>
   languages: Language[]
   tags: Tag[]
 }