From 436ad20960cde5727f69bbf959a87b642675df7b Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Sat, 4 Jul 2026 22:54:16 +0800 Subject: [PATCH 1/8] feat: bold nav link when its route is active Co-Authored-By: Claude Sonnet 5 --- src/components/AppShell/Header.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/AppShell/Header.tsx b/src/components/AppShell/Header.tsx index 76bc81b..0c15cc2 100644 --- a/src/components/AppShell/Header.tsx +++ b/src/components/AppShell/Header.tsx @@ -1,12 +1,20 @@ -import { Link } from "react-router"; +import { NavLink } from "react-router"; export default function Header() { return (
- About - Projects - Experience - Calendar + (isActive ? "font-bold" : "")}> + About + + (isActive ? "font-bold" : "")}> + Projects + + (isActive ? "font-bold" : "")}> + Experience + + (isActive ? "font-bold" : "")}> + Calendar +
); } From a6912f7de6714dc39b128f5e5ec33b1194fc66b8 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Sat, 4 Jul 2026 22:54:42 +0800 Subject: [PATCH 2/8] style: apply prettier formatting to Header.tsx Co-Authored-By: Claude Sonnet 5 --- src/components/AppShell/Header.tsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/components/AppShell/Header.tsx b/src/components/AppShell/Header.tsx index 0c15cc2..a482fc1 100644 --- a/src/components/AppShell/Header.tsx +++ b/src/components/AppShell/Header.tsx @@ -3,16 +3,30 @@ import { NavLink } from "react-router"; export default function Header() { return (
- (isActive ? "font-bold" : "")}> + (isActive ? "font-bold" : "")} + > About - (isActive ? "font-bold" : "")}> + (isActive ? "font-bold" : "")} + > Projects - (isActive ? "font-bold" : "")}> + (isActive ? "font-bold" : "")} + > Experience - (isActive ? "font-bold" : "")}> + (isActive ? "font-bold" : "")} + > Calendar
From a12b54dcb4e46931dc993ad13dcb86d5b444e87b Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Sun, 5 Jul 2026 10:40:58 +0800 Subject: [PATCH 3/8] feat: add Projects and Talks pages Splits the Projects section out of Experience into its own page with detail views, adds a new Talks page, and updates the header nav and Experience page (Other Experience section) to match. Co-Authored-By: Claude Sonnet 5 --- src/App.tsx | 11 +++ src/components/AppShell/Header.tsx | 9 ++- src/data/projects.ts | 61 ++++++++++++++++ src/data/talks.ts | 36 ++++++++++ src/pages/Experience.tsx | 109 ++++++----------------------- src/pages/ProjectDetail.tsx | 64 +++++++++++++++++ src/pages/Projects.tsx | 65 +++++++++++++++++ src/pages/TalkDetail.tsx | 55 +++++++++++++++ src/pages/Talks.tsx | 62 ++++++++++++++++ 9 files changed, 381 insertions(+), 91 deletions(-) create mode 100644 src/data/projects.ts create mode 100644 src/data/talks.ts create mode 100644 src/pages/ProjectDetail.tsx create mode 100644 src/pages/Projects.tsx create mode 100644 src/pages/TalkDetail.tsx create mode 100644 src/pages/Talks.tsx diff --git a/src/App.tsx b/src/App.tsx index cf972cb..c8879a4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,12 +9,23 @@ import Homepage from "./pages/Homepage"; import Calendar from "./pages/Calendar.tsx"; import { Layout } from "./components/AppShell/Layout.tsx"; import Experience from "./pages/Experience.tsx"; +import Projects from "./pages/Projects.tsx"; +import ProjectDetail from "./pages/ProjectDetail.tsx"; +import Talks from "./pages/Talks.tsx"; +import TalkDetail from "./pages/TalkDetail.tsx"; export default function App() { const router = createBrowserRouter( createRoutesFromElements( }> } /> + } /> + } + /> + } /> + } /> } /> } /> } /> diff --git a/src/components/AppShell/Header.tsx b/src/components/AppShell/Header.tsx index a482fc1..def4b6d 100644 --- a/src/components/AppShell/Header.tsx +++ b/src/components/AppShell/Header.tsx @@ -11,12 +11,17 @@ export default function Header() { About (isActive ? "font-bold" : "")} > Projects + (isActive ? "font-bold" : "")} + > + Talks + (isActive ? "font-bold" : "")} diff --git a/src/data/projects.ts b/src/data/projects.ts new file mode 100644 index 0000000..38c77d9 --- /dev/null +++ b/src/data/projects.ts @@ -0,0 +1,61 @@ +export type ProjectLink = { + label: string; + url: string; +}; + +export type Project = { + id: string; + title: string; + role: string; + desc: string; + details: string; + links: ProjectLink[]; +}; + +const detailPlaceholder = + "Add a longer write-up here — motivation, technical decisions, challenges, and outcomes."; + +export const projects: Project[] = [ + { + id: "clustron", + 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.", + details: detailPlaceholder, + links: [ + { + label: "Clustron Frontend", + url: "https://github.com/NYCU-SDC/clustron-frontend", + }, + { + label: "Clustron Backend", + url: "https://github.com/NYCU-SDC/clustron-backend", + }, + ], + }, + { + id: "summer", + 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%.", + details: detailPlaceholder, + links: [{ label: "Summer", url: "https://github.com/NYCU-SDC/summer" }], + }, + { + id: "commonground", + 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.", + details: detailPlaceholder, + links: [ + { + label: "CommonGround Frontend", + url: "https://github.com/commonground-project/frontend", + }, + { + label: "CommonGround Backend", + url: "https://github.com/commonground-project/backend", + }, + ], + }, +]; diff --git a/src/data/talks.ts b/src/data/talks.ts new file mode 100644 index 0000000..34c477d --- /dev/null +++ b/src/data/talks.ts @@ -0,0 +1,36 @@ +export type TalkLink = { + label: string; + url: string; +}; + +export type Talk = { + id: string; + title: string; + event: string; + date: string; + details: string; + links: TalkLink[]; +}; + +const detailPlaceholder = + "Add a longer write-up here — motivation, technical decisions, challenges, and outcomes."; + +export const talks: Talk[] = [ + { + id: "traefik-sitcon", + title: "Traefik，解放你的雙手", + event: "SITCON 2026", + date: "Mar 28, 2026", + details: detailPlaceholder, + links: [ + { + label: "Slides", + url: "https://docs.google.com/presentation/d/1s8oV4OuPY5TMF_lnv12PB8NqLTfzsXWO/edit?usp=sharing&ouid=103289080347963466086&rtpof=true&sd=true", + }, + { + label: "Recording", + url: "https://www.youtube.com/watch?v=0ZTTQj6GYNU&list=PLZ7seKKvYHdkLYGUjPVCwr5hIJEFhF4Xg", + }, + ], + }, +]; 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

-