# dzanan.net — "Dark & technical" redesign

Date: 2026-09-06 · Status: approved by Amar (direction C of three mockups)

## Goal

Replace the current warm/editorial design of dzanan.net with the "Dark & technical"
direction: near-black surfaces with a faint grid, monospace labels, a terminal-style
profile panel, and a single glowing green accent. The site serves both employers and
consulting clients equally. The CV becomes a PDF that Amar provides; the site links to it.

Non-goals: new content for the case studies (text stays), a light theme, a CMS, new routes.

## Scope

Kept: Angular 22 app structure, SSR + prerendering, `SeoService`, `PageShellComponent`
(restyled), landing page, four `/work/*` case-study pages, `SystemDiagramComponent`
(recoloured), not-found page, Tailwind v4 install, Docker deploy.

Removed: `CvPageComponent` + its spec, `ThemeService`, `ThemeToggleComponent`, the theme
bootstrap script in `src/index.html`, the `cv` client route, the `cv` prerender route.

Added: `public/cv.pdf` (placeholder until Amar supplies the file), a 301 from `/cv` to
`/cv.pdf` in `src/server.ts`, self-hosted fonts.

## Visual system

Defined as CSS custom properties on `:root` in `src/styles.scss`; no `.dark` variant.

| token | value | use |
|---|---|---|
| `--bg` | `#0D1015` | page background |
| `--panel` | `#12161D` | cards, list panel, code panel |
| `--panel-2` | `#0F1318` | panel headers / inset |
| `--line` | `#232A33` | borders, dividers |
| `--line-strong` | `#2A323D` | tag borders, button outline |
| `--text` | `#E6EAF0` | primary text |
| `--muted` | `#8B95A5` | secondary text |
| `--dim` | `#5C6672` | tertiary text, comments |
| `--accent` | `#8BE04A` | labels, links, primary button, status dot |
| `--accent-glow` | `rgba(139,224,74,.22)` | button and dot glow |
| `--code-key` / `--code-str` / `--code-num` | `#7AA2F7` / `#C3E88D` / `#F78C6C` | profile.json panel |

Grid: `linear-gradient` lines at 2.8% white, 64px cell, fixed to the page background.

Type: JetBrains Mono (labels, nav, meta, code, buttons) and IBM Plex Sans (headings and
body), self-hosted via `@fontsource-variable/jetbrains-mono` and `@fontsource/ibm-plex-sans`
(weights 400/500/600) imported in `styles.scss`. Fallbacks: Consolas/Menlo/monospace and
"Segoe UI"/system-ui/sans-serif. Base body 16px; headline scale `clamp(2.4rem, 5vw, 3.9rem)`
for h1, `clamp(1.75rem, 3vw, 2.1rem)` for h2, letter-spacing -0.03em/-0.025em, weight 600.

Labels (`.label`): mono, 12px, uppercase, 0.08em tracking, accent colour, prefixed with
`// ` in markup (e.g. `// selected work`). Tags (`.tag`): mono 12px, 24px tall, 1px
`--line-strong` border, 4px radius. Panels (`.panel`): `--panel` fill, 1px `--line`
border, 10px radius. Buttons: 46px tall, 6px radius, mono 14px; `.btn-accent` accent fill
with dark text and glow, `.btn-line` outlined.

Container: `.shell` = `min(1160px, 100% - 40px)` centred. Section spacing 96px desktop,
64px below 720px.

## Pages

### Shell (header, footer, mobile menu)

Header: sticky, `--bg` at 92% with blur, bottom border. Left: mono wordmark `~/` (accent)
+ `dzanan.net` (600). Right (desktop): mono nav `work · experience · contact · cv.pdf`,
then a divider and the status `● available` (accent dot with glow). `cv.pdf` is an `<a
href="/cv.pdf">` with a download icon, opens in a new tab. Below 720px the nav collapses to
the existing signal-driven menu button; the status stays visible.

Navigation config: `[{work,'/',#work},{experience,'/',#experience},{contact,'/',#contact}]`
plus the CV link rendered separately as a plain anchor (not a `SectionNavItem`).

Footer: mono 12px, `Amar Džanan · Sarajevo, Bosnia and Herzegovina` left; email and
LinkedIn right.

### Landing (`/`)

1. Hero — two columns (1.05fr / .95fr, 64px gap), stacks below 1024px.
   Left: label `Senior full-stack engineer — .NET · Angular · MCP`; h1 "Complex systems,
   <accent>understood before changed.</accent>"; lead paragraph "I modernize enterprise
   software and connect it to AI through narrow, validated, verified interfaces — the kind
   you can run in production and sleep at night."; buttons `amar@dzanan.net` (accent,
   mailto) and `cv.pdf` (outline, download).
   Right: `profile.json` terminal panel — title bar with three dots and file name, then a
   `$ whoami --json` line and a JSON object: name, role, stack `[".NET","Angular",
   "TypeScript"]`, focus `["modernization","safe AI integration"]`, since `2018`, location
   `"Sarajevo · CET"`, open_to `["senior roles","consulting"]`, closing prompt with a
   blinking cursor. Rendered from a small typed data structure in the component so it can
   change without touching markup.
