commit 4cf71d9d0f3d24d08e0990f6dc8cb998ea6dcfc8 Author: Moritz Ruth Date: Thu Mar 13 14:56:05 2025 +0100 initial commit diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml new file mode 100644 index 0000000..e9bb185 --- /dev/null +++ b/.forgejo/workflows/deploy.yaml @@ -0,0 +1,28 @@ +name: "Deploy" +on: + push: + - main + +jobs: + build: + runs-on: "docker" + + steps: + - name: "Checkout" + uses: "https://code.forgejo.org/actions/checkout@v4" + + - name: "Upload" + id: "upload" + uses: "https://code.forgejo.org/forgejo/upload-artifact@v4" + with: + name: "site.zip" + if-no-files-found: "error" + path: ./src/ + + - name: "Notify the web server" + run: > + curl https://krbl.eu/_sscdc/notify + --fail + -H "Content-Type: application/json" + -H "Authorization: Bearer ${{ secrets.SSCDC_SECRET }}" + -d '{ "id": "${{ github.sha }}", "download_url": "https://git.moritzruth.de/${{ github.repository }}/actions/runs/${{ github.run_number }}/artifacts/site.zip" }' diff --git a/src/Animation.html b/src/Animation.html new file mode 100644 index 0000000..c77c74e --- /dev/null +++ b/src/Animation.html @@ -0,0 +1,47 @@ + + + + + + Meine Webseite + + + + + + + +

+

+

Maximilian Kerbel — Portfolio

+

+

+ +

+

+ Animation +

+

+ PDF zum Storyboard +

+ Eine Animation zu einer Szene aus Rocky Balboa. Designed in After Effects. +

+

+ + + \ No newline at end of file diff --git a/src/Farbkreis.html b/src/Farbkreis.html new file mode 100644 index 0000000..28c9524 --- /dev/null +++ b/src/Farbkreis.html @@ -0,0 +1,46 @@ + + + + + + Meine Webseite + + + + + + + +

+

+

Maximilian Kerbel — Portfolio

+

+

+ +

+

+ Farbkreis +

+

Farbkreis

+

+ Ein Farbkreis zur Darstellung der Interaktion der Farben miteinander. +

+

+ + + \ No newline at end of file diff --git a/src/Farbübung.html b/src/Farbübung.html new file mode 100644 index 0000000..a581f79 --- /dev/null +++ b/src/Farbübung.html @@ -0,0 +1,49 @@ + + + + + + Meine Webseite + + + + + + + +

+

+

Maximilian Kerbel — Portfolio

+

+

+ +

+

+ Farbübung +

+

Farbübung

+

+ Eine Farbübung, bei der das englische Wort »fast« (dt. schnell) abstrakt mit Farben dargestellt werden + soll. Um schnell darzustellen, habe ich mich an Licht orientiert und alle Farben verwendet. + Sie ziehen den Blick in den Fluchtpunkt, erzeugen den Eindruck einer Vorwärtsbewegung ins Bild und lassen die periphere Sicht verschwimmen. +

+

