diff --git a/src/app/constants/AssetsConstants.ts b/src/app/constants/AssetsConstants.ts index a2d2170..a2b0d8f 100644 --- a/src/app/constants/AssetsConstants.ts +++ b/src/app/constants/AssetsConstants.ts @@ -41,12 +41,11 @@ export class AssetsConstants { '/assets/projects/diploma/6.webp' ]; - static readonly CLAUDE_BOX_IMAGES = [ - '/assets/projects/claude-in-a-box/1.svg' - ]; + static readonly CLAUDE_BOX_DIAGRAM = '/assets/projects/claude-in-a-box/1.svg'; + static readonly TBP_DIAGRAM = '/assets/projects/to-be-played/architecture.svg'; + static readonly TRIBBLE_DIAGRAM = '/assets/projects/tribble-the-homeserver/architecture.svg'; static readonly TRIBBLE_IMAGES = [ - '/assets/projects/tribble-the-homeserver/1.webp', '/assets/projects/tribble-the-homeserver/2.webp', '/assets/projects/tribble-the-homeserver/3.webp', '/assets/projects/tribble-the-homeserver/4.webp' diff --git a/src/app/pages/projects/dialog/project-dialog.component.html b/src/app/pages/projects/dialog/project-dialog.component.html index d3b5317..d29d561 100644 --- a/src/app/pages/projects/dialog/project-dialog.component.html +++ b/src/app/pages/projects/dialog/project-dialog.component.html @@ -12,6 +12,14 @@ + @if (project.diagram) { +
+ + + +
+ } +
diff --git a/src/app/pages/projects/dialog/project-dialog.component.spec.ts b/src/app/pages/projects/dialog/project-dialog.component.spec.ts index 848c9bb..b23a6c3 100644 --- a/src/app/pages/projects/dialog/project-dialog.component.spec.ts +++ b/src/app/pages/projects/dialog/project-dialog.component.spec.ts @@ -1,4 +1,4 @@ -import { TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { provideZonelessChangeDetection } from '@angular/core'; import { MAT_DIALOG_DATA } from '@angular/material/dialog'; import { provideTranslateService } from '@ngx-translate/core'; @@ -27,27 +27,46 @@ describe('ProjectDialogComponent', () => { expect(() => register()).not.toThrow(); }); - it('renders an upgraded swiper-container for project images', async () => { + async function createDialog(data: object): Promise> { await TestBed.configureTestingModule({ imports: [ProjectDialogComponent], providers: [ provideZonelessChangeDetection(), provideTranslateService({ lang: 'en', fallbackLang: 'en' }), - { - provide: MAT_DIALOG_DATA, - useValue: { - title: 'T', - technologies: [], - images: [{ url: 'a.png' }, { url: 'b.png' }], - }, - }, + { provide: MAT_DIALOG_DATA, useValue: data }, ], }).compileComponents(); const fixture = TestBed.createComponent(ProjectDialogComponent); fixture.detectChanges(); + return fixture; + } + + it('renders an upgraded swiper-container for project images', async () => { + const fixture = await createDialog({ + title: 'T', + technologies: [], + images: [{ url: 'a.png' }, { url: 'b.png' }], + }); const el: HTMLElement = fixture.nativeElement.querySelector('swiper-container'); expect(el).not.toBeNull(); expect(el instanceof customElements.get('swiper-container')!).toBe(true); }); + + it('renders the diagram above the sections when the project has one', async () => { + const fixture = await createDialog({ title: 'T', technologies: [], images: [], diagram: 'd.svg' }); + + const img: HTMLImageElement | null = fixture.nativeElement.querySelector('img[alt="PROJECTS.DIAGRAM_ALT"]'); + expect(img?.getAttribute('src')).toBe('d.svg'); + const link: HTMLAnchorElement | null = img?.closest('a') ?? null; + expect(link?.getAttribute('href')).toBe('d.svg'); + expect(link?.getAttribute('target')).toBe('_blank'); + expect(fixture.nativeElement.querySelector('swiper-container')).toBeNull(); + }); + + it('renders no diagram without one', async () => { + const fixture = await createDialog({ title: 'T', technologies: [], images: [] }); + + expect(fixture.nativeElement.querySelector('img[alt="PROJECTS.DIAGRAM_ALT"]')).toBeNull(); + }); }); diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html index 1c60976..612fcd5 100644 --- a/src/app/pages/projects/projects.component.html +++ b/src/app/pages/projects/projects.component.html @@ -5,8 +5,8 @@ {{ project.title | translate }} {{ project.shortDescription | translate }} - @if(project.images.length > 0) { - + @if (cardImage(project); as imageUrl) { + } @else {
{{ project.icon }} @@ -31,8 +31,8 @@ {{ project.title | translate }} - @if(project.images.length > 0) { - + @if (cardImage(project); as imageUrl) { + } @else {
{{ project.icon }} diff --git a/src/app/pages/projects/projects.component.spec.ts b/src/app/pages/projects/projects.component.spec.ts index 1643961..78b43d3 100644 --- a/src/app/pages/projects/projects.component.spec.ts +++ b/src/app/pages/projects/projects.component.spec.ts @@ -36,6 +36,14 @@ describe('ProjectsComponent', () => { expect(titles).toContain('PROJECTS.TBP.TITLE'); }); + it('features To Be Played', () => { + expect(fixture.componentInstance.featuredProject()?.identifier).toBe('to-be-played'); + }); + + it('card falls back to the diagram when a project has no images', () => { + expect(fixture.nativeElement.querySelector('img[src="/assets/projects/claude-in-a-box/1.svg"]')).not.toBeNull(); + }); + it('every project translation key exists in en and de', () => { const keys = fixture.componentInstance.allProjects.flatMap(project => [ project.title, diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts index 0a81a6e..62a26d8 100644 --- a/src/app/pages/projects/projects.component.ts +++ b/src/app/pages/projects/projects.component.ts @@ -19,6 +19,7 @@ export interface Projects { url: string, source: string }[], + diagram?: string, icon: string, assets: string, links: { @@ -59,6 +60,7 @@ export class ProjectsComponent implements OnInit, OnDestroy { shortDescription: 'PROJECTS.TBP.SHORT_DESCRIPTION', introduction: 'PROJECTS.TBP.INTRODUCTION', images: AssetsConstants.TBP_IMAGES.map(url => ({ url, source: '' })), + diagram: AssetsConstants.TBP_DIAGRAM, icon: 'playlist_add_check', assets: '', links: [ @@ -82,7 +84,7 @@ export class ProjectsComponent implements OnInit, OnDestroy { 'PROJECTS.TBP.LEARNING_1', 'PROJECTS.TBP.LEARNING_2', ], - isFeatured: false, + isFeatured: true, technologies: ['Java', 'Spring Boot', 'PostgreSQL', 'React', 'Tailwind CSS', 'Docker'] }, { @@ -90,7 +92,8 @@ export class ProjectsComponent implements OnInit, OnDestroy { title: 'PROJECTS.CLAUDE_BOX.TITLE', shortDescription: 'PROJECTS.CLAUDE_BOX.SHORT_DESCRIPTION', introduction: 'PROJECTS.CLAUDE_BOX.INTRODUCTION', - images: AssetsConstants.CLAUDE_BOX_IMAGES.map(url => ({ url, source: '' })), + images: [], + diagram: AssetsConstants.CLAUDE_BOX_DIAGRAM, icon: 'smart_toy', assets: '', links: [], @@ -136,7 +139,7 @@ export class ProjectsComponent implements OnInit, OnDestroy { 'PROJECTS.PLAYGROUND.LEARNING_2', ], isFeatured: false, - technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker'] + technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'Gitea Actions', 'Docker'] }, { identifier: "elmucho", @@ -156,13 +159,12 @@ export class ProjectsComponent implements OnInit, OnDestroy { challenges: [ 'PROJECTS.EL_MUCHO.CHALLENGE_1', 'PROJECTS.EL_MUCHO.CHALLENGE_2', - 'PROJECTS.EL_MUCHO.CHALLENGE_3', ], learnings: [ 'PROJECTS.EL_MUCHO.LEARNING_1', 'PROJECTS.EL_MUCHO.LEARNING_2', ], - isFeatured: true, + isFeatured: false, technologies: ['Unity', 'C#', 'Steamworks', 'Git'] }, { @@ -223,16 +225,17 @@ export class ProjectsComponent implements OnInit, OnDestroy { shortDescription: 'PROJECTS.TRIBBLE.SHORT_DESCRIPTION', introduction: 'PROJECTS.TRIBBLE.INTRODUCTION', images: [ - { url: AssetsConstants.TRIBBLE_IMAGES[0], source: 'https://upload.wikimedia.org/wikipedia/commons/0/03/Hostinger_Logo.png' }, - { url: AssetsConstants.TRIBBLE_IMAGES[1], source: 'https://dashboardicons.com/icons/docker-engine' }, - { url: AssetsConstants.TRIBBLE_IMAGES[2], source: 'https://dashboardicons.com/icons/gitea' }, - { url: AssetsConstants.TRIBBLE_IMAGES[3], source: 'https://dashboardicons.com/icons/traefik' } + { url: AssetsConstants.TRIBBLE_IMAGES[0], source: 'https://dashboardicons.com/icons/docker-engine' }, + { url: AssetsConstants.TRIBBLE_IMAGES[1], source: 'https://dashboardicons.com/icons/gitea' }, + { url: AssetsConstants.TRIBBLE_IMAGES[2], source: 'https://dashboardicons.com/icons/traefik' } ], + diagram: AssetsConstants.TRIBBLE_DIAGRAM, icon: 'dns', assets: '', links: [ { name: 'Ubuntu Server', url: 'https://ubuntu.com/server' }, { name: 'Docker', url: 'https://www.docker.com/' }, + { name: 'Portainer', url: 'https://www.portainer.io/' }, { name: 'Traefik', url: 'https://traefik.io/' }, { name: 'Gitea', url: 'https://gitea.io/' }, { name: 'Jellyfin', url: 'https://jellyfin.org/' }, @@ -255,13 +258,17 @@ export class ProjectsComponent implements OnInit, OnDestroy { 'PROJECTS.TRIBBLE.LEARNING_2', ], isFeatured: false, - technologies: ['Ubuntu Server', 'Docker', 'Traefik', 'Gitea', 'Jellyfin', 'AdGuard Home', 'Paperless-ngx', 'Tailscale'] + technologies: ['Ubuntu Server', 'Docker', 'Portainer', 'Traefik', 'Gitea', 'Jellyfin', 'AdGuard Home', 'Paperless-ngx', 'Tailscale'] } ] featuredProject = computed(() => this.allProjects.find(p => p.isFeatured)); otherProjects = computed(() => this.allProjects.filter(p => !p.isFeatured)); + cardImage(project: Projects): string | undefined { + return project.images[0]?.url ?? project.diagram; + } + ngOnInit(): void { window.scrollTo({ top: 0, behavior: 'smooth' }); setTimeout(() => { this.dialogOpenFunction(); }, 10); diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 0a00729..8beee6d 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -212,9 +212,9 @@ "LINK_EXTERNAL": "andreas-dahm.eu", "LINK_INTERNAL": "Projektdetails", "HIGHLIGHTS": { - "P1": "Einsatz moderner Technologien und CI/CD-Pipelines (Angular 20+, Spring Boot 4, GitHub).", + "P1": "Moderner Frontend-Stack und eine CI/CD-Pipeline mit Gitea Actions (Angular, Docker).", "P2": "Präsentation persönlicher Projekte und kontinuierliche Verbesserung algorithmischer Fähigkeiten.", - "P3": "Vertiefung von JavaScript/TypeScript-, Angular- und Spring-Boot-Kenntnissen durch praktisches Arbeiten." + "P3": "Vertiefung von JavaScript/TypeScript- und Angular-Kenntnissen durch praktisches Arbeiten." } }, "P1": { @@ -301,6 +301,7 @@ "PROJECTS": { "DOWNLOAD": "Herunterladen", "READ_MORE": "Mehr erfahren", + "DIAGRAM_ALT": "Architekturdiagramm", "LINK_TO_PROJECT": "Zum Projekt", "CLOSE": "Schließen", "SECTION": { @@ -309,11 +310,11 @@ }, "PLAYGROUND": { "TITLE": "Playground Portfolio", - "SHORT_DESCRIPTION": "Full-Stack Portfolio mit interaktiven Algorithmus-Visualisierungen.", + "SHORT_DESCRIPTION": "Frontend-Portfolio mit interaktiven Algorithmus-Visualisierungen.", "INTRODUCTION": "Diese Website dient als lebendiges Portfolio und Testumgebung für moderne Webtechnologien. Ziel ist es, komplexe Algorithmen und mathematische Konzepte (wie WebGPU-Simulationen oder Raymarching) anschaulich im Browser darzustellen.", - "BULLET_1": "Entwicklung mit Angular 19+ und Material Design.", + "BULLET_1": "Entwicklung mit Angular und Material Design.", "BULLET_2": "Implementierung performanter Visualisierungen (WebGPU, Shader, Canvas).", - "BULLET_3": "Automatisierte CI/CD-Pipelines und Containerisierung mit Docker.", + "BULLET_3": "Automatisierte CI/CD mit Gitea Actions und Containerisierung mit Docker.", "BULLET_4": "Internationalization (i18n) für globale Reichweite.", "CHALLENGE_1": "Optimierung der Render-Performance bei komplexen 3D-Fraktalen in Echtzeit.", "CHALLENGE_2": "Architektur einer skalierbaren und wartbaren Frontend-Struktur für diverse Sub-Projekte.", @@ -322,11 +323,11 @@ }, "TRIBBLE": { "TITLE": "Self-Hosted Infrastructure", - "SHORT_DESCRIPTION": "Home-Infrastruktur mit Docker, Traefik und sicherer VPN-Anbindung.", - "INTRODUCTION": "Dokumentation und Aufbau einer privaten Cloud-Infrastruktur. Fokus liegt auf Datensouveränität, Automatisierung und Sicherheit.", + "SHORT_DESCRIPTION": "Home-Server für CI und private Dienste, dazu ein VPS für die öffentlichen Seiten.", + "INTRODUCTION": "Zwei Maschinen: Der Home-Server „Tribble“ betreibt Gitea mit Actions-Runner und die privaten Dienste, ein Hostinger-VPS liefert die öffentlichen Seiten aus. Die CI baut die Images zu Hause, der VPS zieht neue Images mit Watchtower über Tailscale, und Traefik leitet die öffentlichen Seiten weiter.", "BULLET_1": "Zentrale Verwaltung via Docker-Compose und Portainer.", "BULLET_2": "Automatisches SSL-Management und Reverse-Proxy mit Traefik.", - "BULLET_3": "Private Versionskontrolle (Gitea) und Medien-Streaming (Jellyfin).", + "BULLET_3": "Private Versionskontrolle und CI mit Gitea, Medien-Streaming mit Jellyfin.", "BULLET_4": "Netzwerkweite Ad-Blocking und DNS-Kontrolle via AdGuard Home.", "CHALLENGE_1": "Konfiguration sicherer Netzwerkschichten und Firewall-Regeln für Remote-Zugriff.", "CHALLENGE_2": "Automatisierung von Backups und Recovery-Strategien für containerisierte Daten.", @@ -336,14 +337,13 @@ "EL_MUCHO": { "TITLE": "El Mucho (Steam Release)", "SHORT_DESCRIPTION": "Rundenbasiertes Taktik-RPG, veröffentlicht auf Steam.", - "INTRODUCTION": "Ein kommerzielles Spieleprojekt, das von der ersten Idee bis zum weltweiten Release auf Steam eigenverantwortlich umgesetzt wurde. Ein taktisches RPG, das klassische Gameplay-Elemente mit modernen Systemen verbindet.", - "BULLET_1": "Komplette Engine-Entwicklung in Unity (C#).", + "INTRODUCTION": "Ein kommerzielles Spiel, das mein Bruder und ich von der ersten Idee bis zum Release auf Steam gebracht haben: geplant, gebaut, verkauft. Ein taktisches RPG, das klassische Gameplay-Elemente mit modernen Systemen verbindet.", + "BULLET_1": "Spielentwicklung in Unity (C#).", "BULLET_2": "Integration von Steamworks-Funktionen (Achievements, Cloud Saves).", "BULLET_3": "Entwicklung einer eigenen taktischen KI und Pfadfindungs-Logik.", "BULLET_4": "Management des gesamten Asset-Pipelines und Sound-Designs.", "CHALLENGE_1": "Implementierung eines robusten rundenbasierten Systems mit komplexen Abhängigkeiten.", "CHALLENGE_2": "Performance-Optimierung für eine flüssige Darstellung auf verschiedenen Hardware-Profilen.", - "CHALLENGE_3": "Umgang mit den strengen Zertifizierungs-Anforderungen von Steam.", "LEARNING_1": "Durchhaltevermögen und Fokus über einen mehrjährigen Entwicklungszyklus.", "LEARNING_2": "Vermarktung und Community-Management für ein digitales Produkt." }, diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index c1d2963..e6ae0bc 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -212,9 +212,9 @@ "LINK_EXTERNAL": "andreas-dahm.eu", "LINK_INTERNAL": "Project details", "HIGHLIGHTS": { - "P1": "Using modern technologies and CI/CD pipelines (Angular 20+, Spring Boot 4, GitHub).", + "P1": "Modern frontend stack and a CI/CD pipeline on Gitea Actions (Angular, Docker).", "P2": "Showcasing personal projects and improving algorithmic skills over time.", - "P3": "Deepening knowledge in JavaScript/TypeScript, Angular, Spring Boot and related technologies through hands-on practice." + "P3": "Deepening knowledge in JavaScript/TypeScript, Angular and related technologies through hands-on practice." } }, "P1": { @@ -301,6 +301,7 @@ "PROJECTS": { "DOWNLOAD": "Download", "READ_MORE": "Read More", + "DIAGRAM_ALT": "Architecture diagram", "LINK_TO_PROJECT": "To the project", "CLOSE": "Close", "SECTION": { @@ -309,11 +310,11 @@ }, "PLAYGROUND": { "TITLE": "Playground Portfolio", - "SHORT_DESCRIPTION": "Full-stack portfolio with interactive algorithm visualizations.", + "SHORT_DESCRIPTION": "Frontend portfolio with interactive algorithm visualizations.", "INTRODUCTION": "This website serves as a living portfolio and testing ground for modern web technologies. The goal is to clearly represent complex algorithms and mathematical concepts (such as WebGPU simulations or Raymarching) directly in the browser.", - "BULLET_1": "Development with Angular 19+ and Material Design.", + "BULLET_1": "Development with Angular and Material Design.", "BULLET_2": "Implementation of performant visualizations (WebGPU, Shader, Canvas).", - "BULLET_3": "Automated CI/CD pipelines and containerization with Docker.", + "BULLET_3": "Automated CI/CD with Gitea Actions and containerization with Docker.", "BULLET_4": "Internationalization (i18n) for global reach.", "CHALLENGE_1": "Optimizing render performance for complex 3D fractals in real-time.", "CHALLENGE_2": "Architecting a scalable and maintainable frontend structure for diverse sub-projects.", @@ -322,11 +323,11 @@ }, "TRIBBLE": { "TITLE": "Self-Hosted Infrastructure", - "SHORT_DESCRIPTION": "Home infrastructure with Docker, Traefik, and secure VPN connectivity.", - "INTRODUCTION": "Documentation and construction of a private cloud infrastructure. Focus is on data sovereignty, automation, and security.", + "SHORT_DESCRIPTION": "Home server for CI and private services, plus a VPS for the public sites.", + "INTRODUCTION": "Two machines: the home server \"Tribble\" runs Gitea with its Actions runner and the private services, and a Hostinger VPS serves the public sites. CI builds the images at home, the VPS pulls new images over Tailscale with Watchtower, and Traefik routes the public sites.", "BULLET_1": "Central management via Docker-Compose and Portainer.", "BULLET_2": "Automatic SSL management and reverse proxy with Traefik.", - "BULLET_3": "Private version control (Gitea) and media streaming (Jellyfin).", + "BULLET_3": "Private version control and CI with Gitea, media streaming with Jellyfin.", "BULLET_4": "Network-wide ad-blocking and DNS control via AdGuard Home.", "CHALLENGE_1": "Configuring secure network layers and firewall rules for remote access.", "CHALLENGE_2": "Automating backups and recovery strategies for containerized data.", @@ -336,14 +337,13 @@ "EL_MUCHO": { "TITLE": "El Mucho (Steam Release)", "SHORT_DESCRIPTION": "Turn-based tactical RPG, published on Steam.", - "INTRODUCTION": "A commercial game project that was independently implemented from the initial idea to the worldwide release on Steam. A tactical RPG that combines classic gameplay elements with modern systems.", - "BULLET_1": "Complete engine development in Unity (C#).", + "INTRODUCTION": "A commercial game that my brother and I took from the first idea to the release on Steam: planned, built and sold. A tactical RPG that combines classic gameplay elements with modern systems.", + "BULLET_1": "Game development in Unity (C#).", "BULLET_2": "Integration of Steamworks features (Achievements, Cloud Saves).", "BULLET_3": "Development of a custom tactical AI and pathfinding logic.", "BULLET_4": "Management of the entire asset pipeline and sound design.", "CHALLENGE_1": "Implementing a robust turn-based system with complex dependencies.", "CHALLENGE_2": "Performance optimization for a smooth experience across various hardware profiles.", - "CHALLENGE_3": "Handling Steam's strict certification requirements.", "LEARNING_1": "Perseverance and focus over a multi-year development cycle.", "LEARNING_2": "Marketing and community management for a digital product." }, diff --git a/src/assets/projects/to-be-played/architecture.svg b/src/assets/projects/to-be-played/architecture.svg new file mode 100644 index 0000000..48eebf6 --- /dev/null +++ b/src/assets/projects/to-be-played/architecture.svg @@ -0,0 +1,72 @@ + + To Be Played + Architecture of To Be Played: a React frontend talks to an Auth service that signs tokens and a Core service that verifies them. Both use PostgreSQL, Core also calls the Steam API and IGDB. + + + + + + + + + + + + + + + + + + + + + + + + to-be-played + three services, one login + + React Frontend + browser + + Auth service + signs tokens, Ed25519 private key + HttpOnly cookies + + Core service + library, stats, suggestions + verifies tokens, public key only + + POSTGRESQL + + auth db + + core db + EXTERNAL + + Steam API + + IGDB + + login + + API, cookie + + + + sync + + time to beat + + react · spring boot · postgresql · docker + diff --git a/src/assets/projects/tribble-the-homeserver/1.webp b/src/assets/projects/tribble-the-homeserver/1.webp deleted file mode 100644 index 28acbcd..0000000 Binary files a/src/assets/projects/tribble-the-homeserver/1.webp and /dev/null differ diff --git a/src/assets/projects/tribble-the-homeserver/architecture.svg b/src/assets/projects/tribble-the-homeserver/architecture.svg new file mode 100644 index 0000000..3a97eac --- /dev/null +++ b/src/assets/projects/tribble-the-homeserver/architecture.svg @@ -0,0 +1,84 @@ + + Self-hosted infrastructure + Architecture of the self-hosted infrastructure: a push to Gitea on the home server builds an image at home, Watchtower on the Hostinger VPS pulls it over Tailscale, and Traefik routes the public sites. + + + + + + + + + + + + + + + + + + + + + + + + Self-hosted infrastructure + build at home, serve from the VPS + + HOME SERVER "TRIBBLE" + + Gitea + git, Actions runner, container registry + + Traefik + + Portainer + + Jellyfin + + AdGuard Home + + Paperless-ngx + + Tailscale + + HOSTINGER VPS + + Watchtower + pulls new images automatically + + deploy + + Playground (this site) + + + + Pepper Pepperoni + + + + To Be Played + + + + Traefik + TLS, routing + + git push + + new image + via Tailscale + + gitea · docker · traefik · tailscale · watchtower +