complete rework, template for portfolio in the future
This commit is contained in:
+162
-28
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 402 KiB |
+21
-17
@@ -1,45 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Bootstrap Example</title>
|
||||
<meta charset="utf-8">
|
||||
<title>Christian Braumann | Von der Hardware zur Software</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Vom Zerlegen erster Geräte über die ersten Boot-Skripte bis zur Softwareentwicklung. Mein Weg in die Programmierung.">
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/fonts/fonts.css">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="container sheet">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html"><img src="assets/images/home.svg" role="img" alt="Home" class="svgimages"> Home / About me</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="sites/empty1.html"><img src="assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 1</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="sites/empty2.html"><img src="assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 2</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="sites/empty3.html"><img src="assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 3</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.html"><img src="assets/images/home.svg" role="img" alt="Home" class="svgimages"> Startseite</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="sites/werdegang.html"><img src="assets/images/plus.svg" role="img" alt="Home" class="svgimages">Werdegang</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="sites/portfolio.html"><img src="assets/images/plus.svg" role="img" alt="Home" class="svgimages">Portfolio</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<h4><small>About Me</small></h4>
|
||||
<h4><small>Über mich</small></h4>
|
||||
<hr>
|
||||
<h2>Passion about programming</h2>
|
||||
<img src="assets/images/retro-arbeitsplatz.jpg" alt="Arbeitsplatz mit Röhrenmonitor, Tastatur und älterer Rechnerhardware" class="banner">
|
||||
<h2>Leidenschaft für die Programmierung</h2>
|
||||
<p>
|
||||
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.<br>
|
||||
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.<br>
|
||||
<br>
|
||||
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.<br>
|
||||
That script already possessed a certain level of "intelligence", allowing it to recognize the last number and thus generate sequential numbering.<br>
|
||||
<br>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
Wie dieser Weg verlaufen ist, steht unter <a href="sites/werdegang.html">Werdegang</a>.
|
||||
</p>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="sites/legal/impress.html">Impress</a> <a href="sites/legal/privacy.html">Privacy policy</a> <a href="sites/legal/contact.html">Contact</a></p>
|
||||
<footer class="container">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="sites/legal/impress.html">Impressum</a> <a href="sites/legal/privacy.html">Datenschutz</a> <a href="sites/legal/contact.html">Kontakt</a></p>
|
||||
<p style="text-align: center;">Design: <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a> · Bilder: <a href="https://www.pexels.com" target="_blank" rel="noopener">Pexels</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Bootstrap Example</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../index.html"><img src="../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Home / About me</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty1.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 1</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty2.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 2</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty3.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 3</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<p>Empty site 1</p>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="../sites/legal/impress.html">Impress</a> <a href="../sites/legal/privacy.html">Privacy policy</a> <a href="../sites/legal/contact.html">Contact</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Bootstrap Example</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../index.html"><img src="../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Home / About me</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty1.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 1</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty2.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 2</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty3.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 3</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<p>Empty site 2</p>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="../sites/legal/impress.html">Impress</a> <a href="../sites/legal/privacy.html">Privacy policy</a> <a href="../sites/legal/contact.html">Contact</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Bootstrap Example</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../index.html"><img src="../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Home / About me</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty1.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 1</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty2.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 2</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="empty3.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 3</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<p>Empty site 3</p>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="../sites/legal/impress.html">Impress</a> <a href="../sites/legal/privacy.html">Privacy policy</a> <a href="../sites/legal/contact.html">Contact</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Bootstrap Example</title>
|
||||
<meta charset="utf-8">
|
||||
<title>Kontakt | Christian Braumann</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Nehmen Sie über das Kontaktformular Kontakt mit mir auf.">
|
||||
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../../assets/fonts/fonts.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="container sheet">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../../index.html"><img src="../../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Home / About me</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty1.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 1</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty2.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 2</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty3.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 3</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../../index.html"><img src="../../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Startseite</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../werdegang.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Werdegang</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../portfolio.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Portfolio</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
@@ -85,8 +86,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="impress.html">Impress</a> <a href="privacy.html">Privacy policy</a> <a href="contact.html">Contact</a></p>
|
||||
<footer class="container">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="impress.html">Impressum</a> <a href="privacy.html">Datenschutz</a> <a href="contact.html">Kontakt</a></p>
|
||||
<p style="text-align: center;">Design: <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a> · Bilder: <a href="https://www.pexels.com" target="_blank" rel="noopener">Pexels</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Bootstrap Example</title>
|
||||
<meta charset="utf-8">
|
||||
<title>Impressum | Christian Braumann</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Impressum und Angaben zum Diensteanbieter dieser Website.">
|
||||
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../../assets/fonts/fonts.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="container sheet">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../../index.html"><img src="../../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Home / About me</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty1.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 1</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty2.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 2</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty3.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 3</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../../index.html"><img src="../../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Startseite</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../werdegang.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Werdegang</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../portfolio.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Portfolio</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
@@ -52,6 +53,10 @@
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Bildnachweis</h2>
|
||||
<p>Fotos von Viktorya Sergeeva, Pok Rie, Brett Sayles und Bibek ghosh, bezogen über <a href="https://www.pexels.com" target="_blank" rel="noopener">Pexels</a>.</p>
|
||||
<p>Das Seitendesign basiert auf der Vorlage „Arcana“ von <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a>, lizenziert unter Creative Commons Attribution 3.0.</p>
|
||||
|
||||
<p><a href="https://datenschutz-generator.de/" title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken." target="_blank" rel="noopener noreferrer nofollow">Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a></p>
|
||||
</p>
|
||||
<br><br>
|
||||
@@ -59,8 +64,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="impress.html">Impress</a> <a href="privacy.html">Privacy policy</a> <a href="contact.html">Contact</a></p>
|
||||
<footer class="container">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="impress.html">Impressum</a> <a href="privacy.html">Datenschutz</a> <a href="contact.html">Kontakt</a></p>
|
||||
<p style="text-align: center;">Design: <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a> · Bilder: <a href="https://www.pexels.com" target="_blank" rel="noopener">Pexels</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Bootstrap Example</title>
|
||||
<meta charset="utf-8">
|
||||
<title>Datenschutzerklärung | Christian Braumann</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Datenschutzerklärung mit Informationen zur Verarbeitung personenbezogener Daten auf dieser Website.">
|
||||
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../../assets/fonts/fonts.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container-fluid">
|
||||
<div class="container sheet">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../../index.html"><img src="../../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Home / About me</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty1.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 1</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty2.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 2</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../empty3.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Empty 3</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../../index.html"><img src="../../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Startseite</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../werdegang.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Werdegang</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../portfolio.html"><img src="../../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Portfolio</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
@@ -292,8 +293,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="impress.html">Impress</a> <a href="privacy.html">Privacy policy</a> <a href="contact.html">Contact</a></p>
|
||||
<footer class="container">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="impress.html">Impressum</a> <a href="privacy.html">Datenschutz</a> <a href="contact.html">Kontakt</a></p>
|
||||
<p style="text-align: center;">Design: <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a> · Bilder: <a href="https://www.pexels.com" target="_blank" rel="noopener">Pexels</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Portfolio | Christian Braumann</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Eine Übersicht meiner Projekte. Die Inhalte dieser Seite werden nachgetragen.">
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/fonts/fonts.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container sheet">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../index.html"><img src="../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Startseite</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="werdegang.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Werdegang</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="portfolio.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Portfolio</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<h4><small>Portfolio</small></h4>
|
||||
<hr>
|
||||
<h2>Projekte</h2>
|
||||
<p>
|
||||
Die Inhalte dieser Seite werden nachgetragen.
|
||||
</p>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="legal/impress.html">Impressum</a> <a href="legal/privacy.html">Datenschutz</a> <a href="legal/contact.html">Kontakt</a></p>
|
||||
<p style="text-align: center;">Design: <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a> · Bilder: <a href="https://www.pexels.com" target="_blank" rel="noopener">Pexels</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Werdegang | Christian Braumann</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Mein Werdegang: von den ersten Skripten unter Windows 95 über Jahre in der IT-Technik bis zur Softwareentwicklung.">
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../assets/fonts/fonts.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container sheet">
|
||||
<div class="row content">
|
||||
<div class="col-sm-3 sidenav">
|
||||
<h4>Navigation</h4>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../index.html"><img src="../assets/images/home.svg" role="img" alt="Home" class="svgimages"> Startseite</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="werdegang.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Werdegang</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="portfolio.html"><img src="../assets/images/plus.svg" role="img" alt="Home" class="svgimages">Portfolio</a></li>
|
||||
</ul><br>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<h4><small>Werdegang</small></h4>
|
||||
<hr>
|
||||
|
||||
<h2>Der Anfang</h2>
|
||||
<img src="../assets/images/mainboard.jpg" alt="Nahaufnahme einer Hauptplatine mit ihren Bauteilen" class="section-img">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>Die ersten Skripte</h2>
|
||||
<p>
|
||||
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 <code>Autostart.bat</code> aus, und genau diese Datei habe ich verwendet, um meine Daten frühzeitig in andere Ordner zu kopieren.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>Der Weg in die IT</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
Zur Technik kam ich auf Umwegen zurück, und zwar über die Lehre als IT-Techniker, deren Lehrabschlussprüfung ich später abgelegt habe.
|
||||
</p>
|
||||
|
||||
<h2>Vom Netzwerk zum Code</h2>
|
||||
<img src="../assets/images/serverschrank.jpg" alt="Serverschränke mit Netzwerktechnik und Verkabelung in einem Rechenzentrum" class="section-img">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>Heute</h2>
|
||||
<img src="../assets/images/quellcode.jpg" alt="Quellcode auf einem Bildschirm" class="section-img">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container">
|
||||
<p style="text-align: center;"> © 2026 - Christian Braumann <a href="legal/impress.html">Impressum</a> <a href="legal/privacy.html">Datenschutz</a> <a href="legal/contact.html">Kontakt</a></p>
|
||||
<p style="text-align: center;">Design: <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a> · Bilder: <a href="https://www.pexels.com" target="_blank" rel="noopener">Pexels</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user