From 93e9c59436d6382c4a2a20a16a297b45d9802364 Mon Sep 17 00:00:00 2001 From: lobo Date: Wed, 14 Oct 2026 08:18:18 +0200 Subject: [PATCH] feat(projects): add architecture diagrams, align project texts Add diagrams to three projects. A tap opens them full size. Align en/de texts: no versions, Gitea not GitHub, Portainer, home server + VPS. Make To Be Played the featured project. Remove the Hostinger logo image. --- src/app/constants/AssetsConstants.ts | 7 +- .../dialog/project-dialog.component.html | 8 ++ .../dialog/project-dialog.component.spec.ts | 39 +++++--- .../pages/projects/projects.component.html | 8 +- .../pages/projects/projects.component.spec.ts | 8 ++ src/app/pages/projects/projects.component.ts | 27 +++--- src/assets/i18n/de.json | 22 ++--- src/assets/i18n/en.json | 22 ++--- .../projects/to-be-played/architecture.svg | 72 +++++++++++++++ .../projects/tribble-the-homeserver/1.webp | Bin 4678 -> 0 bytes .../tribble-the-homeserver/architecture.svg | 84 ++++++++++++++++++ 11 files changed, 247 insertions(+), 50 deletions(-) create mode 100644 src/assets/projects/to-be-played/architecture.svg delete mode 100644 src/assets/projects/tribble-the-homeserver/1.webp create mode 100644 src/assets/projects/tribble-the-homeserver/architecture.svg 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 28acbcd76b0a4c2022b3ec5f8f6668071fc4d9bb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4678 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 I|NpZU0B(cfod5s; 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 +