P04 / ProjektProject
PrivatPrivate
Diese WebsiteThis website
Meine persönliche Website, ohne Framework und ohne Build-Schritt.My personal website, with no framework and no build step.
Worum es gehtWhat it is about
Die Seite ist bewusst schlank gehalten: keine Cookies, kein Tracking, keine externen Skripte. Jeder Push auf GitHub geht automatisch über Vercel live.
The site is deliberately lean: no cookies, no tracking, no external scripts. Every push to GitHub goes live automatically via Vercel.
TechnikTech
- HTML
- CSS
- JavaScript
- Vercel
- GitHub
BausteineBuilding blocks
- Design Dunkles Bento-Grid mit Amber-Akzent, optional hell, auf Deutsch und Englisch.Dark bento grid with an amber accent, optional light mode, in German and English.
- SicherheitSecurity Strenge Content-Security-Policy und weitere Sicherheits-Header, Bewertung A+ auf securityheaders.com.Strict Content Security Policy and further security headers, rated A+ on securityheaders.com.
- KontaktContact Kontaktformular über Web3Forms mit Spamschutz.Contact form via Web3Forms with spam protection.
- DokumentationDocumentation Jede Änderung wird automatisch in der Projektdoku nachgehalten.Every change is automatically recorded in the project documentation.
Case Study
Vom Problem zum ErgebnisFrom problem to result
01 / AusgangslageStarting point
Ich wollte eine Visitenkarte im Netz, auf der ich meine Projekte an einem Ort zeigen kann. Nebenbei wollte ich selbst ausprobieren, wie Hosting und Deployment in der Praxis funktionieren.
I wanted a business card on the web where I can show my projects in one place, and along the way try out how hosting and deployment work in practice.
02 / ZielGoal
Eine schlanke Seite ohne Cookies und Tracking, auf Deutsch und Englisch, sicher konfiguriert und leicht zu pflegen.
A lean site without cookies or tracking, in German and English, securely configured and easy to maintain.
03 / UmsetzungImplementation
Die Seite besteht aus reinem HTML, CSS und JavaScript, ohne Framework und Build-Schritt. Der Code liegt auf GitHub, und jeder Push geht automatisch über Vercel live.
The site consists of plain HTML, CSS and JavaScript, with no framework and no build step. The code lives on GitHub, and every push goes live automatically via Vercel.
04 / Herausforderungen & LösungenChallenges & solutions
- SicherheitSecurity Eine strenge Content-Security-Policy erlaubt nur Inhalte der eigenen Domain. Dafür mussten alle Inline-Skripte in eigene Dateien. Das Ergebnis ist ein A+ auf securityheaders.com.A strict Content Security Policy only allows content from the site's own domain, so all inline scripts had to move into separate files. The result is an A+ on securityheaders.com.
- DatenschutzPrivacy Es gibt keine Cookies, kein Tracking und keine externen Schriften. Das Kontaktformular läuft über Web3Forms mit Spamschutz, und die Datenschutzerklärung deckt alles ab.No cookies, no tracking, no external fonts. The contact form runs via Web3Forms with spam protection, and the privacy policy covers everything.
05 / ErgebnisResult
Die Seite ist live: zweisprachig, mit Projektseiten und Kontaktformular, und mit A+ bei den Security-Headern.
The site is live: bilingual, with project pages and a contact form, and rated A+ for its security headers.
06 / Was ich gelernt habeWhat I learned
Wie Hosting und automatisches Deployment zusammenspielen, was Security-Header wie CSP und HSTS bewirken und was eine Datenschutzerklärung abdecken muss. Und wie wichtig es ist, Anforderungen klar zu formulieren und Ergebnisse zu prüfen.
How hosting and automatic deployment fit together, what security headers like CSP and HSTS do, and what a privacy policy needs to cover. And how important it is to state requirements clearly and check the results.