887 lines
45 KiB
Markdown
887 lines
45 KiB
Markdown
# Dark & Technical Redesign Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Rebuild the dzanan.net UI in the approved "Dark & technical" direction, drop the CV page in favour of a PDF link, and keep SSR, SEO and tests green.
|
||
|
||
**Architecture:** Angular 22 standalone components with inline templates; all visual styling lives in one global `src/styles.scss` driven by CSS custom properties (the codebase's existing pattern). Pages compose the shared `PageShellComponent`. Content data stays in `portfolio-projects.data.ts`. Express (`src/server.ts`) serves static assets and adds one redirect.
|
||
|
||
**Tech Stack:** Angular 22.1, @angular/ssr + Express 5, SCSS, Tailwind v4 (installed, unused by handwritten styles), Karma/Jasmine, self-hosted fonts via `@fontsource-variable/jetbrains-mono` and `@fontsource/ibm-plex-sans`.
|
||
|
||
**Spec:** `docs/superpowers/specs/2026-09-06-dark-technical-redesign-design.md`
|
||
|
||
## Global Constraints
|
||
|
||
- Angular 22.1.x, Node ≥ 22.22.3 (24.15 in the cloud workspace); use `ng` via `npx`.
|
||
- No light theme; no `.dark` selectors; `color-scheme: dark`.
|
||
- Tokens exactly as the spec table: `--bg #0D1015`, `--panel #12161D`, `--panel-2 #0F1318`, `--line #232A33`, `--line-strong #2A323D`, `--text #E6EAF0`, `--muted #8B95A5`, `--dim #5C6672`, `--accent #8BE04A`, `--accent-glow rgba(139,224,74,.22)`, `--code-key #7AA2F7`, `--code-str #C3E88D`, `--code-num #F78C6C`.
|
||
- Fonts self-hosted (no Google Fonts requests). Mono = JetBrains Mono; sans = IBM Plex Sans.
|
||
- Labels are prefixed `// ` in markup and use `.label`.
|
||
- Case-study text content unchanged; `PORTFOLIO_PROJECTS` must not contain "Unija" (existing test).
|
||
- Every task ends with `npx ng build` still succeeding or tests passing as stated.
|
||
- Commit after each task with the trailer:
|
||
`Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>` and
|
||
`Claude-Session: https://claude.ai/code/session_01LoRUjpFxfDpRFGEUrtEzP4`.
|
||
- Unit tests run headless: `CHROME_BIN=<chromium path> npx ng test --watch=false --browsers=ChromeHeadlessNoSandbox` after Task 1 adds the launcher.
|
||
|
||
---
|
||
|
||
### Task 1: Fonts, tokens and base stylesheet
|
||
|
||
**Files:**
|
||
- Modify: `package.json` (devDependencies unaffected; dependencies gain two font packages)
|
||
- Modify: `angular.json` (`styles` arrays in `build.options`, and `test.options`)
|
||
- Modify: `src/index.html`
|
||
- Rewrite: `src/styles.scss`
|
||
- Modify: `karma.conf` — none exists; add `ChromeHeadlessNoSandbox` via `angular.json` test `browsers`? Karma builder accepts `--browsers` and a custom launcher needs a config file. Create `karma.conf.cjs` and point `test.options.karmaConfig` at it.
|
||
|
||
**Interfaces:**
|
||
- Produces: global classes used by every later task — `.shell`, `.mono`, `.label`, `.panel`, `.tag`, `.tag-row`, `.btn`, `.btn-accent`, `.btn-line`, `.section`, `.section-head`, `.eyebrow-row`, `.status-dot`, `.icon`, plus component-specific classes named in Tasks 3–7 (they are all defined here so the stylesheet is written once).
|
||
|
||
- [x] **Step 1: Install fonts**
|
||
|
||
```bash
|
||
npm install @fontsource-variable/jetbrains-mono@5.3.0 @fontsource/ibm-plex-sans@5.3.0 --no-audit --no-fund
|
||
```
|
||
|
||
- [x] **Step 2: Register font CSS and karma config in `angular.json`**
|
||
|
||
In `projects.dzanan.net.architect.build.options.styles` replace the array with:
|
||
|
||
```json
|
||
"styles": [
|
||
"node_modules/@fontsource-variable/jetbrains-mono/index.css",
|
||
"node_modules/@fontsource/ibm-plex-sans/400.css",
|
||
"node_modules/@fontsource/ibm-plex-sans/500.css",
|
||
"node_modules/@fontsource/ibm-plex-sans/600.css",
|
||
"src/styles.scss"
|
||
]
|
||
```
|
||
|
||
Do the same in `architect.test.options.styles`, and add `"karmaConfig": "karma.conf.cjs"` to `architect.test.options`.
|
||
|
||
Create `karma.conf.cjs`:
|
||
|
||
```js
|
||
module.exports = function (config) {
|
||
config.set({
|
||
basePath: '',
|
||
frameworks: ['jasmine', '@angular/build:unit-test'.length ? 'jasmine' : 'jasmine'],
|
||
plugins: [require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage')],
|
||
client: { jasmine: {}, clearContext: false },
|
||
reporters: ['progress'],
|
||
browsers: ['ChromeHeadlessNoSandbox'],
|
||
customLaunchers: { ChromeHeadlessNoSandbox: { base: 'ChromeHeadless', flags: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'] } },
|
||
restartOnFileChange: false
|
||
});
|
||
};
|
||
```
|
||
|
||
(The `frameworks` line is just `['jasmine']`; keep it simple: `frameworks: ['jasmine']`.)
|
||
|
||
- [x] **Step 3: Update `src/index.html`**
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Amar Džanan — Senior Software Engineer & AI Integration</title>
|
||
<base href="/">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Senior full-stack engineer modernizing complex enterprise software and connecting it safely to AI.">
|
||
<meta name="theme-color" content="#0D1015">
|
||
<link rel="canonical" href="https://dzanan.net/">
|
||
<link rel="icon" type="image/x-icon" href="duck.png">
|
||
</head>
|
||
<body>
|
||
<app-root></app-root>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
- [x] **Step 4: Rewrite `src/styles.scss`**
|
||
|
||
```scss
|
||
@use 'tailwindcss';
|
||
|
||
:root {
|
||
color-scheme: dark;
|
||
--bg: #0D1015;
|
||
--panel: #12161D;
|
||
--panel-2: #0F1318;
|
||
--line: #232A33;
|
||
--line-strong: #2A323D;
|
||
--text: #E6EAF0;
|
||
--muted: #8B95A5;
|
||
--dim: #5C6672;
|
||
--accent: #8BE04A;
|
||
--accent-glow: rgba(139, 224, 74, .22);
|
||
--code-key: #7AA2F7;
|
||
--code-str: #C3E88D;
|
||
--code-num: #F78C6C;
|
||
--mono: "JetBrains Mono Variable", "JetBrains Mono", Consolas, Menlo, monospace;
|
||
--sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
|
||
--radius: 10px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--sans);
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
a:hover { color: var(--accent); }
|
||
button, a { -webkit-tap-highlight-color: transparent; }
|
||
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
|
||
::selection { background: var(--accent); color: var(--bg); }
|
||
h1, h2, h3, h4, p { margin: 0; }
|
||
h1, h2 { font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
|
||
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.04; }
|
||
h2 { font-size: clamp(1.75rem, 3vw, 2.1rem); line-height: 1.1; letter-spacing: -.025em; }
|
||
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
|
||
h4 { font-size: 1rem; font-weight: 500; }
|
||
|
||
/* ---- primitives ---- */
|
||
.site-frame {
|
||
min-height: 100vh;
|
||
background-color: var(--bg);
|
||
background-image:
|
||
linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
|
||
background-size: 64px 64px;
|
||
}
|
||
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
|
||
.mono { font-family: var(--mono); }
|
||
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
|
||
.dim { color: var(--dim); }
|
||
.muted { color: var(--muted); }
|
||
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
|
||
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); font: 400 12px/1 var(--mono); white-space: nowrap; }
|
||
.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 6px; font: 500 14px/1 var(--mono); white-space: nowrap; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease; }
|
||
.btn-accent { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 1px rgba(139, 224, 74, .4), 0 0 32px var(--accent-glow); }
|
||
.btn-accent:hover { color: var(--bg); background: #A9F26F; box-shadow: 0 0 0 1px rgba(139, 224, 74, .6), 0 0 40px var(--accent-glow); }
|
||
.btn-line { border: 1px solid var(--line-strong); color: var(--text); background: rgba(255, 255, 255, .02); }
|
||
.btn-line:hover { color: var(--text); border-color: var(--accent); background: rgba(139, 224, 74, .06); }
|
||
.icon { width: 14px; height: 14px; flex: none; }
|
||
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
|
||
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--accent); color: var(--bg); padding: .7rem 1rem; font-family: var(--mono); font-size: 13px; border-radius: 6px; }
|
||
.skip-link:focus { top: 1rem; }
|
||
|
||
.section { padding-block: 96px; }
|
||
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
|
||
.section-head .label { display: block; margin-bottom: 10px; }
|
||
.section-head .count { font: 400 12px/1 var(--mono); color: var(--dim); }
|
||
|
||
/* ---- header / footer ---- */
|
||
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(13, 16, 21, .92); backdrop-filter: blur(12px); }
|
||
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
|
||
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--mono); }
|
||
.wordmark:hover { color: var(--text); }
|
||
.wordmark-tilde { color: var(--accent); font-weight: 400; }
|
||
.desktop-nav { display: flex; align-items: center; gap: 28px; }
|
||
.desktop-nav nav { display: flex; gap: 28px; }
|
||
.desktop-nav nav a, .mobile-nav nav a, .nav-cv { color: var(--muted); font: 500 13px/1 var(--mono); letter-spacing: .02em; }
|
||
.desktop-nav nav a:hover, .mobile-nav nav a:hover, .nav-cv:hover { color: var(--accent); }
|
||
.nav-cv { display: inline-flex; align-items: center; gap: 6px; }
|
||
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 400 12px/1 var(--mono); padding-left: 20px; border-left: 1px solid var(--line); }
|
||
.menu-button { display: none; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--text); font: 500 13px/1 var(--mono); cursor: pointer; }
|
||
.mobile-nav { display: none; border-top: 1px solid var(--line); padding-block: 16px 20px; }
|
||
.mobile-nav nav { display: grid; gap: 14px; }
|
||
.site-footer { border-top: 1px solid var(--line); padding-block: 28px; margin-top: 40px; }
|
||
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--dim); font: 400 12px/1.6 var(--mono); }
|
||
.footer-inner a { color: var(--muted); }
|
||
|
||
/* ---- hero ---- */
|
||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-block: 88px 96px; }
|
||
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
|
||
.hero-copy .label { letter-spacing: .06em; }
|
||
.hero-copy h1 span { color: var(--accent); }
|
||
.hero-lead { max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.6; }
|
||
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
|
||
|
||
.terminal { padding: 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font-family: var(--mono); }
|
||
.terminal-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
|
||
.terminal-dots { display: flex; gap: 6px; }
|
||
.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
|
||
.terminal-title { color: var(--dim); font-size: 12px; }
|
||
.terminal-body { padding: 22px 24px; font-size: 14px; line-height: 1.75; display: flex; flex-direction: column; overflow-x: auto; }
|
||
.terminal-body .k { color: var(--code-key); }
|
||
.terminal-body .s { color: var(--code-str); }
|
||
.terminal-body .n { color: var(--code-num); }
|
||
.terminal-body .c { color: var(--dim); }
|
||
.terminal-line { white-space: pre; }
|
||
.terminal-line.indent { padding-left: 2ch; }
|
||
.cursor { display: inline-block; width: 9px; height: 16px; background: var(--accent); vertical-align: -3px; margin-left: 2px; }
|
||
|
||
/* ---- work list ---- */
|
||
.work-list { display: flex; flex-direction: column; overflow: hidden; }
|
||
.project-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 300px 40px; gap: 24px; padding: 26px 24px; border-top: 1px solid var(--line); align-items: center; color: var(--text); transition: background-color .15s ease; }
|
||
.project-row:first-child { border-top: 0; }
|
||
.project-row:hover { background: var(--panel-2); color: var(--text); }
|
||
.project-index { font: 400 13px/1 var(--mono); color: var(--dim); }
|
||
.project-row.featured .project-index, .project-row.featured .project-arrow { color: var(--accent); }
|
||
.project-title { display: flex; flex-direction: column; gap: 6px; }
|
||
.project-title p { color: var(--muted); font-size: 14.5px; }
|
||
.project-arrow { color: var(--dim); text-align: right; font-size: 18px; transition: color .15s ease, transform .15s ease; }
|
||
.project-row:hover .project-arrow { color: var(--accent); transform: translateX(4px); }
|
||
.section-head.padded { padding-inline: 24px; }
|
||
|
||
/* ---- experience ---- */
|
||
.experience { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
|
||
.experience-intro { display: flex; flex-direction: column; gap: 18px; }
|
||
.experience-intro p { color: var(--muted); font-size: 15px; line-height: 1.6; }
|
||
.experience-intro .text-link { align-self: flex-start; }
|
||
.portrait { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); border: 1px solid var(--line); }
|
||
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font: 500 13px/1 var(--mono); }
|
||
.text-link:hover { color: #A9F26F; }
|
||
.roles { display: flex; flex-direction: column; }
|
||
.role { display: grid; grid-template-columns: 170px 1fr 1.2fr; gap: 28px; padding: 20px 0; border-top: 1px solid var(--line); align-items: baseline; }
|
||
.role:last-child { border-bottom: 1px solid var(--line); }
|
||
.role time { color: var(--dim); font: 400 13px/1.4 var(--mono); }
|
||
.role h4 { font-size: 16px; }
|
||
.role .company { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
|
||
.role p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
|
||
|
||
/* ---- capabilities ---- */
|
||
.capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
|
||
.capability { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
|
||
.capability .index { font: 400 12px/1 var(--mono); color: var(--accent); }
|
||
.capability p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
|
||
|
||
/* ---- contact ---- */
|
||
.contact { padding: clamp(32px, 5vw, 56px); border-color: rgba(139, 224, 74, .35); box-shadow: inset 0 0 80px rgba(139, 224, 74, .05); display: flex; flex-direction: column; gap: 22px; }
|
||
.contact h2 { max-width: 760px; }
|
||
.contact-actions { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
|
||
.contact-actions .meta { color: var(--dim); font: 400 12px/1 var(--mono); }
|
||
|
||
/* ---- case study ---- */
|
||
.breadcrumb { display: flex; gap: 0; font: 400 13px/1 var(--mono); color: var(--text); margin-bottom: 28px; }
|
||
.breadcrumb a { color: var(--dim); }
|
||
.breadcrumb a:hover { color: var(--accent); }
|
||
.case-hero { padding-block: 64px 48px; display: flex; flex-direction: column; gap: 22px; }
|
||
.case-hero h1 { max-width: 900px; }
|
||
.case-hero .lead { max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.6; }
|
||
.case-meta { display: grid; grid-template-columns: auto auto 1fr; gap: 32px; padding: 18px 24px; align-items: center; }
|
||
.case-meta dt { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
|
||
.case-meta dd { margin: 0; font-size: 14.5px; }
|
||
.case-section { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding-block: 56px; border-top: 1px solid var(--line); }
|
||
.case-section .label { padding-top: 6px; }
|
||
.case-section h2 { margin-bottom: 20px; }
|
||
.large-copy { max-width: 720px; color: var(--muted); font-size: 17px; line-height: 1.65; }
|
||
.contribution-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
||
.contribution-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
|
||
.contribution-list li:last-child { border-bottom: 1px solid var(--line); }
|
||
.contribution-list li span { font: 400 13px/1.6 var(--mono); color: var(--accent); }
|
||
.contribution-list li p { color: var(--muted); font-size: 15px; line-height: 1.6; }
|
||
.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
||
.decision { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
|
||
.decision span { font: 400 12px/1 var(--mono); color: var(--accent); }
|
||
.decision p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
|
||
.diagram-wrap { padding-block: 8px 56px; }
|
||
.system-diagram { margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
|
||
.system-diagram figcaption { display: flex; align-items: baseline; gap: 16px; }
|
||
.system-diagram figcaption .mono { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
|
||
.system-diagram figcaption strong { font-size: 15px; font-weight: 500; }
|
||
.system-diagram svg { width: 100%; height: auto; display: block; font-family: var(--mono); }
|
||
.diagram-lines path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
|
||
.diagram-node rect { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1.5; rx: 6; }
|
||
.diagram-node text { fill: var(--text); font-size: 14px; font-weight: 500; text-anchor: middle; letter-spacing: .04em; }
|
||
.diagram-node text.small { fill: var(--muted); font-size: 11px; font-weight: 400; }
|
||
.diagram-node.accent rect { stroke: var(--accent); fill: rgba(139, 224, 74, .06); }
|
||
.diagram-node.accent text { fill: var(--accent); }
|
||
.diagram-node.accent text.small { fill: var(--code-str); }
|
||
.diagram-note text { fill: var(--dim); font-size: 11px; letter-spacing: .1em; text-anchor: middle; }
|
||
.case-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 16px 64px; }
|
||
.case-pagination a { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; color: var(--text); transition: border-color .15s ease; }
|
||
.case-pagination a:hover { border-color: var(--accent); color: var(--text); }
|
||
.case-pagination a .mono { font-size: 12px; color: var(--dim); }
|
||
.case-pagination a:last-child { text-align: right; }
|
||
.case-pagination strong { font-weight: 500; font-size: 15px; }
|
||
.case-contact { margin-bottom: 64px; }
|
||
|
||
/* ---- not found ---- */
|
||
.not-found { padding-block: 96px; display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
|
||
.not-found .terminal-body { gap: 4px; }
|
||
.not-found p.muted { font-size: 16px; line-height: 1.6; }
|
||
|
||
/* ---- motion ---- */
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.hero-copy > * { animation: rise .48s ease both; }
|
||
.hero-copy > :nth-child(2) { animation-delay: .08s; }
|
||
.hero-copy > :nth-child(3) { animation-delay: .16s; }
|
||
.hero-copy > :nth-child(4) { animation-delay: .24s; }
|
||
.terminal { animation: rise .6s ease .2s both; }
|
||
.cursor { animation: blink 1s steps(1) infinite; }
|
||
}
|
||
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
|
||
@keyframes blink { 50% { opacity: 0; } }
|
||
|
||
/* ---- responsive ---- */
|
||
@media (max-width: 1024px) {
|
||
.hero { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 64px; }
|
||
.experience { grid-template-columns: 1fr; gap: 32px; }
|
||
.project-row { grid-template-columns: 48px minmax(0, 1fr) 40px; }
|
||
.project-row .tag-row { grid-column: 2; }
|
||
.case-section { grid-template-columns: 1fr; gap: 16px; }
|
||
}
|
||
@media (max-width: 720px) {
|
||
.section { padding-block: 64px; }
|
||
.desktop-nav { display: none; }
|
||
.menu-button { display: inline-flex; }
|
||
.mobile-nav { display: block; }
|
||
.hero-copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
|
||
.project-row { grid-template-columns: minmax(0, 1fr) 24px; padding: 20px 18px; gap: 10px 12px; }
|
||
.project-index { display: none; }
|
||
.project-row .tag-row { grid-column: 1 / -1; }
|
||
.role { grid-template-columns: 1fr; gap: 6px; }
|
||
.capabilities, .decision-grid, .case-pagination { grid-template-columns: 1fr; }
|
||
.case-pagination a:last-child { text-align: left; }
|
||
.case-meta { grid-template-columns: 1fr; gap: 16px; }
|
||
.section-head { flex-direction: column; align-items: flex-start; }
|
||
.terminal-body { font-size: 12.5px; padding: 16px; }
|
||
}
|
||
```
|
||
|
||
- [x] **Step 5: Build to verify the stylesheet compiles**
|
||
|
||
Run: `npx ng build 2>&1 | tail -5`
|
||
Expected: "Application bundle generation complete" (templates still reference old classes — that's fine, they'll be rewritten).
|
||
|
||
- [x] **Step 6: Commit**
|
||
|
||
```bash
|
||
git add package.json package-lock.json angular.json karma.conf.cjs src/index.html src/styles.scss
|
||
git commit -m "feat(ui): dark-technical tokens, self-hosted fonts, base stylesheet"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: Remove theme + CV page; `/cv` → `/cv.pdf`
|
||
|
||
**Files:**
|
||
- Modify: `src/app/app.routes.spec.ts`, `src/app/app.routes.ts`, `src/app/app.routes.server.ts`, `src/app/app.ts`, `src/server.ts`, `public/sitemap.xml`
|
||
- Delete: `src/app/features/cv/cv-page.component.ts`, `src/app/features/cv/cv-page.component.spec.ts`, `src/app/core/services/theme.service.ts`, `src/app/shared/ui/theme-toggle/theme-toggle.component.ts`
|
||
- Create: `public/cv.pdf` (placeholder)
|
||
|
||
**Interfaces:**
|
||
- Produces: route list without `cv`; `/cv.pdf` static file; nothing else depends on it.
|
||
|
||
- [x] **Step 1: Update the route spec (failing)**
|
||
|
||
In `src/app/app.routes.spec.ts` change the expected path list to:
|
||
|
||
```ts
|
||
expect(routes.map(route => route.path)).toEqual([
|
||
'',
|
||
'work/secure-ai-integration-gateway',
|
||
'work/travel-operations-platform',
|
||
'work/service-operations-platform',
|
||
'work/biodiversity-data-platform',
|
||
'portfolio',
|
||
'**'
|
||
]);
|
||
```
|
||
|
||
- [x] **Step 2: Run tests to see it fail**
|
||
|
||
Run: `CHROME_BIN=$CHROME npx ng test --watch=false 2>&1 | tail -20` — expected: 1 FAILED (routes contain `cv`). (`$CHROME` = Playwright chromium binary; see Global Constraints.)
|
||
|
||
- [x] **Step 3: Remove the `cv` route and theme wiring**
|
||
|
||
`src/app/app.routes.ts`: delete the `{ path: 'cv', ... }` object.
|
||
`src/app/app.routes.server.ts`: delete the `{ path: 'cv', renderMode: RenderMode.Prerender }` line.
|
||
`src/app/app.ts`:
|
||
|
||
```ts
|
||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||
import { RouterOutlet } from '@angular/router';
|
||
|
||
@Component({
|
||
selector: 'app-root',
|
||
standalone: true,
|
||
imports: [RouterOutlet],
|
||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
templateUrl: './app.html'
|
||
})
|
||
export class App {}
|
||
```
|
||
|
||
Delete the four files listed above (`git rm`). `PageShellComponent` still imports the toggle — Task 3 fixes it; for this task's test run, remove `ThemeToggleComponent` from its `imports` array and the two `<app-theme-toggle />` tags now.
|
||
|
||
- [x] **Step 4: Server redirect + sitemap + placeholder PDF**
|
||
|
||
`src/server.ts`, insert before the `express.static` block:
|
||
|
||
```ts
|
||
/** The CV is a static PDF; keep the old /cv URL working. */
|
||
app.get('/cv', (_req, res) => {
|
||
res.redirect(301, '/cv.pdf');
|
||
});
|
||
```
|
||
|
||
`public/sitemap.xml`: remove the `<url><loc>https://dzanan.net/cv</loc></url>` line.
|
||
|
||
Placeholder PDF (until Amar supplies the real one), generated with Python:
|
||
|
||
```bash
|
||
python3 - <<'EOF'
|
||
from reportlab.lib.pagesizes import A4
|
||
from reportlab.pdfgen import canvas
|
||
c = canvas.Canvas('public/cv.pdf', pagesize=A4)
|
||
c.setFont('Helvetica-Bold', 22); c.drawString(72, 760, 'Amar Dzanan')
|
||
c.setFont('Helvetica', 12); c.drawString(72, 736, 'CV coming soon - amar@dzanan.net')
|
||
c.save()
|
||
EOF
|
||
```
|
||
|
||
(If reportlab is missing: `pip install reportlab --break-system-packages`.)
|
||
|
||
- [x] **Step 5: Run tests — pass**
|
||
|
||
Run: `CHROME_BIN=$CHROME npx ng test --watch=false 2>&1 | tail -5` — expected: all SUCCESS (the landing spec still expects `a[href="/cv"]`, which still exists until Task 5 — it passes for now).
|
||
|
||
- [x] **Step 6: Commit**
|
||
|
||
```bash
|
||
git add -A
|
||
git commit -m "feat: drop CV page and theme toggle; redirect /cv to /cv.pdf"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Navigation config and page shell
|
||
|
||
**Files:**
|
||
- Modify: `src/app/shared/config/navigation.config.ts`, `src/app/core/layout/page-shell.component.ts`
|
||
|
||
**Interfaces:**
|
||
- Produces: `MAIN_NAVIGATION: SectionNavItem[]` = work / experience / contact; `PageShellComponent` with `@Input() sections`, unchanged selector `app-page-shell`.
|
||
|
||
- [x] **Step 1: Navigation config**
|
||
|
||
```ts
|
||
import { SectionNavItem } from '../models/section-nav.model';
|
||
|
||
export const MAIN_NAVIGATION: SectionNavItem[] = [
|
||
{ label: 'work', path: '/', fragment: 'work' },
|
||
{ label: 'experience', path: '/', fragment: 'experience' },
|
||
{ label: 'contact', path: '/', fragment: 'contact' }
|
||
];
|
||
|
||
export const CV_URL = '/cv.pdf';
|
||
```
|
||
|
||
- [x] **Step 2: Page shell**
|
||
|
||
```ts
|
||
import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core';
|
||
import { RouterLink } from '@angular/router';
|
||
import { SectionNavItem } from '../../shared/models/section-nav.model';
|
||
import { CV_URL } from '../../shared/config/navigation.config';
|
||
|
||
@Component({
|
||
selector: 'app-page-shell',
|
||
standalone: true,
|
||
imports: [RouterLink],
|
||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
template: `
|
||
<div class="site-frame">
|
||
<a class="skip-link" href="#main-content">Skip to content</a>
|
||
<header class="site-header">
|
||
<div class="shell header-inner">
|
||
<a routerLink="/" class="wordmark" aria-label="Amar Džanan, home"><span class="wordmark-tilde">~/</span>dzanan.net</a>
|
||
|
||
<div class="desktop-nav">
|
||
<nav aria-label="Primary navigation">
|
||
@for (section of sections; track section.label) {
|
||
<a [routerLink]="section.path || []" [fragment]="section.fragment">{{ section.label }}</a>
|
||
}
|
||
<a class="nav-cv" [href]="cvUrl" target="_blank" rel="noopener">cv.pdf
|
||
<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M8 2v9M4.5 7.5 8 11l3.5-3.5M3 13.5h10"/></svg>
|
||
</a>
|
||
</nav>
|
||
<span class="status"><span class="status-dot" aria-hidden="true"></span>available</span>
|
||
</div>
|
||
|
||
<button class="menu-button" type="button" (click)="toggleMenu()" [attr.aria-expanded]="menuOpen()" aria-controls="mobile-navigation">
|
||
<span>menu</span><span aria-hidden="true">{{ menuOpen() ? '×' : '+' }}</span>
|
||
</button>
|
||
</div>
|
||
@if (menuOpen()) {
|
||
<div id="mobile-navigation" class="mobile-nav shell">
|
||
<nav aria-label="Mobile navigation">
|
||
@for (section of sections; track section.label) {
|
||
<a [routerLink]="section.path || []" [fragment]="section.fragment" (click)="closeMenu()">{{ section.label }}</a>
|
||
}
|
||
<a class="nav-cv" [href]="cvUrl" target="_blank" rel="noopener" (click)="closeMenu()">cv.pdf ↓</a>
|
||
</nav>
|
||
</div>
|
||
}
|
||
</header>
|
||
<main id="main-content">
|
||
<ng-content />
|
||
</main>
|
||
<footer class="site-footer">
|
||
<div class="shell footer-inner">
|
||
<span>Amar Džanan · Sarajevo, Bosnia and Herzegovina</span>
|
||
<span><a href="mailto:amar@dzanan.net">amar@dzanan.net</a> · <a href="https://www.linkedin.com/in/amardzanan/">LinkedIn</a></span>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
`
|
||
})
|
||
export class PageShellComponent {
|
||
@Input({ required: true }) sections: SectionNavItem[] = [];
|
||
readonly cvUrl = CV_URL;
|
||
readonly menuOpen = signal(false);
|
||
|
||
toggleMenu(): void { this.menuOpen.update(open => !open); }
|
||
closeMenu(): void { this.menuOpen.set(false); }
|
||
}
|
||
```
|
||
|
||
- [x] **Step 3: Build**
|
||
|
||
Run: `npx ng build 2>&1 | grep -E "error|complete"` — expected: "complete", no errors.
|
||
|
||
- [x] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/app/shared/config/navigation.config.ts src/app/core/layout/page-shell.component.ts
|
||
git commit -m "feat(shell): mono header with cv.pdf link and availability status"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: `tagline` on portfolio projects
|
||
|
||
**Files:**
|
||
- Modify: `src/app/features/work/portfolio-project.model.ts`, `src/app/features/work/portfolio-projects.data.ts`, `src/app/features/work/portfolio-projects.data.spec.ts`
|
||
|
||
**Interfaces:**
|
||
- Produces: `PortfolioProject.tagline: string` (≤ 70 chars, no trailing period).
|
||
|
||
- [x] **Step 1: Failing test** — add inside the `for (const project of PORTFOLIO_PROJECTS)` loop in the data spec:
|
||
|
||
```ts
|
||
expect(project.tagline.length).toBeGreaterThan(10);
|
||
expect(project.tagline.length).toBeLessThanOrEqual(70);
|
||
```
|
||
|
||
- [x] **Step 2: Run** — expected: TypeScript error `tagline does not exist` (compile failure counts as red).
|
||
|
||
- [x] **Step 3: Implement** — model: add `readonly tagline: string;` after `summary`. Data, one per project (insert after each `summary:` value):
|
||
|
||
| id | tagline |
|
||
|---|---|
|
||
| ai-integration | `Production MCP service · validated boundaries · verified writes` |
|
||
| travel-operations | `Products, departures, reservations, finance, partner systems` |
|
||
| service-operations | `Tickets, worklogs, contracts, accounting · CQRS · SignalR` |
|
||
| biodiversity-data | `Taxonomy, sampling, specimens, habitats, map-based GIS` |
|
||
|
||
- [x] **Step 4: Run tests** — expected: SUCCESS.
|
||
|
||
- [x] **Step 5: Commit** — `git commit -am "feat(data): short taglines for the work list"`
|
||
|
||
---
|
||
|
||
### Task 5: Landing page
|
||
|
||
**Files:**
|
||
- Modify: `src/app/features/landing/landing-page.component.spec.ts`, `src/app/features/landing/landing-page.component.ts`
|
||
|
||
- [x] **Step 1: Update spec (failing)** — replace the two `expect`s that change:
|
||
|
||
```ts
|
||
expect(page.querySelector('h1')?.textContent).toContain('Complex systems, understood before changed.');
|
||
// ...
|
||
expect(page.querySelector('a[href="/cv.pdf"]')).toBeTruthy();
|
||
```
|
||
|
||
and add to the first test: `expect(page.querySelector('[data-testid="profile-terminal"]')?.textContent).toContain('"open_to"');`
|
||
|
||
- [x] **Step 2: Run** — expected: FAIL on h1 text.
|
||
|
||
- [x] **Step 3: Implement `landing-page.component.ts`**
|
||
|
||
```ts
|
||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||
import { NgOptimizedImage } from '@angular/common';
|
||
import { RouterLink } from '@angular/router';
|
||
import { PageShellComponent } from '../../core/layout/page-shell.component';
|
||
import { SeoService } from '../../core/services/seo.service';
|
||
import { CV_URL, MAIN_NAVIGATION } from '../../shared/config/navigation.config';
|
||
import { PORTFOLIO_PROJECTS } from '../work/portfolio-projects.data';
|
||
|
||
type TerminalValue = { kind: 'str'; value: string } | { kind: 'num'; value: number } | { kind: 'list'; value: string[] };
|
||
|
||
@Component({
|
||
selector: 'app-landing-page',
|
||
standalone: true,
|
||
imports: [PageShellComponent, NgOptimizedImage, RouterLink],
|
||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
template: `
|
||
<app-page-shell [sections]="sections">
|
||
<section class="hero shell" aria-labelledby="hero-title">
|
||
<div class="hero-copy">
|
||
<p class="label">Senior full-stack engineer — .NET · Angular · MCP</p>
|
||
<h1 id="hero-title">Complex systems, <span>understood before changed.</span></h1>
|
||
<p class="hero-lead">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.</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-accent" href="mailto:amar@dzanan.net">amar@dzanan.net</a>
|
||
<a class="btn btn-line" [href]="cvUrl" target="_blank" rel="noopener">cv.pdf
|
||
<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M8 2v9M4.5 7.5 8 11l3.5-3.5M3 13.5h10"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel terminal" data-testid="profile-terminal" aria-label="Profile summary as JSON">
|
||
<div class="terminal-bar"><div class="terminal-dots" aria-hidden="true"><span></span><span></span><span></span></div><span class="terminal-title">profile.json</span><span style="width:42px"></span></div>
|
||
<div class="terminal-body">
|
||
<div class="terminal-line"><span class="c">$</span> whoami <span class="c">--json</span></div>
|
||
<div class="terminal-line">{{ '{' }}</div>
|
||
@for (entry of profile; track entry.key; let last = $last) {
|
||
<div class="terminal-line indent"><span class="k">"{{ entry.key }}"</span>: @switch (entry.value.kind) {
|
||
@case ('str') { <span class="s">"{{ entry.value.value }}"</span> }
|
||
@case ('num') { <span class="n">{{ entry.value.value }}</span> }
|
||
@case ('list') { [@for (item of entry.value.value; track item; let lastItem = $last) {<span class="s">"{{ item }}"</span>@if (!lastItem) {, }}] }
|
||
}@if (!last) {,}</div>
|
||
}
|
||
<div class="terminal-line">{{ '}' }}</div>
|
||
<div class="terminal-line" style="margin-top:6px"><span class="c">$</span> <span class="cursor" aria-hidden="true"></span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="work" class="section shell" aria-labelledby="work-title" style="padding-top:0">
|
||
<div class="section-head padded">
|
||
<div><span class="label">// selected work</span><h2 id="work-title">Production systems, anonymized.</h2></div>
|
||
<span class="count">{{ projects.length }} case studies</span>
|
||
</div>
|
||
<div class="panel work-list">
|
||
@for (project of projects; track project.id; let first = $first) {
|
||
<a data-testid="project-row" class="project-row" [class.featured]="first" [routerLink]="['/work', project.slug]">
|
||
<span class="project-index">{{ project.index }}</span>
|
||
<span class="project-title"><h3>{{ project.title }}</h3><p>{{ project.tagline }}</p></span>
|
||
<span class="tag-row">@for (tech of project.stack.slice(0, 4); track tech) {<span class="tag">{{ tech }}</span>}</span>
|
||
<span class="project-arrow" aria-hidden="true">→</span>
|
||
</a>
|
||
}
|
||
</div>
|
||
</section>
|
||
|
||
<section id="experience" class="section shell experience" aria-labelledby="experience-title">
|
||
<div class="experience-intro">
|
||
<img ngSrc="/images/profile.jpg" width="96" height="96" alt="Portrait of Amar Džanan" class="portrait" />
|
||
<span class="label">// experience</span>
|
||
<h2 id="experience-title">Eight years, one product at a time.</h2>
|
||
<p>Senior software engineer and product owner — most useful where business rules, legacy systems and new capabilities meet. I turn incomplete requirements into maintainable paths through the UI, domain model, integrations, deployment and operations.</p>
|
||
<a class="text-link" href="https://www.linkedin.com/in/amardzanan/">LinkedIn ↗</a>
|
||
</div>
|
||
<div class="roles">
|
||
@for (role of experience; track role.period + role.title) {
|
||
<article class="role"><time class="mono">{{ role.period }}</time><div><h4>{{ role.title }}</h4><span class="company">{{ role.company }}</span></div><p>{{ role.focus }}</p></article>
|
||
}
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section shell" aria-labelledby="capabilities-title" style="padding-top:0">
|
||
<div class="section-head"><div><span class="label">// capabilities</span><h2 id="capabilities-title">From uncertain problem to running system.</h2></div></div>
|
||
<div class="capabilities">
|
||
@for (capability of capabilities; track capability.number) {
|
||
<article class="panel capability"><span class="index">{{ capability.number }}</span><h3>{{ capability.title }}</h3><p>{{ capability.detail }}</p></article>
|
||
}
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="section shell" aria-labelledby="contact-title" style="padding-top:0">
|
||
<div class="panel contact">
|
||
<span class="label">// contact</span>
|
||
<h2 id="contact-title">Need a senior engineer who can understand the system before changing it?</h2>
|
||
<div class="contact-actions"><a class="btn btn-accent" href="mailto:amar@dzanan.net">amar@dzanan.net</a><span class="meta">Sarajevo · CET / CEST</span></div>
|
||
</div>
|
||
</section>
|
||
</app-page-shell>
|
||
`
|
||
})
|
||
export class LandingPageComponent {
|
||
readonly sections = MAIN_NAVIGATION;
|
||
readonly cvUrl = CV_URL;
|
||
readonly projects = PORTFOLIO_PROJECTS;
|
||
readonly profile: { key: string; value: TerminalValue }[] = [
|
||
{ key: 'name', value: { kind: 'str', value: 'Amar Džanan' } },
|
||
{ key: 'role', value: { kind: 'str', value: 'Senior Full-Stack Engineer · Product Owner' } },
|
||
{ key: 'stack', value: { kind: 'list', value: ['.NET', 'Angular', 'TypeScript'] } },
|
||
{ key: 'focus', value: { kind: 'list', value: ['modernization', 'safe AI integration'] } },
|
||
{ key: 'since', value: { kind: 'num', value: 2018 } },
|
||
{ key: 'location', value: { kind: 'str', value: 'Sarajevo · CET' } },
|
||
{ key: 'open_to', value: { kind: 'list', value: ['senior roles', 'consulting'] } }
|
||
];
|
||
readonly experience = [
|
||
{ period: '2025 — now', company: 'Unija Smart Accounting BiH', title: 'Senior Software Engineer', focus: 'Enterprise platforms, modernization, automation and AI integration.' },
|
||
{ period: '2023 — now', company: 'COMP-2000', title: 'Product Owner', focus: 'Product direction, backlog ownership, cross-functional delivery and user feedback.' },
|
||
{ period: '2020 — now', company: 'COMP-2000', title: 'Software Developer', focus: 'Full-stack .NET, Angular, mobile, APIs, data and production support.' },
|
||
{ period: '2018 — 2020', company: 'COMP-2000', title: 'Junior Software Developer', focus: 'C#, SQL, desktop, web, mobile and application lifecycle foundations.' }
|
||
];
|
||
readonly capabilities = [
|
||
{ number: '01', title: 'System modernization', detail: 'Upgrade frameworks, identity, routing, delivery and diagnostics without losing working domain knowledge.' },
|
||
{ number: '02', title: 'Full-stack product delivery', detail: 'Carry business workflows through interface design, APIs, domain rules, persistence, integrations and tests.' },
|
||
{ number: '03', title: 'Safe AI integration', detail: 'Expose useful capabilities through narrow tools, validated boundaries, verified writes and observable operations.' }
|
||
];
|
||
|
||
constructor() {
|
||
inject(SeoService).update({
|
||
title: 'Amar Džanan — Senior Software Engineer & AI Integration',
|
||
description: 'Senior full-stack engineer modernizing complex enterprise software and connecting it safely to AI.',
|
||
path: '/',
|
||
structuredData: {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'Person',
|
||
name: 'Amar Džanan',
|
||
url: 'https://dzanan.net/',
|
||
email: 'mailto:amar@dzanan.net',
|
||
jobTitle: 'Senior Software Engineer',
|
||
sameAs: ['https://www.linkedin.com/in/amardzanan/'],
|
||
knowsAbout: ['.NET', 'Angular', 'TypeScript', 'Software architecture', 'Model Context Protocol', 'AI integration']
|
||
}
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
- [x] **Step 4: Run tests** — expected: SUCCESS.
|
||
- [x] **Step 5: Commit** — `git commit -am "feat(landing): dark-technical hero, work list, experience, capabilities, contact"`
|
||
|
||
---
|
||
|
||
### Task 6: Case study page + diagram recolour
|
||
|
||
**Files:**
|
||
- Modify: `src/app/features/portfolio/portfolio-page.component.spec.ts`, `src/app/features/portfolio/portfolio-page.component.ts`
|
||
- `system-diagram.component.ts`: no change needed — its classes (`diagram-lines`, `diagram-node`, `accent`, `diagram-note`, `small`) are restyled in Task 1. Only wrap `<figure>` with class `panel`: change `class="system-diagram"` to `class="system-diagram panel"`.
|
||
|
||
- [x] **Step 1: Spec (failing)** — add `expect(page.querySelector('a[href="/cv.pdf"]')).toBeTruthy();` and `expect(page.textContent).toContain('// 01 context');`.
|
||
- [x] **Step 2: Run** — expected: FAIL.
|
||
- [x] **Step 3: Implement template** (class and constructor unchanged; add `readonly cvUrl = CV_URL;` and import `CV_URL`):
|
||
|
||
```html
|
||
<app-page-shell [sections]="sections">
|
||
<article>
|
||
<header class="case-hero shell">
|
||
<nav class="breadcrumb" aria-label="Breadcrumb"><a routerLink="/">~/work/</a><span>{{ project.slug }}</span></nav>
|
||
<p class="label">{{ project.category }} · {{ project.period }}</p>
|
||
<h1>{{ project.title }}</h1>
|
||
<p class="lead">{{ project.summary }}</p>
|
||
<dl class="panel case-meta">
|
||
<div><dt>role</dt><dd>{{ project.role }}</dd></div>
|
||
<div><dt>period</dt><dd>{{ project.period }}</dd></div>
|
||
<div><dt>stack</dt><dd class="tag-row">@for (technology of project.stack; track technology) {<span class="tag">{{ technology }}</span>}</dd></div>
|
||
</dl>
|
||
</header>
|
||
|
||
<section class="case-section shell" aria-labelledby="challenge-title">
|
||
<span class="label">// 01 context</span>
|
||
<div><h2 id="challenge-title">The challenge</h2><p class="large-copy">{{ project.challenge }}</p></div>
|
||
</section>
|
||
|
||
<section class="case-section shell" aria-labelledby="contributions-title">
|
||
<span class="label">// 02 delivery</span>
|
||
<div>
|
||
<h2 id="contributions-title">What I contributed</h2>
|
||
<ol class="contribution-list">
|
||
@for (contribution of project.contributions; track contribution; let index = $index) {
|
||
<li><span>{{ contributionNumber(index) }}</span><p>{{ contribution }}</p></li>
|
||
}
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="diagram-wrap shell">
|
||
<app-system-diagram [kind]="project.diagram" [title]="project.title" />
|
||
</section>
|
||
|
||
<section class="case-section shell" aria-labelledby="decisions-title">
|
||
<span class="label">// 03 architecture</span>
|
||
<div>
|
||
<h2 id="decisions-title">Key decisions</h2>
|
||
<div class="decision-grid">
|
||
@for (decision of project.decisions; track decision.title; let index = $index) {
|
||
<article class="panel decision"><span>{{ contributionNumber(index) }}</span><h3>{{ decision.title }}</h3><p>{{ decision.detail }}</p></article>
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="case-section shell" aria-labelledby="outcome-title">
|
||
<span class="label">// 04 result</span>
|
||
<div><h2 id="outcome-title">The outcome</h2><p class="large-copy">{{ project.outcome }}</p></div>
|
||
</section>
|
||
|
||
<nav class="case-pagination shell" aria-label="Case studies">
|
||
<a class="panel" [routerLink]="['/work', previous.slug]"><span class="mono">← previous</span><strong>{{ previous.title }}</strong></a>
|
||
<a class="panel" [routerLink]="['/work', next.slug]"><span class="mono">next →</span><strong>{{ next.title }}</strong></a>
|
||
</nav>
|
||
|
||
<section class="shell case-contact" aria-labelledby="case-contact-title">
|
||
<div class="panel contact">
|
||
<span class="label">// contact</span>
|
||
<h2 id="case-contact-title">Have a complex system? Let's make the next change safer and more useful.</h2>
|
||
<div class="contact-actions"><a class="btn btn-accent" href="mailto:amar@dzanan.net">amar@dzanan.net</a><a class="text-link" [href]="cvUrl" target="_blank" rel="noopener">cv.pdf ↓</a></div>
|
||
</div>
|
||
</section>
|
||
</article>
|
||
</app-page-shell>
|
||
```
|
||
|
||
- [x] **Step 4: Run tests** — expected: SUCCESS.
|
||
- [x] **Step 5: Commit** — `git commit -am "feat(work): dark-technical case study layout and diagram recolour"`
|
||
|
||
---
|
||
|
||
### Task 7: Not-found page
|
||
|
||
**Files:** `src/app/features/not-found/not-found-page.component.ts`
|
||
|
||
- [x] **Step 1: Implement**
|
||
|
||
```html
|
||
<app-page-shell [sections]="sections">
|
||
<section class="not-found shell">
|
||
<div class="panel terminal">
|
||
<div class="terminal-bar"><div class="terminal-dots" aria-hidden="true"><span></span><span></span><span></span></div><span class="terminal-title">404</span><span style="width:42px"></span></div>
|
||
<div class="terminal-body">
|
||
<div class="terminal-line"><span class="c">$</span> open {{ path }}</div>
|
||
<div class="terminal-line"><span class="n">command not found:</span> {{ path }}</div>
|
||
<div class="terminal-line" style="margin-top:6px"><span class="c">$</span> <span class="cursor" aria-hidden="true"></span></div>
|
||
</div>
|
||
</div>
|
||
<h1>This path ends here.</h1>
|
||
<p class="muted">The page may have moved. The selected systems and the CV are one click away.</p>
|
||
<a class="btn btn-line" routerLink="/">cd ~/</a>
|
||
</section>
|
||
</app-page-shell>
|
||
```
|
||
|
||
Component gets `readonly path = inject(DOCUMENT).location?.pathname ?? '/unknown';` — use `inject(DOCUMENT)` from `@angular/common` (SSR-safe: on the server `document.location` exists in Domino as the request URL).
|
||
|
||
- [x] **Step 2: Build + commit** — `npx ng build`; `git commit -am "feat(404): terminal-style not-found page"`
|
||
|
||
---
|
||
|
||
### Task 8: Verification
|
||
|
||
- [x] Unit tests: `CHROME_BIN=$CHROME npx ng test --watch=false` → all SUCCESS.
|
||
- [x] Production build: `npx ng build` → zero errors, prerendered 5 routes, budgets not exceeded.
|
||
- [x] Serve: `PORT=4100 node dist/dzanan.net/server/server.mjs &`; `curl -sI localhost:4100/cv | head -3` → `301` + `Location: /cv.pdf`; `curl -sI localhost:4100/cv.pdf | head -1` → 200; `curl -s localhost:4100/nope -o /dev/null -w "%{http_code}"` → 404.
|
||
- [x] Screenshots with Playwright at 1440×900 and 390×844 of `/`, `/work/secure-ai-integration-gateway`, `/nope`; view them; fix wrapping/overflow issues and re-run.
|
||
- [x] Commit fixes; update the plan checkboxes.
|