v7/dzanan.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign complete
All checks were successful
Deploy dzanan.net / deploy (push) Successful in 1m0s
Details

Browse Source
This commit is contained in:
amar.dzanan
2026-09-06 22:16:19 +02:00
parent 886292aca9
commit 4d754f33c1
43 changed files with 2123 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/features/portfolio/portfolio-page.component.ts
View File

@@ -16,71 +16,66 @@ import { SystemDiagramComponent } from '../work/system-diagram.component';
<app-page-shell [sections]="sections">
<article>
<header class="case-hero shell">
<nav class="breadcrumb mono" aria-label="Breadcrumb"><a routerLink="/">Work</a><span>/</span><span>{{ project.index }}</span></nav>
<div class="case-heading">
<div>
<p class="eyebrow mono">{{ project.category }} · {{ project.period }}</p>
<h1>{{ project.title }}</h1>
</div>
<div class="case-intro">
<p>{{ project.summary }}</p>
<dl><div><dt>Role</dt><dd>{{ project.role }}</dd></div><div><dt>Period</dt><dd>{{ project.period }}</dd></div></dl>
</div>
</div>
<nav class="breadcrumb" aria-label="Breadcrumb"><a routerLink="/work">~/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 narrative" aria-labelledby="challenge-title">
<p class="case-index mono">01 / Context</p>
<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">
<p class="case-index mono">02 / Delivery</p>
<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 class="mono">{{ contributionNumber(index) }}</span><p>{{ contribution }}</p></li>
<li><span>{{ contributionNumber(index) }}</span><p>{{ contribution }}</p></li>
}
</ol>
</div>
</section>
<section class="diagram-wrap">
<div class="shell"><app-system-diagram [kind]="project.diagram" [title]="project.title" /></div>
<section class="diagram-wrap shell">
<app-system-diagram [kind]="project.diagram" [title]="project.title" />
</section>
<section class="case-section shell" aria-labelledby="decisions-title">
<p class="case-index mono">03 / Architecture</p>
<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><span class="mono">{{ contributionNumber(index) }}</span><h3>{{ decision.title }}</h3><p>{{ decision.detail }}</p></article>
<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 narrative outcome" aria-labelledby="outcome-title">
<p class="case-index mono">04 / Result</p>
<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>
<section class="case-stack shell" aria-label="Technology stack">
<p class="case-index mono">Technology</p>
<ul>@for (technology of project.stack; track technology) { <li>{{ technology }}</li> }</ul>
</section>
<nav class="case-pagination shell" aria-label="Case studies">
<a [routerLink]="['/work', previous.slug]"><span class="mono">← Previous</span><strong>{{ previous.title }}</strong></a>
<a [routerLink]="['/work', next.slug]"><span class="mono">Next →</span><strong>{{ next.title }}</strong></a>
<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="contact-block shell case-contact" aria-labelledby="case-contact-title">
<p class="eyebrow mono">Have a complex system?</p>
<h2 id="case-contact-title">Let’s make the next change safer and more useful.</h2>
<div class="contact-actions"><a class="button button-light" href="mailto:amar@dzanan.net">Start a conversation <span aria-hidden="true">↗</span></a><a class="text-link light" routerLink="/cv">View full CV →</a></div>
<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&#64;dzanan.net</a><a class="text-link" routerLink="/cv">cv.pdf →</a></div>
</div>
</section>
</article>
</app-page-shell>