Redesign portfolio around systems case studies
This commit is contained in:
@@ -1,28 +1,127 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
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 { HomeSectionComponent } from '../home/home-section.component';
|
||||
import { AboutMeSectionComponent } from '../about/about-me-section.component';
|
||||
import { AboutItSectionComponent } from '../about/about-it-section.component';
|
||||
import { SeoService } from '../../core/services/seo.service';
|
||||
import { MAIN_NAVIGATION } from '../../shared/config/navigation.config';
|
||||
import { PORTFOLIO_PROJECTS } from '../work/portfolio-projects.data';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-page',
|
||||
standalone: true,
|
||||
imports: [
|
||||
PageShellComponent,
|
||||
HomeSectionComponent,
|
||||
AboutMeSectionComponent,
|
||||
AboutItSectionComponent
|
||||
NgOptimizedImage,
|
||||
RouterLink
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<app-page-shell [sections]="sections">
|
||||
<app-home-section />
|
||||
<app-about-me-section />
|
||||
<app-about-it-section />
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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.' }
|
||||
];
|
||||
|
||||
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,
|
||||
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']
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user