Meine Webseiten Planung:¶
URL: https://larshellstern.ch/
Tutorial-Video & eigene Techniken:¶
Ich habe folgendes YT-Tutorial für die entwicklung und umsetzung meines Portfolios verwendet, da es mich vom Design her angesprochen hat und Moddern aussieht. Ich habe ausserdem das neue Design "Liquid Glass" oder auch "Frosted Glass" genannt (unten weiter erläutert) mit KI und Tutorials umgesetzt. Ich habe vorallem Gemini 2.5 Pro und Claude Sonnet 4.5 benutzt, da es mit Chat GPT 5 nicht ging und nach dem einsatz von ChatGPT die ganze Seite und die Links etc nicht mehr funktionierten.
Betriebswirtschaftliche Ueberlegungen¶
Ziel
- Mein Portfolio soll Arbeitgeber, Praktikumsbetriebe und Kunden erreichen.
- Digitale Visitenkarte: schnelle Übersicht über Fähigkeiten und Projekte.
Zielgruppe
- Personalverantwortliche (HR)
- Entwicklerinnen / Entwickler, Informatiker
- Firmen für Jahrespraktikum
- Potentielle Kunden / Partner
- Lehrer
Inhalte
- Lebenslauf (CV) als PDF-Download
- Kurzprofil / Ueber mich
- Meine Skills Schulisches, Sprachen, Programmierspachen etc.
- Projekte Informatikprojekte, Projektarbeiten.
- Kontakt: E-Mail, GitHub,
Wie das bei der Stellensuche hilft
- Schnelle Orientierung: Personalabteilung sieht in Sekunden alle Relevanten Infos über mich.
- Guter Eindruck zeigt Praxisbezug und Erfahrung in der Web-entwicklung.
Webseiten Design:¶
Wie soll die Webseite am schluss ungefähr aussehen ?¶
Wireframe:¶
Sitemap:¶
graph TD
A[🏠 HOME] --> B[👤 ÜBER MICH]
A --> C[💼 PORTFOLIO]
A --> D[🧠 SKILLS]
A --> E[📬 KONTAKT]
C --> F[🏫 IMS-Module]
C --> G[🚀 Eigene Projekte]
C --> H[💻 Berufspraktikum]Logo¶
Ich habe mien Logo mit Paint erstellt, das logo besteht einfach aus mienem Namen, wobei ich das L Rot gemacht habe, damit es zu meiner Kontrastfarbe auf der Webseite passt.
Hier mein Logo:
Webseite Struktur:¶
Meine Webseite ist ein OnePager, es befindet sich allso alles auf einer Seite. Meine Seite enthält eine Titelseite, über mich Seite, Meine Skills, meine Projekte und ein abschnitt wo man mich Kontaktieren kann.
Hier eine Skizze dazu wie die die Tittelseite ungefähr aussehen soll:
Farbpalette¶
| Farbe | Hex-Code | Vorschau |
|---|---|---|
| Rot | #ff004f |
|
| Schwarz | #000000 |
|
| Weiss | #FFFFFF |
|
| Background | #080808 |
|
| Grau | #ababab |
|
| Dunkelgrau | #262626 |
Ordnerstruktur:¶
Meine Ordnerstruktur:¶
Ich habe einen Überordner "Personal_Site" und darunter habe ich "assets" dort befindet sich das HTML, JS, CSS Dokument. In "documents" habe ich mein Lebenslauf abgelegt, der auch über meine Webseite heruntergeladen werden kann. Und unter "img" habe ich alle verwendeten Bilder gespeichert.
Eigenes JS Element¶
Ich habe gleich mehrere JS Elemente implementiert:
- Sidebar (öffnen und Schliessen)
- Typing effekt (Startseite)
- Über mich (Tab-Steuerung)
Konkretes beispiel eines JavaScript Elementes:¶
Um auf Mobilen geräten also zb Handys die Navbar zu öffnen, braucht man eine JavaScript funktion. Da Handys zu kleine Displays haben um alle Links anzeigen zu können habe ich ein Burger Menü Button implementiert. Um das zu steuern was passiert wen man diesen Button drückt (onclick), brauche ich eine JavaScript Funktion.
JS Code (öffnen und schliessen des Navigationsmenüs auf Handys):¶
// Sidemenu / Burger-Menü-Steuerung:
var sidemenu = document.getElementById("sidemenu");
function openmenu(){
// Schaltet die CSS-Klasse 'open' um (hinzu/weg)
sidemenu.classList.toggle("open");
}
function closemenu(){
// Entfernt die CSS-Klasse 'open' (schliesst das Menü)
sidemenu.classList.remove("open");
}
Tutorial vs meine eigene Portfolioseite (eigenständige Leistungen)¶
Ich habe bereits letztes Jahr meine Portfolioseite gemacht, und habe sie jetzt noch vom Design her viel moderner und Transparenter gemacht "Frosted Glass" implementiert, mit vielen Buttons die Transparent bzw halb Transparent sind. Ausserdem habe ich noch vieles hinzugefügt wie das Impresum und die Datenschutzerklärungen und habe fehler allgemein korrigiert.
Neues Design:¶
Ich habe auf meiner gesamten Portfolioseite ein neues "Frosted Glass" oder auch "Liquid Glass gennant (Apple)" Design implementiert. Dieses Design findet man bei Apple auf allen neuen Betriebsystemen oder auch zb: im neuen YT Player Layout.
Ich finde das Design sieht sehr modern aus und mir gefallen die neuen Buttons die halb Transparent sind viel besser als die alten Links ohne hintergrund.
"Frosted Glass" oder auch "Glass Morphisem" Beispiel:
Bildquelle: Link_zur_Quelle
Validierung:¶
Ich habe mit dieser Werbseite mein Code validirert: https://validator.w3.org/
Nachweis Validierung:¶
Ergebnis & Code¶
Ergebnis:¶
Desktop:¶
Mobile:¶
Code:¶
index.html¶
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<script src="https://kit.fontawesome.com/a31891de66.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="header-top">
<div class="logo-text"><span class="logo-l">L</span>ars</div>
<nav>
<ul id="sidemenu">
<li><a href="#about" onclick="closemenu()">Über mich</a></li>
<li><a href="#services" onclick="closemenu()">Meine Skills</a></li>
<li><a href="#portfolio" onclick="closemenu()">Portfolio</a></li>
<li><a href="#contact" onclick="closemenu()">Kontakt</a></li>
</ul>
<i class="fas fa-bars" onclick="openmenu()"></i>
</nav>
</div>
<div class="header-text">
<p class="job-title">Applikationsentwickler</p>
<h1>Hallo, <span id="type-prefix"></span><span id="type-name" class="type-name"></span></h1>
<p class="location">von St. Gallen</p>
</div>
</div>
<!--about-->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="img/user_bright.png" alt="🟥">
</div>
<div class="about-col-2">
<h1 class="sub-title">Über mich</h1>
<br>
<p>Ich, Lars Hellstern, gehe aktuell an die Kanti am Brühl und studiere dort Infromatik. Mit dem Abschluss an der IMS (Informatikmittelschule) an der Kanti am Brühl, erlange ich sowohl den Applikationsentwickler in EFZ als auch die BM.
<br>
<br>
In meiner Freizeit spiele ich Tennis, gehe ins GYM, fahre Mountainbike und treffe mich mit Freunden. Ich interessiere mich sehr für Technik, KI, Wirtschaft, CyberSecurity und auch für Autos.
</p>
<div class="tab-section">
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class="tab-links" onclick="opentab('experience')">Erfahrungen</p>
<p class="tab-links" onclick="opentab('education')">Ausbildung</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Frontend</span><br>HTML / CSS / JS / React / JS Frameworks</li>
<li><span>Backend</span><br>.NET / C# / SQL</li>
<li><span>Anderes</span><br>C / Photoshop, Premiere Pro / MS Office Programme</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>Praktika</span><br>4 wöchiges Praktikum bei ServiceOcean</li>
<li><span>Sprachaufenthalt</span><br>kommt noch (englisch)</li>
<li><span>Schule</span><br>Informatikunterricht</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>2014 - 2020</span><br>Grundschule Rotmonten, St.Gallen</li>
<li><span>2020 - 2023</span><br>Sekundarschule flade, St.Gallen</li>
<li><span>2023 - heute</span><br>IMS / Kanti am Brühl, St.Gallen</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--services-->
<div id="services">
<div class="container">
<h1 class="sub-title">Meine Skills</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2>Web-Development</h2>
<p>Ich habe Praktiksche erfahrung mit HTML, CSS, Javascript, als auch mit modernen JS Frameworks wie React.</p>
<a href="#"></a>
</div>
<div>
<i class="fa-solid fa-graduation-cap"></i>
<h2>Allgemeines</h2>
<p>Da ich an der Informatikmittelschule sowohl die Ausbildung zum Applikationsentwickler bei EFZ als auch die Berufsmaturität (BM) abschliesse, verfüge ich über Kenntnisse in verschiedenen Bereichen wie Mathematik, Buchhaltung, Wirtschaft und mehr</p>
<a href="#"></a>
</div>
<div>
<i class="fa-solid fa-database"></i>
<h2>Backend</h2>
<p>Ich habe ebenfalls Praktische erfahrung mit .NET, C# und wie man eine API erstellt und diese mit einer Frontend Webseite verbindet.</p>
<a href="#"></a>
</div>
</div>
</div>
</div>
<!--portfolio-->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">Projekte</h1>
<div class="work-list">
<div class="work">
<img src="img/to_do_app.png" alt="to do app">
<div class="layer">
<h3>To Do App</h3>
<p>In meinem 4 Wochen Praktikum bei ServiceOcean, habe ich slebst eine To Do App programmiert.
</p>
<a href="https://larshellstern.ch/To_Do/#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="img/meine_webseite.png" alt="eingene webseite">
<div class="layer">
<h3>Meine eigene Webseite</h3>
<p>Im "Web Engineering" Modul in meiner Informatikschule, programmierten wir unseren eigenen Webauftrit.
</p>
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="img/to_do_app_v2.jpg" alt="to do app version 2">
<div class="layer">
<h3>To Do App, entwickelt mit React & loginverfahren</h3>
<p>Ebenfalls in mienem Praktikum bei ServiceOcean habe ich in der dritten Woche mittels React eine zweite Version meiner To Do App entwickelt.
</p>
<a href="https://larshellstern.ch/to_do_react/"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--contact-->
<div id="contact">
<div id="popup-imprint" class="popup-modal">
<div class="popup-content">
<a href="#" class="close-btn">×</a>
<h2>Impressum & Datenschutzerklärung</h2>
<h3>Impressum</h3>
<p>Lars Hellstern</p>
<p>Adresse: Notkerstrasse 20, 9000 St. Gallen</p>
<p>E-Mail: lars.hellstern@icloud.com</p>
<br>
<h3>Datenschutzerklärung</h3>
<p>Datenschutzerklärung (DSG Schweiz) <br> <br>
Wir nehmen den Schutz deiner Personendaten ernst. Diese Website ist ein persönliches Portfolio und kann ohne Angabe persönlicher Daten genutzt werden. <br> <br>
1. Log-Dateien des Servers Beim Besuch der Website werden durch den Hosting-Provider standardmässig IP-Adresse, Browser-Typ und Zugriffszeit erfasst (sog. Server-Logfiles). Diese Daten dienen der Sicherheit und der Fehlerbehebung und werden nicht zur Identifizierung genutzt. <br> <br>
2. Kontaktformular Daten, die du im Kontaktformular eingibst (Name, E-Mail, Nachricht), werden zur Bearbeitung deiner Anfrage bei Google Sheets gespeichert. Wir verwenden diese Daten ausschliesslich, um mit dir in Kontakt zu treten und deine Anfrage zu beantworten. <br> <br>
3. Externe Links Durch das Klicken auf Links zu Social-Media-Diensten (z.B. GitHub, LinkedIn) werden Daten an den jeweiligen Anbieter übertragen. Wir haben keinen Einfluss auf die Datenbearbeitung dieser Drittanbieter. <br> <br>
4. Deine Rechte Du hast jederzeit das Recht auf Auskunft über deine gespeicherten Daten sowie auf Berichtigung und Löschung. Wende dich hierzu bitte an die oben genannte E-Mail-Adresse.
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Kontakt</h1>
<p><i class="fa-solid fa-envelope"></i>lars.hellstern@icloud.com</p>
<p><i class="fa-solid fa-phone"></i>077 426 52 69</p>
<div class="social-icons">
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/Lars-007"><i class="fa-brands fa-github"></i></a>
</div>
<a href="documents/cv_lars.pdf" download class="btn btn2">Lebenslauf PDF <i class="fa-solid fa-file-arrow-down"></i></a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Dein Name" required>
<input type="email" name="email" placeholder="Deine E-Mail" required>
<textarea name="Message" rows="6" placeholder="Deine Nachricht"></textarea>
<button type="submit" class="btn btn2">Abschicken</button>
</form>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © from Lars Hellstern - <a href="#popup-imprint" class="imprint-link">Impressum & Datenschutzerklärung</a></p>
</div>
</div>
</div>
<script src="scripts.js"></script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbwYwblN2iWu9_5f1nAokd5iHlJ8fsetOes-o55w-Fazo-1TRdkes5tuAtrQn4bfCNAw4Q/exec'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
</script>
<!-- Floating Scroll to Top Button -->
<a href="#" class="scroll-to-top">
<i class="fa-solid fa-arrow-up"></i>
</a>
</body>
</html>
style.css¶
*{
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body {
background: #0a0a0a;
color: #fff;
}
#header {
width: 100%;
height: 100vh;
background-image: url(img/portrait.png);
background-size: cover;
background-position: center;
padding: 10px 10%;
}
.container {
padding: 10px 10%;
}
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
}
.logo-text {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 10px 25px;
font-size: 28px;
font-weight: 600;
color: #fff;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.logo-l {
color: #ff004f;
text-shadow: 0 0 15px rgba(255, 0, 79, 0.6);
font-weight: 700;
}
nav {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 8px 20px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 0 5px;
}
nav ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
position: relative;
transition: all 0.3s ease;
padding: 6px 8px;
display: inline-block;
}
nav ul li a:hover{
color: #ff004f;
text-shadow: 0 0 10px rgba(255, 0, 79, 0.5);
}
.header-text{
margin-top: 22%;
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.header-text .job-title {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 10px 20px;
font-size: 26px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
display: inline-block;
}
.header-text h1{
font-size: 60px;
margin: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 15px 25px;
display: inline-block;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.header-text h1 span{
color: #ff004f;
text-shadow: 0 0 20px rgba(255, 0, 79, 0.6);
}
.header-text .location {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 10px 20px;
font-size: 36px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
display: inline-block;
}
/*---------------about---------------*/
#about{
padding: 60px 0 40px 0;
color: #e0e0e0;
}
.row{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
align-items: stretch;
}
.about-col-1{
flex-basis: 35%;
display: fixed;
}
.about-col-1 img{
width: 100%;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}
.about-col-2{
flex-basis: 60%;
display: flex;
flex-direction: column;
}
.about-col-2 > p {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 25px 30px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
line-height: 1.6;
color: #e0e0e0;
margin-bottom: 20px;
}
.sub-title{
font-size: 38px;
font-weight: 600;
color: #fff;
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 12px 25px;
display: inline-block;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
.about-col-2 > br {
display: none;
}
.tab-section {
display: flex;
flex-direction: column;
gap: 15px;
flex: 1;
}
.tab-titles{
display: flex;
flex-direction: row;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50px;
padding: 8px;
width: fit-content;
gap: 8px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
.tab-links{
margin-right: 0;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
padding: 10px 25px;
border-radius: 50px;
transition: all 0.3s ease;
color: #e0e0e0;
text-align: center;
white-space: nowrap;
}
.tab-links:hover{
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.tab-links.active-link{
background: rgba(255, 0, 79, 0.25);
border: 1px solid rgba(255, 0, 79, 0.4);
color: #fff;
box-shadow: 0 4px 15px rgba(255, 0, 79, 0.3);
}
.tab-contents{
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 20px;
display: none;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
flex: 1;
overflow: hidden;
}
.tab-contents.active-tab{
display: flex;
}
.tab-contents ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
height: 100%;
align-items: stretch;
}
.tab-contents ul li{
list-style: none;
margin: 0;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
transition: all 0.3s ease;
line-height: 1.5;
color: #e0e0e0;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.tab-contents ul li:hover{
background: rgba(255, 255, 255, 0.08);
transform: translateY(-5px);
border: 1px solid rgba(255, 0, 79, 0.3);
box-shadow: 0 10px 30px rgba(255, 0, 79, 0.2);
}
.tab-contents ul li span{
color: #ff004f;
font-size: 18px;
font-weight: 600;
text-shadow: 0 0 10px rgba(255, 0, 79, 0.4);
display: block;
margin-bottom: 8px;
}
/*---------------services---------------*/
#services{
padding: 40px 0;
}
.services-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 40px;
margin-top: 50px;
}
.services-list div{
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 40px;
font-size: 13px;
font-weight: 300;
border-radius: 20px;
transition: border 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
position: relative;
overflow: hidden;
}
.services-list div::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 0, 79, 0.1), rgba(255, 107, 157, 0.1));
opacity: 0;
transition: opacity 0.2s ease;
border-radius: 20px;
}
.services-list div i{
font-size: 50px;
margin-bottom: 30px;
color: #ff004f;
filter: drop-shadow(0 0 10px rgba(255, 0, 79, 0.5));
position: relative;
z-index: 1;
}
.services-list div h2{
font-size: 30px;
font-weight: 500;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.services-list div p{
position: relative;
z-index: 1;
}
.services-list div a{
text-decoration: none;
color: #fff;
font-size: 12px;
margin-top: 20px;
display: inline-block;
position: relative;
z-index: 1;
}
.services-list div:hover{
border: 1px solid rgba(255, 0, 79, 0.3);
box-shadow: 0 12px 40px 0 rgba(255, 0, 79, 0.25);
}
.services-list div:hover::before {
opacity: 1;
}
/*---------------portfolio---------------*/
#portfolio{
padding: 40px 0;
}
.work-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 40px;
margin-top: 50px;
}
.work{
border-radius: 20px;
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
transition: border 0.2s ease, box-shadow 0.2s ease;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.work img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 20px;
display: block;
transition: none;
}
.layer{
width: 100%;
height: 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
font-size: 14px;
transition: height 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.layer h3{
font-weight: 500;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.layer p{
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.layer a{
margin-top: 20px;
color: #fff;
text-decoration: none;
font-size: 18px;
line-height: 60px;
background: rgba(255, 0, 79, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
transition: all 0.2s ease;
box-shadow: 0 5px 20px rgba(255, 0, 79, 0.4);
}
.layer a:hover{
background: rgba(255, 0, 79, 0.6);
transform: scale(1.1);
box-shadow: 0 8px 30px rgba(255, 0, 79, 0.6);
}
.work:hover .layer{
height: 100%;
}
.work:hover{
border: 1px solid rgba(255, 0, 79, 0.3);
box-shadow: 0 12px 40px 0 rgba(255, 0, 79, 0.25);
}
.btn{
display: block;
margin: 50px auto;
width: fit-content;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 14px 50px;
border-radius: 15px;
text-decoration: none;
color: #fff;
transition: all 0.5s ease;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
font-weight: 500;
}
.btn:hover{
background: rgba(255, 0, 79, 0.3);
border: 1px solid rgba(255, 0, 79, 0.5);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 0, 79, 0.4);
}
/*---------------contact---------------*/
#contact{
padding: 40px 0;
}
.contact-left{
flex-basis: 35%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 25px;
padding: 40px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.contact-right{
flex-basis: 60%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 25px;
padding: 40px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.contact-left p{
margin-top: 30px;
background: rgba(255, 255, 255, 0.05);
padding: 15px 20px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.contact-left p:hover{
background: rgba(255, 255, 255, 0.08);
transform: translateX(5px);
}
.contact-left p i{
color: #ff004f;
margin-right: 15px;
font-size: 25px;
filter: drop-shadow(0 0 10px rgba(255, 0, 79, 0.5));
}
.social-icons{
margin-top: 30px;
display: flex;
gap: 15px;
}
.social-icons a{
text-decoration: none;
font-size: 30px;
color: #ababab;
display: inline-block;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.social-icons a:hover{
color: #ff004f;
transform: translateY(-5px) scale(1.1);
background: rgba(255, 0, 79, 0.2);
border: 1px solid rgba(255, 0, 79, 0.3);
box-shadow: 0 10px 30px rgba(255, 0, 79, 0.4);
}
.btn.btn2{
display: inline-block;
background: rgba(255, 0, 79, 0.3);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 0, 79, 0.5);
box-shadow: 0 8px 32px rgba(255, 0, 79, 0.3);
}
.btn.btn2:hover{
background: rgba(255, 0, 79, 0.5);
box-shadow: 0 12px 40px rgba(255, 0, 79, 0.5);
}
.contact-right form{
width: 100%;
}
form input, form textarea{
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.1);
outline: none;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 15px;
margin: 15px 0;
color: #fff;
font-size: 18px;
border-radius: 12px;
transition: all 0.3s ease;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}
form input:focus, form textarea:focus{
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 0, 79, 0.3);
box-shadow: 0 0 20px rgba(255, 0, 79, 0.2);
}
form input::placeholder, form textarea::placeholder{
color: rgba(255, 255, 255, 0.5);
}
form .btn2{
padding: 14px 60px;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
font-weight: 500;
}
.copyright{
width: 100%;
text-align: center;
padding: 25px 0;
font-weight: 300;
margin-top: 40px;
}
.copyright i{
color: #ff004f;
}
/* Floating Scroll to Top Button */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
text-decoration: none;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
transition: all 0.3s ease;
z-index: 1000;
}
.scroll-to-top:hover {
background: rgba(255, 0, 79, 0.2);
border-color: rgba(255, 0, 79, 0.5);
box-shadow: 0 8px 32px 0 rgba(255, 0, 79, 0.3);
}
.scroll-to-top i {
transition: transform 0.3s ease;
}
.scroll-to-top:hover i {
transform: translateY(-3px);
}
/*Impresum und Datenschutzerklärung Popup*/
/* --- Popup (Impressum/Datenschutz) --- */
.imprint-link {
color: #fff;
text-decoration: underline;
transition: color 0.3s;
}
.imprint-link:hover {
color: #ff004f;
}
.popup-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9); /* Dunkle Abdeckung */
display: flex;
justify-content: center;
align-items: center;
opacity: 0; /* Standardmässig unsichtbar */
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 9999;
}
/* Wird aktiv, wenn der Hash-Tag in der URL gesetzt ist (z.B. #popup-imprint) */
.popup-modal:target {
opacity: 1;
pointer-events: auto;
}
.popup-content {
background: #111111; /* Dunkler Hintergrund, damit es sich abhebt */
color: #fff;
padding: 30px;
border-radius: 15px;
position: relative;
max-width: 90%;
max-height: 90vh;
overflow-y: auto; /* Scrollbar, falls Text zu lang */
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.popup-content h2 {
margin-bottom: 20px;
color: #ff004f;
}
.popup-content h3 {
margin-top: 15px;
margin-bottom: 5px;
}
.popup-content p {
font-size: 14px;
line-height: 1.5;
}
.close-btn {
position: absolute;
top: 15px;
right: 25px;
color: #fff;
text-decoration: none;
font-size: 30px;
font-weight: bold;
line-height: 20px;
transition: color 0.3s;
}
.close-btn:hover {
color: #ff004f;
}
/* Mobile Anpassung: Reduziert Padding für kleinere Bildschirme */
@media (max-width: 850px) {
.popup-content {
padding: 20px;
max-width: 95%;
}
}
/*---------------CSS für Handys / Tablets---------------*/
nav .fas{
display: none;
}
/* Name jede sekunde Geschrieben Animation */
.type-name::after{
content: '|';
margin-left: 2px;
animation: blink 0.9s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* <--- breakpoints ---> */
@media (max-width: 850px){
/* Header & Typografie */
#header{ background-image: url(img/phone-portrait.png); }
.header-top{ flex-direction: row; justify-content: space-between; align-items: center; }
.logo-text{ font-size: 22px; padding: 10px 22px; }
.header-text{ margin-top: 65%; }
.header-text h1{ font-size: 35px; padding: 10px 25px; }
.header-text .job-title{ font-size: 16px; padding: 7px 16px; }
.header-text .location{ font-size: 20px; padding: 7px 16px; }
.sub-title{ font-size: 35px; }
/* KORREKTUR: Allgemeine Symmetrie und festeres Padding */
.container {
padding: 10px 20px; /* Fester Abstand für Symmetrie */
}
/* KORREKTUR: Zentrierung für Titel, Tabs und Buttons */
.sub-title {
display: table; /* Zentriert den Titel selbst */
margin-left: auto;
margin-right: auto;
}
.tab-titles {
margin-left: auto; /* Zentriert die Tab-Buttons (Skills, Erfahrungen, Ausbildung) */
margin-right: auto;
}
.btn {
margin-left: auto; /* Zentriert den "Mehr Anzeigen" Button */
margin-right: auto;
}
.social-icons {
justify-content: center; /* Zentriert die Social Media Icons */
}
/* KORREKTUR: "Über mich" Spalten und Text (für Symmetrie) */
.about-col-1, .about-col-2{ flex-basis: 100%; }
.about-col-1{ margin-bottom: 30px; }
.about-col-1 img{ width: 100%; }
.about-col-2 > p {
text-align: center; /* Zentriert den Haupt-Über-mich-Text */
}
.tab-contents ul {
grid-template-columns: 1fr; /* Stapelt die Skills untereinander */
gap: 15px;
}
.tab-links{ font-size: 14px; margin-right: 0; }
.tab-titles{ flex-wrap: wrap; gap: 10px; }
/* KORREKTUR: Layout Stacks */
.services-list{ grid-template-columns: 1fr; grid-gap: 20px; }
.services-list div{ padding: 25px; }
.work-list{ grid-template-columns: 1fr; grid-gap: 30px; }
.contact-left, .contact-right{ flex-basis: 100%; margin-bottom: 20px; }
.contact-left{ padding: 20px; }
.copyright{ font-size: 14px; }
.scroll-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; font-size: 18px; }
/* Navigation Container: kein doppelter Rand im Mobile */
nav{ background: transparent; border: 0; box-shadow: none; padding: 0; }
/* Burger Button */
nav .fas{
display: flex; align-items: center; gap: 12px; color: #fff; cursor: pointer; z-index: 1001;
background: rgba(255,255,255,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.2); border-radius: 30px; padding: 11px 27px;
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37); font-family: 'Poppins', sans-serif; font-weight: 500;
font-size: 0;
}
nav .fas::before{
content: ""; display: inline-block; width: 22px; height: 14px; margin-right: 12px;
background:
linear-gradient(currentColor, currentColor) 0 0/100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 6px/100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 12px/100% 2px no-repeat;
}
nav .fas::after{ content: "Menu"; font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: 500; }
/* Menü (wenn Burger Button gedrückt wird) */
nav ul{
position: fixed; top: 80px; right: -520px; z-index: 1000; opacity: 0; pointer-events: none;
background: rgba(20, 20, 20, 0.85); /* <-- Dunkel und stabil */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 25px; box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
padding: 10px 20px; display: flex; flex-direction: row; align-items: center; gap: 20px;
transition: right 0.5s ease, opacity 0.3s ease;
}
nav ul.open{ right: -41px; opacity: 1; pointer-events: auto; }
nav ul li{ display: inline-block !important; margin: 0; list-style: none; }
nav ul li a{ font-size: 18px; color: #fff; text-decoration: none; transition: color 0.5s; }
nav ul li a:hover{ color: #ff004f; }
/* KORREKTUR: Projekte-Höhe (weniger hoch) */
.work {
aspect-ratio: 16 / 10;
}
/* 1. "Abschicken" Button im Kontaktformular */
.contact-right form .btn2 {
display: block;
margin-left: auto;
margin-right: auto;
}
/* 2. "Lebenslauf PDF" Button (in der linken Spalte) */
.contact-left a.btn2 {
display: block;
width: fit-content;
margin-left: auto; /* Zentriert den Button horizontal */
margin-right: auto;
margin-top: 40px; /* Optional: Fügt etwas Abstand nach oben hinzu */
}
/* KORREKTUR: "Über mich" Tabs (Horizontal auf Mobilgeräten) */
.tab-links{
font-size: 14px;
margin-right: 0;
padding: 10px 15px; /* GEÄNDERT: Kleineres Links/Rechts-Padding */
}
.tab-titles{
flex-wrap: nowrap; /* GEÄNDERT: Verhindert den Zeilenumbruch */
gap: 5px; /* GEÄNDERT: Kleinerer Abstand zwischen den Tabs */
margin-left: auto;
margin-right: auto;
}
}
scripts.js¶
// About me / Tab-Steuerung:
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname) {
for(let tablink of tablinks){ // Verwende 'let' statt 'var' für bessere Block-Scope
tablink.classList.remove("active-link");
}
for(let tabcontent of tabcontents){ // Verwende 'let' statt 'var'
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
// Sidemenu / Burger-Menü-Steuerung:
var sidemenu = document.getElementById("sidemenu");
function openmenu(){
// Schaltet die CSS-Klasse 'open' um (hinzu/weg)
sidemenu.classList.toggle("open");
}
function closemenu(){
// Entfernt die CSS-Klasse 'open' (schliesst das Menü)
sidemenu.classList.remove("open");
}
// --- Tipp-Effekt ('ich bin Lars') Funktionen ---
// Helper: Tippt Text in ein Element
function typeText(el, text, speed, cb){
if(!el) { if(cb) cb(); return; }
el.textContent = "";
let i = 0;
const timer = setInterval(() => {
el.textContent += text.charAt(i++);
if(i >= text.length){
clearInterval(timer);
if(cb) cb();
}
}, speed);
}
// Schleife für den Tipp-Effekt
function loopTypeSequence(prefixEl, nameEl, speed, pause){
const run = () => {
if(prefixEl) prefixEl.textContent = "";
if(nameEl) nameEl.textContent = "";
typeText(prefixEl, 'ich bin ', speed, () => {
typeText(nameEl, 'Lars', speed, () => {
setTimeout(run, pause);
});
});
};
run();
}
// Startet den Tipp-Effekt, sobald die Seite geladen ist
document.addEventListener('DOMContentLoaded', function(){
var prefixEl = document.getElementById('type-prefix');
var nameEl = document.getElementById('type-name');
if(nameEl && !nameEl.dataset.typing){
nameEl.dataset.typing = '1';
loopTypeSequence(prefixEl, nameEl, 120, 2000); // Tippt "ich bin " dann "Lars", Schleife
}
});