Narrative architecture
Structured the site as a progression from point of view, to professional growth, to evidence.
CASE STUDY 01 · CREATIVE TECHNOLOGY
Designing a portfolio
that behaves like a map.
React · TypeScript · CSS · SVG · Interaction design · AI-assisted development
THE PROBLEM
Most portfolios show the output.
I wanted mine to reveal the thinking.
A GIS portfolio can become a gallery of finished maps without showing how the person approaches ambiguity, relationships, systems, or communication. The goal was to make the experience itself demonstrate spatial thinking before a visitor opened a single project.
THE DESIGN PRINCIPLE
The site is part
of the evidence.
Information is layered. Perspective changes meaning. Movement communicates relationships. Each interaction is expected to carry the story—not merely decorate it.
FROM ITERATION TO SYSTEM
The direction became clearer
by making it, questioning it,
and making it again.
The career section began as a decorative transition. Each iteration asked for more evidence, more personal truth, and a stronger relationship between motion and meaning.
Decorative beginning
A memorable arrow, but too much space devoted to aspiration and too little to evidence.
Résumé direction
The section gained substance, but the progression still felt static and impersonal.
The path emerges
A visual career narrative connected scientific foundations to technical ownership.
Motion gains meaning
The animated route now carries the story and hands the visitor into the work itself.
MY ROLE
Creative direction
through implementation.
Visual system
Directed the typography, palette, spatial motifs, image language, pacing, and responsive balance.
Interaction design
Defined how the spotlight, rotating skills, perspective cards, career route, and section handoffs should behave.
Technical development
Built and refined the React, TypeScript, CSS, and SVG implementation through an AI-assisted workflow.
Diagnosis + QA
Identified broken interactions, traced behavioral conflicts, evaluated code changes, and refined the experience through repeated testing.
Content strategy
Developed the copy and Work Library architecture to balance memorability with credible technical evidence.
PROBLEMS WORTH DEBUGGING
The polished version
is made from corrections.
Not every experiment was a failure. Some were necessary detours that made the final direction easier to recognize.
Hero iteration archive
- 01A spotlight interaction that fought the user’s pointer instead of yielding to it.
- 02Artwork whose crop exposed the rectangular asset instead of dissolving into the hero.
- 03Perspective cards whose motion, labels, and implied click behavior did not yet agree.
- 04A career route that initially showed nodes without visibly carrying the story between them.
- 05Independent sections that needed a visual handoff to become one continuous narrative.
MY APPROACH TO AI
Implementation accelerator.
Not a substitute for understanding.
I use an AI coding collaborator to prototype complex interactions faster. I understand how the components connect, can read and modify the React and TypeScript, diagnose ordinary errors, and maintain and extend the site. The output remains my responsibility.
AI can produce an answer without producing understanding. The evidence is whether you can explain, evaluate, correct, and apply the work.
TECHNICAL STACK
ReactTypeScriptCSSSVGResponsive designScroll-linked motionComponent architectureDebuggingAI-assisted developmentChatGPT Sites
THE OUTCOME