From c767c0b1a0136dee937689603eeaab5d2fcba17b Mon Sep 17 00:00:00 2001 From: Tim Kainz Date: Sun, 5 Apr 2026 12:38:04 +0200 Subject: [PATCH] add correct name and improve navbar --- src/app/app.css | 71 +++++++++++++++++++++++++++++++++++++ src/app/app.html | 33 ++++++++++++----- src/app/app.spec.ts | 1 + src/app/app.ts | 13 ++++++- src/pages/about/about.html | 2 +- src/pages/home/home.css | 6 ---- src/pages/home/home.html | 4 --- src/pages/home/home.spec.ts | 2 +- src/pages/home/home.ts | 4 +-- 9 files changed, 111 insertions(+), 25 deletions(-) diff --git a/src/app/app.css b/src/app/app.css index eaa0275..b2e041a 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -25,6 +25,13 @@ z-index: 20; } +.sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; +} + .brand { color: #e6edf3; font-size: 1.05rem; @@ -63,6 +70,35 @@ outline: none; } +.burger { + display: none; + width: 2.25rem; + height: 2.25rem; + border: 1px solid #30363d; + border-radius: 10px; + background: rgba(13, 17, 23, 0.65); + cursor: pointer; + padding: 0.25rem; +} + +.burger span { + display: block; + width: 1.2rem; + height: 2px; + margin: 0.24rem auto; + background: #e6edf3; +} + +.site-footer { + margin-top: 2rem; + text-align: center; + color: #8b949e; +} + +.site-footer p { + margin: 0; +} + @media (max-width: 1320px) { .content { max-width: 1040px; @@ -79,3 +115,38 @@ flex-wrap: wrap; } } + +@media (max-width: 768px) { + .content { + padding-top: calc(6.5rem + env(safe-area-inset-top)); + } + + .sidebar { + position: fixed; + top: 0.75rem; + right: 0.75rem; + left: 0.75rem; + width: auto; + margin: 0; + gap: 0.6rem; + border-radius: 16px; + } + + .subtitle { + display: none; + } + + .burger { + display: inline-block; + } + + .nav { + display: none; + flex-direction: column; + gap: 0.4rem; + } + + .nav.nav-open { + display: flex; + } +} diff --git a/src/app/app.html b/src/app/app.html index df74492..97d2acc 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,19 +1,34 @@
+
+

(c) {{ currentYear }} Tim Kainz - Fullstack Developer (Angular - C# - Flutter)

+
diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts index 096b967..6e54287 100644 --- a/src/app/app.spec.ts +++ b/src/app/app.spec.ts @@ -24,5 +24,6 @@ describe('App', () => { const compiled = fixture.nativeElement as HTMLElement; expect(compiled.querySelector('.sidebar')).toBeTruthy(); expect(compiled.querySelectorAll('.nav a').length).toBeGreaterThanOrEqual(4); + expect(compiled.querySelector('.site-footer')).toBeTruthy(); }); }); diff --git a/src/app/app.ts b/src/app/app.ts index 2675a3a..05c2726 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -7,4 +7,15 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'; templateUrl: './app.html', styleUrl: './app.css' }) -export class App {} +export class App { + isMenuOpen = false; + readonly currentYear = new Date().getFullYear(); + + toggleMenu(): void { + this.isMenuOpen = !this.isMenuOpen; + } + + closeMenu(): void { + this.isMenuOpen = false; + } +} diff --git a/src/pages/about/about.html b/src/pages/about/about.html index 06f3202..2149f28 100644 --- a/src/pages/about/about.html +++ b/src/pages/about/about.html @@ -3,7 +3,7 @@

About

Fullstack developer crafting modern web, backend, and mobile products.

- I am Alex Carter, and I enjoy building software that feels clean, fast, and reliable from + I am Tim Kainz, and I enjoy building software that feels clean, fast, and reliable from the first screen to the last API call.

diff --git a/src/pages/home/home.css b/src/pages/home/home.css index 74782e0..913f04f 100644 --- a/src/pages/home/home.css +++ b/src/pages/home/home.css @@ -161,12 +161,6 @@ h2 { margin-top: 0.45rem; } -.footer { - margin-bottom: 0; - text-align: center; - color: #8b949e; -} - @media (max-width: 760px) { .page-wrap { padding-top: 0.5rem; diff --git a/src/pages/home/home.html b/src/pages/home/home.html index 4dc2cc7..3fc9512 100644 --- a/src/pages/home/home.html +++ b/src/pages/home/home.html @@ -61,8 +61,4 @@ } - - diff --git a/src/pages/home/home.spec.ts b/src/pages/home/home.spec.ts index 566bdf5..3ddc79a 100644 --- a/src/pages/home/home.spec.ts +++ b/src/pages/home/home.spec.ts @@ -25,7 +25,7 @@ describe('Home', () => { it('should render hero title and project section', () => { const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Alex Carter'); + expect(compiled.querySelector('h1')?.textContent).toContain('Tim Kainz'); expect(compiled.querySelector('#projects h2')?.textContent).toContain('Featured Projects'); expect(compiled.querySelector('.hero-cta a[routerlink="/about"]')).toBeTruthy(); }); diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts index 0d38646..1ff1112 100644 --- a/src/pages/home/home.ts +++ b/src/pages/home/home.ts @@ -29,10 +29,8 @@ interface TimelineItem { styleUrl: './home.css', }) export class Home { - readonly currentYear = new Date().getFullYear(); - readonly hero = { - name: 'Alex Carter', + name: 'Tim Kainz', role: 'Fullstack Developer', intro: 'I build polished web, backend, and mobile products with Angular, C#, and Flutter.',