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

Upgrade Angular and soften light theme
All checks were successful
Deploy dzanan.net / deploy (push) Successful in 48s
Details

Browse Source
This commit is contained in:
v7
2026-05-14 21:27:13 +02:00
parent 1599615ec7
commit 71970c33f7
12 changed files with 1502 additions and 2968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
angular.json
View File

@@ -33,6 +33,14 @@
"outputMode": "server",
"ssr": {
"entry": "src/server.ts"
},
"security": {
"allowedHosts": [
"dzanan.net",
"www.dzanan.net",
"127.0.0.1",
"localhost"
]
}
},
"configurations": {

4357
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json
View File

@@ -21,15 +21,15 @@
},
"private": true,
"dependencies": {
"@angular/cdk": "^20.2.14",
"@angular/common": "^21.0.0",
"@angular/compiler": "^21.0.0",
"@angular/core": "^21.0.0",
"@angular/forms": "^21.0.0",
"@angular/platform-browser": "^21.0.0",
"@angular/platform-server": "^21.0.0",
"@angular/router": "^21.0.0",
"@angular/ssr": "^21.0.0",
"@angular/cdk": "^21.2.11",
"@angular/common": "^21.2.13",
"@angular/compiler": "^21.2.13",
"@angular/core": "^21.2.13",
"@angular/forms": "^21.2.13",
"@angular/platform-browser": "^21.2.13",
"@angular/platform-server": "^21.2.13",
"@angular/router": "^21.2.13",
"@angular/ssr": "^21.2.11",
"@tailwindcss/postcss": "^4.1.17",
"express": "^5.1.0",
"postcss": "^8.5.6",
@@ -38,9 +38,9 @@
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular/build": "^21.0.0",
"@angular/cli": "^21.0.0",
"@angular/compiler-cli": "^21.0.0",
"@angular/build": "^21.2.11",
"@angular/cli": "^21.2.11",
"@angular/compiler-cli": "^21.2.13",
"@types/express": "^5.0.1",
"@types/jasmine": "~5.1.0",
"@types/node": "^20.17.19",

7
src/app/app.routes.spec.ts Normal file
View File

@@ -0,0 +1,7 @@
import { routes } from './app.routes';
describe('app routes', () => {
it('keeps the public pages registered', () => {
expect(routes.map(route => route.path)).toEqual(['', 'cv', 'portfolio']);
});
});

12
src/app/core/layout/page-shell.component.ts
View File

@@ -11,10 +11,10 @@ import { ThemeToggleComponent } from '../../shared/ui/theme-toggle/theme-toggle.
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div
class="min-h-screen bg-zinc-50 text-zinc-900 font-saira transition-colors duration-300 dark:bg-slate-950 dark:text-zinc-100"
class="min-h-screen bg-[#f4f7f5] text-zinc-800 font-saira transition-colors duration-300 dark:bg-slate-950 dark:text-zinc-100"
>
<header
class="sticky top-0 z-30 border-b border-zinc-200/80 bg-white/70 backdrop-blur transition-colors duration-300 dark:border-slate-900/60 dark:bg-slate-950/70"
class="sticky top-0 z-30 border-b border-zinc-200/70 bg-[#f8faf7]/85 backdrop-blur transition-colors duration-300 dark:border-slate-900/60 dark:bg-slate-950/70"
>
<div
class="mx-auto flex max-w-6xl items-center justify-between px-4 py-4 md:px-8"
@@ -43,7 +43,7 @@ import { ThemeToggleComponent } from '../../shared/ui/theme-toggle/theme-toggle.
<a
[routerLink]="section.path || []"
[fragment]="section.fragment"
class="rounded-full px-3 py-2 text-sm font-medium text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-200 dark:hover:bg-slate-900 dark:hover:text-white"
class="rounded-full px-3 py-2 text-sm font-medium text-zinc-600 transition hover:bg-emerald-50/80 hover:text-zinc-900 dark:text-zinc-200 dark:hover:bg-slate-900 dark:hover:text-white"
>
{{ section.label }}
</a>
@@ -71,10 +71,10 @@ import { ThemeToggleComponent } from '../../shared/ui/theme-toggle/theme-toggle.
aria-hidden="true"
>
<div
class="absolute inset-x-0 top-0 h-96 bg-[radial-gradient(circle_at_50%_20%,rgba(16,185,129,0.15),transparent_40%)] dark:bg-[radial-gradient(circle_at_50%_20%,rgba(16,185,129,0.2),transparent_40%)]"
class="absolute inset-x-0 top-0 h-96 bg-[radial-gradient(circle_at_50%_20%,rgba(16,185,129,0.1),transparent_42%)] dark:bg-[radial-gradient(circle_at_50%_20%,rgba(16,185,129,0.2),transparent_40%)]"
></div>
<div
class="absolute inset-y-0 right-0 w-1/2 bg-[radial-gradient(circle_at_80%_50%,rgba(59,130,246,0.1),transparent_35%)] dark:bg-[radial-gradient(circle_at_80%_50%,rgba(59,130,246,0.12),transparent_35%)]"
class="absolute inset-y-0 right-0 w-1/2 bg-[radial-gradient(circle_at_80%_50%,rgba(14,165,233,0.07),transparent_38%)] dark:bg-[radial-gradient(circle_at_80%_50%,rgba(59,130,246,0.12),transparent_35%)]"
></div>
</div>
<div class="relative">
@@ -82,7 +82,7 @@ import { ThemeToggleComponent } from '../../shared/ui/theme-toggle/theme-toggle.
</div>
</main>
<footer
class="border-t border-zinc-200/80 bg-white/80 transition-colors duration-300 dark:border-slate-900/60 dark:bg-slate-950/80"
class="border-t border-zinc-200/70 bg-[#f8faf7]/85 transition-colors duration-300 dark:border-slate-900/60 dark:bg-slate-950/80"
>
<div
class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-4 py-6 text-sm text-zinc-500 dark:text-zinc-400 md:px-8"

12
src/app/features/about/about-it-section.component.ts
View File

@@ -16,7 +16,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
>
<div class="grid gap-6 lg:grid-cols-3">
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
Architecture
@@ -27,7 +27,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</p>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Front end</p>
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
@@ -36,7 +36,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</p>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
Delivery
@@ -47,7 +47,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</p>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
Backend Integration
@@ -57,7 +57,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</p>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
API Contracts
@@ -67,7 +67,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</p>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
Client Handling

4
src/app/features/about/about-me-section.component.ts
View File

@@ -29,7 +29,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</div>
<div class="grid gap-3">
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
Working principles
@@ -41,7 +41,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</ul>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Ways I help</p>
<ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">

20
src/app/features/cv/cv-section.component.ts
View File

@@ -16,7 +16,7 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
>
<div class="grid gap-6 lg:grid-cols-3">
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
Experience focus
@@ -29,35 +29,35 @@ import { SectionComponent } from '../../shared/ui/section/section.component';
</ul>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Skills & tools</p>
<div class="mt-3 flex flex-wrap gap-2 text-xs">
<span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
<span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
Angular
</span>
<span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
<span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
TypeScript
</span>
<span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
<span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
Node.js
</span>
<span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
<span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
Tailwind
</span>
<span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
<span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
Design systems
</span>
<span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
<span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
Testing
</span>
<span class="rounded-full bg-zinc-100 px-3 py-1 text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200">
<span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
CI/CD
</span>
</div>
</div>
<div
class="rounded-xl border border-zinc-200 bg-white/60 p-4 dark:border-slate-800/60 dark:bg-slate-900/40"
class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
How I structure work

10
src/app/features/home/home-section.component.ts
View File

@@ -26,7 +26,7 @@ type TimelineEntry = {
lead="Here’s a timeline of my professional growth and key milestones, highlighting significant roles and contributions."
>
<div
class="overflow-hidden rounded-3xl border border-zinc-200 bg-white/60 shadow-xl shadow-emerald-500/5 backdrop-blur-sm transition-colors duration-300 dark:border-slate-800/60 dark:bg-slate-950/40 dark:shadow-emerald-900/20"
class="overflow-hidden rounded-3xl border border-zinc-200/70 bg-[#fbfcfa]/80 shadow-xl shadow-emerald-900/5 backdrop-blur-sm transition-colors duration-300 dark:border-slate-800/60 dark:bg-slate-950/40 dark:shadow-emerald-900/20"
>
<div class="relative px-4 py-16 md:px-12">
<!-- Central Line -->
@@ -47,7 +47,7 @@ type TimelineEntry = {
<span class="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-emerald-600/90 dark:text-emerald-500/80">
{{ entry.step }} &bull; {{ entry.phase }}
</span>
<h3 class="mb-2 text-xl font-semibold text-zinc-900 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
<h3 class="mb-2 text-xl font-semibold text-zinc-800 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
{{ entry.title }}
</h3>
<p class="text-base text-zinc-600 leading-relaxed dark:text-slate-400">
@@ -66,7 +66,7 @@ type TimelineEntry = {
></span>
}
<div
class="relative h-3 w-3 rounded-full bg-emerald-500 ring-4 ring-white shadow-[0_0_12px_rgba(16,185,129,0.6)] transition-all duration-300 group-hover:scale-125 dark:ring-slate-950"
class="relative h-3 w-3 rounded-full bg-emerald-500 ring-4 ring-[#f4f7f5] shadow-[0_0_12px_rgba(16,185,129,0.45)] transition-all duration-300 group-hover:scale-125 dark:ring-slate-950"
></div>
</div>
</div>
@@ -78,7 +78,7 @@ type TimelineEntry = {
<span class="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-emerald-600/90 dark:text-emerald-500/80">
{{ entry.step }} &bull; {{ entry.phase }}
</span>
<h3 class="mb-2 text-xl font-semibold text-zinc-900 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
<h3 class="mb-2 text-xl font-semibold text-zinc-800 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
{{ entry.title }}
</h3>
<p class="text-base text-zinc-600 leading-relaxed dark:text-slate-400">
@@ -92,7 +92,7 @@ type TimelineEntry = {
<span class="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-emerald-600/90 dark:text-emerald-500/80">
{{ entry.step }} &bull; {{ entry.phase }}
</span>
<h3 class="mb-2 text-xl font-semibold text-zinc-900 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
<h3 class="mb-2 text-xl font-semibold text-zinc-800 transition-colors group-hover:text-emerald-600 dark:text-slate-100 dark:group-hover:text-emerald-400">
{{ entry.title }}
</h3>
<p class="text-base text-zinc-600 leading-relaxed dark:text-slate-400">

6
src/app/features/portfolio/portfolio-section.component.ts
View File

@@ -24,21 +24,21 @@ type PortfolioItem = {
<div class="grid gap-6 md:grid-cols-2">
@for (item of items; track item.title) {
<article
class="flex h-full flex-col gap-3 rounded-xl border border-zinc-200 bg-white/60 p-5 dark:border-slate-800/60 dark:bg-slate-900/40"
class="flex h-full flex-col gap-3 rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-5 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
>
<div class="flex items-center justify-between text-sm text-zinc-500 dark:text-zinc-400">
<span>{{ item.period }}</span>
<div class="flex flex-wrap gap-1">
@for (tag of item.tags; track tag) {
<span
class="rounded-full bg-zinc-100 px-2 py-1 text-[11px] text-zinc-700 dark:bg-slate-800/80 dark:text-zinc-200"
class="rounded-full bg-emerald-50/80 px-2 py-1 text-[11px] text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0"
>
{{ tag }}
</span>
}
</div>
</div>
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
<h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-50">
{{ item.title }}
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-300">

2
src/app/shared/ui/section/section.component.ts
View File

@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common';
template: `
<section
[id]="id"
class="scroll-mt-24 border-b border-zinc-200 last:border-b-0 dark:border-zinc-800/30"
class="scroll-mt-24 border-b border-zinc-200/70 last:border-b-0 dark:border-zinc-800/30"
>
<div
class="mx-auto flex max-w-5xl flex-col gap-6 px-4 py-16 md:px-8 md:py-24"

8
src/app/shared/ui/theme-toggle/theme-toggle.component.ts
View File

@@ -8,11 +8,11 @@ import { ThemeService, Theme } from '../../../core/services/theme.service';
imports: [CommonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="relative flex items-center rounded-full border border-zinc-200 bg-white/50 p-1 backdrop-blur dark:border-slate-800 dark:bg-slate-950/50">
<div class="relative flex items-center rounded-full border border-zinc-200/70 bg-[#f8faf7]/70 p-1 backdrop-blur dark:border-slate-800 dark:bg-slate-950/50">
<button
type="button"
class="relative flex h-7 w-7 items-center justify-center rounded-full text-zinc-500 transition hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 dark:text-slate-400 dark:hover:text-slate-100"
[class.bg-white]="themeService.theme() === 'light'"
[class.bg-zinc-50]="themeService.theme() === 'light'"
[class.text-emerald-600]="themeService.theme() === 'light'"
[class.shadow-sm]="themeService.theme() === 'light'"
[class.dark:bg-slate-800]="themeService.theme() === 'light'"
@@ -28,7 +28,7 @@ import { ThemeService, Theme } from '../../../core/services/theme.service';
<button
type="button"
class="relative flex h-7 w-7 items-center justify-center rounded-full text-zinc-500 transition hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 dark:text-slate-400 dark:hover:text-slate-100"
[class.bg-white]="themeService.theme() === 'system'"
[class.bg-zinc-50]="themeService.theme() === 'system'"
[class.text-emerald-600]="themeService.theme() === 'system'"
[class.shadow-sm]="themeService.theme() === 'system'"
[class.dark:bg-slate-800]="themeService.theme() === 'system'"
@@ -44,7 +44,7 @@ import { ThemeService, Theme } from '../../../core/services/theme.service';
<button
type="button"
class="relative flex h-7 w-7 items-center justify-center rounded-full text-zinc-500 transition hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 dark:text-slate-400 dark:hover:text-slate-100"
[class.bg-white]="themeService.theme() === 'dark'"
[class.bg-zinc-50]="themeService.theme() === 'dark'"
[class.text-emerald-600]="themeService.theme() === 'dark'"
[class.shadow-sm]="themeService.theme() === 'dark'"
[class.dark:bg-slate-800]="themeService.theme() === 'dark'"