×
−
+
File
Edit
Selection
View
Go
Run
sebastian-koch — portfolio
DE
M↓README.md
TSabout.tsx
🖼portrait.jpg
{}experience.json
TSskills.ts
TSeverythingapp.tsx
M↓contact.md
EXPLORER
PORTFOLIO
M↓README.md
src
TSabout.tsx
TSskills.ts
assets
🖼portrait.jpg
{}experience.json
projects
TSeverythingapp.tsx
TScoming-soon.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
],
11
languages: ["Deutsch (Muttersprache)", "Englisch (fließend)", "Typescript (fließend)"],
12
license: "Klasse B",
13
hobbies: ["Programmieren", "Schlagzeug spielen", "Ehrenamtliche Tätigkeit in der Guggemusik"],
14
available: true,
15
};
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": "Alexander Bürkle GmbH",
16
"role": "Softwareentwickler",
17
"location": "Freiburg",
18
"period": "Feb. 2022 – Mai 2025",
19
"highlights": [
20
"Entwicklung eines Onlineshops mit React.js und TypeScript.",
21
"Automatisiertes Frontend-Testing mit Cypress.",
22
"QA / QS."
23
]
24
},
25
{
26
"type": "training",
27
"company": "EMIS Electrics GmbH, Waldkirch",
28
"role": "Ausbildung Fachinformatiker Anwendungsentwicklung",
29
"period": "Jan. 2020 – Feb. 2022",
30
"highlights": [
31
"Entwicklung, Gestaltung und Wartung von Vue.js-Applikationen. Umsetzung von Python-Backends, um Sensordaten zu verarbeiten und über eine API bereitzustellen."
32
]
33
},
34
{
35
"type": "education",
36
"company": "DHBW Karlsruhe",
37
"role": "3 Semester Studium Informatik",
38
"period": "Okt. 2018 – Nov. 2019"
39
},
40
{
41
"type": "education",
42
"company": "Max-Weber-Schule, Freiburg",
43
"role": "Fachhochschulreife Wirtschaftsinformatik",
44
"period": "Sep. 2016 – Juli 2018"
45
}
46
]
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", "Python", "Firebase", "Material UI", "styled-components", "Framer Motion", "Git"
12
];
portfolio / projects / everythingapp.tsx
1
// the one I'm most proud of
2
export const everythingApp: Project = {
3
name: "EverythingApp",
4
tagline: "Eine App für alles – deine persönliche Super-App.",
5
description: "Eine als PWA gebaute Allround-App, die viele kleine Alltags-Tools unter einem Dach vereint: von Reiseplanung über Gewohnheits-Tracking bis zur Haushaltsorganisation. Komplett mit Next.js und Firebase umgesetzt, offline-fähig und installierbar.",
6
stack: ["Next.js", "React", "TypeScript", "Firebase", "Material UI", "PWA"],
7
features: [
8
"Reiseplaner",
9
"Haushaltsplaner",
10
"Rezepte",
11
"Zeit- & Arbeitszeit-Tracker",
12
"Wheel of Names",
13
"Game Maker",
14
"Push-Benachrichtigungen"
15
],
16
featured: true,
17
};
18
19
// Bald mehr
20
export const upcoming = ["Project Two", "Project Three"];
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
♥