This commit is contained in:
amar.dzanan
@@ -1,116 +1,104 @@
|
||||
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 { MAIN_NAVIGATION } from '../../shared/config/navigation.config';
|
||||
import { PORTFOLIO_PROJECTS } from '../work/portfolio-projects.data';
|
||||
import { MAIN_NAVIGATION, PAGE_INDEX } from '../../shared/config/navigation.config';
|
||||
|
||||
type ProfileValue = string | number | readonly string[];
|
||||
type TokenClass = 'k' | 's' | 'n' | 'p';
|
||||
interface TerminalToken { readonly cls: TokenClass; readonly text: string; }
|
||||
interface TerminalLine { readonly tokens: readonly TerminalToken[]; }
|
||||
|
||||
/** The `profile.json` shown in the hero. Order is render order. */
|
||||
const PROFILE: readonly (readonly [string, ProfileValue])[] = [
|
||||
['name', 'Amar Džanan'],
|
||||
['role', 'Senior Full-Stack Engineer · Product Owner'],
|
||||
['stack', ['.NET', 'Angular', 'Ionic', 'SQL Server']],
|
||||
['focus', ['ERP & business systems', 'mobile', 'expert systems', 'safe AI integration']],
|
||||
['since', 2018],
|
||||
['location', 'Ljubljana · CET'],
|
||||
['open_to', ['senior roles', 'consulting']]
|
||||
];
|
||||
|
||||
function toTerminalLines(profile: readonly (readonly [string, ProfileValue])[]): TerminalLine[] {
|
||||
return profile.map(([key, value], index) => {
|
||||
const tokens: TerminalToken[] = [{ cls: 'k', text: `"${key}"` }, { cls: 'p', text: ': ' }];
|
||||
if (typeof value === 'number') {
|
||||
tokens.push({ cls: 'n', text: String(value) });
|
||||
} else if (typeof value === 'string') {
|
||||
tokens.push({ cls: 's', text: `"${value}"` });
|
||||
} else {
|
||||
tokens.push({ cls: 'p', text: '[' });
|
||||
value.forEach((item, itemIndex) => {
|
||||
if (itemIndex > 0) tokens.push({ cls: 'p', text: ', ' });
|
||||
tokens.push({ cls: 's', text: `"${item}"` });
|
||||
});
|
||||
tokens.push({ cls: 'p', text: ']' });
|
||||
}
|
||||
if (index < profile.length - 1) tokens.push({ cls: 'p', text: ',' });
|
||||
return { tokens };
|
||||
});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-page',
|
||||
standalone: true,
|
||||
imports: [
|
||||
PageShellComponent,
|
||||
NgOptimizedImage,
|
||||
RouterLink
|
||||
],
|
||||
imports: [PageShellComponent, RouterLink],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<app-page-shell [sections]="sections">
|
||||
<section class="hero shell" aria-labelledby="hero-title">
|
||||
<div class="hero-kicker mono"><span>01</span> Senior full-stack engineer · AI integration</div>
|
||||
<div class="hero-grid">
|
||||
<h1 id="hero-title">I modernize complex software and connect it safely to AI.</h1>
|
||||
<div class="hero-aside">
|
||||
<p>I work across product, frontend, backend, integrations, and delivery to make mature systems easier to operate and evolve.</p>
|
||||
<div class="action-row">
|
||||
<a class="button button-primary" href="mailto:amar@dzanan.net">Start a conversation <span aria-hidden="true">↗</span></a>
|
||||
<a class="text-link" routerLink="/cv">View CV <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="hero-copy">
|
||||
<p class="label">Senior full-stack engineer<span class="label-extra"> · product owner</span></p>
|
||||
<h1 id="hero-title">Complex systems, <span>understood before changed.</span></h1>
|
||||
<p class="hero-lead">I build and modernize full-stack business systems — ERP software, offline-first mobile apps for the field, rule-driven expert systems — and connect them 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" routerLink="/cv">cv.pdf →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel terminal" data-testid="profile-terminal" role="img" aria-label="Profile summary rendered as a JSON document">
|
||||
<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 class="terminal-spacer"></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 (line of terminalLines; track $index) {
|
||||
<div class="terminal-line indent">@for (token of line.tokens; track $index) {<span [class]="token.cls">{{ token.text }}</span>}</div>
|
||||
}
|
||||
<div class="terminal-line">{{ '}' }}</div>
|
||||
<div class="terminal-line prompt"><span class="c">$ </span><span class="cursor" aria-hidden="true"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-foot mono"><span>Based in Sarajevo · Working across Europe</span><span>Scroll to inspect selected systems ↓</span></div>
|
||||
</section>
|
||||
|
||||
<section id="work" class="section-block shell" aria-labelledby="work-title">
|
||||
<div class="section-heading">
|
||||
<div><p class="eyebrow mono">Selected work / 2025—2026</p><h2 id="work-title">Systems I’ve helped move forward.</h2></div>
|
||||
<p>Four anonymized case studies from production software: integration boundaries, operational workflows, modernization, and AI-assisted tooling.</p>
|
||||
<section class="section tight shell" aria-labelledby="index-title">
|
||||
<div class="section-head padded">
|
||||
<div><span class="label">// index</span><h2 id="index-title">ls ~/</h2></div>
|
||||
<span class="count">{{ pages.length }} entries</span>
|
||||
</div>
|
||||
<div class="project-index">
|
||||
@for (project of projects; track project.id) {
|
||||
<a data-testid="project-row" class="project-row" [routerLink]="['/work', project.slug]">
|
||||
<span class="project-number mono">{{ project.index }}</span>
|
||||
<span class="project-main"><strong>{{ project.title }}</strong><small>{{ project.summary }}</small></span>
|
||||
<span class="project-meta mono">{{ project.category }}<br>{{ project.period }}</span>
|
||||
<span class="project-arrow" aria-hidden="true">↗</span>
|
||||
<div class="panel index-list">
|
||||
@for (page of pages; track page.path) {
|
||||
<a data-testid="index-row" class="index-row" [routerLink]="page.path">
|
||||
<span class="name">{{ page.name }}</span>
|
||||
<p>{{ page.description }}</p>
|
||||
<span class="project-arrow" aria-hidden="true">→</span>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="profile" class="profile-band" aria-labelledby="profile-title">
|
||||
<div class="shell profile-grid">
|
||||
<img ngSrc="/images/profile.jpg" width="360" height="360" alt="Portrait of Amar Džanan" class="profile-photo" />
|
||||
<div>
|
||||
<p class="eyebrow mono">Profile / Amar Džanan</p>
|
||||
<h2 id="profile-title">Engineering judgment across the whole product.</h2>
|
||||
<p class="profile-lead">I’m a senior software engineer and product owner who is most useful where business rules, legacy systems, and new capabilities meet.</p>
|
||||
</div>
|
||||
<div class="profile-notes">
|
||||
<p>I turn incomplete requirements into maintainable paths through the UI, domain model, integrations, deployment, and operations.</p>
|
||||
<p>My recent work focuses on enterprise .NET and Angular platforms, reliable automation, and narrow AI interfaces with clear trust boundaries.</p>
|
||||
<a href="https://www.linkedin.com/in/amardzanan/">LinkedIn profile <span aria-hidden="true">↗</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="experience" class="section-block shell" aria-labelledby="experience-title">
|
||||
<div class="section-heading compact"><div><p class="eyebrow mono">Experience / 2018—Present</p><h2 id="experience-title">Work that overlaps by design.</h2></div><a class="text-link" routerLink="/cv">Full CV →</a></div>
|
||||
<div class="experience-list">
|
||||
@for (role of experience; track role.period + role.title) {
|
||||
<article class="experience-row"><time class="mono">{{ role.period }}</time><div><h3>{{ role.title }}</h3><p>{{ role.company }}</p></div><p>{{ role.focus }}</p></article>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-block shell capabilities" aria-labelledby="capabilities-title">
|
||||
<div><p class="eyebrow mono">Capabilities / How I contribute</p><h2 id="capabilities-title">From uncertain problem to running system.</h2></div>
|
||||
<div class="capability-grid">
|
||||
@for (capability of capabilities; track capability.number) {
|
||||
<article><span class="mono">{{ capability.number }}</span><h3>{{ capability.title }}</h3><p>{{ capability.detail }}</p></article>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-block shell" aria-labelledby="contact-title">
|
||||
<p class="eyebrow mono">Available for the right problem</p>
|
||||
<h2 id="contact-title">Need a senior engineer who can understand the system before changing it?</h2>
|
||||
<div class="contact-actions"><a class="button button-light" href="mailto:amar@dzanan.net">amar@dzanan.net <span aria-hidden="true">↗</span></a><span class="mono">Sarajevo · CET / CEST</span></div>
|
||||
</section>
|
||||
</app-page-shell>
|
||||
`
|
||||
})
|
||||
export class LandingPageComponent {
|
||||
readonly sections = MAIN_NAVIGATION;
|
||||
readonly projects = PORTFOLIO_PROJECTS;
|
||||
readonly experience = [
|
||||
{ period: '2025—Present', company: 'Unija Smart Accounting BiH', title: 'Senior Software Engineer', focus: 'Enterprise platforms, modernization, automation, and AI integration.' },
|
||||
{ period: 'Aug 2023—Present', company: 'COMP-2000', title: 'Product Owner', focus: 'Product direction, backlog ownership, cross-functional delivery, and user feedback.' },
|
||||
{ period: 'Nov 2020—Present', company: 'COMP-2000', title: 'Software Developer', focus: 'Full-stack .NET, Angular, mobile, APIs, data, and production support.' },
|
||||
{ period: 'Nov 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.' }
|
||||
];
|
||||
readonly pages = PAGE_INDEX;
|
||||
readonly terminalLines = toTerminalLines(PROFILE);
|
||||
|
||||
constructor() {
|
||||
const description = 'Senior full-stack engineer modernizing complex enterprise software and connecting it safely to AI.';
|
||||
inject(SeoService).update({
|
||||
title: 'Amar Džanan — Senior Software Engineer & AI Integration',
|
||||
description,
|
||||
description: 'Senior full-stack engineer building and modernizing ERP, mobile and expert systems — and connecting them safely to AI.',
|
||||
path: '/',
|
||||
structuredData: {
|
||||
'@context': 'https://schema.org',
|
||||
@@ -120,7 +108,8 @@ export class LandingPageComponent {
|
||||
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']
|
||||
address: { '@type': 'PostalAddress', addressLocality: 'Ljubljana', addressCountry: 'SI' },
|
||||
knowsAbout: ['.NET', 'Angular', 'TypeScript', 'Ionic', 'ERP software', 'Expert systems', 'Software architecture', 'Model Context Protocol', 'AI integration']
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user