×
−
+
File
Edit
Selection
View
Go
Run
sebastian-koch — portfolio
DE
M↓README.md
TSabout.tsx
🖼portrait.jpg
{}experience.json
TSskills.ts
TSprojects.tsx
M↓contact.md
EXPLORER
PORTFOLIO
M↓README.md
src
TSabout.tsx
TSskills.ts
assets
🖼portrait.jpg
{}experience.json
projects
TSeverythingapp.tsx
TSkochwebservice.tsx
TSfasnettracker.tsx
TSweddingplanner.tsx
M↓contact.md
PROBLEMS
OUTPUT
DEBUG CONSOLE
TERMINAL
PORTS
sebastian@portfolio ~ %
portfolio / README.md
1
# Sebastian Koch
2
3
> Ich baue moderne, schnelle Web-Apps – von der ersten Idee bis zum letzten Pixel.
4
5
## Senior Frontend Engineer
6
7
- 📍 Eichstetten am Kaiserstuhl
8
- 🗣 Deutsch (Muttersprache) · Englisch (fließend) · Typescript (fließend)
9
- 🟢 Verfügbar für neue Projekte
10
11
<!-- Tipp: links im Explorer durch die Dateien stöbern -->
portfolio / src / about.tsx
1
import { Developer } from "./types"
2
3
export const sebastian: Developer = {
4
name: "Sebastian Koch",
5
role: "Senior Frontend Engineer",
6
location: "Eichstetten am Kaiserstuhl",
7
bio: [
8
"Senior Frontend Engineer mit Leidenschaft für sauberen Code, durchdachte Interfaces und Performance. Aktuell entwickle ich eine Plattform für die Kommunikation im Energiemarkt.",
9
"Mein Weg führte von der Ausbildung zum Fachinformatiker über die Entwicklung eines kompletten Onlineshops bis hin zu komplexen Web-Plattformen – immer mit dem Anspruch, Dinge richtig zu machen.",
10
"In meinen privaten Projekten baue ich alles selbst: Frontend, eigenes Backend, Datenmodell und Deployment.",
11
],
12
languages: ["Deutsch (Muttersprache)", "Englisch (fließend)", "Typescript (fließend)"],
13
license: "Klasse B",
14
hobbies: ["Programmieren", "Schlagzeug spielen", "Ehrenamtliche Tätigkeit in der Guggemusik"],
15
available: true,
16
};
portfolio / assets / portrait.jpg
portrait.jpg2832 × 3776Fit// das bin ich 👋
portfolio / experience.json
1
[
2
{
3
"type": "work",
4
"company": "Mako365 GmbH",
5
"role": "Senior Frontend Engineer",
6
"location": "Mannheim",
7
"period": "Mai 2025 – heute",
8
"highlights": [
9
"Entwicklung einer Plattform zur Kommunikation im Energiemarkt.",
10
"Planung, Konzeption und Umsetzung ganzheitlicher Prozesse."
11
]
12
},
13
{
14
"type": "work",
15
"company": "Sebastian Koch Webservice",
16
"role": "Webentwickler (selbstständig)",
17
"location": "Eichstetten am Kaiserstuhl",
18
"period": "September 2026 – heute",
19
"highlights": [
20
"Konzeption, Entwicklung und laufender Betrieb von Websites für Vereine und kleine Betriebe.",
21
"Eigene Plattform als Monorepo: geteilter Komponenten-Katalog, mandantenfähige Kundenprojekte, Verwaltungs-Tool und Kundenportal.",
22
"Eigenes Express-Backend für transaktionale Mails und das Portal, Firebase (Auth, Firestore, Storage) und Deployment auf Vercel."
23
]
24
},
25
{
26
"type": "work",
27
"company": "Alexander Bürkle GmbH",
28
"role": "Softwareentwickler",
29
"location": "Freiburg",
30
"period": "Feb. 2022 – Mai 2025",
31
"highlights": [
32
"Entwicklung eines Onlineshops mit React.js und TypeScript.",
33
"Automatisiertes Frontend-Testing mit Cypress.",
34
"QA / QS."
35
]
36
},
37
{
38
"type": "training",
39
"company": "EMIS Electrics GmbH, Waldkirch",
40
"role": "Ausbildung Fachinformatiker Anwendungsentwicklung",
41
"period": "Jan. 2020 – Feb. 2022",
42
"highlights": [
43
"Entwicklung, Gestaltung und Wartung von Vue.js-Applikationen. Umsetzung von Python-Backends, um Sensordaten zu verarbeiten und über eine API bereitzustellen."
44
]
45
},
46
{
47
"type": "education",
48
"company": "DHBW Karlsruhe",
49
"role": "3 Semester Studium Informatik",
50
"period": "Okt. 2018 – Nov. 2019"
51
},
52
{
53
"type": "education",
54
"company": "Max-Weber-Schule, Freiburg",
55
"role": "Fachhochschulreife Wirtschaftsinformatik",
56
"period": "Sep. 2016 – Juli 2018"
57
}
58
]
portfolio / src / skills.ts
1
// rated 1–5, honed on real projects
2
export const skills = {
3
"TypeScript / JavaScript": 5, // █████
4
"React.js": 4, // ████░
5
"HTML / CSS": 4, // ████░
6
"Cypress": 4, // ████░
7
"Vue.js": 3, // ███░░
8
} as const;
9
10
export const stack = [
11
"Next.js", "Node.js", "Express", "Python", "Firebase", "Material UI", "styled-components", "Framer Motion", "Git"
12
];
portfolio / projects / index.tsx
1
// das Projekt, auf das ich am meisten stolz bin
2
export const everythingApp: Project = {
3
name: "EverythingApp",
4
tagline: "Eine App für alles – meine persönliche Super-App, inklusive eigenem Backend.",
5
description: "Eine als PWA gebaute Allround-App, die rund 20 Alltags-Tools unter einem Dach vereint: von Reiseplanung über Haushalt und Rezepte bis zur Zeiterfassung. Dahinter läuft ein eigenes Express-Backend, das die Firestore-Zugriffe absichert, Überstunden serverseitig berechnet und Mails verschickt; geplante Jobs und Push-Benachrichtigungen übernehmen Firebase Cloud Functions. Schreibvorgänge funktionieren offline und werden beim Reconnect feldweise zusammengeführt.",
6
stack: ["Next.js", "React", "TypeScript", "Express", "Node.js", "Firestore", "Cloud Functions", "Material UI", "styled-components", "i18next", "PWA", "Sentry", "Vercel", "Kotlin"],
7
backend: {
8
runtime: "Express 5 + TypeScript auf Node 22",
9
data: "Firestore über firebase-admin, Collection-Allowlist + Schema-Validierung",
10
auth: "Firebase-ID-Token + API-Token, serverseitiges Owner-Scoping",
11
jobs: "Firebase Cloud Functions (Cron): Push-Versand, Überstunden- & Buchungs-Checks",
12
types: "aus dem Backend generierte API-Typen, mit dem Frontend synchronisiert",
13
deploy: "Vercel · api.everythingapp.me",
14
},
15
features: [
16
"Reiseplaner mit Karten & Tagesplanung",
17
"Haushaltsplaner: Essensplan, Rezepte, Vorräte, Einkaufsliste",
18
"Zeiterfassung mit serverseitiger Überstundenberechnung",
19
"Kanban-Board, To-dos & Notizen",
20
"Habit-Tracker mit Statistiken",
21
"Wheel of Names, Umfragen & GameMaker",
22
"Push-Benachrichtigungen & geplante Jobs",
23
"Offline-Sync mit Merge beim Reconnect",
24
"Native Android-Widgets"
25
],
26
27
};
28
29
// mein freiberufliches Nebengewerbe, siehe Erfahrung
30
export const kochWebservice: Project = {
31
name: "Sebastian Koch Webservice",
32
tagline: "Websites für Vereine und kleine Betriebe, komplett selbst gebaut und betreut.",
33
description: "Eine eigene Plattform, auf der ich Kundenwebsites baue und dauerhaft betreibe. Aufgebaut als Monorepo aus einem geteilten Komponenten-Katalog (als rohes TypeScript-Paket ausgeliefert), mandantenfähigen Kundenprojekten, einem Verwaltungs-Tool und einem Kundenportal. Jedes Kundenprojekt ist für sich baubar und wird einzeln auf Vercel deployt. Ein eigenes Express-Backend übernimmt transaktionale Mails über benannte Absenderprofile und versorgt das Portal, das Firestore nie direkt anfasst, sondern feldweise gefilterte Daten über das Backend bezieht. Ein Preisrechner auf der Marketing-Seite erzeugt individuelle Angebote.",
34
stack: ["Next.js", "React", "TypeScript", "Express", "Node.js", "Firebase", "Firestore", "Material UI", "Monorepo", "Vercel"],
35
backend: {
36
runtime: "Express + TypeScript auf Node",
37
mail: "transaktionale Mails über POST /api/v1/mail/send, Absender als benannte Profile in der Server-Umgebung",
38
portal: "Portal-Endpunkte, die Firestore per Positivliste feldweise filtern, damit Rules keine sensiblen Felder durchreichen",
39
data: "Firebase (Firestore, Auth, Storage) über das Admin-SDK, je Kundenprojekt ein eigenes Dienstkonto",
40
deploy: "Vercel, je Projekt npm ci, geteiltes globals-Paket per Versionssprung propagiert",
41
},
42
features: [
43
"Mandantenfähige Kundenprojekte, je eigenes Repo und eigener Vercel-Build",
44
"Geteilter Komponenten-Katalog als rohes TypeScript-Paket (transpilePackages)",
45
"Verwaltungs-Tool für Kunden, Firebase-Rules und Logins",
46
"Kundenportal: Stammdaten, gebuchte Leistungen, Rechnungen, Adminzugänge",
47
"Preisrechner, der individuelle Angebote erzeugt",
48
"Zentrale .env, die schlüsselweise in alle Apps synchronisiert wird"
49
],
50
51
};
52
53
// ein Agent pflegt die Daten, ich pflege nur die Regeln
54
export const fasnetTracker: Project = {
55
name: "Fasnettracker",
56
tagline: "Alle Fasnetstermine einer Region an einer Stelle – täglich automatisch eingesammelt.",
57
description: "Eine öffentliche Terminübersicht für die schwäbisch-alemannische Fasnet: Suche, Liste nach Datum und Karte. Die Termine sammelt ein täglicher Lauf selbst von den Seiten der Vereine ein – ein Sprachmodell liest die Terminseite und gibt strukturierte Veranstaltungen zurück. Eine Kostenbremse hasht den Seitentext und ruft das Modell nur bei echten Änderungen auf, ein Grabstein-Eintrag verhindert, dass von Hand gelöschte Termine beim nächsten Lauf zurückkommen. Lesen darf jeder ohne Anmeldung, schreiben nur der Admin: durchgesetzt allein über Firestore-Security-Rules, an denen auch die Pflegeskripte nicht vorbeikommen.",
58
stack: ["Next.js", "React", "TypeScript", "Material UI", "styled-components", "Firestore", "Security Rules", "Cloud Functions", "Claude", "Leaflet", "OpenStreetMap"],
59
backend: {
60
sync: "geplante Cloud Function, die Terminseiten lädt und per Modell in Veranstaltungen übersetzt",
61
kosten: "Hash je Seite, Modellaufruf nur bei geändertem Text; Modell je Aufgabe im Admin umstellbar",
62
auth: "keine Registrierung, Adminrechte hängen an einem Dokument in admins",
63
data: "Firestore, öffentlich lesbar, schreibend nur über Rules mit struktureller Validierung",
64
tests: "Skript, das die eingespielten Rules im echten Projekt abklopft – lesen muss gehen, schreiben nicht",
65
},
66
features: [
67
"Suche über Vereine, Orte und Veranstaltungen",
68
"Terminliste nach Datum, serverseitig gerenderte Detailseiten",
69
"Karte auf Leaflet & OpenStreetMap",
70
"Täglicher Sync mit Protokoll je Lauf inkl. gemessener Kosten",
71
"Vereinsregister mit Skripten für Terminseiten, Logos, Mails und Koordinaten",
72
"Admin für Vereine, Termine und Sync-Einstellungen"
73
],
74
};
75
76
// privates Projekt – Details bleiben unter Verschluss, kein öffentlicher Link
77
export const weddingPlanner: Project = {
78
name: "Wedding Planner",
79
tagline: "Private Hochzeits-Web-App – Gäste, Sitzplan, Fotos.",
80
description: "Eine geschlossene Web-App für ein Hochzeitspaar: Gäste verwalten, Rückmeldungen einsammeln, den Sitzplan per Drag & Drop bauen und Fotos hochladen. Statt Logins gibt es personalisierte Zugangscodes mit QR-Deeplink; autorisiert wird ausschließlich über Firestore- und Storage-Security-Rules mit struktureller Validierung – bewusst ohne eigenes Backend.",
81
stack: ["Next.js", "React", "TypeScript", "Material UI", "styled-components", "Firestore", "Firebase Storage", "Security Rules", "PWA"],
82
features: [
83
"Gästeverwaltung mit Excel-Import/-Export",
84
"Personalisierte Zugangscodes & QR-Codes als Bulk-Download",
85
"Rückmeldungen inkl. Familien & Begleitungen",
86
"Drag-&-Drop-Sitzplan mit Raum-Editor und Export",
87
"Foto-Upload mit clientseitigem Resizing & Foto-Challenges",
88
"Budget-Übersicht, FAQ & Wunschliste",
89
"Feature-Flags zum Zu- und Abschalten von Bereichen"
90
],
91
};
portfolio / contact.md
1
# Lass uns reden
2
3
> Du hast ein Projekt, eine Idee oder eine offene Stelle? Schreib mir gern.
4
5
6
8
9
— Sebastian Koch · © 2026
main
0 0
open to work
Ln 12, Col 1
Spaces: 2
UTF-8
LF
Markdown
♥