initial commit
This commit is contained in:
commit
4cf71d9d0f
GPG key ID:
C9BBAB79405EE56D
25 changed files with 995 additions and 0 deletions
28
.forgejo/workflows/deploy.yaml
Normal file
28
.forgejo/workflows/deploy.yaml
Normal file
|
|
@ -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" }'
|
||||
47
src/Animation.html
Normal file
47
src/Animation.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo"></div>
|
||||
<h1><span>Maximilian Kerbel</span><span class="dash"> — </span><span>Portfolio</span></h1>
|
||||
<div class="logo"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="./index.html#ueber-mich">
|
||||
<span>Über mich</span>
|
||||
</a>
|
||||
<a href="./index.html#projekte">
|
||||
<span>Projekte</span>
|
||||
</a>
|
||||
<a href="./index.html#kontakt">
|
||||
<span>Kontakt</span>
|
||||
</a>
|
||||
</nav>
|
||||
<section>
|
||||
<h2>
|
||||
Animation
|
||||
</h2>
|
||||
<video src="./assets/Rocky.mp4" controls class="animation"> </video>
|
||||
<a target="_blank" href="./assets/Storyboard.pdf" class ="storyboard">PDF zum Storyboard</a>
|
||||
<p class="description">
|
||||
Eine Animation zu einer Szene aus Rocky Balboa. Designed in After Effects.
|
||||
</p>
|
||||
<footer>
|
||||
<p>Maximilian Kerbel | Hermannstraße 88, 66538 Neunkirchen, Deutschland |
|
||||
<button class="back-to-top">Zurück nach oben</button>
|
||||
</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
46
src/Farbkreis.html
Normal file
46
src/Farbkreis.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo"></div>
|
||||
<h1><span>Maximilian Kerbel</span><span class="dash"> — </span><span>Portfolio</span></h1>
|
||||
<div class="logo"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="./index.html#ueber-mich">
|
||||
<span>Über mich</span>
|
||||
</a>
|
||||
<a href="./index.html#projekte">
|
||||
<span>Projekte</span>
|
||||
</a>
|
||||
<a href="./index.html#kontakt">
|
||||
<span>Kontakt</span>
|
||||
</a>
|
||||
</nav>
|
||||
<section>
|
||||
<h2>
|
||||
Farbkreis
|
||||
</h2>
|
||||
<img src="./assets/Farbkreis.jpg" alt="Farbkreis" class="farbkreis">
|
||||
<p class="description">
|
||||
Ein Farbkreis zur Darstellung der Interaktion der Farben miteinander.
|
||||
</p>
|
||||
<footer>
|
||||
<p>Maximilian Kerbel | Hermannstraße 88, 66538 Neunkirchen, Deutschland |
|
||||
<button class="back-to-top">Zurück nach oben</button>
|
||||
</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
49
src/Farbübung.html
Normal file
49
src/Farbübung.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo"></div>
|
||||
<h1><span>Maximilian Kerbel</span><span class="dash"> — </span><span>Portfolio</span></h1>
|
||||
<div class="logo"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="./index.html#ueber-mich">
|
||||
<span>Über mich</span>
|
||||
</a>
|
||||
<a href="./index.html#projekte">
|
||||
<span>Projekte</span>
|
||||
</a>
|
||||
<a href="./index.html#kontakt">
|
||||
<span>Kontakt</span>
|
||||
</a>
|
||||
</nav>
|
||||
<section>
|
||||
<h2>
|
||||
Farbübung
|
||||
</h2>
|
||||
<img src="./assets/Farbübung.jpg" alt="Farbübung" class="farbübung">
|
||||
<p class="description">
|
||||
Eine Farbübung, bei der das englische Wort »fast« (dt. <i>schnell</i>) 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.
|
||||
</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Maximilian Kerbel | Hermannstraße 88, 66538 Neunkirchen, Deutschland |
|
||||
<button class="back-to-top">Zurück nach oben</button>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/Lebenslauf/Bilder/Passbild.jpg
Normal file
BIN
src/Lebenslauf/Bilder/Passbild.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
122
src/Lebenslauf/index.css
Normal file
122
src/Lebenslauf/index.css
Normal file
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
174
src/Lebenslauf/index.html
Normal file
174
src/Lebenslauf/index.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> Lebenslauf </title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="headline">
|
||||
<h1>Lebenslauf</h1>
|
||||
<div class="name">
|
||||
Maximilian Kerbel
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<main>
|
||||
<div>
|
||||
<div class="persona">
|
||||
<h2>Persönliche Daten</h2>
|
||||
<img src="./Bilder/Passbild.jpg" alt="Bild von mir" class="profile-picture">
|
||||
<div>
|
||||
<br>
|
||||
<div class="persona-data">
|
||||
Geboren:
|
||||
</div>
|
||||
27.01.2005 <br>
|
||||
Neunkirchen, Saarland
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div class="persona-data">
|
||||
Wohnort:
|
||||
</div>
|
||||
<a href="https://maps.app.goo.gl/ujC1Hgzde6pESqFS7">
|
||||
<span>Hermannstraße 88</span> 🔗<br>
|
||||
<span>66538 Neunkirchen, Saarland</span>
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div class="persona-data">
|
||||
Kontakt:
|
||||
</div>
|
||||
<a href="tel:+491793725222">
|
||||
<span>0179/3725222</span> 🔗
|
||||
</a> <br>
|
||||
<a href="mailto:maximilian@krbl.eu">
|
||||
<span>maximilian@krbl.eu</span> 🔗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Sprachkenntnisse</h2>
|
||||
<div>
|
||||
Deutsch <br>
|
||||
Englisch <br>
|
||||
Russisch
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Computerkenntnisse</h2>
|
||||
<div>
|
||||
Grundkenntnisse Java und html/css<br>
|
||||
Grundkenntnisse After Effects
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-line">
|
||||
</div>
|
||||
<div class="education">
|
||||
<h2>Ausbildung</h2>
|
||||
<table class="education-table">
|
||||
<tr>
|
||||
<td>
|
||||
August 2011 - Juni 2023
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
Schulische Bildung
|
||||
</div>
|
||||
Gymnasium am Krebsberg <br>
|
||||
Neunkirchen
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Juli 2020
|
||||
</td>
|
||||
<td>
|
||||
<div> Hauptschulabschluss</div>
|
||||
Gymnasium am Krebsberg <br>
|
||||
Neunkirchen
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Juli 2021
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
Mittlere Reife
|
||||
</div>
|
||||
Gymnasium am Krebsberg <br>
|
||||
Neunkirchen
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
September 2021 - Juni 2023
|
||||
</td>
|
||||
<td>
|
||||
<div>Juniorstudium</div>
|
||||
Universität des Saarlandes <br>
|
||||
Saarbrücken
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Juni 2023
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
Abitur
|
||||
</div>
|
||||
Gymnasium am Krebsberg <br>
|
||||
Neunkirchen
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Juni 2023 - September 2023
|
||||
</td>
|
||||
<td>
|
||||
<div>Ferienjob</div>
|
||||
ZF Friedrichshafen <br>
|
||||
Neunkirchen
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
September 2023 - September 2024
|
||||
</td>
|
||||
<td>
|
||||
<div>Medieninformatikstudium</div>
|
||||
Universität des Saarlandes <br>
|
||||
Saarbrücken
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Juni 2024 - August 2024
|
||||
</td>
|
||||
<td>
|
||||
<div>Ferienjob</div>
|
||||
ZF Friedrichshafen <br>
|
||||
Neunkirchen
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
September 2024 - heute
|
||||
</td>
|
||||
<td>
|
||||
<div>Medieninformatikstudium</div>
|
||||
Hochschule Kaiserslautern <br>
|
||||
Zweibrücken
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
50
src/Lebensläufe.html
Normal file
50
src/Lebensläufe.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo"></div>
|
||||
<h1><span>Maximilian Kerbel</span><span class="dash"> — </span><span>Portfolio</span></h1>
|
||||
<div class="logo"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="./index.html#ueber-mich">
|
||||
<span>Über mich</span>
|
||||
</a>
|
||||
<a href="./index.html#projekte">
|
||||
<span>Projekte</span>
|
||||
</a>
|
||||
<a href="./index.html#kontakt">
|
||||
<span>Kontakt</span>
|
||||
</a>
|
||||
</nav>
|
||||
<section>
|
||||
<h2>
|
||||
Lebenslauf
|
||||
</h2>
|
||||
<img src="./assets/Lebenslauf.jpg" alt="Lebenslauf" class="lebenslauf">
|
||||
<span class="lebenslauflink">
|
||||
<a target="_blank" href="./Lebenslauf/index.html">Lebenslauf als Webseite</a>
|
||||
<a target="_blank" href="./assets/Lebenslauf.pdf">Lebenslauf als PDF</a>
|
||||
</span>
|
||||
<p class="description">
|
||||
Mein Lebenslauf sowohl als PDF als auch als Webseite.
|
||||
</p>
|
||||
<footer>
|
||||
<p>Maximilian Kerbel | Hermannstraße 88, 66538 Neunkirchen, Deutschland |
|
||||
<button class="back-to-top">Zurück nach oben</button>
|
||||
</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
49
src/Logo.html
Normal file
49
src/Logo.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo"></div>
|
||||
<h1><span>Maximilian Kerbel</span><span class="dash"> — </span><span>Portfolio</span></h1>
|
||||
<div class="logo"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="./index.html#ueber-mich">
|
||||
<span>Über mich</span>
|
||||
</a>
|
||||
<a href="./index.html#projekte">
|
||||
<span>Projekte</span>
|
||||
</a>
|
||||
<a href="./index.html#kontakt">
|
||||
<span>Kontakt</span>
|
||||
</a>
|
||||
</nav>
|
||||
<section>
|
||||
<h2>
|
||||
Logo
|
||||
</h2>
|
||||
<img src="./assets/Logos.jpg" alt="Logo" class="logo2">
|
||||
<a target="_blank" href="./assets/Logo%20scratch.pdf" class="logo-scratch">Erstellungsprozess des Logos PDF</a>
|
||||
<p class="description">
|
||||
Ein typographisches Logo aus meinen Initialen in drei Größen.
|
||||
Gibt es noch in weiß.
|
||||
</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Maximilian Kerbel | Hermannstraße 88, 66538 Neunkirchen, Deutschland |
|
||||
<button class="back-to-top">Zurück nach oben</button>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
48
src/Personal Brand.html
Normal file
48
src/Personal Brand.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo"></div>
|
||||
<h1><span>Maximilian Kerbel</span><span class="dash"> — </span><span>Portfolio</span></h1>
|
||||
<div class="logo"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="./index.html#ueber-mich">
|
||||
<span>Über mich</span>
|
||||
</a>
|
||||
<a href="./index.html#projekte">
|
||||
<span>Projekte</span>
|
||||
</a>
|
||||
<a href="./index.html#kontakt">
|
||||
<span>Kontakt</span>
|
||||
</a>
|
||||
</nav>
|
||||
<section>
|
||||
<h2>
|
||||
Personal Brand
|
||||
</h2>
|
||||
<a target="_blank" href="./assets/MK Brand.pdf"> <img src="./assets/MK%20Brand_page-0001.jpg" alt="Brand" class="brand"> </a>
|
||||
<a target="_blank" href="./assets/MK Brand.pdf" class ="personal-brand"> Link zu der PDF </a>
|
||||
<p class="description">
|
||||
Der Styleguide zu meiner Brand als Unternehmer. Das Unternehmen stellt Parfum her.
|
||||
Reich riechen, erreichbar für jeden
|
||||
</p>
|
||||
<footer>
|
||||
<p>Maximilian Kerbel | Hermannstraße 88, 66538 Neunkirchen, Deutschland |
|
||||
<button class="back-to-top">Zurück nach oben</button>
|
||||
</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/assets/Farbkreis.jpg
Normal file
BIN
src/assets/Farbkreis.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
BIN
src/assets/Farbübung.jpg
Normal file
BIN
src/assets/Farbübung.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 832 KiB |
BIN
src/assets/Lebenslauf.jpg
Normal file
BIN
src/assets/Lebenslauf.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
src/assets/Lebenslauf.pdf
Normal file
BIN
src/assets/Lebenslauf.pdf
Normal file
Binary file not shown.
BIN
src/assets/Logo scratch.pdf
Normal file
BIN
src/assets/Logo scratch.pdf
Normal file
Binary file not shown.
BIN
src/assets/Logo weiß transparent.png
Normal file
BIN
src/assets/Logo weiß transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
src/assets/Logos.jpg
Normal file
BIN
src/assets/Logos.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/MK Brand.pdf
Normal file
BIN
src/assets/MK Brand.pdf
Normal file
Binary file not shown.
BIN
src/assets/MK Brand_page-0001.jpg
Normal file
BIN
src/assets/MK Brand_page-0001.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
src/assets/Rainbow.png
Normal file
BIN
src/assets/Rainbow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/Rocky.mp4
Normal file
BIN
src/assets/Rocky.mp4
Normal file
Binary file not shown.
BIN
src/assets/Storyboard.pdf
Normal file
BIN
src/assets/Storyboard.pdf
Normal file
Binary file not shown.
295
src/global.css
Normal file
295
src/global.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
80
src/index.html
Normal file
80
src/index.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Maximilian Kerbel - Portfolio</title>
|
||||
<meta name="description"
|
||||
content="Ich studiere Medieninformatik an der Hochschule Kaiserslautern und präsentiere hier meine Projekte.">
|
||||
<link rel="stylesheet" href="./global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo"></div>
|
||||
<h1><span>Maximilian Kerbel</span><span class="dash"> — </span><span>Portfolio</span></h1>
|
||||
<div class="logo"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="#ueber-mich">
|
||||
<span>Über mich</span>
|
||||
</a>
|
||||
<a href="#projekte">
|
||||
<span>Projekte</span>
|
||||
</a>
|
||||
<a href="#kontakt">
|
||||
<span>Kontakt</span>
|
||||
</a>
|
||||
</nav>
|
||||
<section id="ueber-mich">
|
||||
<h2>Über mich</h2>
|
||||
<p>Ich studiere Medieninformatik an der Hochschule Kaiserslautern und präsentiere hier meine Projekte.</p>
|
||||
</section>
|
||||
<section id="projekte">
|
||||
<h2>Projekte</h2>
|
||||
<div class="projekt-buttons">
|
||||
<a href="./Lebensläufe.html">
|
||||
<div class="image"></div>
|
||||
<div class="label">Lebenslauf</div>
|
||||
</a>
|
||||
<a href="./Farbkreis.html">
|
||||
<div class="image"></div>
|
||||
<div class="label">Farbkreis</div>
|
||||
</a>
|
||||
<a href="./Farbübung.html">
|
||||
<div class="image"></div>
|
||||
<div class="label">Farbübung</div>
|
||||
</a>
|
||||
<a href="Logo.html">
|
||||
<div class="image"></div>
|
||||
<div class="label">Logo</div>
|
||||
</a>
|
||||
<a href="Animation.html">
|
||||
<div class="image"></div>
|
||||
<div class="label">Animation</div>
|
||||
</a>
|
||||
<a href="Personal Brand.html">
|
||||
<div class="image"></div>
|
||||
<div class="label">Personal Brand</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="kontakt">
|
||||
<h2>Kontakt</h2>
|
||||
<p>Kontaktieren sie mich gerne über:</p>
|
||||
<ul>
|
||||
<li>Email: <a href="mailto:maximilian@krbl.eu">maximilian@krbl.eu</a></li>
|
||||
<li>Telefon: <a href="tel:+491793725222">+49 179 3725222</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Maximilian Kerbel | Hermannstraße 88, 66538 Neunkirchen, Deutschland |
|
||||
<button class="back-to-top">Zurück nach oben</button>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
7
src/index.js
Normal file
7
src/index.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let backToTop = document.querySelector(".back-to-top");
|
||||
|
||||
backToTop.addEventListener("click", () => {
|
||||
scrollTo({top: 0, behavior: "smooth"});
|
||||
});
|
||||
})
|
||||
Loading…
Add table
Reference in a new issue