@ansiversa/components 0.0.125 → 0.0.127

package/index.ts

@@ -37,6 +37,7 @@ export { default as QuizSummary } from './src/Summary/QuizSummary.astro';
 export { default as FlashNoteSummary } from './src/Summary/FlashNoteSummary.astro';
 export { default as ResumeBuilderSummary } from './src/Summary/ResumeBuilderSummary.astro';
 export { default as PortfolioCreatorSummary } from './src/Summary/PortfolioCreatorSummary.astro';
+export { default as AvImageUploader } from "./src/components/media/AvImageUploader.astro";
 export { default as ResumeBuilderShell } from './src/resume-templates/ResumeBuilderShell.astro';
 export { default as ResumeTemplateClassic } from './src/resume-templates/ResumeTemplateClassic.astro';
 export { default as ResumeTemplateModernTwoTone } from './src/resume-templates/ResumeTemplateModernTwoTone.astro';
@@ -45,6 +46,20 @@ export { default as ResumeTemplateExecutiveTimeline } from './src/resume-templat
 export type { ResumeData, ResumeTemplateType } from './src/resume-templates/typescript-schema';
 export { formatDateRange } from './src/resume-templates/typescript-schema';
 export { resumeData } from './src/resume-templates/resumeData';
+export {
+  PortfolioPublicTemplateClassic,
+  PortfolioPublicTemplateGallery,
+  PortfolioPublicTemplateMinimal,
+  PortfolioPublicTemplateStory,
+  portfolioPublicTemplates,
+  resolvePortfolioPublicTemplate,
+} from "./src/templates/portfolio-public";
+export type {
+  PortfolioPublicData,
+  PortfolioPublicTemplateKey,
+  PortfolioPublicSectionKey,
+} from "./src/templates/portfolio-public";
+export type { AvMediaUploadResponse, AvMediaUploadResult } from "./src/media/types";
 
 export * from "./src/alpine";
 export * from "./src/Summary/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.125",
+  "version": "0.0.127",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/components/media/AvImageUploader.astro

