- Document Number
017- Subject of Record
- TULIO CUNHA / COMPUTER SYSTEMS: A PORTFOLIO THROUGH THE MACHINE
- Prepared By
- TULIO CUNHA
- Date Filed
- OCT 03, 2026
- Classification
- INTERNAL TECHNICAL MEMORANDUM
Tulio Cunha / Computer Systems: A Portfolio Through the Machine
SUBJECT BRIEF
The design and engineering of an Apple II portfolio, from Swiss typography and artifact navigation to WebGPU rendering and a CRT trailer ident.
A Portfolio Through the Machine
My portfolio puts the work inside a computing environment. An Apple II establishes the opening image. A Swiss typographic system gives the content its structure. A CRT treatment connects the photograph, the archive, and the reading surfaces.
The site is also a working example of the practice it represents. I build native applications, web products, and systems. Here, the interaction between design and engineering becomes visible: a camera position affects the composition; an offscreen texture becomes a monitor image; a scroll signal carries a visitor from a room into an archive.
The project has a governing equation: Swiss composition, computing artifact, CRT material. Every route needs a convincing relationship between those parts.
Start With a Finished Object
The Apple II provides a specific physical center. Its keyboard, monitor, case, and drives establish scale and give the camera somewhere to go. The bright photographic cyclorama keeps the machine readable as an object before the site moves into its display.
The model's authored material values are a boundary. Lighting, exposure, environment, and post-processing shape its presentation. The application preserves the material factors rather than repainting the hardware to chase a screenshot.
The opening greeting has a different job. “Hello / World.” is outlined Ruder Plakat artwork, placed at poster scale. The machine silhouette is projected into the DOM so the greeting can sit behind the hardware. That relationship makes the text part of the photograph's composition.
This gives the opening two scales: the close detail of a real computing object and the broad occupation of a printed poster.
Give the Publication Distinct Voices
The type system assigns work to each face. Ruder names the route. GT Pressura carries human argument and reading. PP Watch labels a field. Ioskeley reports its value.
A date and a classification may both be small, but they communicate different things. The date's digits carry the fact; the classification names its category. Giving them different voices makes the register readable before the visitor studies each line.
The layout uses a twelve-column desktop grid and four columns on narrow screens, with an eight-pixel baseline. Large words occupy the field while smaller registers anchor its edges. Authored Title Case preserves the shape of major headings.
Graphite, Warm Paper, and Grenadier create the main field states. Carbon supplies the recesses, while Phosphor White supplies luminous ink. Grenadier is the registration accent and, on several routes, a full graphic field.
The shared rules let the route compositions differ. A publication can have several kinds of document while remaining recognizably the same publication.
Make Motion Belong to the Material
The camera's travel toward the monitor is the main spatial transition. Once inside the archive, movement follows the objects and their browsing laws. Opening a reading surface shifts into the motion vocabulary of a document.
GSAP authors the timelines and Lenis owns the scroll runtime. A shared heartbeat orders input, signal derivation, DOM presentation, and the scene frame. That order is necessary when a piece of HTML describes geometry that the GPU will draw in the same frame.
Reduced motion has an explicit path to the settled interface. Reading prose stays stable rather than resolving letter by letter. The expressive motion belongs around the act of reading.
The persistent scene canvas avoids rebuilding the machine on ordinary route changes. A separate route-glitch overlay contributes interference above the page. Its updates still run in the shared heartbeat's presentation phase, so it reads the current transfer sample.
Render the Signal in the Right Space
The rendering stack uses Three.js, React Three Fiber, and Drei, with WebGPU-oriented node materials and TSL. The post chain includes bloom, ambient occlusion, lens depth, and CRT-related composition.
The temporal phosphor effect operates in the monitor's tube coordinates. This is a material decision expressed as a rendering decision. Persisting the entire final photograph would also trail the hardware and room when the camera moves. The phosphor field instead belongs to the raster displayed by the tube.
The surrounding document has its own shared optic. Seven layers combine light scatter, grille, sweep, grain, falloff, photographic CRT glass, and front-plate noise. The optic mounts once and changes weights by context.
The glass and noise are supplied photographic assets. Their irregularity gives the screen a physical surface that a perfectly repeated procedural pattern would describe differently.
Optimization Protects the Composition
The most useful reductions target work the reader cannot see or detail a pass does not need.
The archive caches its offscreen picture until its input signature changes. A wake counter invalidates that cache when the page returns. Repaints regenerate the mip chain so the physical monitor samples the current image at every level. The phosphor system clears stale history when returning from paused persistence.
Device profiles reduce individual effects while keeping the type and artifact archive legible. The mobile profile uses a 0.375 bloom scale, twelve GTAO samples, and disables depth of field. Both profiles currently use 2048 shadow maps and four-sample scene MSAA.
When a route specimen owns the display, an unused archive target can shrink to one pixel after a settled stretch. The heartbeat parks the main scene when opaque content covers it, subject to boot, transfer, and warming requirements.
Loading receives the same attention. The current Apple II uses meshopt geometry compression and KTX2 textures. A shared transcoder waits for GPU capability detection, limits its workers, and releases them when idle. Hashed model URLs identify immutable cache entries; a prepared Brotli sidecar handles hero transport compression.
The source contains a recorded 4096-to-2048 shadow-map comparison. Its memory arithmetic prices a reduction from 128 MiB to 32 MiB for the paired depth and color targets. That is a particular allocation saving. It does not describe the application's total memory, and the saved captures do not establish performance across every device.
The Trailer Carries the Same Identity
The portfolio film compresses the experience into a vertical sequence. Its authored description names the shader compile on the Apple II's tube, a route opening, the operator, and the sign-off. The route specifies a scored 1440 × 2560 reel at 60 fps, with a nominal running time of about twenty-three seconds.
That sequence follows the site's movement from a machine starting to a system in use and, finally, to its author. The portrait and sign-off give the technical imagery a human address.
The Film route is designed as a single screening. Grenadier surrounds a Carbon picture well, with an Electronika TA1-003 recorder as its specimen. Timecode, a reel scale, and transport status extend the site's machine vocabulary into playback.
The player prefers native HLS and dynamically imports hls.js light when needed. It separates approaching the screening from requesting playback. The manifest attaches near the reel; media loading begins on play. Its source-mode selection is compact:
export function chooseFilmSourceMode(
video: { canPlayType(type: string): string },
mediaSourceSupported: boolean,
): FilmSourceMode {
if (video.canPlayType(HLS_MIME) !== '') return 'native'
return mediaSourceSupported ? 'hls' : 'unsupported'
}This is an excerpt from src/film/film-source.ts. The implementation reads Stream manifests directly, which follows Cloudflare's guidance for custom players.
The inspected stream.ts still names a pending customer host and video UID. The playback architecture is present; live delivery of the full reel is not established by this snapshot.
A Ten-Second CRT Closing Ident
A separate closing ident develops the poster and sign-off into a ten-second sequence. Its project uses HyperFrames with plain HTML, CSS, and a paused GSAP timeline. The delivery is 1706 × 2560 at 60 fps: six hundred frames, H.264, and silent.
The typography stays inside the supplied poster images. Horizontal packets reveal the title and recover the complete poster in stages. After a readable hold, interference returns. The display collapses into a phosphor line, contracts into a point, and ends on black.
The packet clipping is expressed in the source as percentages of the original image height:
const H = 1280
const clip = (y, h) =>
`inset(${(y / H) * 100}% 0 ${((H - y - h) / H) * 100}% 0)`Each packet is an image strip with an explicit stacking order and a scheduled reveal. The image stays fixed while its displayed regions change. That makes the corruption read as repainting the signal.
The moving interference comes from the temporal difference of supplied CRT footage. Frames repeat into the 60 fps timeline without synthetic interpolation. Two image-model-generated overlays add residual tracking and final tears. The identity drawing and poster typography remain supplied artwork.
The closing sequence moves from a dark signal through recovery, renewed corruption, a line, and black. Its encoded keyframes were reviewed during production. The original media is not included in this publication.
The silent ident is also distinct from the scored portfolio reel. The two share a visual language; they have separate durations, dimensions, and delivery roles.
The Backend Supports an Editorial Site
Behind the scene is a Cloudflare Worker application and a separate SonicJS CMS Worker. The CMS uses Hono, Drizzle, and Zod, with D1 for records, R2 for media, KV for cache, and the Images binding for image processing. Its configuration also includes queues and workflows for editorial operations.
TanStack Start supplies server-rendered documents. The Cloudflare Vite plugin gives development a workerd-based environment, so the runtime bindings participate in local work. The build keeps browser-only diagnostic and decoder modules behind their dynamic imports.
The backend gives the portfolio room to grow as a publication: projects, work records, and essays can be filed through content contracts without making the rendering architecture their storage layer.
What the Project Demonstrates
The portfolio brings a specific visual premise into working architecture. Its type roles, artifact navigation, screen material, frame clock, cache rules, and film identity reinforce one another.
There is a clear limit to the evidence. Source and CPU tests can establish timing laws and configuration. The encoded ident can establish its delivered frames. Native-browser review and device measurements establish how the interactive site behaves in use. Those remain separate claims.
The project demonstrates a way of working: give a complex system a precise form, make its decisions inspectable, and preserve the idea while accounting for the cost of each frame.
Editorial References
Codrops' Jonas Reymondin portfolio article provides a useful reference for connecting a portfolio's purpose with its design and engineering. The Oscar Pico case study and Bruno Arizio case study informed the progression from concept to technical decisions and selected code excerpts. This text describes Tulio Cunha's project and does not imply a Codrops publication or endorsement.
END OF MEMORANDUM