Engineering Portfolio Website — Julian Zachar-Fink

Brief

A portfolio has one job: let someone decide, quickly, whether the person behind it can do the work. That argues for a site that loads instantly, reads cleanly on a phone, and stays easy enough to update that new projects actually get added.

The constraint I set was no framework and no build step. A static portfolio does not need a bundler, and anything requiring a toolchain is something that can break between now and the next time I want to add a project.

Design

The visual language is borrowed from engineering drawings, because that is the work: a faint CAD grid instead of decoration, a title block in place of a hero banner, registration marks on the corners of panels, and monospaced type carrying every piece of data — semester numbers, dates, part IDs, tools.

One accent colour does all the interactive work. Corners are near-square. Every project card is laid out as a spec sheet rather than a paragraph, so it can be scanned rather than read.

Design tokens

Colour, type scale, spacing, radii and motion live in a single variables.css token file. No component stylesheet hardcodes a value, so a change to the system propagates everywhere at once.

Build

Semantic HTML. Landmarks, headings in order, and a skip link on every page.
Fluid typography. Every size interpolates with the viewport via clamp(), so there is no size that only works at one width.
Motion, gated. Every animation sits behind prefers-reduced-motion, including smooth scrolling.
Vanilla JS. One file: scroll reveal via IntersectionObserver, the mobile menu, image fallbacks and form state. No dependencies.
Parallel CSS. Stylesheets load as separate <link> tags rather than a chain of @imports, so nothing waits on anything else.
Continuous deployment. A push to main ships to production in about a minute.

Outcome

A site with no dependencies to update, no build to break, and a design system that makes adding a project a matter of copying one card.