+ + + \ No newline at end of file diff --git a/src/Lebenslauf/Bilder/Passbild.jpg b/src/Lebenslauf/Bilder/Passbild.jpg new file mode 100644 index 0000000..af282e1 Binary files /dev/null and b/src/Lebenslauf/Bilder/Passbild.jpg differ diff --git a/src/Lebenslauf/index.css b/src/Lebenslauf/index.css new file mode 100644 index 0000000..518b8f4 --- /dev/null +++ b/src/Lebenslauf/index.css @@ -0,0 +1,122 @@ +/* source-sans-pro-latin-400-italic */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-display: swap; + font-weight: 400; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-pro@latest/latin-400-italic.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* source-sans-pro-latin-700-italic */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-display: swap; + font-weight: 700; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-pro@latest/latin-700-italic.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* source-sans-pro-latin-400-normal */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-pro@latest/latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* source-sans-pro-latin-700-normal */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-display: swap; + font-weight: 700; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-pro@latest/latin-700-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +body { + font-family: 'Source Sans Pro', serif; + /* background: url("./bilder/Background.jpg");*/ +} + +h1 { + text-align: center; + margin: 0; + margin-top: -10px; +} + +.name { + text-align: center; + font-weight: bold; + font-size: 1.5rem; +} + +.headline { + border-radius: 15px; + background-color: #3377AA; + padding: 25px; + max-width: 600px; + margin: 0 auto; + justify-content: center; + display: flex; + flex-direction: column; + gap: 10px; +} + + +h2 { + color: #335588; +} + +main { + display: flex; + gap: 30px; + max-width: 800px; + margin: 0 auto; + justify-content: center; +} + +.persona { + +} +.profile-picture{ + width: 130px; + padding-left: 30px; +} + +.education-table tr :nth-child(1) { + width: 125px; + font-weight: bold; + vertical-align: top; + padding-right: 15px; +} +.education-table tr :last-child { + padding-bottom : 10px; +} + +.education { + +} + +.vertical-line { + /*border-left: thick solid #224477;*/ + background-color: #224477; + width: 5px; +} + +.persona-data { + font-weight: bold; +} + +a { + color: black; + text-decoration: none; + &:hover span { + text-decoration: underline; + + } +} diff --git a/src/Lebenslauf/index.html b/src/Lebenslauf/index.html new file mode 100644 index 0000000..353eb13 --- /dev/null +++ b/src/Lebenslauf/index.html @@ -0,0 +1,174 @@ + + + + + Lebenslauf + + + + +

+

Lebenslauf

+

+ Maximilian Kerbel +

+

+
+

+

+

+

Persönliche Daten

+

+

+
+

+ Geboren: +

+ 27.01.2005
+ Neunkirchen, Saarland +

+
+

+

+ Wohnort: +

+ + Hermannstraße 88 🔗
+ 66538 Neunkirchen, Saarland + +

+
+

+

+ Kontakt: +

+ + 0179/3725222 🔗 +
+ + maximilian@krbl.eu 🔗 + +

+

+

+

Sprachkenntnisse

+

+ Deutsch
+ Englisch
+ Russisch +

+

+

+

Computerkenntnisse

+

+ Grundkenntnisse Java und html/css
+ Grundkenntnisse After Effects +

+

+

+

+

+

+

Ausbildung

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ August 2011 - Juni 2023 +	+ + Schulische Bildung + + Gymnasium am Krebsberg + Neunkirchen +
+ Juli 2020 +	+ Hauptschulabschluss + Gymnasium am Krebsberg + Neunkirchen +
+ Juli 2021 +	+ + Mittlere Reife + + Gymnasium am Krebsberg + Neunkirchen +
+ September 2021 - Juni 2023 +	+ Juniorstudium + Universität des Saarlandes + Saarbrücken +
+ Juni 2023 +	+ + Abitur + + Gymnasium am Krebsberg + Neunkirchen +
+ Juni 2023 - September 2023 +	+ Ferienjob + ZF Friedrichshafen + Neunkirchen +
+ September 2023 - September 2024 +	+ Medieninformatikstudium + Universität des Saarlandes + Saarbrücken +
+ Juni 2024 - August 2024 +	+ Ferienjob + ZF Friedrichshafen + Neunkirchen +
+ September 2024 - heute +	+ Medieninformatikstudium + Hochschule Kaiserslautern + Zweibrücken +

+

+

+ + \ No newline at end of file diff --git a/src/Lebensläufe.html b/src/Lebensläufe.html new file mode 100644 index 0000000..c6ddb58 --- /dev/null +++ b/src/Lebensläufe.html @@ -0,0 +1,50 @@ + + + + + + Meine Webseite + + + + + + + +

+

+

Maximilian Kerbel — Portfolio

+

+

+ +

+

+ Lebenslauf +

+

Lebenslauf

+ + Lebenslauf als Webseite + Lebenslauf als PDF + +

+ Mein Lebenslauf sowohl als PDF als auch als Webseite. +

+

+ + + diff --git a/src/Logo.html b/src/Logo.html new file mode 100644 index 0000000..ebba7b9 --- /dev/null +++ b/src/Logo.html @@ -0,0 +1,49 @@ + + + + + + Meine Webseite + + + + + + + +

+

+

Maximilian Kerbel — Portfolio

+

+

+ +

+

+ Logo +

+

+ Erstellungsprozess des Logos PDF +

+ Ein typographisches Logo aus meinen Initialen in drei Größen. + Gibt es noch in weiß. +

+

+ + + diff --git a/src/Personal Brand.html b/src/Personal Brand.html new file mode 100644 index 0000000..58876ca --- /dev/null +++ b/src/Personal Brand.html @@ -0,0 +1,48 @@ + + + + + + Meine Webseite + + + + + + + +

+

+

Maximilian Kerbel — Portfolio

+

+

+ +

+

+ Personal Brand +

+

+ Link zu der PDF +

+ Der Styleguide zu meiner Brand als Unternehmer. Das Unternehmen stellt Parfum her. + Reich riechen, erreichbar für jeden +

+

+ + + \ No newline at end of file diff --git a/src/assets/Farbkreis.jpg b/src/assets/Farbkreis.jpg new file mode 100644 index 0000000..2d98375 Binary files /dev/null and b/src/assets/Farbkreis.jpg differ diff --git a/src/assets/Farbübung.jpg b/src/assets/Farbübung.jpg new file mode 100644 index 0000000..9433950 Binary files /dev/null and b/src/assets/Farbübung.jpg differ diff --git a/src/assets/Lebenslauf.jpg b/src/assets/Lebenslauf.jpg new file mode 100644 index 0000000..c6dba7e Binary files /dev/null and b/src/assets/Lebenslauf.jpg differ diff --git a/src/assets/Lebenslauf.pdf b/src/assets/Lebenslauf.pdf new file mode 100644 index 0000000..38e911d Binary files /dev/null and b/src/assets/Lebenslauf.pdf differ diff --git a/src/assets/Logo scratch.pdf b/src/assets/Logo scratch.pdf new file mode 100644 index 0000000..1e37015 Binary files /dev/null and b/src/assets/Logo scratch.pdf differ diff --git a/src/assets/Logo weiß transparent.png b/src/assets/Logo weiß transparent.png new file mode 100644 index 0000000..475224a Binary files /dev/null and b/src/assets/Logo weiß transparent.png differ diff --git a/src/assets/Logos.jpg b/src/assets/Logos.jpg new file mode 100644 index 0000000..8d5f139 Binary files /dev/null and b/src/assets/Logos.jpg differ diff --git a/src/assets/MK Brand.pdf b/src/assets/MK Brand.pdf new file mode 100644 index 0000000..ccd91b0 Binary files /dev/null and b/src/assets/MK Brand.pdf differ diff --git a/src/assets/MK Brand_page-0001.jpg b/src/assets/MK Brand_page-0001.jpg new file mode 100644 index 0000000..9a7c06a Binary files /dev/null and b/src/assets/MK Brand_page-0001.jpg differ diff --git a/src/assets/Rainbow.png b/src/assets/Rainbow.png new file mode 100644 index 0000000..e3d9367 Binary files /dev/null and b/src/assets/Rainbow.png differ diff --git a/src/assets/Rocky.mp4 b/src/assets/Rocky.mp4 new file mode 100644 index 0000000..003b4e0 Binary files /dev/null and b/src/assets/Rocky.mp4 differ diff --git a/src/assets/Storyboard.pdf b/src/assets/Storyboard.pdf new file mode 100644 index 0000000..b3c80bd Binary files /dev/null and b/src/assets/Storyboard.pdf differ diff --git a/src/global.css b/src/global.css new file mode 100644 index 0000000..f793d60 --- /dev/null +++ b/src/global.css @@ -0,0 +1,295 @@ +*, *::before, *::after { + box-sizing: border-box; +} + +body { + font-family: "Nunito Sans", sans-serif; + font-size: 16px; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; +} + +header { + font-family: "Nunito", sans-serif; + background-color: #5271ff; + color: #fff; + padding: 20px 30px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; +} + +header h1 { + margin: 0; + font-size: clamp(1.2rem, 4vw, 1.5rem); + text-wrap: nowrap; +} + +nav { + display: flex; + background-color: #5E17EB; + justify-content: center; + gap: 60px; + padding : 10px; +} + +nav a { + text-decoration: none; + color: #fff; +} + +.logo { + height: 50px; + width: 50px; + background-size: contain; + background-repeat: no-repeat; + background-image: url("/assets/Logo weiß transparent.png"); + flex-shrink: 0; + flex-grow: 1; +} + +.logo:nth-of-type(2) { + opacity: 0; + flex-shrink: 1; +} + +section { + padding: 20px; + margin: 20px auto; + max-width: 800px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h2 { + color: #5271ff; + border-bottom: 2px solid #333; + padding-bottom: 10px; + font-size: clamp(1.4rem, 10vw, 1.8rem); +} + +.projekt-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 30px; +} + +.projekt-buttons a { + width: calc(50% - 15px); + background-color: #333; + padding: 10px; + color: #fff; + border-radius: 5px; + + display: flex; + flex-direction: column; + gap: 5px; + text-decoration: none; + min-width: 200px; + position: relative; +} + +.projekt-buttons a .image { + height: 200px; + background-size: cover; + background-position: center; +} + +.projekt-buttons a .label { + align-self: center; +} + +.projekt-buttons a:nth-child(1) { + background-color: #0cc0df; +} + +.projekt-buttons a:nth-child(1) .image { + background-image: url("/assets/Lebenslauf.jpg"); +} + +.projekt-buttons a:nth-child(2) { + background-color: #ff5757; +} + +.projekt-buttons a:nth-child(2) .image { + background-image: url("/assets/Farbkreis.jpg"); +} + +.projekt-buttons a:nth-child(3) { + background-color: #7ed957; +} + +.projekt-buttons a:nth-child(3) .image { + background-image: url("/assets/Farbübung.jpg"); +} + +.projekt-buttons a:nth-child(4) { + background-color: #5E17EB; +} + +.projekt-buttons a:nth-child(4) .image { + background-image: url("/assets/Logo weiß transparent.png"); + background-size: contain; + background-repeat: no-repeat; +} + +.projekt-buttons a:nth-child(5) { + background-color: #ffbd59; +} + +.projekt-buttons a:nth-child(5) .image { + background-image: url("/assets/Rainbow.png"); +} + +.projekt-buttons a:nth-child(6) { + background-color: hsl(229, 100%, 66%); +} + +.projekt-buttons a:nth-child(6) .image { + background-image: url("/assets/MK Brand_page-0001.jpg"); +} + +.projekt-buttons a::before { + content: ""; + display: block; + position: absolute; + inset: 0; + background: black; + pointer-events: none; + + opacity: 0; + transition: opacity 200ms ease; +} + +.projekt-buttons a:hover::before { + opacity: 20%; +} + +#kontakt ul { + list-style-type: none; + padding: 0; +} + +#kontakt ul li { + margin-bottom: 10px; +} + +.back-to-top { + background-color: #5271ff; + border: none; + color: black; +} + +.back-to-top:hover { + transform: scale(1.1); +} +.farbkreis { + display: block; + margin: 0 auto; + width: 100%; + max-width: 800px; + object-fit: contain; +} +.farbübung { + display: block; + margin: 0 auto; + width: 100%; + max-width: 800px; + object-fit: contain; +} +.description{ + text-align: center; +} +.logo2 { + display: block; + margin: 0 auto; + width: 100%; + max-width: 800px; + object-fit: contain; +} +.animation { + aspect-ratio: 16/9; + display: block; + margin: 0 auto; + width: 100%; + max-width: 800px; +} +.brand{ + display: block; + margin: 0 auto; + width: 100%; + max-width: 800px; + object-fit: contain; +} +.personal-brand{ + display: block; + text-align: center; + padding-top: 20px; +} +.lebenslauf{ + display: block; + margin: 0 auto; + width: 100%; + max-width: 800px; + object-fit: contain; +} +.lebenslauflink{ + display: flex; + justify-content: center; + text-align: center; + gap: 100px; + padding-top: 20px; +} +.storyboard { + display: block; + text-align: center; + padding-top: 20px; +} +.logo-scratch{ + display: block; + text-align: center; + padding-top: 20px; +} +footer { + text-align: center; + padding: 20px 0; + background-color: #5271ff; + color: #fff; + margin-top: 20px; +} +@media (max-width: 487px) { + .lebenslauflink{ + gap:20px; + text-wrap: nowrap; + } + nav { + gap: 20px; + text-wrap: nowrap; + } + header { + padding: 10px 20px; + } + + header h1 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + + .logo { + height: 30px; + width: 30px; + } + + .dash { + display: none; + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..33a4aec --- /dev/null +++ b/src/index.html @@ -0,0 +1,80 @@ + + + + + + Maximilian Kerbel - Portfolio + + + + + + + + +

+

+

Maximilian Kerbel — Portfolio

+

+

+ +

+

Über mich

+

Ich studiere Medieninformatik an der Hochschule Kaiserslautern und präsentiere hier meine Projekte.

+

+

+

Projekte

+

+

+

+

Kontakt

+

Kontaktieren sie mich gerne über:

+

Email: maximilian@krbl.eu
Telefon: +49 179 3725222

+

+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..fc9651e --- /dev/null +++ b/src/index.js @@ -0,0 +1,7 @@ +document.addEventListener("DOMContentLoaded", function () { + let backToTop = document.querySelector(".back-to-top"); + + backToTop.addEventListener("click", () => { + scrollTo({top: 0, behavior: "smooth"}); + }); +}) \ No newline at end of file