An abstract beginning
A copper thread connected the chapters before the equipment took center stage. The spacious type and continuous visual connection survived; the abstract imagery did not explain enough of the actual work.
Personal portfolio / Design & development
A process, made visible.Building this portfolio.
An entire career. One connected story.
Turning hands-on experience and a longstanding software practice into a connected, explorable story.
Enter the live experienceReal studies. Every decision connected.Explore the evolution
01 / The brief
More than a list of roles.
My experience crosses industrial engine and generator assembly, refrigeration diagnosis and repair, material handling, and critical environments. Alongside that work, I have built software, websites, games and apps since 2010.
The portfolio needed to make that relationship understandable. A visitor could follow the connections through a visual journey; a recruiter could go straight to experience, credentials or a focused resume. Neither path should get in the other’s way.
01 Represent the real work.
02 Make the connections visible.
03 Let people set the pace.
02 / The visual evolution
The path wasn’t a straight line.
Each study answered a different question. These are actual captures from the development archive, including ideas that were replaced. Select a stage to see what changed—and what carried forward.
Open original study (new tab)
Finding the visual weight
A more expressive engine-led direction made the physical work impossible to miss. This was an art-direction study: its imagery established scale and atmosphere, not an interactive engineering model.
Making the object tangible
Interactive equipment brought the visitor closer to the work. The portable generator was the wrong reference for large industrial power modules, but testing its controls helped shape the next transition.
Finding the connection
The movement from generator to circuit board established the connected camera journey. That continuity became the design to protect while replacing the undersized generator and adding the missing career substance.
Bringing the whole story together
Industrial power, electronics, refrigeration, material handling, critical environments and independent development now share one journey. From here, the work became refinement: clearer content, better materials and more dependable behavior.
03 / Refining the selected direction
Keep the connection. Improve everything around it.
Once the camera journey worked, the design stopped starting over. The next passes focused on the details that make the experience feel coherent: accurate subjects, readable text, convincing surfaces and motion that remains under the visitor’s control.
01
A journey with room to read.
Chapter copy and camera movement share the same progression, with settled intervals for reading. Play, pause, chapter selection and detail inspection use one controller. A wheel gesture, touch or hidden tab interrupts playback instead of fighting the visitor.
The code and binary strand stays in the background before converging at the software chapter. It represents a self-educated practice that ran alongside employment—not a late career change into software.
02
The details have to be right.
A portable generator became an industrial power module. The refrigerator’s condenser and controls moved to the top, and its front panel opens up and behind them. Forklift experience includes Hoshizaki as well as later material-handling roles.
Equipment represents the kind of work, rather than recreating an employer’s facility. Contract relationships stay explicit, and public copy avoids exact server-rack types and operational details.
03
Quality is more than polygon count.
Surface normals, paint, metal, rubber and lighting were reviewed at the camera’s actual distance. Softer paint highlights and rougher dark coatings reduced the plastic look. Reading gradients were pulled away from the equipment so they no longer washed out its detail.
The V16 generator is original illustrative geometry with documented CC0 material sources. Its moving components, connected wiring and surface finishes were refined for this camera journey.
Asset sources & credits ↗04 / Making it dependable
The screen changes. The story stays whole.
Phone landscape exposed problems that desktop previews had hidden: cropped equipment, overflowing copy and too little reading space. Composition now responds to the usable viewport, measured text and interface controls. A smaller screen gets its own framing, not a shrunken desktop scene.
A complete experience, even without camera travel.
Reduced-motion and graphics-unavailable views use composed stills and retain the full story. Direct resume visits do not load the 3D runtime. Short screens can scroll the chapter’s text without losing the equipment view.
Optimize what costs. Protect what matters.
Texture derivatives are used only where they reduce transfer size. Original normal maps and geometry stay intact. Loading prepares the opening first, stages later equipment, and avoids repeatedly reallocating rendering buffers during a gesture.
16.3%
Smaller desktop texture transfer set
Measured against the preceding texture set; not the total page size.17.2ms
95th-percentile frame interval
2,039 intervals in a simulated phone journey on workstation Chromium. Not a physical-phone guarantee.What was checked
Eight viewport sizes from 320 × 568 to 1920 × 1080; portrait and landscape layouts; forward, reverse and fast scrolling; all seven playback chapters; interruption and inspection; reduced motion; missing assets and graphics-context recovery.
Content checks cover career relationships and dates, credential images and IDs, four resume focuses in Designed and ATS formats, and text-download parity. Browser measurements are recorded separately from physical-device testing; performance varies with hardware, browser and network.
05 / A portfolio that can keep growing
One record. Every way of reading it.
The finished site separates content from the visual experience. An owner-only editor supports copy, images, credentials, appearance settings and shared career records. Changes to experience flow into the timeline and all four resume focuses.
Drafts remain private until publication. Preview, publish and restore work with complete versions, so maintaining the portfolio does not mean rebuilding the design—or losing the previous release.
Shared experienceRoles · dates · responsibilities
PortfolioJourney + career timeline
Four resume focusesDesigned + ATS formats
The result
The work is the story. The website makes the connection.
A portfolio that gives the physical work its scale, the software practice its continuity, and the evidence a clear place to live. The studies remain available as a record of how it got here.