Portfolio Website
Diese Website ist mein Abschlussprojekt für Harvards CS50 und zugleich die Plattform, auf der meine künftigen Software-Projekte präsentiert werden sollen. Sie ist vollständig selbst entwickelt: Flask und SQLite im Backend, Jinja2-Templates, handgeschriebenes CSS und HTML im Frontend. Alle Inhalte kommen aus der Datenbank, sodass die Seite mit jedem neuen Projekt wächst, ohne dass sich an der Struktur etwas ändert.
Motivation
Diese Website ist als Abschlussprojekt des Harvard-Kurses CS50 „Introduction to Computer Science" entstanden und markiert den Startpunkt meiner Reise als Software-Entwickler. Der Wunsch, in die Software-Entwicklung einzusteigen, begleitet mich schon seit meiner Studienzeit und so war CS50 der erste und entscheidende Schritt. Schnell war klar, dass ich einen Ort brauche, an dem ich meine Projekte öffentlich zeigen und erklären kann: sei es zur Akquise weiterer Projekte oder um bei Recruitern Aufmerksamkeit zu wecken. Das langfristige Ziel ist ein eigenes, gebootstrapptes Software-Produkt — und diese Seite dokumentiert den Weg dorthin.
Architektur & Tech Stack
Das Backend basiert auf Flask. Ich habe bewusst ein Micro-Framework statt eines Full-Stack-Frameworks wie Django gewählt, um jede Schicht selbst aufzubauen und zu verstehen: Routing, Datenbankzugriff, Templating. Ein Framework, das diese Arbeit versteckt, hätte dem Lernziel widersprochen.
Als Datenbank kommt SQLite zum Einsatz, angebunden über Pythons natives sqlite3-Modul. Für eine Portfolio-Seite mit reinem Lese-Traffic ist eine dateibasierte Datenbank die passende Wahl. Kein Server, keine Konfiguration, keine Abhängigkeiten. Alle Queries sind parameterisiert, um SQL-Injection strukturell auszuschließen.
Das Datenmodell besteht aus zwei Tabellen (wie aus der untenstehenden Abbildung ersichtlich ist): projects hält die einheitlichen Metadaten jedes Projekts, sections die frei strukturierbaren Inhalte der Detailseiten. Die beiden Tabellen sind durch eine 1:n-Beziehung verknüpft. Ein Projekt kann damit beliebig viele Abschnitte haben oder gar keine. Neue Projekte und neue Inhalte entstehen so allein durch neue Datenbankeinträge, ohne dass sich an Templates oder Struktur etwas ändert.
Designsystem
Das Design folgt einem einfachen Prinzip: Der Inhalt steht im Vordergrund, alles andere tritt zurück. Eine monochromatische Palette auf dunklem Grund, großzügiger Whitespace, und eine klare visuelle Hierarchie ersetzen dekorative Elemente. Jedes Gestaltungsmittel muss eine Funktion erfüllen und was keine hat, fliegt raus.
Technisch ist das Designsystem über CSS Custom Properties aufgebaut: Farben, Schriften und Abstände sind als zentrale Tokens definiert, auf die alle Komponenten zugreifen. Eine Änderung an einer Stelle wirkt konsistent auf der gesamten Seite, was demselben Prinzip wie beim Datenmodell entspricht, nur auf Gestaltungsebene.
Bei der Typografie kombiniere ich IBM Plex Sans für Fließtext und IBM Plex Mono für Überschriften und technische Elemente. Beide Schriften sind aus Datenschutzgründen und für volle Kontrolle über das Ladeverhalten self-hosted eingebunden. Interaktive Elemente geben dezentes Feedback durch unterstreichende Hover-Effekte, die nicht ablenken.
Ausblick
Diese Seite ist bewusst als Anfang gebaut, nicht als Abschluss. Das Datenmodell ist darauf ausgelegt, mit jedem neuen Projekt zu wachsen, und genau das ist der Plan: Jedes Software-Projekt auf dem Weg zum eigenen Produkt wird hier dokumentiert.
Konkret geplant sind für diese Website als nächste Schritte ein geschützter Admin-Bereich, über den ich Inhalte direkt pflegen kann statt über Seed-Skripte, sowie kleinere Verbesserungen bei Barrierefreiheit und Bildverwaltung.
Größere Ideen und nächste Projekte lasse ich zum jetzigen Zeitpunkt bewusst offen.
Das Ziel dahinter bleibt dasselbe wie am Anfang beschrieben. Ein eigenes, gebootstrapptes Software-Produkt. Diese Seite wird zeigen, wie weit der Weg dorthin schon ist.