feat: update schema, add ProjectCard, readme

src/components/ProjectCard.astro

@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets'
+import { Badge } from '@/components/ui/badge'
+import Link from '@components/Link.astro'
+import type { CollectionEntry } from 'astro:content'
+
+type Props = {
+  project: CollectionEntry<'projects'>
+}
+
+const { project } = Astro.props
+---
+
+<div class="overflow-hidden rounded-xl border transition-colors duration-300 ease-in-out hover:bg-secondary/50">
+  <Link href={project.data.link} class="block">
+    <Image
+      src={project.data.image}
+      alt={project.data.name}
+      width={400}
+      height={200}
+      class="w-full object-cover"
+    />
+    <div class="p-4">
+      <h3 class="mb-2 text-lg font-semibold">{project.data.name}</h3>
+      <p class="mb-4 text-sm text-muted-foreground">{project.data.description}</p>
+      <div class="flex flex-wrap gap-2">
+        {project.data.tags.map((tag) => (
+          <Badge variant="secondary" showHash={false}>{tag}</Badge>
+        ))}
+      </div>
+    </div>
+  </Link>
+</div>

src/components/ui/badge.tsx

@@ -25,12 +25,14 @@ const badgeVariants = cva(
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+    VariantProps<typeof badgeVariants> {
+  showHash?: boolean
+}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, showHash = true, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props}>
-      <Hash className="size-3 -translate-x-0.5" />
+      {showHash && <Hash className="size-3 -translate-x-0.5" />}
       {props.children}
     </div>
   )

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('bg-card text-card-foreground rounded-xl border', className)}
+    className={cn('bg-background rounded-xl border', className)}
     {...props}
   />
 ))

src/components/ui/mode-toggle.tsx

@@ -23,7 +23,16 @@ export function ModeToggle() {
       theme === 'dark' ||
       (theme === 'system' &&
         window.matchMedia('(prefers-color-scheme: dark)').matches)
+    
+    document.documentElement.classList.add('disable-transitions')
+
     document.documentElement.classList[isDark ? 'add' : 'remove']('dark')
+    
+    window.getComputedStyle(document.documentElement).getPropertyValue('opacity')
+    
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('disable-transitions')
+    })
   }, [theme])
 
   return (
@@ -56,4 +65,4 @@ export function ModeToggle() {
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}