Instructor Profile + CMS
CLIENT WORK · Product · 2026
A profile website and CMS for editing teaching, research, and activity records, then previewing and publishing them.
Give the client a way to maintain their profile
I built a public profile and an administrator CMS so the client can update their own profile and activity records. The CMS manages introduction text, photos, Research, Publication, Awards, and News, along with menu labels and section titles. Administrators can add academic profile links and activities, reorder entries, and choose what to show.
Review a draft before publishing
Draft saving and publishing are separate so unfinished edits do not appear to visitors. Administrators save a draft, preview it in the public layout, and then publish. The CMS warns before leaving with unsaved changes and detects a newer save in another window to prevent overwriting it. The published version remains separate, and republishing unchanged content does not create an unnecessary history entry.
Manage text and images together
React powers the administrator interface, while Hono renders the public profile. HTML generated at publication is stored in Cloudflare D1 and served to visitors. Profile and News images are kept in private R2 storage; only images included in the current published version are public. Before upload, images are resized and converted to WebP. Replacing a photo does not remove the image from the existing published version. Administrator authentication and protected preview access are part of the same editing flow.
Turn client feedback into editing controls
Requests about photos and captions became image, date, title, and description fields for each News card. Home supports adding email and academic profile links. Long Research and Publication lists initially show three entries, with a control to expand the rest and a collapse button at the end. News cards grow with caption length, align their heights within each desktop row, and use a single column on mobile.
Verification and public demo
The recorded checks passed lint, type checking, the build, 43 unit tests, and three desktop and mobile browser tests. Saving, previewing, publishing, image display, and layouts at 1440px and 390px were checked before deployment. The public link and screenshots use sample content to demonstrate the CMS. The displayed person’s career is not an outcome of this project.