Style projects as cards and split em-dash descriptions

Render project descriptions on em dashes into summary text plus a
styled tag pill, keeping all fact words intact. Add a responsive
card grid layout for the projects section.

Co-authored-by: parse-nip <parse-nip@users.noreply.github.com>

Author: cursoragent

src/app/globals.css

@@ -1008,6 +1008,64 @@
     color: inherit;
   }
 
+  #locked-resume .locked-resume-projects {
+    margin-top: 2rem;
+  }
+
+  #locked-resume .locked-resume-projects-list {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 1rem;
+    margin-top: 1.25rem;
+    padding: 0;
+  }
+
+  #locked-resume .locked-resume-project-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 1.25rem 1.5rem;
+    border: 1px solid #e8e8e6;
+    border-radius: 18px;
+    background: #f6f6f5;
+  }
+
+  #locked-resume .locked-resume-project-title {
+    margin: 0;
+    font-size: 1.05rem;
+    letter-spacing: -0.02em;
+  }
+
+  #locked-resume .locked-resume-project-title a {
+    color: #111111;
+    text-decoration: none;
+    font-weight: 600;
+  }
+
+  #locked-resume .locked-resume-project-title a:hover {
+    text-decoration: underline;
+  }
+
+  #locked-resume .locked-resume-project-description {
+    margin: 0;
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    color: #666666;
+  }
+
+  #locked-resume .locked-resume-project-tag {
+    display: inline-block;
+    margin-top: 0.25rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    background: #ffffff;
+    border: 1px solid #e8e8e6;
+    font-size: 0.8125rem;
+    color: #666666;
+  }
+
   .design-select-overlay {
     pointer-events: none;
     position: fixed;

src/components/locked/LockedResume.tsx

@@ -1,5 +1,25 @@
 import { getExperience } from "@/lib/experience";
 
+const PROJECT_DESCRIPTION_SPLIT = " — ";
+
+function ProjectDescription({ description }: { description: string }) {
+  const splitIndex = description.indexOf(PROJECT_DESCRIPTION_SPLIT);
+
+  if (splitIndex === -1) {
+    return <p className="locked-resume-project-description">{description}</p>;
+  }
+
+  const summary = description.slice(0, splitIndex);
+  const detail = description.slice(splitIndex + PROJECT_DESCRIPTION_SPLIT.length);
+
+  return (
+    <p className="locked-resume-project-description">
+      <span className="locked-resume-project-summary">{summary}</span>{" "}
+      <span className="locked-resume-project-tag">{detail}</span>
+    </p>
+  );
+}
+
 /**
  * Renders owner facts from locked JSON. Community contributors may restyle
  * this component and target #locked-resume in CSS — but must not change
@@ -65,15 +85,23 @@ export function LockedResume() {
             </ul>
           </section>
 
-          <section id="projects" className="locked-resume-projects">
+          <section
+            id="projects"
+            className="locked-resume-projects"
+            data-contribution-id="styled-projects-cards"
+          >
             <h2>Selected Projects</h2>
-            <ul>
+            <ul className="locked-resume-projects-list">
               {data.projects.map((project) => (
-                <li key={project.id} data-fact-id={project.id}>
-                  <h3>
+                <li
+                  key={project.id}
+                  className="locked-resume-project-card"
+                  data-fact-id={project.id}
+                >
+                  <h3 className="locked-resume-project-title">
                     <a href={project.href}>{project.name}</a>
                   </h3>
-                  <p>{project.description}</p>
+                  <ProjectDescription description={project.description} />
                 </li>
               ))}
             </ul>