A static engineering portfolio hosted on GitHub Pages. Preferred name: Benjamin Sung; legal name: Chi-Hsuan Sung; Chinese name: 宋其軒. Contact: benjisung@gmail.com.
Benjamin approved publishing the visual redesign on November 2, 2026. The approved source is deployed through the repository’s existing GitHub Pages setup.
The direction combines charcoal and mint, oversized typography, offset photo prints, shorter copy, and real project media. The homepage has an unframed, silhouette-highlighted portrait and aligned project rows. About connects activity photographs with strings. VEX includes Benjamin’s two autonomous routines and PID tuning clip in a keyboard-accessible video selector. SDG has a student notebook treatment. The shared Explore menu exposes every project and key subsection.
node tools/preview.cjs 8766Open http://127.0.0.1:8766/. No package installation or build step is required. The server binds to loopback and supports MP4/PDF byte ranges while refusing Git metadata and non-public file types. design-preview.html redirects to the current local homepage.
index.html: image-led project overview, portrait, Fish AI video, and link to the connection board. Earlier public homepage fragments are retained as aliases.about.html: interactive activity connection board, brief background, expandable toolkit.robotics.html: separate/team robot explorer, 439-page flipping team notebook, autonomous videos, personal contributions, shared team engineering, and an embedded live view of 23083z.com.sdg.html: Heron’s Fountain, microplastic separation concepts, Ocean Challenge, AI Fridge, team science, and recognition.activities.html: SPROUT, programming, badminton, and a link to SDG. Existing SDG, Pathfinders, and fish-detection fragments remain available.environment.html: ocean atmosphere, replayable Taiwan–Hawaiʻi flight, reef field notebook, and real field photographs.research.html: matched-frame comparison, reproducible final-test graphs and confidence intervals, NYCU–NMMBA dataset-labeling contribution, four on-demand public seabed camera views, and the original archived demo.amr.html: blueprint grid, switchable real hardware views, and the retained conceptual architecture.honors.html: academic milestone collection and clearly attributed shared achievements.contact.html: photographic postcard with a direct email link.funfacts.html: retired compatibility redirect.01.html: preserved early HTML exercise.
All active pages use visual-refresh.css, detail-refresh.css, and creative.css. creative.js supplies media tabs, the matched-frame comparison, and visibility-triggered flight/court scenes. Animations respect system and footer reduced-motion preferences. Videos have native controls, no autoplay, and are paused when their panel or browser tab is hidden. All active pages share navigation.css and navigation.js; navigation markup is present in HTML and works without JavaScript. Native details exposes the Explore panel and expandable background notes. site.js supplies the phone menu and reduced-motion preference.
profile-board.js positions SVG strings between the actual photo pins using ResizeObserver. Photo cards are ordinary links. Keyboard focus or pointer entry highlights adjacent threads and updates a short description. On phones, the board reflows to a two-column layout; it does not require dragging or horizontal panning.
The former styles and homepage story scripts remain in the repository for history. The original intro.js is loaded on Home again, with its styles isolated in intro.css: Hello, 你好, こんにちは, Bonjour, 안녕하세요, Aloha, then the original identity and mint aperture. It plays on visits and refreshes, supports skip/replay, respects reduced motion, and preserves direct deep links. chapters.js remains on Robotics to preserve older AMR bookmarks. Fonts are self-hosted with their existing licenses. Fonts make no remote calls, and no new runtime dependencies are required. A portfolio visitor log records public IPs, server timestamps, portfolio page paths, and country codes in a separate private Cloudflare backend, as described in privacy.html.
Original photographs, technical evidence, and video are untouched. assets/media-plan.json tracks actual page slots; MEDIA_PLAN.md preserves source and extraction provenance. The existing hero cutout was an earlier AI-assisted background extraction, not a newly generated photograph.
Preserve these distinctions when editing:
- Pathfinders was a completed field-learning program, not original conservation research.
- Fish AI’s archived demonstration is a qualitative example. Final frozen validation uses 60 annotated frames / 428 ground-truth boxes; details remain on Research. Tracking and live deployment remain exploratory.
- AMR is assembled and joystick-controlled; advanced autonomy remains in development.
- The main VEX competition robot, repositories, and team awards reflect shared work. The front-view white-background photograph shows a separate robot built mainly by Benjamin. The tall mechanism photograph shows the team’s X-drive skills-challenge prototype, whose control programming was not completed; that attempt did not succeed. Benjamin contributed programming, troubleshooting, mechanism ideas, and testing to the team work.
- SDG projects are student demonstrations, prototypes, and early concepts. Heron’s Fountain is pressure-driven; the original poster’s power-generation claims were not validated. Competition recognition is attributed to the team.
- The badminton asset shows a racket and competition certificate, not an action photograph.
The VEX recordings are user-confirmed: IMG_8106.MOV → right autonomous, IMG_8128.MOV → left autonomous, IMG_8066.MOV → PID gain tuning. They are exported as metadata-filtered MP4 copies in portfolio-assets/vex/video/, with real-frame posters. Originals in Downloads are unchanged. Both autonomous programs were written by Benjamin; the robot remains team-built. Add only identified real media, with native video controls and no autoplay. Technical hardware, detection frames, plots, and posters retain full-frame views.
node --check site.js
node --check navigation.js
node --check profile-board.js
node --check creative.js
node --check robot-notebook.js
node --check intro.js
node tools/test-intro.cjs
node tools/audit.cjs
node tools/audit.cjs --httpThe HTTP audit expects port 8766. The existing audit reports four pre-existing issues in untouched 01.html (metadata, h1, description, image alt text). Refreshed pages have no audit errors. Browser review covers desktop and phone layouts, menu discovery, card links, keyboard thread highlighting, reduced motion, and video playback. See DESIGN_REVIEW.md for review status and remaining work.
robot-notebook.js adds five selectable mechanisms to the main competition robot, including the raised descoring wing, and four to the separate build. The main competition robot is first and selected by default. The separate robot built mainly by Benjamin remains the second option. Team mechanism links open relevant pages of the unchanged 439-page team engineering notebook. robot-notebook.css provides the hardware highlights and page-turn effect. notebook-data.js holds historical extracted reading text, exempt from current-profile wording checks.
The reader loads only displayed WebP pages (1600px long edge), supports desktop spreads and single phone pages, chapter links, page entry, arrow/Home/End keys, enlargement, and reduced motion. The original PDF remains available separately; no runtime dependency or external viewer is required. The three VEX clips now total about 11 MB, 77% smaller than the earlier web copies, at 30fps with preserved orientation and native controls.
team-site.css supplies the embedded site layout independently of the shared stylesheet cache. The VEX page ends with a lazy-loaded live view of the official team website at #team-site. Its full-page fallback opens in the current tab. The embedded site has its own scroll area; the VEX rail and shared Explore menu link directly to it.
visitor-log.js sends a page-path report to Benjamin’s separate Cloudflare Worker when one of the ten active pages becomes visible. The edge supplies the network IP and country; timestamps come from the server. No query strings, fragments, referrers, cookies, browser fingerprints, or persistent visitor IDs are sent. Do Not Track and Global Privacy Control skip collection. privacy.html is linked from every active page footer.
All dashboard data, assets, APIs, and CSV exports require an eight-hour signed owner session. The generated owner access key, its server-side hash, session secret, backend source, and visitor records stay outside this public repository. The collection endpoint is public for reporting but never returns visitor records. Data older than 30 days is excluded and deleted by a daily job. The backend uses Workers Free and D1 Free; hitting free quotas may interrupt collection, with no automatic upgrade or paid subscription.
fish-research.css and fish-research.js extend Research with three plots generated from the public AquariumFishAI aggregate CSVs at revision 61945bce3daf20857ef1b0d926ef3f30a753141b. Sources and interpretation are in data/fish-ai/README.md; tools/build-fish-charts.py regenerates the standalone desktop/mobile SVG and PNG figures with Matplotlib. No model inference, new predictions, private frames or labels were used. The final 60-frame test, 60-frame adaptation set, old 30-frame archive and separate 10-class lab workflow retain distinct labels.
The camera section credits Benjamin’s user-confirmed fish-image labeling for an NYCU–NMMBA identification project. The four public source-channel feeds are 頂流區 (oMlSukuxtHw), 軸孔樂園 (2GzIYf-I5kM), 搖曳大草原 (2dyGcIYbJa8), and 雀鯛公寓 (BggLWTcLixM). Channel titles and IDs were inspected on 2026-11-04. The broadcast owner is credited as 台電-南灣海域珊瑚觀測計畫. The public ocean footage does not establish model performance, and the portfolio does not run identification on these feeds.
No YouTube iframe, thumbnail, script, or preconnect is present before an explicit Load action. One youtube-nocookie.com iframe is created on request, with native controls, autoplay disabled, a referrer policy compatible with YouTube embedding, and no external player API. Changing the camera or selecting Unload removes the previous iframe. The privacy page describes the optional third-party connection. These changes are prepared locally; Benjamin must approve any GitHub push or publication separately.
The expandable training-diagnostics section also retains the repository’s original v1/v2 training-curve PNGs unchanged. Their development-validation scores are explicitly separate from the later final-test graphs.
The two user-supplied final-test confusion matrices are preserved unchanged as v1-final-confusion-matrix.png and v2-final-confusion-matrix.png, side by side in a compact two-column comparison with full-size links. Their color scales differ. The pinned evaluator uses confidence-ordered overlap matching across classes for matrices, versus class-aware matching for headline metrics; this explains why V2 has 225 diagonal matches versus 226 headline true positives. Background cells alone do not equal the headline FP/FN counts. See scripts/evaluation/compare_final_test.py at the source revision above.