Round 2 (D, E, F) · Round 1 (A, B, C)
Step 2: four ways to mix A with B
You chose A (Release Notes) as the base and asked for some of B (Drafting Sheet) mixed in. So every blend below keeps A's look: cream paper, the big serif name, the "v4.7" idea and the changelog list. Each one borrows a different piece of B, from a small touch (1) to a big one (4).
The pieces of B I can borrow: the red-pencil handwritten notes, the info box in the corner (called a "title block" on real drawings), the graph paper, and the diagram of how the site reaches you. Numbers like "31 ms" and "a3f9c1e" are still placeholders.
Blend 1: "Annotated"
A exactly as you liked it, but you've marked it up with a red pencil, like a senior engineer reviewing a printout. A circle around "v4.7" explains the joke, and short notes point at the interesting parts.
From A: everything. From B: only the red-pencil notes.
shipped 2h ago from main
served from DEL edge · 31 ms
v4.7 still shipping.
Good: it's the closest to A, and the notes make it feel hand-made and personal, not like a template. Weak: it doesn't show your DevOps side any more than A does. The notes have to be few and short, or it gets messy.
Blend 2: "Title Block"
A's page is printed as one official sheet: a thin double border around it, and the info box in the corner from B. The live build info (version, build, where it was served from) moves into that box, like the stamp on a real engineering drawing.
From A: paper, name, changelog. From B: the sheet border and the corner info box.
v4.7, still shipping.
Good: very clean and very "engineer". The border and box make A feel more structured and premium, and the live info has a proper home. Weak: the graph paper is only a thin edge, so B's personality is quiet.
Blend 3: "Changelog with Drawings"
A's changelog, but each release opens to show a small drawing of how that project works, in B's style. Recruiters read the one-line list. Engineers click a line and see the architecture, with pencil notes on the clever parts. Below, the GFG release is shown open.
From A: page, name, changelog. From B: the diagrams and pencil notes, inside each project.
served from DEL edge · 31 ms
Good: the best for engineers, who get real architecture without leaving the page, while recruiters still see a simple list. It's also easy to grow: each new project is one line plus one drawing. Weak: every project needs its own drawing made, and the first screen is a bit busier.
Blend 4: "Release Notes + Live Blueprint"
The page is split in two. Left: A, unchanged. Right: a narrow strip of B's graph paper showing how this exact page just reached you (your browser → Cloudflare in Delhi → the site files), and how it got there (git push → GitHub Actions → deploy). When the page opens, a small red dot travels down the path once. This is the "how this site is built and deployed" panel you asked for at the start, built into the first screen.
From A: the whole left side. From B: the graph paper, the diagram, a pencil note, and the corner info box.
v4.7, still shipping.
How this page reached you
Live. Measured on your visit, not a picture.
- Last deploy
- 2h ago, from main
- Visits today
- 1,284
- Pipeline
- lint → build → deploy
Good: recruiters read the left side in 5 seconds, and engineers see your DevOps skills working live on the right. It covers your "live build/deploy panel" goal in the most unique way, and nobody else's portfolio does this. Weak: the most work to build, because the numbers have to be real. On phones, the panel moves below the changelog.
What I need from you
Tell me in the terminal one of these:
- one number, for example "4", or
- a mix, for example "4, with the pencil notes from 1", or
- what to change, for example "2, but bigger graph paper".
My suggestion: Blend 4 on the homepage, plus a few pencil notes from Blend 1, and Blend 3's drawings on each project page. That way A stays the main look everywhere, and B appears exactly where it proves your DevOps skills.