diff --git a/Homepage/assets/css/style.css b/Homepage/assets/css/style.css
index 223a5a5..c7d661c 100644
--- a/Homepage/assets/css/style.css
+++ b/Homepage/assets/css/style.css
@@ -1,39 +1,173 @@
- .row.content {
- min-height: calc(100vh - 3.5rem);
- }
-
+:root {
+ --bs-font-sans-serif: 'Source Sans 3', 'Source Sans Pro', Helvetica, sans-serif;
+ --bs-body-font-size: 1.333rem;
+ --bs-body-font-weight: 300;
+ --bs-body-color: #474747;
+ --bs-body-color-rgb: 71, 71, 71;
+ --bs-body-bg: #f7f7f7;
+ --bs-border-color: #e0e0e0;
+ --bs-secondary-color: #999999;
+ --bs-primary: #37c0fb;
+ --bs-primary-rgb: 55, 192, 251;
+ --bs-link-color: #37c0fb;
+ --bs-link-color-rgb: 55, 192, 251;
+ --bs-link-hover-color: #50c8fc;
+ --arcana-accent: #37c0fb;
+ --arcana-accent-hover: #50c8fc;
+ --arcana-accent-active: #1eb8fb;
+}
- .sidenav {
- background-color: #f1f1f1;
- }
-
+body {
+ background: #f7f7f7 url('../images/bg01.png');
+}
- footer {
- background-color: #555;
- color: white;
- padding: 15px;
- }
-
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 600;
+ letter-spacing: -0.025em;
+}
- @media screen and (max-width: 767px) {
- .sidenav {
- height: auto;
- padding: 15px;
- }
-
- .row.content {min-height: auto;}
- }
+a {
+ text-decoration: none;
+ border-bottom: dotted 1px;
+ transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
- .svgimages {
- height: 14px;
- width: 14px;
- }
+a:hover {
+ border-bottom-color: transparent;
+}
- .req {
+.sheet {
+ background-color: #fff;
+ background-image: url('../images/bg02.png'), url('../images/bg03.png'), url('../images/bg01.png');
+ background-position: top left, bottom left, top left;
+ background-size: 100% 6em, 100% 6em, auto;
+ background-repeat: no-repeat, no-repeat, repeat;
+ padding: 5em 2.5em;
+}
+
+.row.content {
+ min-height: 60vh;
+}
+
+.sidenav .nav {
+ display: block;
+ list-style: none;
+ padding-left: 0;
+}
+
+.sidenav .nav-item {
+ margin: 0 0 0.75em 0;
+}
+
+.sidenav .nav-link {
+ display: inline;
+ padding: 0;
+ color: var(--arcana-accent);
+ border-bottom: dotted 1px;
+}
+
+.sidenav .nav-link:hover {
+ color: var(--arcana-accent-hover);
+ border-bottom-color: transparent;
+}
+
+.sidenav h4 {
+ color: #999999;
+ font-size: 0.9em;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ margin-bottom: 1.25em;
+}
+
+footer {
+ padding: 3em 0 4em 0;
+}
+
+footer a {
+ color: inherit;
+ border-bottom-color: rgba(71, 71, 71, 0.25);
+}
+
+footer a:hover {
+ color: var(--arcana-accent);
+ border-bottom-color: transparent;
+}
+
+.btn-primary {
+ --bs-btn-bg: var(--arcana-accent);
+ --bs-btn-border-color: var(--arcana-accent);
+ --bs-btn-hover-bg: var(--arcana-accent-hover);
+ --bs-btn-hover-border-color: var(--arcana-accent-hover);
+ --bs-btn-active-bg: var(--arcana-accent-active);
+ --bs-btn-active-border-color: var(--arcana-accent-active);
+ --bs-btn-color: #fff;
+ --bs-btn-hover-color: #fff;
+ --bs-btn-active-color: #fff;
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url('../images/bg01.png');
+ border-radius: 5px;
+ font-weight: 600;
+ padding: 0.5em 1.5em;
+}
+
+.form-control, .form-select {
+ font-weight: 300;
+}
+
+.banner,
+.section-img {
+ width: 100%;
+ object-fit: cover;
+ object-position: center;
+ border-radius: 5px;
+ margin-bottom: 2em;
+}
+
+.banner {
+ height: 16em;
+}
+
+.section-img {
+ height: 12em;
+}
+
+.svgimages {
+ height: 14px;
+ width: 14px;
+}
+
+.req {
color: #d43d28;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-left: 0.3rem;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 980px) {
+ :root {
+ --bs-body-font-size: 1.167rem;
+ }
+}
+
+@media screen and (max-width: 767px) {
+ :root {
+ --bs-body-font-size: 1.083rem;
+ }
+
+ .sheet {
+ padding: 3em 1.25em;
+ }
+
+ .row.content {
+ min-height: auto;
+ }
+
+ .banner {
+ height: 10em;
+ }
+
+ .section-img {
+ height: 8em;
+ }
+}
diff --git a/Homepage/assets/fonts/fonts.css b/Homepage/assets/fonts/fonts.css
new file mode 100644
index 0000000..da08096
--- /dev/null
+++ b/Homepage/assets/fonts/fonts.css
@@ -0,0 +1,35 @@
+@font-face {
+ font-family: 'Source Sans 3';
+ font-style: italic;
+ font-weight: 200 900;
+ font-display: swap;
+ src: url('sourcesans3-italic-latin-ext.woff2') format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Source Sans 3';
+ font-style: italic;
+ font-weight: 200 900;
+ font-display: swap;
+ src: url('sourcesans3-italic-latin.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: 'Source Sans 3';
+ font-style: normal;
+ font-weight: 200 900;
+ font-display: swap;
+ src: url('sourcesans3-latin-ext.woff2') format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: 'Source Sans 3';
+ font-style: normal;
+ font-weight: 200 900;
+ font-display: swap;
+ src: url('sourcesans3-latin.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/Homepage/assets/fonts/sourcesans3-italic-latin-ext.woff2 b/Homepage/assets/fonts/sourcesans3-italic-latin-ext.woff2
new file mode 100644
index 0000000..a5ee6af
Binary files /dev/null and b/Homepage/assets/fonts/sourcesans3-italic-latin-ext.woff2 differ
diff --git a/Homepage/assets/fonts/sourcesans3-italic-latin.woff2 b/Homepage/assets/fonts/sourcesans3-italic-latin.woff2
new file mode 100644
index 0000000..4b43ac3
Binary files /dev/null and b/Homepage/assets/fonts/sourcesans3-italic-latin.woff2 differ
diff --git a/Homepage/assets/fonts/sourcesans3-latin-ext.woff2 b/Homepage/assets/fonts/sourcesans3-latin-ext.woff2
new file mode 100644
index 0000000..7f78ca9
Binary files /dev/null and b/Homepage/assets/fonts/sourcesans3-latin-ext.woff2 differ
diff --git a/Homepage/assets/fonts/sourcesans3-latin.woff2 b/Homepage/assets/fonts/sourcesans3-latin.woff2
new file mode 100644
index 0000000..864cc41
Binary files /dev/null and b/Homepage/assets/fonts/sourcesans3-latin.woff2 differ
diff --git a/Homepage/assets/images/bg01.png b/Homepage/assets/images/bg01.png
new file mode 100644
index 0000000..65bcb11
Binary files /dev/null and b/Homepage/assets/images/bg01.png differ
diff --git a/Homepage/assets/images/bg02.png b/Homepage/assets/images/bg02.png
new file mode 100644
index 0000000..52e6b4f
Binary files /dev/null and b/Homepage/assets/images/bg02.png differ
diff --git a/Homepage/assets/images/bg03.png b/Homepage/assets/images/bg03.png
new file mode 100644
index 0000000..cb90988
Binary files /dev/null and b/Homepage/assets/images/bg03.png differ
diff --git a/Homepage/assets/images/mainboard.jpg b/Homepage/assets/images/mainboard.jpg
new file mode 100644
index 0000000..cec8a1c
Binary files /dev/null and b/Homepage/assets/images/mainboard.jpg differ
diff --git a/Homepage/assets/images/quellcode.jpg b/Homepage/assets/images/quellcode.jpg
new file mode 100644
index 0000000..0e8f157
Binary files /dev/null and b/Homepage/assets/images/quellcode.jpg differ
diff --git a/Homepage/assets/images/retro-arbeitsplatz.jpg b/Homepage/assets/images/retro-arbeitsplatz.jpg
new file mode 100644
index 0000000..141f99f
Binary files /dev/null and b/Homepage/assets/images/retro-arbeitsplatz.jpg differ
diff --git a/Homepage/assets/images/serverschrank.jpg b/Homepage/assets/images/serverschrank.jpg
new file mode 100644
index 0000000..cfd5344
Binary files /dev/null and b/Homepage/assets/images/serverschrank.jpg differ
diff --git a/Homepage/index.html b/Homepage/index.html
index bfbd350..3e45133 100644
--- a/Homepage/index.html
+++ b/Homepage/index.html
@@ -1,45 +1,49 @@
-
+
- Bootstrap Example
+ Christian Braumann | Von der Hardware zur Software
+
+
-
+
-
About Me
+
Über mich
-
Passion about programming
+
+
Leidenschaft für die Programmierung
- I first came into contact with technology at the age of 6, and that's when my interest in it began to develop very quickly.
- Starting with repeatedly taking things apart and putting them back together, which helped me develop a certain knack for it, it didn't take long before I was writing my first boot scripts.
-
- As I got older, I started delving directly into the topic of backups. Not knowing what it was called back then, I used the "Autostart.bat" file, which ran automatically in Windows 95 at the time, to copy my data to other folders early on.
- That script already possessed a certain level of "intelligence", allowing it to recognize the last number and thus generate sequential numbering.
-
+ Bereits in jungen Jahren habe ich mich intensiv mit Technik auseinandergesetzt, was in mir eine starke Faszination für Hard- und Software weckte. Angefangen hat es damit, dass ich Geräte immer wieder auseinandergenommen und zusammengebaut habe, und nicht lange danach folgten die ersten eigenen Skripte.
+
+
+ Immer wieder erwische ich mich dabei, wie ich spontan eine Entwicklungsumgebung starte, sobald mir ein Freund ein Problem schildert oder ich eines selbst entdecke. Mein Kopf beginnt sofort, an einer Lösung zu arbeiten, ein deutliches Zeichen dafür, wohin mich mein Weg führt: Von der Hardware hin zur Software.
+
+
+ Wie dieser Weg verlaufen ist, steht unter Werdegang .
-
- © 2026 - Christian Braumann Impress Privacy policy Contact
+
diff --git a/Homepage/sites/empty1.html b/Homepage/sites/empty1.html
deleted file mode 100644
index c21e80d..0000000
--- a/Homepage/sites/empty1.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-
- Bootstrap Example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/Homepage/sites/empty2.html b/Homepage/sites/empty2.html
deleted file mode 100644
index cdffdd4..0000000
--- a/Homepage/sites/empty2.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-
- Bootstrap Example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/Homepage/sites/empty3.html b/Homepage/sites/empty3.html
deleted file mode 100644
index 7bbf4a2..0000000
--- a/Homepage/sites/empty3.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-
- Bootstrap Example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/Homepage/sites/legal/contact.html b/Homepage/sites/legal/contact.html
index 1d0e644..ac4f3f3 100644
--- a/Homepage/sites/legal/contact.html
+++ b/Homepage/sites/legal/contact.html
@@ -1,23 +1,24 @@
- Bootstrap Example
+ Kontakt | Christian Braumann
+
+
-
+
-
- © 2026 - Christian Braumann Impress Privacy policy Contact
+
diff --git a/Homepage/sites/legal/impress.html b/Homepage/sites/legal/impress.html
index ad2d0be..99ec3e6 100644
--- a/Homepage/sites/legal/impress.html
+++ b/Homepage/sites/legal/impress.html
@@ -1,23 +1,24 @@
- Bootstrap Example
+ Impressum | Christian Braumann
+
+
-
+
@@ -52,6 +53,10 @@
Links auf fremde Webseiten: Die Inhalte fremder Webseiten, auf die wir direkt oder indirekt verweisen, liegen außerhalb unseres Verantwortungsbereiches und wir machen sie uns nicht zu Eigen. Für alle Inhalte und Nachteile, die aus der Nutzung der in den verlinkten Webseiten aufrufbaren Informationen entstehen, übernehmen wir keine Verantwortung.
Urheberrechte und Markenrechte: Alle auf dieser Website dargestellten Inhalte, wie Texte, Fotografien, Grafiken, Marken und Warenzeichen sind durch die jeweiligen Schutzrechte (Urheberrechte, Markenrechte) geschützt. Die Verwendung, Vervielfältigung usw. unterliegen unseren Rechten oder den Rechten der jeweiligen Urheber bzw. Rechteinhaber.
+
Bildnachweis
+
Fotos von Viktorya Sergeeva, Pok Rie, Brett Sayles und Bibek ghosh, bezogen über Pexels .
+
Das Seitendesign basiert auf der Vorlage „Arcana“ von HTML5 UP , lizenziert unter Creative Commons Attribution 3.0.
+
Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke
@@ -59,8 +64,9 @@
-
- © 2026 - Christian Braumann Impress Privacy policy Contact
+
diff --git a/Homepage/sites/legal/privacy.html b/Homepage/sites/legal/privacy.html
index 0b0d83e..f33a361 100644
--- a/Homepage/sites/legal/privacy.html
+++ b/Homepage/sites/legal/privacy.html
@@ -1,23 +1,24 @@
- Bootstrap Example
+ Datenschutzerklärung | Christian Braumann
+
+
-
+
-
- © 2026 - Christian Braumann Impress Privacy policy Contact
+
diff --git a/Homepage/sites/portfolio.html b/Homepage/sites/portfolio.html
new file mode 100644
index 0000000..8548e0f
--- /dev/null
+++ b/Homepage/sites/portfolio.html
@@ -0,0 +1,44 @@
+
+
+
+
+ Portfolio | Christian Braumann
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Portfolio
+
+
Projekte
+
+ Die Inhalte dieser Seite werden nachgetragen.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Homepage/sites/werdegang.html b/Homepage/sites/werdegang.html
new file mode 100644
index 0000000..266c22b
--- /dev/null
+++ b/Homepage/sites/werdegang.html
@@ -0,0 +1,86 @@
+
+
+
+
+ Werdegang | Christian Braumann
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Werdegang
+
+
+
Der Anfang
+
+
+ Mein erster Kontakt mit Technik kam mit sechs Jahren, und von da an entwickelte sich mein Interesse daran sehr schnell. Angefangen hat es damit, dass ich Dinge wieder und wieder auseinandergenommen und zusammengesetzt habe, wodurch ich mit der Zeit ein gewisses Gespür dafür bekam. Es dauerte nicht lange, bis daraus meine ersten Boot-Skripte wurden.
+
+
+
Die ersten Skripte
+
+ Richtig angefangen hat es mit dem Thema Datensicherung, ohne dass ich damals gewusst hätte, dass es so heißt. Windows 95 führte beim Start automatisch eine Autostart.bat aus, und genau diese Datei habe ich verwendet, um meine Daten frühzeitig in andere Ordner zu kopieren.
+
+
+ Dabei konnte das Skript mehr, als nur stumpf zu kopieren. Es erkannte, welche Nummer zuletzt vergeben worden war, und bildete daraus die nächste, sodass eine fortlaufende Nummerierung entstand. Rückblickend war das meine erste Begegnung damit, dass ein Programm einen Zustand auslesen und daraus eine Entscheidung ableiten kann.
+
+
+
Der Weg in die IT
+
+ Nach der Pflichtschule besuchte ich eine Fachschule für Elektronik und EDV. In jungen Jahren entschied ich mich dann allerdings dafür, arbeiten zu wollen, anstatt weiter die Schulbank zu drücken. Die Tischlerlehre war das Erste, was mir einen Weg in die Arbeitswelt geboten hat, abbrechen musste ich sie später aus gesundheitlichen Gründen.
+
+
+ Zur Technik kam ich auf Umwegen zurück, und zwar über die Lehre als IT-Techniker, deren Lehrabschlussprüfung ich später abgelegt habe.
+
+
+
Vom Netzwerk zum Code
+
+
+ In den Jahren danach arbeitete ich als Systemadministrator und IT-Techniker. Client- und Server-Installationen, Netzwerkaufbau, die Wartung von Hard- und Software, Lizenzmanagement sowie die Betreuung der Anwender gehörten zu meinem Alltag.
+
+
+ Auffällig ist im Rückblick, dass in nahezu jeder dieser Stationen früher oder später das Programmieren dazukam. Mal waren es Webseiten in HTML, später in PHP, an anderer Stelle die Firmensoftware selbst. Was als Nebenaufgabe begann, wurde mit der Zeit zu dem Teil der Arbeit, auf den ich mich am meisten gefreut habe.
+
+
+ Dadurch merkte ich, dass mein großes Interesse schon immer der Technik gehörte, sowie der Logik und dem Zusammenspiel verschiedener Faktoren. Sei es bei der Entwicklung verschiedener Programme zur Steuerung von Funktionen und vordefinierten Prozessen, bei der Zusammenstellung von Hardware-Komponenten, Netzwerkeinrichtungen oder der Planung eigener kleinerer Tools zur Erleichterung oder für Backups.
+
+
+
Heute
+
+
+ Den Schritt von der Hardware zur Software gehe ich mittlerweile ganz bewusst. Mein ausgeprägter Wissensdurst im Bereich der Programmierung treibt mich immer wieder an, Neues zu lernen. Beschäftigt habe ich mich bisher mit Java, C# und C++ sowie mit PHP und der Anbindung von Datenbanken.
+
+
+ Ich bin stets bestrebt, effiziente Lösungen zu finden und umzusetzen sowie technische Herausforderungen bestmöglich zu meistern. Den administrativen Aufwand für wiederkehrende Abläufe zu automatisieren ist für mich dabei Herausforderung und Vergnügen zugleich.
+
+
+ Meine Infrastruktur betreibe ich soweit wie möglich selbst. Mein Git-Server läuft auf einer eigenen Synology, dazu kommen mehrere Server bei Hetzner, auf denen Webseiten und Backends laufen. Daneben dienen sie als Runner für GitLab und GitHub und sorgen dort für automatisierte Pipelines.
+
+
+
+
+
+
+
+
+
+
+