--- title: "This Portfolio: Information Architecture & MDX" description: "How a multi-disciplinary body of work became six question-led entry points, framed as botanical specimens and built on a bilingual MDX content model." url: https://dasto.app/portfolio/en/clarity/portfolio-system/ language: en alternate_zh: https://dasto.app/portfolio/clarity/portfolio-system/ author: "Daco Hsieh 謝明達" published: 2026-07-12 updated: 2026-10-28 --- # This Portfolio: Information Architecture & MDX > How a multi-disciplinary body of work became six question-led entry points, framed as botanical specimens and built on a bilingual MDX content model. - **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 ![Compass plant specimen](https://dasto.app/portfolio/assets/compass-plant-CSE1M-lp.webp) 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. ![Homepage question-to-topic information architecture](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwMCIgaGVpZ2h0PSI0MjAiIHZpZXdCb3g9IjAgMCAxODAwIDQyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTgwMCIgaGVpZ2h0PSI0MjAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iNzgwIiB5PSIzNiIgd2lkdGg9IjI0MCIgaGVpZ2h0PSI3NCIgcng9IjE4IiBmaWxsPSIjRjRFOEM4IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjkwMCIgeT0iODEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjgiIGZvbnQtd2VpZ2h0PSI3MDAiPkhvbWU8L3RleHQ+CgogICAgPGcgZm9udC1zaXplPSIxOCIgZm9udC13ZWlnaHQ9IjcwMCI+CiAgICAgIDxyZWN0IHg9IjgwIiB5PSIxNjgiIHdpZHRoPSIyMjAiIGhlaWdodD0iNzIiIHJ4PSIxNiIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+PHRleHQgeD0iMTkwIiB5PSIyMTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkdyb3d0aDwvdGV4dD4KICAgICAgPHJlY3QgeD0iMzMwIiB5PSIxNjgiIHdpZHRoPSIyMjAiIGhlaWdodD0iNzIiIHJ4PSIxNiIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+PHRleHQgeD0iNDQwIiB5PSIyMTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlByb2JsZW08L3RleHQ+CiAgICAgIDxyZWN0IHg9IjU4MCIgeT0iMTY4IiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPjx0ZXh0IHg9IjY5MCIgeT0iMjEyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5DbGFyaXR5PC90ZXh0PgogICAgICA8cmVjdCB4PSI4MzAiIHk9IjE2OCIgd2lkdGg9IjIyMCIgaGVpZ2h0PSI3MiIgcng9IjE2IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNCN0EzN0EiLz48dGV4dCB4PSI5NDAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UHJvZHVjdDwvdGV4dD4KICAgICAgPHJlY3QgeD0iMTA4MCIgeT0iMTY4IiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPjx0ZXh0IHg9IjExOTAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U3lzdGVtczwvdGV4dD4KICAgICAgPHJlY3QgeD0iMTMzMCIgeT0iMTY4IiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPjx0ZXh0IHg9IjE0NDAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW5mbHVlbmNlczwvdGV4dD4KICAgICAgPHJlY3QgeD0iMTU4MCIgeT0iMTY4IiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNEREU2REQiIHN0cm9rZT0iIzkwQTA4RSIvPjx0ZXh0IHg9IjE2NTAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+QWJvdXQ8L3RleHQ+CiAgICA8L2c+CgogICAgPGcgZm9udC1zaXplPSIxNiI+CiAgICAgIDx0ZXh0IHg9IjE5MCIgeT0iMzE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5CZXN0RnJpZW5kPC90ZXh0PgogICAgICA8dGV4dCB4PSI0NDAiIHk9IjMxNCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+aUhlYWx0aCBTRU88L3RleHQ+CiAgICAgIDx0ZXh0IHg9IjY5MCIgeT0iMzAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5FeHBsYWluIENvbXBsZXggQ2xlYXJseTwvdGV4dD4KICAgICAgPHRleHQgeD0iNjkwIiB5PSIzMjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVtb0xvZyAvIFBvcnRmb2xpbyByZWxhdGVkPC90ZXh0PgogICAgICA8dGV4dCB4PSI5NDAiIHk9IjMwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RHJpZnRHbzwvdGV4dD4KICAgICAgPHRleHQgeD0iOTQwIiB5PSIzMjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBvZW1lZXQgLyBUcmVlR28gcmVsYXRlZDwvdGV4dD4KICAgICAgPHRleHQgeD0iMTE5MCIgeT0iMzE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5PcmRlcmluZyBDb3JlPC90ZXh0PgogICAgICA8dGV4dCB4PSIxNDQwIiB5PSIzMDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkluZmx1ZW5jZXMgVGhpbmtpbmc8L3RleHQ+CiAgICAgIDx0ZXh0IHg9IjE0NDAiIHk9IjMyNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RGlmZmVyZW50IEV5ZXMgcmVsYXRlZDwvdGV4dD4KICAgICAgPHRleHQgeD0iMTY1MCIgeT0iMzE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5BYm91dCBwYWdlPC90ZXh0PgogICAgPC9nPgogIDwvZz4KICA8ZyBzdHJva2U9IiM3RjZENTIiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik05MDAgMTEwVjE1MCIvPgogICAgPHBhdGggZD0iTTE5MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNNDQwIDE1MFYxNjgiLz4KICAgIDxwYXRoIGQ9Ik02OTAgMTUwVjE2OCIvPgogICAgPHBhdGggZD0iTTk0MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTE5MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTQ0MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTY1MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTkwIDE1MEgxNjUwIi8+CiAgICA8cGF0aCBkPSJNMTkwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik00NDAgMjQwVjI3OCIvPgogICAgPHBhdGggZD0iTTY5MCAyNDBWMjc4Ii8+CiAgICA8cGF0aCBkPSJNOTQwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik0xMTkwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik0xNDQwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik0xNjUwIDI0MFYyNzgiLz4KICA8L2c+Cjwvc3ZnPgo=) *Diagram 1 — The six homepage questions are not decorative labels. They are the first reading layer of the site, mapping questions to pages and topics rather than forcing a skill-first taxonomy.* 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. ![Case schema and content flow diagram](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iNzAiIHk9IjE0NSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSIxMTAiIHJ4PSIxNiIgZmlsbD0iI0Y0RThDOCIgc3Ryb2tlPSIjQzhCMzhBIi8+CiAgICA8dGV4dCB4PSIxODUiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+Q2FzZSBXcmFwcGVyPC90ZXh0PgogICAgPHRleHQgeD0iMTg1IiB5PSIyMTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTgiPmhlcm8gLyBsYWJlbHMgLyBjYXJkIGNvcHk8L3RleHQ+CgogICAgPHJlY3QgeD0iMzgwIiB5PSI3MCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI5MCIgcng9IjE2IiBmaWxsPSIjRjhGMkU0IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjQ5NSIgeT0iMTA4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj56aC5tZHg8L3RleHQ+CiAgICA8dGV4dCB4PSI0OTUiIHk9IjEzNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+Q2hpbmVzZSBjb250ZW50IHNvdXJjZTwvdGV4dD4KCiAgICA8cmVjdCB4PSIzODAiIHk9IjI0MCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI5MCIgcng9IjE2IiBmaWxsPSIjRjhGMkU0IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjQ5NSIgeT0iMjc4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5lbi5tZHg8L3RleHQ+CiAgICA8dGV4dCB4PSI0OTUiIHk9IjMwNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+RW5nbGlzaCBjb250ZW50IHNvdXJjZTwvdGV4dD4KCiAgICA8cmVjdCB4PSI2OTAiIHk9IjE0NSIgd2lkdGg9IjI1MCIgaGVpZ2h0PSIxMTAiIHJ4PSIxNiIgZmlsbD0iI0VERTdENyIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSI4MTUiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+Q2FzZUFydGljbGVNZHg8L3RleHQ+CiAgICA8dGV4dCB4PSI4MTUiIHk9IjIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+c2hhcmVkIHJlbmRlcmVyPC90ZXh0PgoKICAgIDxyZWN0IHg9IjEwMjAiIHk9IjU1IiB3aWR0aD0iMjMwIiBoZWlnaHQ9IjcwIiByeD0iMTQiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPgogICAgPHRleHQgeD0iMTEzNSIgeT0iOTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTgiPkZpZ3VyZTwvdGV4dD4KICAgIDxyZWN0IHg9IjEwMjAiIHk9IjE0NSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI3MCIgcng9IjE0IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNCN0EzN0EiLz4KICAgIDx0ZXh0IHg9IjExMzUiIHk9IjE4OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+R2FsbGVyeTwvdGV4dD4KICAgIDxyZWN0IHg9IjEwMjAiIHk9IjIzNSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI3MCIgcng9IjE0IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNCN0EzN0EiLz4KICAgIDx0ZXh0IHg9IjExMzUiIHk9IjI3OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+VmlkZW8gLyBRdW90ZSAvIE5vdGU8L3RleHQ+CgogICAgPHJlY3QgeD0iMTMzMCIgeT0iMTQ1IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjExMCIgcng9IjE2IiBmaWxsPSIjRERFNkREIiBzdHJva2U9IiM5MEEwOEUiLz4KICAgIDx0ZXh0IHg9IjE0MzAiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+Q2FzZSBQYWdlPC90ZXh0PgogICAgPHRleHQgeD0iMTQzMCIgeT0iMjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE4Ij5yZW5kZXJlZCBvdXRwdXQ8L3RleHQ+CiAgPC9nPgogIDxnIHN0cm9rZT0iIzdGNkQ1MiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgPHBhdGggZD0iTTMwMCAxODBIMzUwIi8+CiAgICA8cGF0aCBkPSJNMzAwIDIyMEgzNTAiLz4KICAgIDxwYXRoIGQ9Ik02MTAgMTE1SDY2MFYxODBINjkwIi8+CiAgICA8cGF0aCBkPSJNNjEwIDI4NUg2NjBWMjIwSDY5MCIvPgogICAgPHBhdGggZD0iTTk0MCAyMDBIOTkwIi8+CiAgICA8cGF0aCBkPSJNMTI1MCA5MEgxMjkwVjE2NUgxMzMwIi8+CiAgICA8cGF0aCBkPSJNMTI1MCAxODBIMTMzMCIvPgogICAgPHBhdGggZD0iTTEyNTAgMjcwSDEyOTBWMjM1SDEzMzAiLz4KICA8L2c+Cjwvc3ZnPgo=) *Diagram 2 — The current standard separates wrapper metadata, MDX case content, and shared rendering components. That makes the portfolio behave more like a maintainable content system than hard-coded page copy.* 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. ![Lazy-loaded related specimen chunk strategy](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iNjAiIHk9IjE0NSIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxMTAiIHJ4PSIxNiIgZmlsbD0iI0Y0RThDOCIgc3Ryb2tlPSIjQzhCMzhBIi8+CiAgICA8dGV4dCB4PSIxODAiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+VG9waWMgUGFnZTwvdGV4dD4KICAgIDx0ZXh0IHg9IjE4MCIgeT0iMjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE4Ij5tYWluIGNhc2UgKyByZWxhdGVkIGNhcmRzPC90ZXh0PgoKICAgIDxyZWN0IHg9IjM4MCIgeT0iMTQ1IiB3aWR0aD0iMjMwIiBoZWlnaHQ9IjExMCIgcng9IjE2IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjQ5NSIgeT0iMTg1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5TdW1tYXJ5IENhcmQ8L3RleHQ+CiAgICA8dGV4dCB4PSI0OTUiIHk9IjIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+bGlnaHR3ZWlnaHQgaW5pdGlhbCByZW5kZXI8L3RleHQ+CgogICAgPHJlY3QgeD0iNjkwIiB5PSI4MCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI5MCIgcng9IjE2IiBmaWxsPSIjRURFN0Q3IiBzdHJva2U9IiNCN0EzN0EiLz4KICAgIDx0ZXh0IHg9IjgwNSIgeT0iMTE4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iNzAwIj5ObyBjbGljazwvdGV4dD4KICAgIDx0ZXh0IHg9IjgwNSIgeT0iMTQ2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE2Ij5rZWVwIHBheWxvYWQgc21hbGw8L3RleHQ+CgogICAgPHJlY3QgeD0iNjkwIiB5PSIyMzAiIHdpZHRoPSIyMzAiIGhlaWdodD0iOTAiIHJ4PSIxNiIgZmlsbD0iI0RERTZERCIgc3Ryb2tlPSIjOTBBMDhFIi8+CiAgICA8dGV4dCB4PSI4MDUiIHk9IjI2OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyMCIgZm9udC13ZWlnaHQ9IjcwMCI+VXNlciBjbGlja3M8L3RleHQ+CiAgICA8dGV4dCB4PSI4MDUiIHk9IjI5NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+aW50ZW50IHRvIGdvIGRlZXBlcjwvdGV4dD4KCiAgICA8cmVjdCB4PSIxMDAwIiB5PSIyMzAiIHdpZHRoPSIyNDAiIGhlaWdodD0iOTAiIHJ4PSIxNiIgZmlsbD0iI0Y4RjJFNCIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSIxMTIwIiB5PSIyNjgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI3MDAiPmR5bmFtaWMgaW1wb3J0KCk8L3RleHQ+CiAgICA8dGV4dCB4PSIxMTIwIiB5PSIyOTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTYiPndyYXBwZXIgKyBtZHhDb250ZW50IG1hcDwvdGV4dD4KCiAgICA8cmVjdCB4PSIxMzIwIiB5PSIyMzAiIHdpZHRoPSIyMjAiIGhlaWdodD0iOTAiIHJ4PSIxNiIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSIxNDMwIiB5PSIyNjgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI3MDAiPkV4cGFuZCBpbmxpbmU8L3RleHQ+CiAgICA8dGV4dCB4PSIxNDMwIiB5PSIyOTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTYiPmxvYWQgcmVsYXRlZCBjaHVuayBvbmx5IG5vdzwvdGV4dD4KICA8L2c+CiAgPGcgc3Ryb2tlPSIjN0Y2RDUyIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMzAwIDIwMEgzNTAiLz4KICAgIDxwYXRoIGQ9Ik02MTAgMjAwSDY2MCIvPgogICAgPHBhdGggZD0iTTgwNSAxNzBWMjEwIi8+CiAgICA8cGF0aCBkPSJNOTIwIDI3NUg5NzAiLz4KICAgIDxwYXRoIGQ9Ik0xMjQwIDI3NUgxMjkwIi8+CiAgPC9nPgo8L3N2Zz4K) *Diagram 3 — Related specimens stay lightweight until a visitor asks for more. Expansion triggers a dynamic import so extended material appears only when it is relevant.* 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. ![Specimen Cabinet archive layer relationship diagram](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iOTAiIHk9Ijg0IiB3aWR0aD0iMjkwIiBoZWlnaHQ9IjEwMCIgcng9IjE4IiBmaWxsPSIjRjRFOEM4IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjIzNSIgeT0iMTI2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIj5QcmltYXJ5IE5hcnJhdGl2ZSBMYXllcjwvdGV4dD4KICAgIDx0ZXh0IHg9IjIzNSIgeT0iMTU2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE4Ij5tYWluIGNhc2UgcGFnZXM8L3RleHQ+CgogICAgPHJlY3QgeD0iOTAiIHk9IjIyMiIgd2lkdGg9IjI5MCIgaGVpZ2h0PSIxMDAiIHJ4PSIxOCIgZmlsbD0iI0Y4RjJFNCIgc3Ryb2tlPSIjQzhCMzhBIi8+CiAgICA8dGV4dCB4PSIyMzUiIHk9IjI2NCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+UmVsYXRlZCBTcGVjaW1lbnM8L3RleHQ+CiAgICA8dGV4dCB4PSIyMzUiIHk9IjI5NCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+YWRqYWNlbnQgYnJhbmNoZXM8L3RleHQ+CgogICAgPHJlY3QgeD0iNTIwIiB5PSIxNDYiIHdpZHRoPSIzMDAiIGhlaWdodD0iMTE2IiByeD0iMTgiIGZpbGw9IiNEREU2REQiIHN0cm9rZT0iIzkwQTA4RSIvPgogICAgPHRleHQgeD0iNjcwIiB5PSIxOTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjYiIGZvbnQtd2VpZ2h0PSI3MDAiPlNwZWNpbWVuIENhYmluZXQ8L3RleHQ+CiAgICA8dGV4dCB4PSI2NzAiIHk9IjIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+YXJjaGl2ZSBsYXllcjwvdGV4dD4KCiAgICA8cmVjdCB4PSI5NjAiIHk9IjY4IiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjkwIiByeD0iMTgiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPgogICAgPHRleHQgeD0iMTA5MCIgeT0iMTA4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5MYXJnZSB2b2x1bWUgd29ya3M8L3RleHQ+CiAgICA8dGV4dCB4PSIxMDkwIiB5PSIxMzYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTYiPmhpc3RvcmljYWwgbWF0ZXJpYWw8L3RleHQ+CgogICAgPHJlY3QgeD0iOTYwIiB5PSIxNzYiIHdpZHRoPSIyNjAiIGhlaWdodD0iOTAiIHJ4PSIxOCIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSIxMDkwIiB5PSIyMTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtd2VpZ2h0PSI3MDAiPk1ldGFkYXRhIGxheWVyPC90ZXh0PgogICAgPHRleHQgeD0iMTA5MCIgeT0iMjQ0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE2Ij5saW5rcyAvIHZpZGVvcyAvIG5vdGVzPC90ZXh0PgoKICAgIDxyZWN0IHg9Ijk2MCIgeT0iMjg0IiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjkwIiByeD0iMTgiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPgogICAgPHRleHQgeD0iMTA5MCIgeT0iMzI0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5FeHBsb3JhdGlvbiBsYXllcjwvdGV4dD4KICAgIDx0ZXh0IHg9IjEwOTAiIHk9IjM1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+c3VwcGxlbWVudCB3aXRob3V0IG92ZXJsb2FkPC90ZXh0PgogIDwvZz4KICA8ZyBzdHJva2U9IiM3RjZENTIiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik0zODAgMTM0SDQ1MEM0ODUgMTM0IDQ4NSAxOTAgNTIwIDE5MCIvPgogICAgPHBhdGggZD0iTTM4MCAyNzJINDUwQzQ4NSAyNzIgNDg1IDIxOCA1MjAgMjE4Ii8+CiAgICA8cGF0aCBkPSJNODIwIDIwNEg5MDAiLz4KICAgIDxwYXRoIGQ9Ik0xMjIwIDExM0gxMjkwIi8+CiAgICA8cGF0aCBkPSJNMTIyMCAyMjFIMTI5MCIvPgogICAgPHBhdGggZD0iTTEyMjAgMzI5SDEyOTAiLz4KICA8L2c+Cjwvc3ZnPgo=) *Diagram 4 — The main narrative layer and the archive layer serve different jobs: one builds understanding, the other preserves density and exploration.* 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.** ## Part of - [How I Make Complex Things Clear: iHealth](https://dasto.app/portfolio/en/clarity/) --- Author: Daco Hsieh 謝明達 · Contact: enodaco@gmail.com · Portfolio home: https://dasto.app/portfolio/en/ · 中文版: https://dasto.app/portfolio/clarity/portfolio-system/