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.



-