@@ -0,0 +1,341 @@
+---
+interface Props {
+  uploadUrl: string;
+  scope: "account" | "portfolio-profile";
+  purpose?: "avatar";
+  portfolioId?: string;
+  label?: string;
+  helpText?: string;
+  initialUrl?: string | null;
+  maxBytes?: number;
+  onUploadedEventName?: string;
+}
+
+const {
+  uploadUrl,
+  scope,
+  purpose = "avatar",
+  portfolioId = "",
+  label = "Profile photo",
+  helpText = "JPG, PNG, or WebP up to 2 MB.",
+  initialUrl = null,
+  maxBytes = 2 * 1024 * 1024,
+  onUploadedEventName = "av:uploaded",
+} = Astro.props as Props;
+
+if (!uploadUrl) {
+  throw new Error("AvImageUploader requires an `uploadUrl` prop.");
+}
+
+const uploaderId = `av-image-uploader-${Math.random().toString(36).slice(2, 10)}`;
+---
+
+<div class="av-image-uploader" id={uploaderId}>
+  <p class="av-image-uploader__label">{label}</p>
+  {helpText ? <p class="av-image-uploader__help">{helpText}</p> : null}
+
+  <div class="av-image-uploader__row">
+    <div class="av-image-uploader__preview-wrap">
+      <img
+        class={`av-image-uploader__preview ${initialUrl ? "is-visible" : ""}`}
+        src={initialUrl ?? ""}
+        alt="Uploaded image preview"
+        data-av-preview
+      />
+      <div
+        class={`av-image-uploader__placeholder ${initialUrl ? "is-hidden" : ""}`}
+        data-av-placeholder
+      >
+        No photo
+      </div>
+    </div>
+
+    <div class="av-image-uploader__controls">
+      <label class="av-image-uploader__button" data-av-trigger for={`${uploaderId}-input`}>
+        Choose image
+      </label>
+      <input
+        id={`${uploaderId}-input`}
+        class="av-image-uploader__input"
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        data-av-input
+      />
+      <p class="av-image-uploader__status" data-av-status></p>
+      <p class="av-image-uploader__error" data-av-error role="status"></p>
+    </div>
+  </div>
+</div>
+
+<script
+  define:vars={{
+    uploaderId,
+    uploadUrl,
+    scope,
+    purpose,
+    portfolioId,
+    maxBytes,
+    onUploadedEventName,
+  }}
+>
+  (() => {
+    const root = document.getElementById(uploaderId);
+    if (!root) return;
+
+    const input = root.querySelector("[data-av-input]");
+    const trigger = root.querySelector("[data-av-trigger]");
+    const preview = root.querySelector("[data-av-preview]");
+    const placeholder = root.querySelector("[data-av-placeholder]");
+    const status = root.querySelector("[data-av-status]");
+    const error = root.querySelector("[data-av-error]");
+
+    const allowedTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
+
+    const formatBytes = (bytes) => {
+      if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+      if (bytes < 1024) return `${bytes} B`;
+      const kb = bytes / 1024;
+      if (kb < 1024) return `${kb.toFixed(1)} KB`;
+      return `${(kb / 1024).toFixed(1)} MB`;
+    };
+
+    const setUploading = (isUploading) => {
+      if (trigger) {
+        trigger.textContent = isUploading ? "Uploading..." : "Choose image";
+        trigger.classList.toggle("is-disabled", isUploading);
+      }
+      if (input) {
+        input.disabled = isUploading;
+      }
+    };
+
+    const setError = (message) => {
+      if (error) {
+        error.textContent = message ?? "";
+      }
+      if (status && message) {
+        status.textContent = "";
+      }
+    };
+
+    const setStatus = (message) => {
+      if (status) {
+        status.textContent = message ?? "";
+      }
+    };
+
+    const setPreview = (url) => {
+      if (!preview || !placeholder) return;
+
+      if (url) {
+        preview.src = url;
+        preview.classList.add("is-visible");
+        placeholder.classList.add("is-hidden");
+      } else {
+        preview.src = "";
+        preview.classList.remove("is-visible");
+        placeholder.classList.remove("is-hidden");
+      }
+    };
+
+    const parseError = async (res) => {
+      try {
+        const body = await res.json();
+        return body?.error || body?.message || "Upload failed.";
+      } catch {
+        return "Upload failed.";
+      }
+    };
+
+    input?.addEventListener("change", async (event) => {
+      const target = event.currentTarget;
+      const file = target?.files?.[0];
+      if (!file) return;
+
+      setError("");
+      setStatus("");
+
+      if (!allowedTypes.has(file.type)) {
+        setError("Please upload a JPG, PNG, or WebP image.");
+        target.value = "";
+        return;
+      }
+
+      if (file.size > maxBytes) {
+        setError(`Image must be ${formatBytes(maxBytes)} or smaller.`);
+        target.value = "";
+        return;
+      }
+
+      setUploading(true);
+
+      try {
+        const form = new FormData();
+        form.set("purpose", purpose);
+        form.set("scope", scope);
+        if (scope === "portfolio-profile" && portfolioId) {
+          form.set("portfolioId", portfolioId);
+        }
+        form.set("file", file);
+
+        const res = await fetch(uploadUrl, {
+          method: "POST",
+          body: form,
+          credentials: "include",
+        });
+
+        if (!res.ok) {
+          throw new Error(await parseError(res));
+        }
+
+        const payload = await res.json();
+        if (!payload?.ok || !payload?.media?.url) {
+          throw new Error("Upload response is invalid.");
+        }
+
+        const media = payload.media;
+        setPreview(media.url);
+        setStatus(`Uploaded ${formatBytes(media.size)} (${media.width}x${media.height})`);
+        setError("");
+
+        root.dispatchEvent(
+          new CustomEvent(onUploadedEventName, {
+            bubbles: true,
+            detail: media,
+          }),
+        );
+      } catch (uploadError) {
+        setError(uploadError?.message || "Upload failed.");
+      } finally {
+        setUploading(false);
+        target.value = "";
+      }
+    });
+  })();
+</script>
+
+<style>
+  .av-image-uploader {
+    display: grid;
+    gap: 0.6rem;
+  }
+
+  .av-image-uploader__label {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #e2e8f0;
+  }
+
+  .av-image-uploader__help {
+    margin: 0;
+    font-size: 0.8rem;
+    color: #94a3b8;
+  }
+
+  .av-image-uploader__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .av-image-uploader__preview-wrap {
+    width: 86px;
+    height: 86px;
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  .av-image-uploader__preview,
+  .av-image-uploader__placeholder {
+    width: 86px;
+    height: 86px;
+    border-radius: 999px;
+  }
+
+  .av-image-uploader__preview {
+    display: none;
+    object-fit: cover;
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    background: rgba(15, 23, 42, 0.6);
+  }
+
+  .av-image-uploader__preview.is-visible {
+    display: block;
+  }
+
+  .av-image-uploader__placeholder {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed rgba(148, 163, 184, 0.45);
+    background: rgba(15, 23, 42, 0.45);
+    color: #94a3b8;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .av-image-uploader__placeholder.is-hidden {
+    display: none;
+  }
+
+  .av-image-uploader__controls {
+    display: grid;
+    gap: 0.35rem;
+    min-width: 220px;
+  }
+
+  .av-image-uploader__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    min-width: 130px;
+    padding: 0.52rem 0.9rem;
+    border-radius: 0.65rem;
+    border: 1px solid rgba(100, 116, 139, 0.4);
+    background: rgba(15, 23, 42, 0.75);
+    color: #e2e8f0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: border-color 120ms ease, background 120ms ease;
+  }
+
+  .av-image-uploader__button:hover {
+    border-color: rgba(148, 163, 184, 0.65);
+    background: rgba(30, 41, 59, 0.85);
+  }
+
+  .av-image-uploader__button.is-disabled {
+    opacity: 0.7;
+    cursor: progress;
+    pointer-events: none;
+  }
+
+  .av-image-uploader__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  .av-image-uploader__status {
+    margin: 0;
+    color: #93c5fd;
+    font-size: 0.78rem;
+  }
+
+  .av-image-uploader__error {
+    margin: 0;
+    min-height: 1em;
+    color: #fca5a5;
+    font-size: 0.78rem;
+  }
+</style>

package/src/layouts/AuthLayout.astro

@@ -60,7 +60,7 @@ const ROOT_URL = rawDomain.match(/^https?:\/\//i)
     <slot name="head" />
   </head>
 
-  <body class="av-page">
+  <body class="av-page av-theme-app">
     <main class="av-main">
       <slot />
     </main>

package/src/layouts/WebLayout.astro

@@ -80,7 +80,7 @@ const ROOT_URL = rawDomain.match(/^https?:\/\//i)
     <slot name="head" />
   </head>
 
-  <body class="av-page">
+  <body class="av-page av-theme-app">
     <!-- Top Navigation -->
     <AvNavbar>
       <AvBrand />

package/src/media/types.ts

@@ -0,0 +1,13 @@
+export type AvMediaUploadResult = {
+  key: string;
+  url: string;
+  size: number;
+  contentType: string;
+  width: number;
+  height: number;
+};
+
+export type AvMediaUploadResponse = {
+  ok: true;
+  media: AvMediaUploadResult;
+};

package/src/styles/global.css

@@ -6,8 +6,6 @@
    ========================================= */
 
 :root {
-  color-scheme: dark;
-
   /* Brand Colors */
   --av-bg: #020617;
   --av-bg-elevated: #020617;
@@ -89,21 +87,12 @@
   body {
     min-height: 100vh;
     overflow-x: hidden;
-    background-color: var(--av-bg);
-    color: var(--av-text);
+    background-color: #ffffff;
+    color: #0f172a;
     font-family: var(--av-font-sans);
     text-rendering: geometricPrecision;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-
-    background-image:
-      radial-gradient(circle at top left, rgba(0, 234, 255, 0.12), transparent 55%),
-      radial-gradient(circle at bottom right, rgba(122, 0, 255, 0.16), transparent 60%),
-      radial-gradient(circle at top right, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 1));
-    background-attachment: fixed;
-
-    scrollbar-width: thin;
-    scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
   }
 
   @media print {
@@ -132,6 +121,19 @@
     );
   }
 
+  .av-theme-app {
+    color-scheme: dark;
+    background-color: var(--av-bg);
+    color: var(--av-text);
+    background-image:
+      radial-gradient(circle at top left, rgba(0, 234, 255, 0.12), transparent 55%),
+      radial-gradient(circle at bottom right, rgba(122, 0, 255, 0.16), transparent 60%),
+      radial-gradient(circle at top right, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 1));
+    background-attachment: fixed;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
+  }
+
   h1,
   h2,
   h3,

