Burak Cebe

This site

A portfolio built like a drawing set.

Drawing
DWG 04
Revision
B
Year
2026
Role
Design and front-end
Status
In review
Type
Web, Interaction, Typography
Tools
Next.js, React, TypeScript, Motion, cmdk, Radix
Screenshot of this site's home page at 1440 pixels: the name BURAK CEBE set very large on warm paper, with a thin blue schematic bus running between the two words.
Fig. 04.1Home, 1440 px.

A light, typographic site where the interface carries the engineering: a schematic that reacts to the pointer, a routed system map, a board you can take apart by layer, a command palette and an inspect mode.

§01Brief

A personal site that reads as engineering and design at once, without dressing up as a CAD program or a terminal. The visitor should leave thinking that this person builds things.

§02Visual system

  1. T

    Type

    Instrument Sans, condensed and heavy for the name, at full width for reading. Geist Mono only for drawing numbers and coordinates, never for sentences.

  2. C

    Colour

    Warm paper, graphite ink, one electrical blue that only appears where something is live: traces, nodes, focus, the active link.

  3. G

    Grid

    Twelve columns as infrastructure, broken on purpose: a detail crop crosses the margin, a caption hangs off a different column than its image. Press I to see it.

  4. M

    Motion

    Different behaviour for different content. Names clip in once, traces draw, image masks open sideways, and captions and body text never move.

Screenshot of the home page on a 390 pixel wide phone: the name stacked as a poster.
Fig. 04.2Home, 390 px. The hero recomposes as a poster rather than shrinking.
Screenshot of the system map with the hardware node selected and its connections highlighted in blue.
Fig. 04.3System map with Hardware selected.

§03Implementation

Framework
Next.js App Router, every route statically generated
Client code
Small islands only: schematic, system map, board viewer, reveals, command palette, inspect mode
Board viewer
The KiCad file parsed to JSON at build time and drawn as SVG, one path per trace width
Pointer effects
Written to SVG attributes inside requestAnimationFrame; no React re-render per mouse move
Accessibility
Skip link, visible focus, keyboard-complete palette, reduced-motion renders the final state
Next · DWG 01Young Man’s Services →