-
About
-
Projects
-
Experience
-
Calendar
+
+ (isActive ? "font-bold" : "")}
+ >
+ About
+
+ (isActive ? "font-bold" : "")}
+ >
+ Projects
+
+ (isActive ? "font-bold" : "")}
+ >
+ Talks
+
+ (isActive ? "font-bold" : "")}
+ >
+ Experience
+
+ (isActive ? "font-bold" : "")}
+ >
+ Calendar
+
);
}
diff --git a/src/components/MarkdownContent.tsx b/src/components/MarkdownContent.tsx
new file mode 100644
index 0000000..cb5d7b8
--- /dev/null
+++ b/src/components/MarkdownContent.tsx
@@ -0,0 +1,63 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export default function MarkdownContent({
+ markdown,
+ resolveImage,
+}: {
+ markdown: string;
+ resolveImage: (relPath: string) => string | undefined;
+}) {
+ return (
+
+
(
+
+
+ );
+}
diff --git a/src/content/README.md b/src/content/README.md
new file mode 100644
index 0000000..47e7854
--- /dev/null
+++ b/src/content/README.md
@@ -0,0 +1,122 @@
+# Maintaining Projects & Talks
+
+Content for the `/projects` and `/talks` pages lives entirely as
+folders under this directory — no page component needs to change to
+add, edit, or remove an entry.
+
+- `projects/
/` → discovered by `src/data/loadProjects.ts`,
+ rendered by `src/pages/Projects.tsx` (list) and
+ `src/pages/ProjectDetail.tsx` (detail, at `/projects/`)
+- `talks//` → discovered by `src/data/loadTalks.ts`, rendered by
+ `src/pages/Talks.tsx` (list) and `src/pages/TalkDetail.tsx` (detail,
+ at `/talks/`)
+
+The folder name **is** the URL slug — there's no separate `id` field
+to keep in sync.
+
+## Adding a project
+
+Create `projects//` with two files:
+
+`meta.ts`:
+
+```ts
+import type { ProjectMeta } from "../../../data/contentTypes";
+
+const meta: ProjectMeta = {
+ title: "My Project - A Short Tagline",
+ role: "Your role on the project",
+ desc: "One or two sentences shown on the list card.",
+ order: 40, // see Ordering below
+ links: [{ label: "Frontend", url: "https://github.com/..." }],
+};
+
+export default meta;
+```
+
+`details.md` — plain markdown (GitHub-flavored: tables, task lists,
+strikethrough all work), rendered on the detail page in place of the
+old placeholder box. No JSX/MDX support — text, headings, lists,
+links, and images only.
+
+## Adding a talk
+
+Same pattern under `talks//`:
+
+`meta.ts`:
+
+```ts
+import type { TalkMeta } from "../../../data/contentTypes";
+
+const meta: TalkMeta = {
+ title: "Talk Title",
+ event: "Conference Name",
+ date: "Mon DD, YYYY", // free-text, shown as "event — date"
+ order: 20,
+ links: [
+ { label: "Slides", url: "https://..." },
+ { label: "Recording", url: "https://..." },
+ ],
+};
+
+export default meta;
+```
+
+`details.md` — same as projects.
+
+- `slug` rules: unique, URL-safe (lowercase, hyphens — no spaces or
+ slashes), since it's also the folder name.
+- `links` labels are free text (not restricted to
+ "Slides"/"Recording"/"Frontend"/"Backend").
+
+## Ordering
+
+Both `ProjectMeta` and `TalkMeta` have a required `order: number`.
+Display order is ascending by `order`, not folder-creation order or
+alphabetical. Use gaps of 10 (10, 20, 30…) so a new entry can be
+inserted between two existing ones (e.g. `order: 15`) without
+renumbering everything.
+
+## Adding images
+
+Drop the image file directly in the entry's folder and reference it
+from `details.md` with a relative path:
+
+```md
+
+```
+
+This resolves through Vite's asset pipeline at build time (hashed,
+cache-busted) via each entry's `resolveImage` — it is **not** a
+`public/`-root-absolute path. Any accepted extension
+(`png`/`jpg`/`jpeg`/`gif`/`webp`/`svg`) works. External image URLs
+(`https://...`) in markdown are left untouched.
+
+### Cover image
+
+Both projects and talks support an optional cover image shown at the
+top of the detail page (and, for talks, on the list card too): add a
+file literally named `cover.png` / `cover.jpg` / `cover.jpeg` /
+`cover.webp` / `cover.svg` to the entry's folder — no metadata field
+needed, it's picked up automatically. Omit it to keep the striped
+placeholder box.
+
+## Removing or reordering entries
+
+Delete the entry's folder to remove it. To reorder, edit `order`
+values — folder position on disk has no effect on display order.
+
+## Changing the shape of an entry
+
+`ProjectMeta`, `TalkMeta`, and `ContentEntry` live in
+`src/data/contentTypes.ts` — the single source of truth. To add a
+field:
+
+1. Add it to `ProjectMeta`/`TalkMeta` in `src/data/contentTypes.ts`.
+2. Update every existing `meta.ts` (or make the field optional).
+3. Update the page(s) that read it (`Projects.tsx`/`Talks.tsx` for
+ list-page fields, `ProjectDetail.tsx`/`TalkDetail.tsx` for
+ detail-only fields).
+
+Run `npx tsc --noEmit` after — a missing field on an existing entry or
+an unused new field both surface as type errors.
diff --git a/src/content/projects/clustron/details.md b/src/content/projects/clustron/details.md
new file mode 100644
index 0000000..287e5ec
--- /dev/null
+++ b/src/content/projects/clustron/details.md
@@ -0,0 +1 @@
+Add a longer write-up here — motivation, technical decisions, challenges, and outcomes.
diff --git a/src/content/projects/clustron/meta.ts b/src/content/projects/clustron/meta.ts
new file mode 100644
index 0000000..5970075
--- /dev/null
+++ b/src/content/projects/clustron/meta.ts
@@ -0,0 +1,20 @@
+import type { ProjectMeta } from "../../../data/contentTypes";
+
+const meta: ProjectMeta = {
+ title: "Clustron - A Heterogeneous Cluster Management Platform",
+ role: "Product manager, Full-stack developer",
+ desc: "Leading a team of 7 to develop a heterogeneous cluster management system used by students and professors.",
+ order: 10,
+ links: [
+ {
+ label: "Clustron Frontend",
+ url: "https://github.com/NYCU-SDC/clustron-frontend",
+ },
+ {
+ label: "Clustron Backend",
+ url: "https://github.com/NYCU-SDC/clustron-backend",
+ },
+ ],
+};
+
+export default meta;
diff --git a/src/content/projects/commonground/details.md b/src/content/projects/commonground/details.md
new file mode 100644
index 0000000..287e5ec
--- /dev/null
+++ b/src/content/projects/commonground/details.md
@@ -0,0 +1 @@
+Add a longer write-up here — motivation, technical decisions, challenges, and outcomes.
diff --git a/src/content/projects/commonground/meta.ts b/src/content/projects/commonground/meta.ts
new file mode 100644
index 0000000..7d1ecd6
--- /dev/null
+++ b/src/content/projects/commonground/meta.ts
@@ -0,0 +1,20 @@
+import type { ProjectMeta } from "../../../data/contentTypes";
+
+const meta: ProjectMeta = {
+ title: "CommonGround - An Experimental Social Platform",
+ role: "Frontend Developer",
+ desc: "Developer friendly front-end architecture for a social platform using React/TypeScript, enhancing user interaction and component reusability.",
+ order: 30,
+ links: [
+ {
+ label: "CommonGround Frontend",
+ url: "https://github.com/commonground-project/frontend",
+ },
+ {
+ label: "CommonGround Backend",
+ url: "https://github.com/commonground-project/backend",
+ },
+ ],
+};
+
+export default meta;
diff --git a/src/content/projects/summer/details.md b/src/content/projects/summer/details.md
new file mode 100644
index 0000000..287e5ec
--- /dev/null
+++ b/src/content/projects/summer/details.md
@@ -0,0 +1 @@
+Add a longer write-up here — motivation, technical decisions, challenges, and outcomes.
diff --git a/src/content/projects/summer/meta.ts b/src/content/projects/summer/meta.ts
new file mode 100644
index 0000000..8350996
--- /dev/null
+++ b/src/content/projects/summer/meta.ts
@@ -0,0 +1,11 @@
+import type { ProjectMeta } from "../../../data/contentTypes";
+
+const meta: ProjectMeta = {
+ title: "Summer - An Opensourced Go RESTful API Library",
+ role: "Backend, Library Co-architect",
+ desc: "Co-architected a shared Go RESTful API library utilized by 4 internal club projects. Accelerate setup time by 80%.",
+ order: 20,
+ links: [{ label: "Summer", url: "https://github.com/NYCU-SDC/summer" }],
+};
+
+export default meta;
diff --git a/src/content/talks/traefik-sitcon/cover.svg b/src/content/talks/traefik-sitcon/cover.svg
new file mode 100644
index 0000000..8ee3448
--- /dev/null
+++ b/src/content/talks/traefik-sitcon/cover.svg
@@ -0,0 +1,342 @@
+
+
+
+image/svg+xml = {
+ id: string;
+ meta: M;
+ rawMarkdown: string;
+ resolveImage: (relPath: string) => string | undefined;
+ cover?: string;
+};
+
+const coverBasenames = [
+ "cover.png",
+ "cover.jpg",
+ "cover.jpeg",
+ "cover.webp",
+ "cover.svg",
+];
+
+export function buildContentEntries(
+ metaModules: Record,
+ mdModules: Record,
+ imageModules: Record,
+ folderPrefix: string,
+): ContentEntry[] {
+ const entries = Object.entries(metaModules).map(([metaPath, mod]) => {
+ const slug = metaPath.slice(folderPrefix.length).split("/")[0];
+ const folder = `${folderPrefix}${slug}/`;
+
+ const rawMarkdown = mdModules[`${folder}details.md`] ?? "";
+
+ const scopedImages: Record = {};
+ for (const [imagePath, url] of Object.entries(imageModules)) {
+ if (imagePath.startsWith(folder)) {
+ const basename = imagePath.slice(folder.length);
+ scopedImages[basename] = url;
+ }
+ }
+
+ const resolveImage = (relPath: string) =>
+ scopedImages[relPath.replace(/^\.\//, "")];
+
+ const cover = coverBasenames
+ .map((basename) => resolveImage(basename))
+ .find((url) => url !== undefined);
+
+ return {
+ id: slug,
+ meta: mod.default,
+ rawMarkdown,
+ resolveImage,
+ cover,
+ };
+ });
+
+ return entries.sort((a, b) => a.meta.order - b.meta.order);
+}
diff --git a/src/data/loadProjects.ts b/src/data/loadProjects.ts
new file mode 100644
index 0000000..0084e79
--- /dev/null
+++ b/src/data/loadProjects.ts
@@ -0,0 +1,22 @@
+import { buildContentEntries, type ProjectMeta } from "./contentTypes";
+
+const metaModules = import.meta.glob<{ default: ProjectMeta }>(
+ "/src/content/projects/*/meta.ts",
+ { eager: true },
+);
+const mdModules = import.meta.glob("/src/content/projects/*/details.md", {
+ eager: true,
+ query: "?raw",
+ import: "default",
+}) as Record;
+const imageModules = import.meta.glob(
+ "/src/content/projects/*/*.{png,jpg,jpeg,gif,webp,svg}",
+ { eager: true, query: "?url", import: "default" },
+) as Record;
+
+export const projects = buildContentEntries(
+ metaModules,
+ mdModules,
+ imageModules,
+ "/src/content/projects/",
+);
diff --git a/src/data/loadTalks.ts b/src/data/loadTalks.ts
new file mode 100644
index 0000000..aed7420
--- /dev/null
+++ b/src/data/loadTalks.ts
@@ -0,0 +1,22 @@
+import { buildContentEntries, type TalkMeta } from "./contentTypes";
+
+const metaModules = import.meta.glob<{ default: TalkMeta }>(
+ "/src/content/talks/*/meta.ts",
+ { eager: true },
+);
+const mdModules = import.meta.glob("/src/content/talks/*/details.md", {
+ eager: true,
+ query: "?raw",
+ import: "default",
+}) as Record;
+const imageModules = import.meta.glob(
+ "/src/content/talks/*/*.{png,jpg,jpeg,gif,webp,svg}",
+ { eager: true, query: "?url", import: "default" },
+) as Record;
+
+export const talks = buildContentEntries(
+ metaModules,
+ mdModules,
+ imageModules,
+ "/src/content/talks/",
+);
diff --git a/src/pages/Experience.tsx b/src/pages/Experience.tsx
index 1416dc9..4e6ea13 100644
--- a/src/pages/Experience.tsx
+++ b/src/pages/Experience.tsx
@@ -41,81 +41,29 @@ export default function Experience() {
Projects
-
+ Other Experience
+
-
- Clustron - A Heterogeneous Cluster Management
- Platform
-
-
- Product manager, Full-stack developer
-
-
-
- Leading a team of 7 to develop a heterogeneous
- cluster management system used by students and
- professors.
-
-
-
-
-
-
-
-
-
-
- Summer - An Opensourced Go RESTful API Library
-
- Backend, Library Co-architect
-
-
- Co-architected a shared Go RESTful API library
- utilized by 4 internal club projects. Accelerate
- setup time by 80%.
-
-
-
-
+
+ COSCUP Conference —{" "}
+
+ Volunteer.
+
+ Helped run Taiwan's largest annual open-source
+ software conference.
+
-
- CommonGround - An Experimental Social Platform
-
- Frontend Developer
-
-
- Developer friendly front-end architecture for a
- social platform using React/TypeScript,
- enhancing user interaction and component
- reusability.
-
-
-
-
-
-
+
+ NYCU Software Development Club —{" "}
+
+
+ Vice President of Engineering.{" "}
+
+
+ Oversee engineering initiatives and mentor members
+ across club projects.
+
+ {entry.meta.title}
+
+
+
+ ← Back to Projects
+
+ {entry.cover ? (
+
+
+
+ ) : (
+
+ project screenshot
+
+ )}
+
{entry.meta.title}
+
{entry.meta.role}
+
{entry.meta.desc}
+
+
+ {entry.meta.links.map((link) => (
+
+
+ ))}
+
+
+ Projects
+
+
+
Projects
+
+ {projects.map((entry) => (
+
+
+ {entry.meta.title}
+
+ {entry.meta.role}
+
+ {entry.meta.desc}
+ {entry.meta.links.map((link) => (
+
+
+ ))}
+
+
+ ))}
+
+
+ {entry.meta.title}
+
+
+
+ ← Back to Talks
+
+ {entry.cover ? (
+
+
+
+ ) : (
+
+ talk photo / slide cover
+
+ )}
+
{entry.meta.title}
+
+ {entry.meta.event} — {entry.meta.date}
+
+
+
+
+ Talks
+
+
+
+ );
+}
+ ),
+ }}
+ >
+ {markdown}
+ +
+ talk photo / slide cover ++ )} +
-
- {display}
-
-