2. `// selected work` (`#work`) — heading "Production systems, anonymized." and a right-aligned
   mono count `4 case studies`. One `.panel` containing four rows (`data-testid="project-row"`,
   `routerLink` to `/work/<slug>`): index (accent on the featured first row), title + one-line
   summary (a new short `tagline` field on `PortfolioProject`, ~60 chars), up to four stack
   tags (first four of `stack`), arrow. Hover: row background `--panel-2`, arrow turns accent.
   Below 720px: grid collapses to index+title, tagline, tags stacked.
3. `// experience` (`#experience`) — grid 340px / 1fr. Left: 96px square grayscale portrait
   (`NgOptimizedImage`, 8px radius, 1px border), label, h2 "Eight years, one product at a
   time.", about paragraph, LinkedIn link. Right: four role rows (period mono `2025 — now`,
   title + company, focus sentence), 1px dividers.
4. `// capabilities` — three equal `.panel` cards: `01 System modernization`, `02 Full-stack
   product delivery`, `03 Safe AI integration`, each with the existing detail text.
   Single column below 720px.
5. Contact (`#contact`) — a `.panel` with a 1px accent-tinted border and inner glow:
   label `// contact`, h2 "Need a senior engineer who can understand the system before
   changing it?", `.btn-accent` mailto button, mono `Sarajevo · CET / CEST`.

Structured data (schema.org Person) unchanged.

### Case study (`/work/:slug`)

Breadcrumb as a path: `~/work/` (dim) + slug (text), mono. Header: label
`<category> · <period>`, h1 title, lead summary, then a meta strip in a `.panel`: `role`,
`period`, stack tags. Sections keep content; labels become `// 01 context`, `// 02 delivery`,
`// 03 architecture`, `// 04 result`; contributions as a numbered list with mono indices;
decisions as a 2×2 `.panel` grid (single column < 720px); technology as a tag row.
`SystemDiagramComponent` stays, recoloured: node fill `--panel`, stroke `--line-strong`,
accent node stroke/text `--accent`, lines `--line-strong`, notes `--dim`, mono text.
Prev/next as two `.panel` links. Contact block reused. The "View full CV" link points to
`/cv.pdf`.

### Not found

Terminal panel: `$ open <path>` then `command not found: <path>` in `--code-num`, a short
sentence, and a `.btn-line` back to `/`. Server still returns 404.

## Behaviour

- Motion: hero children fade-up (opacity 0→1, translateY 12px→0, 480ms, 80ms stagger) once
  on load; cursor blink 1s step; row hover transitions 150ms. All wrapped in
  `@media (prefers-reduced-motion: no-preference)`.
- Smooth anchor scrolling with `scroll-padding-top` for the sticky header (kept).
- Focus rings: 2px accent outline, 3px offset.
- `<meta name="theme-color">` → `#0D1015`; `color-scheme: dark`.

## Server

`src/server.ts`: before the Angular handler, `app.get('/cv', (_, res) => res.redirect(301,
'/cv.pdf'))`. `public/cv.pdf` is served by the existing static middleware. Until Amar
supplies the file, a one-page placeholder PDF saying "CV coming soon — amar@dzanan.net" is
committed so the link never 404s. `public/sitemap.xml` drops `/cv`.

## Files

Modified: `styles.scss`, `index.html`, `server.ts`, `app.ts`, `app.routes.ts`,
`app.routes.server.ts`, `app.routes.spec.ts`, `page-shell.component.ts`,
`navigation.config.ts`, `landing-page.component.ts` + spec, `portfolio-page.component.ts`
+ spec, `system-diagram.component.ts`, `not-found-page.component.ts`,
`portfolio-project.model.ts`, `portfolio-projects.data.ts`, `public/sitemap.xml`,
`package.json`/lock (fontsource packages).

Removed: `features/cv/cv-page.component.ts`, `features/cv/cv-page.component.spec.ts`,
`core/services/theme.service.ts`, `shared/ui/theme-toggle/theme-toggle.component.ts`.

Added: `public/cv.pdf` (placeholder), this spec, the implementation plan.

## Testing

- Unit: route spec lists routes without `cv`; landing spec asserts the new h1, four project
  rows, `a[href="/cv.pdf"]`, mailto and LinkedIn links, the four role titles; portfolio spec
  unchanged in intent; new not-found assertion optional. Run with headless Chromium.
- Build: `ng build` (production, SSR, prerender of `/` and the four work pages) with zero
  errors and within budgets (component styles are inline SCSS; keep under 8kB each).
- Visual: serve `dist` and screenshot `/`, one case study and `/404` at 1440px and 390px;
  fix wrapping, overflow and contrast issues found.
- Smoke: `curl -I /cv` → 301 to `/cv.pdf`; `/cv.pdf` → 200.

## Delivery

Work happens in the cloud copy of the repo; changed and new files are written back to the
`dzanan.net` folder on Amar's machine, removed files are moved into `_to_delete/`. Amar runs
`npm install` locally afterwards (new font packages) and drops the real PDF over
`public/cv.pdf`.