- Specimen
- Portfolio System
- Category
- Information Architecture / Narrative Design / Frontend System
- Structure
- 6 question-led entry points + archive layer
- Content Model
- MDX-based bilingual case content
- Visual Language
- Botanical specimen as a framing system
- Role
- Strategy / Writing / Visual Direction / Frontend / Content Modeling
This Portfolio
This portfolio is itself a case study.
It is not mainly about making a personal website look more polished. It is about a more fundamental question: when one person’s work spans design, illustration, branding, content, SEO, product, and frontend, how do you create an entry point that makes the whole body of work legible?
The core work of this project was not adding more content. It was redesigning the order of understanding. I wanted a first-time visitor to begin from a question that already matters to them, then discover the shared thinking across very different projects.
That is why the homepage is structured around six questions instead of six skills. The goal is to let people start from a recognizable problem and move inward from there. This structure acknowledges that one project can speak to growth, understanding, clarity, product thinking, and systems thinking at the same time.
The visual language follows the same idea. Botanical specimen sheets attract me because they often flatten time and reveal multiple states at once: flower, fruit, leaf, structure, and seasonal variation can all coexist in one plate. That way of seeing felt close to the challenge of this portfolio. My experience is not a single line. It is a set of capabilities that appeared across different times, media, and problem spaces.
So the specimen language is not decoration. It is a method. Naming, framing, arranging, and leaving room become part of how complexity is made readable.
This portfolio is not only a container for case studies.
It is itself a case about turning a scattered context into a readable entry system.
Structure, language, and presentation are designed to reinforce the same idea.
The engineering side matters here because it directly supports the content strategy. Case content was moved out of TypeScript blocks into an MDX-based content layer. Each main case and related specimen now has its own zh.mdx and en.mdx source, while wrapper files keep only metadata such as hero, specimen labels, card copy, and loading configuration.
Shared MDX components keep the display language consistent across the site. Figure, Gallery, VideoFigure, Quote, Note, and the added WideFigure all use the same presentation rules, framed-media behavior, and specimen-style tags.
Related specimens also follow a lazy-loaded chunk strategy. The main page does not preload every extension case. A related module and its MDX content are only loaded when the visitor explicitly opens that card. This is both a performance strategy and a reading strategy.
Finally, the Specimen Cabinet acts as an archive layer. Main case pages carry the core argument, while the cabinet holds a larger volume of older works, supporting material, and side branches. That split allows the portfolio to be both clear and deep.
So the technical story here is not simply that I built the frontend. It is that I designed the relationship between content source, page structure, loading strategy, and archive depth to support one shared goal: making complex material easier to enter and understand.