package/src/templates/portfolio-public/Classic.astro

@@ -0,0 +1,190 @@
+---
+import type { PortfolioPublicData } from "./types";
+import { hasText, isSectionVisible, listHasContent, normalizeHttpHref } from "./utils";
+
+interface Props {
+  data: PortfolioPublicData;
+}
+
+const { data } = Astro.props as Props;
+
+const ownerName = data.owner.fullName || data.meta?.title || "Portfolio";
+const hasContact =
+  hasText(data.contact.email) ||
+  hasText(data.contact.phone) ||
+  hasText(data.contact.website) ||
+  hasText(data.contact.github) ||
+  hasText(data.contact.linkedin) ||
+  data.contact.links.length > 0;
+---
+
+<article class="min-h-screen bg-white text-slate-900">
+  <main class="mx-auto grid w-full max-w-6xl gap-10 px-4 py-10 lg:grid-cols-[280px_1fr] lg:px-8">
+    <aside class="space-y-8 border-b border-slate-200 pb-8 lg:border-b-0 lg:border-r lg:pb-0 lg:pr-8">
+      <header class="space-y-2">
+        {data.owner.profilePhotoUrl ? (
+          <img
+            src={data.owner.profilePhotoUrl}
+            alt={`${ownerName} profile photo`}
+            class="h-16 w-16 rounded-full border border-slate-200 object-cover"
+          />
+        ) : null}
+        <h1 class="text-3xl font-bold tracking-tight text-slate-950">{ownerName}</h1>
+        {data.owner.headline ? <p class="text-base text-slate-700">{data.owner.headline}</p> : null}
+        {data.owner.location ? <p class="text-sm text-slate-500">{data.owner.location}</p> : null}
+      </header>
+
+      {isSectionVisible(data, "skills") && data.sections.skills.length > 0 ? (
+        <section aria-labelledby="classic-skills" class="space-y-4">
+          <h2 id="classic-skills" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Skills</h2>
+          <div class="space-y-3">
+            {data.sections.skills.map((group) => (
+              <div>
+                <h3 class="text-sm font-semibold text-slate-800">{group.name || "Skills"}</h3>
+                {group.items.length > 0 ? (
+                  <p class="mt-1 text-sm leading-6 text-slate-600">{group.items.join(", ")}</p>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "contact") && hasContact ? (
+        <section aria-labelledby="classic-contact" class="space-y-3">
+          <h2 id="classic-contact" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Contact</h2>
+          <div class="grid gap-2 text-sm text-slate-700">
+            {data.contact.email ? <a class="underline decoration-slate-300 underline-offset-2" href={`mailto:${data.contact.email}`}>{data.contact.email}</a> : null}
+            {data.contact.phone ? <a class="underline decoration-slate-300 underline-offset-2" href={`tel:${data.contact.phone}`}>{data.contact.phone}</a> : null}
+            {data.contact.website ? (
+              <a class="underline decoration-slate-300 underline-offset-2" href={normalizeHttpHref(data.contact.website)}>
+                {data.contact.website}
+              </a>
+            ) : null}
+            {data.contact.github ? (
+              <a class="underline decoration-slate-300 underline-offset-2" href={normalizeHttpHref(data.contact.github)}>
+                {data.contact.github}
+              </a>
+            ) : null}
+            {data.contact.linkedin ? (
+              <a class="underline decoration-slate-300 underline-offset-2" href={normalizeHttpHref(data.contact.linkedin)}>
+                {data.contact.linkedin}
+              </a>
+            ) : null}
+            {data.contact.links.map((link) => (
+              <a class="underline decoration-slate-300 underline-offset-2" href={link.href}>{link.label || link.href}</a>
+            ))}
+          </div>
+        </section>
+      ) : null}
+    </aside>
+
+    <div class="space-y-10">
+      {isSectionVisible(data, "about") && hasText(data.sections.about) ? (
+        <section aria-labelledby="classic-about" class="space-y-3">
+          <h2 id="classic-about" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">About</h2>
+          <p class="max-w-3xl leading-7 text-slate-700">{data.sections.about}</p>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "featuredProjects") && data.sections.featuredProjects.length > 0 ? (
+        <section aria-labelledby="classic-projects" class="space-y-5">
+          <h2 id="classic-projects" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Featured Projects</h2>
+          <div class="space-y-5">
+            {data.sections.featuredProjects.map((project) => (
+              <article class="rounded-xl border border-slate-200 p-5">
+                <div class="flex flex-wrap items-center justify-between gap-3">
+                  <h3 class="text-lg font-semibold text-slate-900">{project.name || "Project"}</h3>
+                  {project.link ? <a class="text-sm font-medium text-slate-700 underline" href={normalizeHttpHref(project.link)}>View</a> : null}
+                </div>
+                {project.description ? <p class="mt-2 leading-7 text-slate-700">{project.description}</p> : null}
+                {project.bullets.length > 0 ? (
+                  <ul class="mt-3 list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                    {project.bullets.map((bullet) => (
+                      <li>{bullet}</li>
+                    ))}
+                  </ul>
+                ) : null}
+                {project.tags.length > 0 ? (
+                  <p class="mt-3 text-xs uppercase tracking-[0.12em] text-slate-500">{project.tags.join(" • ")}</p>
+                ) : null}
+              </article>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "experience") && data.sections.experience.length > 0 ? (
+        <section aria-labelledby="classic-experience" class="space-y-4">
+          <h2 id="classic-experience" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Experience</h2>
+          <div class="space-y-5">
+            {data.sections.experience.map((item) => (
+              <article class="space-y-2">
+                <div class="flex flex-wrap items-baseline justify-between gap-2">
+                  <h3 class="text-lg font-semibold text-slate-900">{item.role || "Role"}</h3>
+                  {listHasContent([item.start, item.end]) ? <p class="text-sm text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p> : null}
+                </div>
+                <p class="text-sm text-slate-700">{[item.company, item.location].filter(Boolean).join(" • ")}</p>
+                {item.bullets.length > 0 ? (
+                  <ul class="list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                    {item.bullets.map((bullet) => (
+                      <li>{bullet}</li>
+                    ))}
+                  </ul>
+                ) : null}
+              </article>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "education") && data.sections.education.length > 0 ? (
+        <section aria-labelledby="classic-education" class="space-y-4">
+          <h2 id="classic-education" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Education</h2>
+          <div class="space-y-4">
+            {data.sections.education.map((item) => (
+              <article>
+                <h3 class="text-base font-semibold text-slate-900">{item.degree || "Degree"}</h3>
+                <p class="text-sm text-slate-700">{[item.field, item.institution].filter(Boolean).join(" • ")}</p>
+                <p class="text-sm text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p>
+                {item.grade ? <p class="text-sm text-slate-600">{item.grade}</p> : null}
+              </article>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "certifications") && data.sections.certifications.length > 0 ? (
+        <section aria-labelledby="classic-certifications" class="space-y-3">
+          <h2 id="classic-certifications" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Certifications</h2>
+          <ul class="space-y-2 text-sm text-slate-700">
+            {data.sections.certifications.map((item) => (
+              <li>
+                <span class="font-semibold text-slate-900">{item.title || "Certification"}</span>
+                {listHasContent([item.issuer, item.year, item.note])
+                  ? ` · ${[item.issuer, item.year, item.note].filter(Boolean).join(" · ")}`
+                  : ""}
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "achievements") && data.sections.achievements.length > 0 ? (
+        <section aria-labelledby="classic-achievements" class="space-y-3">
+          <h2 id="classic-achievements" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Achievements</h2>
+          <ul class="space-y-2 text-sm text-slate-700">
+            {data.sections.achievements.map((item) => (
+              <li>
+                <span class="font-semibold text-slate-900">{item.title || "Achievement"}</span>
+                {listHasContent([item.issuer, item.year, item.note])
+                  ? ` · ${[item.issuer, item.year, item.note].filter(Boolean).join(" · ")}`
+                  : ""}
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+    </div>
+  </main>
+</article>

package/src/templates/portfolio-public/Gallery.astro

@@ -0,0 +1,163 @@
+---
+import type { PortfolioPublicData } from "./types";
+import { hasText, isSectionVisible, normalizeHttpHref } from "./utils";
+
+interface Props {
+  data: PortfolioPublicData;
+}
+
+const { data } = Astro.props as Props;
+const ownerName = data.owner.fullName || data.meta?.title || "Portfolio";
+---
+
+<article class="min-h-screen bg-white text-slate-900">
+  <main class="mx-auto w-full max-w-6xl px-4 py-10 lg:px-8">
+    <header class="mb-8 rounded-2xl border border-slate-200 bg-slate-50 p-6 sm:p-8">
+      <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Portfolio</p>
+      {data.owner.profilePhotoUrl ? (
+        <img
+          src={data.owner.profilePhotoUrl}
+          alt={`${ownerName} profile photo`}
+          class="mt-4 h-16 w-16 rounded-full border border-slate-200 object-cover"
+        />
+      ) : null}
+      <h1 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">{ownerName}</h1>
+      {data.owner.headline ? <p class="mt-2 text-lg text-slate-700">{data.owner.headline}</p> : null}
+      {hasText(data.owner.summary) ? <p class="mt-4 max-w-3xl leading-7 text-slate-700">{data.owner.summary}</p> : null}
+      {data.owner.location ? <p class="mt-3 text-sm text-slate-500">{data.owner.location}</p> : null}
+    </header>
+
+    {isSectionVisible(data, "featuredProjects") && data.sections.featuredProjects.length > 0 ? (
+      <section aria-labelledby="gallery-projects" class="space-y-5">
+        <h2 id="gallery-projects" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Featured Projects</h2>
+        <div class="grid gap-4 sm:grid-cols-2">
+          {data.sections.featuredProjects.map((project) => (
+            <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+              <div class="flex items-baseline justify-between gap-3">
+                <h3 class="text-xl font-semibold text-slate-900">{project.name || "Project"}</h3>
+                {project.link ? <a class="text-sm font-medium text-slate-700 underline" href={normalizeHttpHref(project.link)}>Open</a> : null}
+              </div>
+              {project.description ? <p class="mt-3 text-sm leading-6 text-slate-700">{project.description}</p> : null}
+              {project.tags.length > 0 ? (
+                <div class="mt-3 flex flex-wrap gap-2">
+                  {project.tags.map((tag) => (
+                    <span class="rounded-full border border-slate-200 bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{tag}</span>
+                  ))}
+                </div>
+              ) : null}
+              {project.bullets.length > 0 ? (
+                <ul class="mt-4 list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                  {project.bullets.map((bullet) => (
+                    <li>{bullet}</li>
+                  ))}
+                </ul>
+              ) : null}
+            </article>
+          ))}
+        </div>
+      </section>
+    ) : null}
+
+    <div class="mt-10 grid gap-8 lg:grid-cols-3">
+      <div class="space-y-8 lg:col-span-2">
+        {isSectionVisible(data, "experience") && data.sections.experience.length > 0 ? (
+          <section aria-labelledby="gallery-experience" class="space-y-4">
+            <h2 id="gallery-experience" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Experience</h2>
+            <div class="space-y-4">
+              {data.sections.experience.map((item) => (
+                <article class="rounded-xl border border-slate-200 p-4">
+                  <h3 class="text-base font-semibold text-slate-900">{item.role || "Role"}</h3>
+                  <p class="text-sm text-slate-600">{[item.company, item.location].filter(Boolean).join(" • ")}</p>
+                  <p class="text-xs uppercase tracking-[0.14em] text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p>
+                  {item.bullets.length > 0 ? (
+                    <ul class="mt-3 list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                      {item.bullets.map((bullet) => (
+                        <li>{bullet}</li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </article>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "about") && hasText(data.sections.about) ? (
+          <section aria-labelledby="gallery-about" class="rounded-xl border border-slate-200 p-5">
+            <h2 id="gallery-about" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">About</h2>
+            <p class="mt-2 leading-7 text-slate-700">{data.sections.about}</p>
+          </section>
+        ) : null}
+      </div>
+
+      <aside class="space-y-8">
+        {isSectionVisible(data, "skills") && data.sections.skills.length > 0 ? (
+          <section aria-labelledby="gallery-skills" class="rounded-xl border border-slate-200 p-5">
+            <h2 id="gallery-skills" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Skills</h2>
+            <div class="mt-3 space-y-3">
+              {data.sections.skills.map((group) => (
+                <div>
+                  <h3 class="text-sm font-semibold text-slate-800">{group.name || "Skills"}</h3>
+                  <p class="mt-1 text-sm text-slate-600">{group.items.join(", ")}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "education") && data.sections.education.length > 0 ? (
+          <section aria-labelledby="gallery-education" class="rounded-xl border border-slate-200 p-5">
+            <h2 id="gallery-education" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Education</h2>
+            <div class="mt-3 space-y-3 text-sm text-slate-700">
+              {data.sections.education.map((item) => (
+                <article>
+                  <h3 class="font-semibold text-slate-900">{item.degree || "Degree"}</h3>
+                  <p>{[item.field, item.institution].filter(Boolean).join(" • ")}</p>
+                  <p class="text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p>
+                </article>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "contact") ? (
+          <section aria-labelledby="gallery-contact" class="rounded-xl border border-slate-200 p-5">
+            <h2 id="gallery-contact" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Contact</h2>
+            {data.contact.callToActionTitle ? <p class="mt-3 font-semibold text-slate-900">{data.contact.callToActionTitle}</p> : null}
+            {data.contact.callToActionText ? <p class="mt-1 text-sm text-slate-700">{data.contact.callToActionText}</p> : null}
+            <div class="mt-3 grid gap-1 text-sm text-slate-700">
+              {data.contact.email ? <a class="underline" href={`mailto:${data.contact.email}`}>{data.contact.email}</a> : null}
+              {data.contact.phone ? <a class="underline" href={`tel:${data.contact.phone}`}>{data.contact.phone}</a> : null}
+              {data.contact.website ? <a class="underline" href={normalizeHttpHref(data.contact.website)}>{data.contact.website}</a> : null}
+              {data.contact.links.map((link) => (
+                <a class="underline" href={link.href}>{link.label || link.href}</a>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "certifications") && data.sections.certifications.length > 0 ? (
+          <section aria-labelledby="gallery-certifications" class="rounded-xl border border-slate-200 p-5">
+            <h2 id="gallery-certifications" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Certifications</h2>
+            <ul class="mt-3 space-y-2 text-sm text-slate-700">
+              {data.sections.certifications.map((item) => (
+                <li>{[item.title, item.issuer, item.year].filter(Boolean).join(" • ")}</li>
+              ))}
+            </ul>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "achievements") && data.sections.achievements.length > 0 ? (
+          <section aria-labelledby="gallery-achievements" class="rounded-xl border border-slate-200 p-5">
+            <h2 id="gallery-achievements" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Achievements</h2>
+            <ul class="mt-3 space-y-2 text-sm text-slate-700">
+              {data.sections.achievements.map((item) => (
+                <li>{[item.title, item.issuer, item.year].filter(Boolean).join(" • ")}</li>
+              ))}
+            </ul>
+          </section>
+        ) : null}
+      </aside>
+    </div>
+  </main>
+</article>

package/src/templates/portfolio-public/Minimal.astro

@@ -0,0 +1,155 @@
+---
+import type { PortfolioPublicData } from "./types";
+import { hasText, isSectionVisible, normalizeHttpHref } from "./utils";
+
+interface Props {
+  data: PortfolioPublicData;
+}
+
+const { data } = Astro.props as Props;
+const ownerName = data.owner.fullName || data.meta?.title || "Portfolio";
+---
+
+<article class="min-h-screen bg-white text-slate-900">
+  <main class="mx-auto w-full max-w-3xl px-6 py-12 sm:px-8">
+    <header class="border-b border-slate-200 pb-8">
+      {data.owner.profilePhotoUrl ? (
+        <img
+          src={data.owner.profilePhotoUrl}
+          alt={`${ownerName} profile photo`}
+          class="mb-4 h-16 w-16 rounded-full border border-slate-200 object-cover"
+        />
+      ) : null}
+      <h1 class="text-4xl font-light tracking-tight text-slate-950 sm:text-5xl">{ownerName}</h1>
+      {data.owner.headline ? <p class="mt-2 text-lg text-slate-700">{data.owner.headline}</p> : null}
+      {data.owner.location ? <p class="mt-1 text-sm uppercase tracking-[0.16em] text-slate-500">{data.owner.location}</p> : null}
+      {hasText(data.owner.summary) ? <p class="mt-5 max-w-2xl leading-7 text-slate-700">{data.owner.summary}</p> : null}
+    </header>
+
+    <div class="space-y-10 pt-8">
+      {isSectionVisible(data, "about") && hasText(data.sections.about) ? (
+        <section aria-labelledby="minimal-about" class="space-y-3">
+          <h2 id="minimal-about" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">About</h2>
+          <p class="leading-7 text-slate-700">{data.sections.about}</p>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "featuredProjects") && data.sections.featuredProjects.length > 0 ? (
+        <section aria-labelledby="minimal-projects" class="space-y-5">
+          <h2 id="minimal-projects" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Projects</h2>
+          <div class="space-y-6">
+            {data.sections.featuredProjects.map((project) => (
+              <article class="space-y-2">
+                <div class="flex flex-wrap items-baseline justify-between gap-2">
+                  <h3 class="text-xl font-medium text-slate-900">{project.name || "Project"}</h3>
+                  {project.link ? <a class="text-sm text-slate-600 underline" href={normalizeHttpHref(project.link)}>Visit</a> : null}
+                </div>
+                {project.description ? <p class="leading-7 text-slate-700">{project.description}</p> : null}
+                {project.tags.length > 0 ? <p class="text-xs uppercase tracking-[0.16em] text-slate-500">{project.tags.join(" / ")}</p> : null}
+                {project.bullets.length > 0 ? (
+                  <ul class="list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                    {project.bullets.map((bullet) => (
+                      <li>{bullet}</li>
+                    ))}
+                  </ul>
+                ) : null}
+              </article>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "experience") && data.sections.experience.length > 0 ? (
+        <section aria-labelledby="minimal-experience" class="space-y-5">
+          <h2 id="minimal-experience" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Experience</h2>
+          <div class="space-y-6">
+            {data.sections.experience.map((item) => (
+              <article class="space-y-2">
+                <h3 class="text-lg font-medium text-slate-900">{item.role || "Role"}</h3>
+                <p class="text-sm text-slate-600">{[item.company, item.location].filter(Boolean).join(" • ")}</p>
+                <p class="text-sm text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p>
+                {item.bullets.length > 0 ? (
+                  <ul class="list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                    {item.bullets.map((bullet) => (
+                      <li>{bullet}</li>
+                    ))}
+                  </ul>
+                ) : null}
+              </article>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "skills") && data.sections.skills.length > 0 ? (
+        <section aria-labelledby="minimal-skills" class="space-y-4">
+          <h2 id="minimal-skills" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Skills</h2>
+          <div class="space-y-4">
+            {data.sections.skills.map((group) => (
+              <div>
+                <h3 class="text-sm font-semibold text-slate-800">{group.name || "Skills"}</h3>
+                <p class="mt-1 text-sm text-slate-600">{group.items.join(", ")}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "education") && data.sections.education.length > 0 ? (
+        <section aria-labelledby="minimal-education" class="space-y-4">
+          <h2 id="minimal-education" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Education</h2>
+          <div class="space-y-4">
+            {data.sections.education.map((item) => (
+              <article>
+                <h3 class="text-base font-medium text-slate-900">{item.degree || "Degree"}</h3>
+                <p class="text-sm text-slate-700">{[item.field, item.institution].filter(Boolean).join(" • ")}</p>
+                <p class="text-sm text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p>
+                {item.grade ? <p class="text-sm text-slate-600">{item.grade}</p> : null}
+              </article>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "certifications") && data.sections.certifications.length > 0 ? (
+        <section aria-labelledby="minimal-certifications" class="space-y-3">
+          <h2 id="minimal-certifications" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Certifications</h2>
+          <ul class="space-y-1 text-sm text-slate-700">
+            {data.sections.certifications.map((item) => (
+              <li>{[item.title, item.issuer, item.year].filter(Boolean).join(" • ")}</li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "achievements") && data.sections.achievements.length > 0 ? (
+        <section aria-labelledby="minimal-achievements" class="space-y-3">
+          <h2 id="minimal-achievements" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Achievements</h2>
+          <ul class="space-y-1 text-sm text-slate-700">
+            {data.sections.achievements.map((item) => (
+              <li>{[item.title, item.issuer, item.year].filter(Boolean).join(" • ")}</li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      {isSectionVisible(data, "contact") ? (
+        <section aria-labelledby="minimal-contact" class="border-t border-slate-200 pt-8">
+          <h2 id="minimal-contact" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Contact</h2>
+          {data.contact.callToActionTitle ? <p class="mt-3 text-base font-medium text-slate-900">{data.contact.callToActionTitle}</p> : null}
+          {data.contact.callToActionText ? <p class="mt-2 text-sm text-slate-700">{data.contact.callToActionText}</p> : null}
+          <div class="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-sm text-slate-700">
+            {data.contact.email ? <a class="underline" href={`mailto:${data.contact.email}`}>{data.contact.email}</a> : null}
+            {data.contact.phone ? <a class="underline" href={`tel:${data.contact.phone}`}>{data.contact.phone}</a> : null}
+            {data.contact.website ? <a class="underline" href={normalizeHttpHref(data.contact.website)}>{data.contact.website}</a> : null}
+            {data.contact.github ? <a class="underline" href={normalizeHttpHref(data.contact.github)}>GitHub</a> : null}
+            {data.contact.linkedin ? <a class="underline" href={normalizeHttpHref(data.contact.linkedin)}>LinkedIn</a> : null}
+            {data.contact.links.map((link) => (
+              <a class="underline" href={link.href}>{link.label || link.href}</a>
+            ))}
+          </div>
+        </section>
+      ) : null}
+    </div>
+  </main>
+</article>

package/src/templates/portfolio-public/Story.astro

@@ -0,0 +1,165 @@
+---
+import type { PortfolioPublicData } from "./types";
+import { hasText, isSectionVisible, normalizeHttpHref } from "./utils";
+
+interface Props {
+  data: PortfolioPublicData;
+}
+
+const { data } = Astro.props as Props;
+const ownerName = data.owner.fullName || data.meta?.title || "Portfolio";
+---
+
+<article class="min-h-screen bg-white text-slate-900">
+  <main class="mx-auto w-full max-w-5xl px-5 py-12 lg:px-10">
+    <header class="mx-auto max-w-3xl space-y-4 text-center">
+      <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Story Portfolio</p>
+      {data.owner.profilePhotoUrl ? (
+        <img
+          src={data.owner.profilePhotoUrl}
+          alt={`${ownerName} profile photo`}
+          class="mx-auto h-20 w-20 rounded-full border border-slate-200 object-cover"
+        />
+      ) : null}
+      <h1 class="text-4xl font-bold tracking-tight text-slate-950 sm:text-5xl">{ownerName}</h1>
+      {data.owner.headline ? <p class="text-lg text-slate-700">{data.owner.headline}</p> : null}
+      {hasText(data.owner.summary) ? <p class="leading-7 text-slate-700">{data.owner.summary}</p> : null}
+      {data.owner.location ? <p class="text-sm text-slate-500">{data.owner.location}</p> : null}
+    </header>
+
+    <div class="mt-12 grid gap-10 lg:grid-cols-[1fr_270px]">
+      <div class="relative border-l border-slate-200 pl-6 sm:pl-8">
+        {isSectionVisible(data, "about") && hasText(data.sections.about) ? (
+          <section aria-labelledby="story-about" class="relative mb-10">
+            <span class="absolute -left-[2.05rem] top-1 h-3 w-3 rounded-full bg-slate-400"></span>
+            <h2 id="story-about" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">About</h2>
+            <p class="mt-3 leading-7 text-slate-700">{data.sections.about}</p>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "experience") && data.sections.experience.length > 0 ? (
+          <section aria-labelledby="story-experience" class="relative mb-10">
+            <span class="absolute -left-[2.05rem] top-1 h-3 w-3 rounded-full bg-slate-400"></span>
+            <h2 id="story-experience" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Experience Timeline</h2>
+            <div class="mt-4 space-y-6">
+              {data.sections.experience.map((item) => (
+                <article class="rounded-xl border border-slate-200 p-4">
+                  <p class="text-xs uppercase tracking-[0.14em] text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p>
+                  <h3 class="mt-1 text-lg font-semibold text-slate-900">{item.role || "Role"}</h3>
+                  <p class="text-sm text-slate-700">{[item.company, item.location].filter(Boolean).join(" • ")}</p>
+                  {item.bullets.length > 0 ? (
+                    <ul class="mt-3 list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                      {item.bullets.map((bullet) => (
+                        <li>{bullet}</li>
+                      ))}
+                    </ul>
+                  ) : null}
+                </article>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "featuredProjects") && data.sections.featuredProjects.length > 0 ? (
+          <section aria-labelledby="story-projects" class="relative mb-10">
+            <span class="absolute -left-[2.05rem] top-1 h-3 w-3 rounded-full bg-slate-400"></span>
+            <h2 id="story-projects" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Project Chapters</h2>
+            <div class="mt-4 space-y-6">
+              {data.sections.featuredProjects.map((project, index) => (
+                <article>
+                  <p class="text-xs uppercase tracking-[0.14em] text-slate-500">Chapter {index + 1}</p>
+                  <div class="mt-1 flex flex-wrap items-baseline justify-between gap-2">
+                    <h3 class="text-xl font-semibold text-slate-900">{project.name || "Project"}</h3>
+                    {project.link ? <a class="text-sm text-slate-700 underline" href={normalizeHttpHref(project.link)}>Read</a> : null}
+                  </div>
+                  {project.description ? <p class="mt-2 leading-7 text-slate-700">{project.description}</p> : null}
+                  {project.bullets.length > 0 ? (
+                    <ul class="mt-2 list-disc space-y-1 pl-5 text-sm leading-6 text-slate-700">
+                      {project.bullets.map((bullet) => (
+                        <li>{bullet}</li>
+                      ))}
+                    </ul>
+                  ) : null}
+                  {project.tags.length > 0 ? <p class="mt-2 text-xs text-slate-500">{project.tags.join(" • ")}</p> : null}
+                </article>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "education") && data.sections.education.length > 0 ? (
+          <section aria-labelledby="story-education" class="relative mb-10">
+            <span class="absolute -left-[2.05rem] top-1 h-3 w-3 rounded-full bg-slate-400"></span>
+            <h2 id="story-education" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Education</h2>
+            <div class="mt-4 space-y-3">
+              {data.sections.education.map((item) => (
+                <article>
+                  <h3 class="font-semibold text-slate-900">{item.degree || "Degree"}</h3>
+                  <p class="text-sm text-slate-700">{[item.field, item.institution].filter(Boolean).join(" • ")}</p>
+                  <p class="text-sm text-slate-500">{[item.start, item.end].filter(Boolean).join(" - ")}</p>
+                  {item.grade ? <p class="text-sm text-slate-600">{item.grade}</p> : null}
+                </article>
+              ))}
+            </div>
+          </section>
+        ) : null}
+      </div>
+
+      <aside class="space-y-8">
+        {isSectionVisible(data, "skills") && data.sections.skills.length > 0 ? (
+          <section aria-labelledby="story-skills" class="rounded-xl bg-slate-50 p-5">
+            <h2 id="story-skills" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Skills</h2>
+            <div class="mt-3 space-y-3">
+              {data.sections.skills.map((group) => (
+                <div>
+                  <h3 class="text-sm font-semibold text-slate-900">{group.name || "Skills"}</h3>
+                  <p class="text-sm text-slate-600">{group.items.join(", ")}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "certifications") && data.sections.certifications.length > 0 ? (
+          <section aria-labelledby="story-certifications" class="rounded-xl bg-slate-50 p-5">
+            <h2 id="story-certifications" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Certifications</h2>
+            <ul class="mt-3 space-y-2 text-sm text-slate-700">
+              {data.sections.certifications.map((item) => (
+                <li>{[item.title, item.issuer, item.year].filter(Boolean).join(" • ")}</li>
+              ))}
+            </ul>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "achievements") && data.sections.achievements.length > 0 ? (
+          <section aria-labelledby="story-achievements" class="rounded-xl bg-slate-50 p-5">
+            <h2 id="story-achievements" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Achievements</h2>
+            <ul class="mt-3 space-y-2 text-sm text-slate-700">
+              {data.sections.achievements.map((item) => (
+                <li>{[item.title, item.issuer, item.year].filter(Boolean).join(" • ")}</li>
+              ))}
+            </ul>
+          </section>
+        ) : null}
+
+        {isSectionVisible(data, "contact") ? (
+          <section aria-labelledby="story-contact" class="rounded-xl border border-slate-200 p-5">
+            <h2 id="story-contact" class="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Contact</h2>
+            {data.contact.callToActionTitle ? <p class="mt-3 font-semibold text-slate-900">{data.contact.callToActionTitle}</p> : null}
+            {data.contact.callToActionText ? <p class="mt-1 text-sm text-slate-700">{data.contact.callToActionText}</p> : null}
+            <div class="mt-3 grid gap-1 text-sm text-slate-700">
+              {data.contact.email ? <a class="underline" href={`mailto:${data.contact.email}`}>{data.contact.email}</a> : null}
+              {data.contact.phone ? <a class="underline" href={`tel:${data.contact.phone}`}>{data.contact.phone}</a> : null}
+              {data.contact.website ? <a class="underline" href={normalizeHttpHref(data.contact.website)}>{data.contact.website}</a> : null}
+              {data.contact.github ? <a class="underline" href={normalizeHttpHref(data.contact.github)}>GitHub</a> : null}
+              {data.contact.linkedin ? <a class="underline" href={normalizeHttpHref(data.contact.linkedin)}>LinkedIn</a> : null}
+              {data.contact.links.map((link) => (
+                <a class="underline" href={link.href}>{link.label || link.href}</a>
+              ))}
+            </div>
+          </section>
+        ) : null}
+      </aside>
+    </div>
+  </main>
+</article>

package/src/templates/portfolio-public/index.ts

@@ -0,0 +1,40 @@
+import PortfolioPublicTemplateClassic from "./Classic.astro";
+import PortfolioPublicTemplateGallery from "./Gallery.astro";
+import PortfolioPublicTemplateMinimal from "./Minimal.astro";
+import PortfolioPublicTemplateStory from "./Story.astro";
+
+import type { PortfolioPublicTemplateKey } from "./types";
+
+export type {
+  PortfolioPublicContact,
+  PortfolioPublicCredential,
+  PortfolioPublicData,
+  PortfolioPublicEducation,
+  PortfolioPublicExperience,
+  PortfolioPublicLink,
+  PortfolioPublicMeta,
+  PortfolioPublicOwner,
+  PortfolioPublicProject,
+  PortfolioPublicSectionKey,
+  PortfolioPublicSections,
+  PortfolioPublicSkillGroup,
+  PortfolioPublicTemplateKey,
+} from "./types";
+
+export {
+  PortfolioPublicTemplateClassic,
+  PortfolioPublicTemplateGallery,
+  PortfolioPublicTemplateMinimal,
+  PortfolioPublicTemplateStory,
+};
+
+export const portfolioPublicTemplates = {
+  classic: PortfolioPublicTemplateClassic,
+  gallery: PortfolioPublicTemplateGallery,
+  minimal: PortfolioPublicTemplateMinimal,
+  story: PortfolioPublicTemplateStory,
+} satisfies Record<PortfolioPublicTemplateKey, typeof PortfolioPublicTemplateClassic>;
+
+export const resolvePortfolioPublicTemplate = (templateKey?: string) =>
+  portfolioPublicTemplates[(templateKey as PortfolioPublicTemplateKey) || "classic"] ??
+  PortfolioPublicTemplateClassic;

package/src/templates/portfolio-public/types.ts

@@ -0,0 +1,102 @@
+export type PortfolioPublicTemplateKey = "classic" | "gallery" | "minimal" | "story";
+
+export type PortfolioPublicSectionKey =
+  | "about"
+  | "featuredProjects"
+  | "experience"
+  | "skills"
+  | "education"
+  | "certifications"
+  | "achievements"
+  | "contact";
+
+export type PortfolioPublicLink = {
+  label: string;
+  href: string;
+};
+
+export type PortfolioPublicOwner = {
+  fullName: string;
+  headline: string;
+  summary: string;
+  location: string;
+  profilePhotoUrl: string;
+};
+
+export type PortfolioPublicContact = {
+  email: string;
+  phone: string;
+  website: string;
+  github: string;
+  linkedin: string;
+  callToActionTitle: string;
+  callToActionText: string;
+  links: PortfolioPublicLink[];
+};
+
+export type PortfolioPublicProject = {
+  name: string;
+  description: string;
+  link: string;
+  bullets: string[];
+  tags: string[];
+};
+
+export type PortfolioPublicExperience = {
+  role: string;
+  company: string;
+  location: string;
+  start: string;
+  end: string;
+  bullets: string[];
+};
+
+export type PortfolioPublicEducation = {
+  degree: string;
+  field: string;
+  institution: string;
+  start: string;
+  end: string;
+  grade: string;
+};
+
+export type PortfolioPublicCredential = {
+  title: string;
+  issuer: string;
+  year: string;
+  note: string;
+};
+
+export type PortfolioPublicSkillGroup = {
+  name: string;
+  items: string[];
+};
+
+export type PortfolioPublicSections = {
+  about: string;
+  featuredProjects: PortfolioPublicProject[];
+  experience: PortfolioPublicExperience[];
+  skills: PortfolioPublicSkillGroup[];
+  education: PortfolioPublicEducation[];
+  certifications: PortfolioPublicCredential[];
+  achievements: PortfolioPublicCredential[];
+};
+
+export type PortfolioPublicMeta = {
+  title?: string;
+  slug?: string;
+  visibility?: "public" | "unlisted" | "private";
+  publishedAt?: string | null;
+  updatedAt?: string | null;
+  lastUpdatedLabel?: string;
+};
+
+export type PortfolioPublicData = {
+  version: "1.0";
+  templateKey: PortfolioPublicTemplateKey;
+  owner: PortfolioPublicOwner;
+  contact: PortfolioPublicContact;
+  sections: PortfolioPublicSections;
+  visibleSections: PortfolioPublicSectionKey[];
+  meta?: PortfolioPublicMeta;
+};

package/src/templates/portfolio-public/utils.ts

@@ -0,0 +1,18 @@
+import type { PortfolioPublicData, PortfolioPublicSectionKey } from "./types";
+
+const clean = (value?: string | null) => (value ?? "").trim();
+
+export const hasText = (value?: string | null) => clean(value).length > 0;
+
+export const listHasContent = (values: Array<string | null | undefined>) =>
+  values.some((value) => hasText(value));
+
+export const normalizeHttpHref = (value?: string | null) => {
+  const raw = clean(value);
+  if (!raw) return "";
+  if (/^(mailto:|tel:|https?:\/\/)/i.test(raw)) return raw;
+  return `https://${raw.replace(/^\/+/, "")}`;
+};
+
+export const isSectionVisible = (data: PortfolioPublicData, key: PortfolioPublicSectionKey) =>
+  data.visibleSections.includes(key);