feat: implement initial fullstack portfolio application including dashboard, CMS, and analytics features.

src/components/sections/portfolio/ProjectsSection.tsx

@@ -0,0 +1,48 @@
+import { ProjectCard } from '@/components/ui/ProjectCard'
+import type { Project } from '@/types'
+
+interface ProjectsSectionProps {
+  projects: Project[]
+}
+
+export function ProjectsSection({ projects }: ProjectsSectionProps) {
+  return (
+    <section id="projects" className="py-32 relative">
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-surface/20 to-transparent" />
+
+      <div className="relative z-10 max-w-6xl mx-auto px-6">
+        {/* Header */}
+        <div className="text-center mb-16">
+          <span className="text-accent font-mono text-sm tracking-widest uppercase">
+            Work
+          </span>
+          <h2 className="font-display font-bold text-4xl md:text-5xl text-foreground mt-3">
+            Featured Projects
+          </h2>
+          <p className="text-foreground-muted mt-4 max-w-xl mx-auto">
+            Production-grade systems I've built — from concept to deployment
+          </p>
+        </div>
+
+        {/* Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {projects.map((project, index) => (
+            <ProjectCard key={project.id} project={project} index={index} />
+          ))}
+        </div>
+
+        {/* View more */}
+        <div className="text-center mt-12">
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 border border-border hover:border-accent/40 text-foreground-muted hover:text-foreground rounded-xl transition-all hover:-translate-y-0.5 duration-200"
+          >
+            View All on GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}