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