Content update and Professional details

src/components/professional/EducationHistory.astro

@@ -0,0 +1,76 @@
+---
+/**
+ * EducationHistory.astro
+ * ---------------------------------------------------------------------------
+ * Card grid for the Education section of the Professional page. Each entry is a
+ * degree/diploma with institution, period, and optional detail. Data is seeded
+ * with placeholder rows (Greg to fill); swap the array below with real entries.
+ *
+ * Mirrors the Timeline/ProjectCard card aesthetic: raised surface, hairline
+ * border, gold accent for the credential, mono period label.
+ */
+import Icon from "@components/Icon.astro";
+
+interface EduEntry {
+  icon: string;
+  credential: string;
+  institution: string;
+  period: string;
+  detail?: string;
+}
+
+// Placeholder entries — replace with Greg's real education history.
+const entries: EduEntry[] = [
+  {
+    icon: "school",
+    credential: "B.S., Computer Science",
+    institution: "Drexel University",
+    period: "2014 – 2018",
+    detail:
+      "Foundational coursework in software engineering, algorithms, and systems. Focuses in AI and human-computer interaction.",
+  },
+];
+---
+
+<div class="grid gap-4 sm:grid-cols-2">
+  {
+    entries.map((e) => (
+      <article class="card flex flex-col gap-3">
+        <div class="flex items-start gap-3">
+          <span
+            class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
+            style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
+            aria-hidden="true"
+          >
+            <Icon name={e.icon} class="h-5 w-5" />
+          </span>
+          <div class="flex flex-col gap-1">
+            <h3 class="font-sans text-lg" style="color: var(--color-text);">
+              {e.credential}
+            </h3>
+            <p
+              class="font-sans font-semibold"
+              style="color: var(--color-accent);"
+            >
+              {e.institution}
+            </p>
+            <span
+              class="font-mono text-xs uppercase tracking-[0.18em]"
+              style="color: var(--color-text-subtle);"
+            >
+              {e.period}
+            </span>
+          </div>
+        </div>
+        {e.detail && (
+          <p
+            class="text-sm leading-relaxed"
+            style="color: var(--color-text-muted);"
+          >
+            {e.detail}
+          </p>
+        )}
+      </article>
+    ))
+  }
+</div>