initial commit
This commit is contained in:
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Background</title>
|
||||
<meta name="description" content="Animated Triplet Element Background, Colors: Dark Gray, Red">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div id="background-dark">
|
||||
<div class="bg bg-element-dark-1"></div>
|
||||
<div class="bg bg-element-dark-2"></div>
|
||||
<div class="bg bg-element-dark-3"></div>
|
||||
</div>
|
||||
<style>
|
||||
#background-dark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 120vw;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(rgba(0,0,0), rgba(50,50,50));
|
||||
display: block;
|
||||
z-index: -10000;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 200vw;
|
||||
height: 100vh;
|
||||
left: -50%;
|
||||
transform-origin: bottom center;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.bg-element-dark-1 {
|
||||
background-image: linear-gradient(rgba(150,0,0), rgba(150,100,0,0.3));
|
||||
animation-name: moveUpDown1;
|
||||
z-index: -10;
|
||||
animation-duration: 3.1s;
|
||||
}
|
||||
.bg-element-dark-2 {
|
||||
background-image: linear-gradient(rgba(100,0,0), rgba(150,100,0,0.3));
|
||||
animation-name: moveUpDown2;
|
||||
z-index: -20;
|
||||
animation-duration: 3.3s;
|
||||
}
|
||||
.bg-element-dark-3 {
|
||||
background-image: linear-gradient(rgba(50,0,0), rgba(150,100,0,0.3));
|
||||
animation-name: moveUpDown3;
|
||||
z-index: -30;
|
||||
animation-duration: 3.0s;
|
||||
}
|
||||
@keyframes moveUpDown1 {
|
||||
0%, 100% {
|
||||
transform: translateY(65vh) rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(75vh) rotate(10deg);
|
||||
}
|
||||
}
|
||||
@keyframes moveUpDown2 {
|
||||
0%, 100% {
|
||||
transform: translateY(55vh) rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(70vh) rotate(10deg);
|
||||
}
|
||||
}
|
||||
@keyframes moveUpDown3 {
|
||||
0%, 100% {
|
||||
transform: translateY(40vh) rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(55vh) rotate(10deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+18
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/footer.css">
|
||||
</head>
|
||||
<body>
|
||||
<footer>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoLeft">
|
||||
<nav>
|
||||
<a href="/projects/demos/portfolio-v1/lang/de/pages/legal/impress.php">Impressum</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/de/pages/legal/sources.php">Quellenangaben (WIP)</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/de/pages/legal/faq.php">FAQ (WIP)</a>
|
||||
<p class="copyright">© 2024 Andreas Reimann</p>
|
||||
</nav>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoRight">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+18
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/footer.css">
|
||||
</head>
|
||||
<body>
|
||||
<footer>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoLeft">
|
||||
<nav>
|
||||
<a href="/projects/demos/portfolio-v1/lang/en/pages/legal/impress.php">Impress</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/en/pages/legal/sources.php">Sources (WIP)</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/en/pages/legal/faq.php">FAQ (WIP)</a>
|
||||
<p class="copyright">© 2024 Andreas Reimann</p>
|
||||
</nav>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoRight">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+52
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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=Metal+Mania&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/main.css">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/header.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="navbutton_mobile" onclick="toggleMenu()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<p class="seperator1">|</p>
|
||||
<nav id="desktop_nav">
|
||||
<ul id="desktop_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de">Startseite</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/cv.php">Lebenslauf</a></li>
|
||||
<li><a href="#" target="_blank">Projekte (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/links.php">Linksammlung</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="mobile_nav">
|
||||
<ul id="mobile_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de">Startseite</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/cv.php">Lebenslauf</a></li>
|
||||
<li><a href="#" target="_blank">Projekte (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/links.php">Linksammlung</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<img class="logofile" src="/projects/demos/portfolio-v1/assets/img/logofiles/complete_logo.png" alt="Dieses Bild kann nicht angezeigt werden">
|
||||
<p class="seperator2">|</p>
|
||||
<div class="sidebarsocialicons">
|
||||
<a href="https://youtube.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/youtube.png"></a>
|
||||
<a href="https://tiktok.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/tiktok.png"></a>
|
||||
<a href="https://t.me/lupinexmedia" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/telegram.png"></a>
|
||||
<a href="https://open.spotify.com/playlist/4UisGb0W9zBTLvcvkR9W2B?si=7b2cf2683f734388" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/spotify.png"></a>
|
||||
</div>
|
||||
<p class="seperator3">|</p>
|
||||
<img id="lang" src="/projects/demos/portfolio-v1/assets/img/flags/de.png">
|
||||
</header>
|
||||
|
||||
<script src="/projects/demos/portfolio-v1/assets/scripts/components/header.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+52
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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=Metal+Mania&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/main.css">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/header.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="navbutton_mobile" onclick="toggleMenu()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<p class="seperator1">|</p>
|
||||
<nav id="desktop_nav">
|
||||
<ul id="desktop_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en">Homepage</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/cv.php">Personal Resume</a></li>
|
||||
<li><a href="#" target="_blank">Projects (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/links.php">Linktree</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="mobile_nav">
|
||||
<ul id="mobile_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en">Homepage</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/cv.php">Personal Resume</a></li>
|
||||
<li><a href="#" target="_blank">Projects (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/links.php">Linktree</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<img class="logofile" src="/projects/demos/portfolio-v1/assets/img/logofiles/complete_logo.png" alt="Dieses Bild kann nicht angezeigt werden">
|
||||
<p class="seperator2">|</p>
|
||||
<div class="sidebarsocialicons">
|
||||
<a href="https://youtube.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/youtube.png"></a>
|
||||
<a href="https://tiktok.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/tiktok.png"></a>
|
||||
<a href="https://t.me/lupinexmedia" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/telegram.png"></a>
|
||||
<a href="https://open.spotify.com/playlist/4UisGb0W9zBTLvcvkR9W2B?si=7b2cf2683f734388" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/spotify.png"></a>
|
||||
</div>
|
||||
<p class="seperator3">|</p>
|
||||
<img id="lang" src="/projects/demos/portfolio-v1/assets/img/flags/en.png" alt="Language Switch">
|
||||
</header>
|
||||
|
||||
<script src="/projects/demos/portfolio-v1/assets/scripts/components/header.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 749 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 965 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Executable
BIN
Binary file not shown.
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Executable
+51
@@ -0,0 +1,51 @@
|
||||
//Context-Menü deaktivieren
|
||||
//Deactivate Context-Menu
|
||||
document.addEventListener('contextmenu', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
const langbutton = document.getElementById("lang");
|
||||
//langbutton.addEventListener("click", function() {
|
||||
// window.location.href = "/lang/en/";
|
||||
//})
|
||||
|
||||
function toggleMenu() {
|
||||
const navButtonMobile = document.getElementById("navbutton_mobile");
|
||||
const navMobile = document.getElementById("mobile_nav");
|
||||
|
||||
navMobile.classList.toggle('open'); // Menü umschalten
|
||||
navButtonMobile.classList.toggle('openButton'); // Button-Animation umschalten
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
const navButtonMobile = document.getElementById("navbutton_mobile");
|
||||
const navMobile = document.getElementById("mobile_nav");
|
||||
|
||||
// Prüfen, ob das Ziel des Klicks nicht das Menü oder der Button ist
|
||||
if (!navMobile.contains(event.target) && !navButtonMobile.contains(event.target)) {
|
||||
navMobile.classList.remove('open'); // Menü schließen
|
||||
navButtonMobile.classList.remove('openButton'); // Button zurücksetzen
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var langLink = document.getElementById("lang");
|
||||
|
||||
// Eventlistener für das Klicken auf das Bild
|
||||
langLink.addEventListener("click", function(event) {
|
||||
event.preventDefault(); // Verhindert das Standardverhalten des Links
|
||||
|
||||
// Die aktuelle URL abrufen
|
||||
var currentUrl = window.location.href;
|
||||
|
||||
// Wenn die URL "/de/" enthält, ersetze es durch "/en/"
|
||||
if (currentUrl.includes("/de/")) {
|
||||
var newUrl = currentUrl.replace("/de/", "/en/");
|
||||
window.location.href = newUrl;
|
||||
}
|
||||
// Wenn die URL "/en/" enthält, ersetze es durch "/de/" (optional, falls du einen Umschalter möchtest)
|
||||
else if (currentUrl.includes("/en/")) {
|
||||
var newUrl = currentUrl.replace("/en/", "/de/");
|
||||
window.location.href = newUrl; // Neue URL aufrufen
|
||||
}
|
||||
});
|
||||
});
|
||||
Executable
+19
@@ -0,0 +1,19 @@
|
||||
//Context-Menü deaktivieren
|
||||
//Deactivate Context-Menu
|
||||
document.addEventListener('contextmenu', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
function langRedirect() {
|
||||
var systemsprache = navigator.language || navigator.userLanguage;
|
||||
var sprache;
|
||||
|
||||
if (systemsprache.startsWith('de')) {
|
||||
sprache = 'de';
|
||||
} else {
|
||||
sprache = 'en';
|
||||
}
|
||||
window.location.href = 'lang/' + sprache;
|
||||
}
|
||||
|
||||
langRedirect()
|
||||
Executable
+133
@@ -0,0 +1,133 @@
|
||||
const animatedText = document.querySelector('.main1_animatedText');
|
||||
|
||||
const texts = [
|
||||
"angehender Webentwickler (Frontend)",
|
||||
"Video Editor und Content Creator",
|
||||
"LIVE Streamer",
|
||||
"angehender Filmemacher",
|
||||
"Musiker und Produzent",
|
||||
"angehender Podcaster",
|
||||
"gelernter Elektroniker"
|
||||
];
|
||||
|
||||
let currentIndex = 0;
|
||||
let currentText = '';
|
||||
let isDeleting = false;
|
||||
let speed = 60;
|
||||
let delay = 1000;
|
||||
|
||||
function type() {
|
||||
const fullText = texts[currentIndex];
|
||||
|
||||
// Schreib- oder Löschprozess
|
||||
if (isDeleting) {
|
||||
currentText = fullText.substring(0, currentText.length - 1); // Löschen
|
||||
} else {
|
||||
currentText = fullText.substring(0, currentText.length + 1); // Schreiben
|
||||
}
|
||||
|
||||
// Text mit Cursor anzeigen
|
||||
animatedText.textContent = '> ' + currentText + '_';
|
||||
|
||||
// Überprüfe, ob der vollständige Text geschrieben wurde
|
||||
if (!isDeleting && currentText === fullText) {
|
||||
// Warte, bevor das Löschen beginnt
|
||||
setTimeout(() => {
|
||||
isDeleting = true;
|
||||
type(); // Fortsetzen nach dem Delay
|
||||
}, delay);
|
||||
return;
|
||||
}
|
||||
|
||||
// Überprüfe, ob der vollständige Text gelöscht wurde
|
||||
if (isDeleting && currentText === '') {
|
||||
// Starte den nächsten Text, wenn der aktuelle gelöscht ist
|
||||
isDeleting = false;
|
||||
currentIndex = (currentIndex + 1) % texts.length; // Nächster Text
|
||||
}
|
||||
|
||||
// Bestimme die Geschwindigkeit je nachdem, ob gelöscht oder geschrieben wird
|
||||
const typingSpeed = isDeleting ? speed / 2 : speed;
|
||||
setTimeout(type, typingSpeed); // Timer für das Schreiben/Löschen
|
||||
}
|
||||
|
||||
// Animation automatisch beim Laden der Seite starten
|
||||
document.addEventListener('DOMContentLoaded', type);
|
||||
|
||||
|
||||
|
||||
function smoothScrollTo(targetId) {
|
||||
const target = document.getElementById(targetId);
|
||||
if (!target) return;
|
||||
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - 100; // 100px vom oberen Bildschirmrand abziehen
|
||||
const startPosition = window.pageYOffset;
|
||||
const distance = targetPosition - startPosition;
|
||||
const duration = 1000; // Dauer der Animation in Millisekunden
|
||||
let startTime = null;
|
||||
|
||||
function animation(currentTime) {
|
||||
if (startTime === null) startTime = currentTime;
|
||||
const timeElapsed = currentTime - startTime;
|
||||
const progress = Math.min(timeElapsed / duration, 1); // Normalisierung des Fortschritts
|
||||
|
||||
// Quadratische Ease-In-Out-Kurve
|
||||
const ease = progress < 0.5
|
||||
? 2 * progress * progress
|
||||
: -1 + (4 - 2 * progress) * progress;
|
||||
|
||||
window.scrollTo(0, startPosition + distance * ease);
|
||||
|
||||
if (timeElapsed < duration) {
|
||||
requestAnimationFrame(animation); // Animation fortsetzen
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animation); // Animation starten
|
||||
}
|
||||
|
||||
function navigateToPage(page) {
|
||||
window.location.href = page; // Wechselt zur angegebenen Datei
|
||||
}
|
||||
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: "Ein kleines Browser-Minigame - Light Logic Game",
|
||||
description: "Hier habe ich versucht ein kleines Browsergame zu programmieren, bei dem es darauf ankommt sein Geschick zu beweisen. (Durch einige Änderungen an den Dateipfaden kann es zu Fehlern kommen. Diese werden in Zukunft noch behoben)",
|
||||
link: "#", // Link zum Projekt
|
||||
image: "#" // Bild des Projekts
|
||||
},
|
||||
{
|
||||
title: "Aktiver YouTube Kanal",
|
||||
description: "Ich würde dies als Projekt mit aufnehmen, da ich hier meine Videoschnitt Skills aufbessere und mit neuen Funktionen versuche meine Fähigkeiten im Schnitt zu verbessern.",
|
||||
link: "#",
|
||||
image: "#"
|
||||
},
|
||||
// Weitere Projekte können hier hinzugefügt werden
|
||||
];
|
||||
|
||||
// Funktion zum Rendern der Projekte
|
||||
function renderProjects() {
|
||||
const container = document.getElementById('projects-container');
|
||||
container.innerHTML = ''; // Vorherige Inhalte löschen
|
||||
|
||||
projects.forEach(project => {
|
||||
const projectDiv = document.createElement('div');
|
||||
projectDiv.classList.add('project');
|
||||
|
||||
projectDiv.innerHTML = `
|
||||
<div class="project-content">
|
||||
<img src="${project.image}" alt="${project.title}" class="project-image">
|
||||
<div class="project-text">
|
||||
<h3>${project.title}</h3>
|
||||
<p>${project.description}</p>
|
||||
<a href="${project.link}" target="_blank">Mehr erfahren</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(projectDiv);
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', renderProjects);
|
||||
Executable
+133
@@ -0,0 +1,133 @@
|
||||
const animatedText = document.querySelector('.main1_animatedText');
|
||||
|
||||
const texts = [
|
||||
"Aspiring Web Developer (Frontend)",
|
||||
"Video Editor and Content Creator",
|
||||
"LIVE Streamer",
|
||||
"Aspiring Filmmaker",
|
||||
"Musician and Producer",
|
||||
"Aspiring Podcaster",
|
||||
"Trained Electronics Technician"
|
||||
];
|
||||
|
||||
let currentIndex = 0;
|
||||
let currentText = '';
|
||||
let isDeleting = false;
|
||||
let speed = 60;
|
||||
let delay = 1000;
|
||||
|
||||
function type() {
|
||||
const fullText = texts[currentIndex];
|
||||
|
||||
// Schreib- oder Löschprozess
|
||||
if (isDeleting) {
|
||||
currentText = fullText.substring(0, currentText.length - 1); // Löschen
|
||||
} else {
|
||||
currentText = fullText.substring(0, currentText.length + 1); // Schreiben
|
||||
}
|
||||
|
||||
// Text mit Cursor anzeigen
|
||||
animatedText.textContent = '> ' + currentText + '_';
|
||||
|
||||
// Überprüfe, ob der vollständige Text geschrieben wurde
|
||||
if (!isDeleting && currentText === fullText) {
|
||||
// Warte, bevor das Löschen beginnt
|
||||
setTimeout(() => {
|
||||
isDeleting = true;
|
||||
type(); // Fortsetzen nach dem Delay
|
||||
}, delay);
|
||||
return;
|
||||
}
|
||||
|
||||
// Überprüfe, ob der vollständige Text gelöscht wurde
|
||||
if (isDeleting && currentText === '') {
|
||||
// Starte den nächsten Text, wenn der aktuelle gelöscht ist
|
||||
isDeleting = false;
|
||||
currentIndex = (currentIndex + 1) % texts.length; // Nächster Text
|
||||
}
|
||||
|
||||
// Bestimme die Geschwindigkeit je nachdem, ob gelöscht oder geschrieben wird
|
||||
const typingSpeed = isDeleting ? speed / 2 : speed;
|
||||
setTimeout(type, typingSpeed); // Timer für das Schreiben/Löschen
|
||||
}
|
||||
|
||||
// Animation automatisch beim Laden der Seite starten
|
||||
document.addEventListener('DOMContentLoaded', type);
|
||||
|
||||
|
||||
|
||||
function smoothScrollTo(targetId) {
|
||||
const target = document.getElementById(targetId);
|
||||
if (!target) return;
|
||||
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - 100; // 100px vom oberen Bildschirmrand abziehen
|
||||
const startPosition = window.pageYOffset;
|
||||
const distance = targetPosition - startPosition;
|
||||
const duration = 1000; // Dauer der Animation in Millisekunden
|
||||
let startTime = null;
|
||||
|
||||
function animation(currentTime) {
|
||||
if (startTime === null) startTime = currentTime;
|
||||
const timeElapsed = currentTime - startTime;
|
||||
const progress = Math.min(timeElapsed / duration, 1); // Normalisierung des Fortschritts
|
||||
|
||||
// Quadratische Ease-In-Out-Kurve
|
||||
const ease = progress < 0.5
|
||||
? 2 * progress * progress
|
||||
: -1 + (4 - 2 * progress) * progress;
|
||||
|
||||
window.scrollTo(0, startPosition + distance * ease);
|
||||
|
||||
if (timeElapsed < duration) {
|
||||
requestAnimationFrame(animation); // Animation fortsetzen
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animation); // Animation starten
|
||||
}
|
||||
|
||||
function navigateToPage(page) {
|
||||
window.location.href = page; // Wechselt zur angegebenen Datei
|
||||
}
|
||||
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: "Small Browser-Minigame - Light Logic Game",
|
||||
description: "I've been working on a small browser game where the goal is to test your skills. (Due to some changes in the file paths, there may be errors. These will be fixed in the future.)",
|
||||
link: "#", // Link zum Projekt
|
||||
image: "#" // Bild des Projekts
|
||||
},
|
||||
{
|
||||
title: "Active YouTube Kanal",
|
||||
description: "I’m including this as a project because it allows me to enhance my video editing skills. I’m using this opportunity to explore new features and improve my editing techniques.",
|
||||
link: "#",
|
||||
image: "#"
|
||||
},
|
||||
// Weitere Projekte können hier hinzugefügt werden
|
||||
];
|
||||
|
||||
// Funktion zum Rendern der Projekte
|
||||
function renderProjects() {
|
||||
const container = document.getElementById('projects-container');
|
||||
container.innerHTML = ''; // Vorherige Inhalte löschen
|
||||
|
||||
projects.forEach(project => {
|
||||
const projectDiv = document.createElement('div');
|
||||
projectDiv.classList.add('project');
|
||||
|
||||
projectDiv.innerHTML = `
|
||||
<div class="project-content">
|
||||
<img src="${project.image}" alt="${project.title}" class="project-image">
|
||||
<div class="project-text">
|
||||
<h3>${project.title}</h3>
|
||||
<p>${project.description}</p>
|
||||
<a href="${project.link}" target="_blank">Mehr erfahren</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(projectDiv);
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', renderProjects);
|
||||
Executable
+115
@@ -0,0 +1,115 @@
|
||||
/* Footer-Container */
|
||||
footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 0px;
|
||||
top: 125px;
|
||||
background-color: rgba(25,25,25,0.8);
|
||||
color: white;
|
||||
position: relative;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
box-shadow: 0 0 50px white;
|
||||
border-radius: 25px 25px 0 0;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* Logos */
|
||||
.footerLogoLeft, .footerLogoRight {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 25px;
|
||||
object-fit: contain;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* Vertikale Trennlinien */
|
||||
.footerLogoLeft::after, .footerLogoRight::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 95px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.footerLogoLeft::after {
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.footerLogoRight::before {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
/* Navigation im Footer */
|
||||
footer nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
footer nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
footer nav a:hover {
|
||||
color: rgba(200,0,0,0.7);
|
||||
scale: 1.1;
|
||||
}
|
||||
footer nav a:active {
|
||||
color: rgba(150,0,0,0.8);
|
||||
scale: 0.9;
|
||||
}
|
||||
|
||||
/* Copyright-Text */
|
||||
footer .copyright {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
color: rgba(125,125,125,0.7);
|
||||
}
|
||||
|
||||
/* Mobile Ansicht */
|
||||
@media (max-width: 768px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footerLogoLeft, .footerLogoRight {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.footerLogoRight {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer nav {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Executable
+438
@@ -0,0 +1,438 @@
|
||||
header {
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
background-color: rgba(0, 0, 0, .9);
|
||||
position: fixed;
|
||||
border-bottom: solid 1px rgba(200, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
box-shadow: 0 0 50px white;
|
||||
}
|
||||
@keyframes shadow {
|
||||
0% {
|
||||
box-shadow: 5px 0 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 5px 5px 100px rgba(255, 255, 255);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 5px 5px 50px rgba(255, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
#lang{
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
color: white;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
right: 15px;
|
||||
border-radius: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
#lang:hover{
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
cursor: pointer;
|
||||
scale: 1.1;
|
||||
rotate: 5deg;
|
||||
}
|
||||
#lang:active{
|
||||
background-color: rgba(100,0,0,0.5);
|
||||
scale: 0.9;
|
||||
}
|
||||
|
||||
|
||||
.logofile {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 25px;
|
||||
transform: translate(0,-50%);
|
||||
-webkit-user-drag: none;
|
||||
width: 250px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.seperator1 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
left: 300px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
z-index: 2;
|
||||
}
|
||||
.seperator2 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 70px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.seperator3 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 300px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.sidebarsocialicons {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 280px;
|
||||
right: 60px;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
height: 75px;
|
||||
padding-bottom: 0px;
|
||||
-webkit-user-drag: none;
|
||||
text-align: center;
|
||||
filter: invert(1);
|
||||
}
|
||||
.sidebarsocialicons a {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 2px;
|
||||
margin-left: 1px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img:hover {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 1px;
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%) rotate(-15deg);
|
||||
}
|
||||
#desktop_nav {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 48%;
|
||||
height: 45px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(25, 25, 25, 0.5);
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#desktop_nav_main {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#desktop_nav li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#desktop_nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 90%;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
padding: 10px 10px;
|
||||
border-radius: 20px;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
#desktop_nav a:hover {
|
||||
background-color: darkred; /* Hover-Effekt für die Links */
|
||||
}
|
||||
#mobile_nav {display: none;}
|
||||
#navbutton_mobile {display: none;}
|
||||
|
||||
|
||||
@media screen and (max-width: 849px) {
|
||||
.logofile {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 60%;
|
||||
}
|
||||
#navbutton_mobile {
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transition: transform 1s;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#navbutton_mobile span {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
height: 1.5px;
|
||||
width: 20px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(1) {
|
||||
margin-top: -5px;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(3) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#navbutton_mobile:hover {
|
||||
background-color: rgba(200,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
#navbutton_mobile:active {
|
||||
background-color: rgba(150,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
.seperator1, .seperator2, .seperator3, .sidebarsocialicons, #desktop_nav {display: none;}
|
||||
|
||||
#mobile_nav {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 230px;
|
||||
left: -220px;
|
||||
top: 75px;
|
||||
transform: translate(0, 0);
|
||||
background-color: rgba(25, 25, 25, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
border-bottom-right-radius: 25px;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
#mobile_nav.open {
|
||||
left: 0;
|
||||
}
|
||||
#mobile_nav_main {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#mobile_nav li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#mobile_nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 90%;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
padding: 10px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#mobile_nav a:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 850px) and (max-width: 1249px) {
|
||||
.logofile {
|
||||
left: 75px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 35%;
|
||||
}
|
||||
#navbutton_mobile {
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transition: transform 1s;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#navbutton_mobile span {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
height: 1.5px;
|
||||
width: 20px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(1) {
|
||||
margin-top: -5px;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
#navbutton_mobile span:nth-child(3) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#navbutton_mobile:hover {
|
||||
background-color: rgba(200,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
#navbutton_mobile:active {
|
||||
background-color: rgba(150,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
.seperator2 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 70px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.seperator3 {
|
||||
position: absolute;
|
||||
font-size: 45px;
|
||||
color: white;
|
||||
right: 280px;
|
||||
top: 50%;
|
||||
transform: translate(0,-140%);
|
||||
}
|
||||
.sidebarsocialicons {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 280px;
|
||||
right: 50px;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
height: 75px;
|
||||
padding-bottom: 0px;
|
||||
-webkit-user-drag: none;
|
||||
text-align: center;
|
||||
filter: invert(1);
|
||||
}
|
||||
.sidebarsocialicons a {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 2px;
|
||||
margin-left: 1px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.sidebarsocialicons img:hover {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 1px;
|
||||
left: 2px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%) rotate(-15deg);
|
||||
}
|
||||
.seperator1, #desktop_nav {display: none;}
|
||||
|
||||
#mobile_nav {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 230px;
|
||||
left: -220px;
|
||||
top: 75px;
|
||||
transform: translate(0, 0);
|
||||
background-color: rgba(25, 25, 25, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
border-bottom-right-radius: 25px;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
#mobile_nav.open {
|
||||
left: 0;
|
||||
}
|
||||
#mobile_nav_main {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#mobile_nav li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#mobile_nav a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 90%;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
padding: 10px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#mobile_nav a:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
}
|
||||
|
||||
#navbutton_mobile.openButton span:nth-child(1) {
|
||||
transform: translate(-50%, -50%) rotateZ(45deg);
|
||||
margin: 0;
|
||||
}
|
||||
#navbutton_mobile.openButton span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
#navbutton_mobile.openButton span:nth-child(3) {
|
||||
transform: translate(-50%, -50%) rotateZ(-45deg);
|
||||
margin: 0;
|
||||
}
|
||||
Executable
+36
@@ -0,0 +1,36 @@
|
||||
body {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
main {
|
||||
position: relative;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
background: rgba(100,100,100,0.2);
|
||||
left: 50%;
|
||||
top: 100px;
|
||||
transform: translate(-50%);
|
||||
border-radius: 25px;
|
||||
padding-bottom: 50px;
|
||||
padding-top: 0px;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
Executable
+29
@@ -0,0 +1,29 @@
|
||||
.about-me {
|
||||
position: relative;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 85%;
|
||||
max-width: 980px;
|
||||
height: auto;
|
||||
border-radius: 25px;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
margin-bottom: 20px;
|
||||
transform: translate(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Dunklerer Hintergrund für besseren Kontrast */
|
||||
padding: 25px;
|
||||
color: white; /* Schriftfarbe weiß */
|
||||
line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
|
||||
font-size: 16px; /* Schriftgröße für bessere Lesbarkeit */
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
text-align: justify;
|
||||
}
|
||||
img {
|
||||
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
Executable
+394
@@ -0,0 +1,394 @@
|
||||
section {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 1050px;
|
||||
height: auto;
|
||||
padding-bottom: 0px;
|
||||
border-radius: 25px;
|
||||
top: 50px;
|
||||
margin-bottom: 50px;
|
||||
left: 50%;
|
||||
background-color: rgba(120,120,120,0.3);
|
||||
transform: translate(-50%);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(25px);
|
||||
}
|
||||
|
||||
/* Sektion 1 */
|
||||
.main1_Banner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
filter: blur(15px);
|
||||
transition: transform 1s, filter 1s;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.main1_Banner:hover {
|
||||
transform: translate(-50%,-50%) scale(1.1);
|
||||
filter: blur(0);
|
||||
}
|
||||
.main1_Selfie {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
border-radius: 50%;
|
||||
margin: 25px;
|
||||
border: solid 2.5px red;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
box-shadow: 0 0 50px orange;
|
||||
opacity: 0.8;
|
||||
filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
transition: filter 1s;
|
||||
}
|
||||
.main1_Hey {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 25%;
|
||||
top: 50%;
|
||||
left: 35%;
|
||||
transform: translate(0,-50%);
|
||||
color: white;
|
||||
font-size: clamp(15px, 3vw, 35px);
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
}
|
||||
.main1_Name {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 25%;
|
||||
top: 50%;
|
||||
left: 60%;
|
||||
transform: translate(0,-50%);
|
||||
color: white;
|
||||
font-size: clamp(25px, 5vw, 120px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
}
|
||||
.main1_animatedTextContainer {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -75px);
|
||||
padding-left: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
.main1_animatedText {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
color: #48ff48e1; /* Typisches Grün für die Commandline */
|
||||
font-size: clamp(15px, 3vw, 30px);
|
||||
white-space: nowrap; /* Text bleibt in einer Zeile */
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
border-right: 2px solid #00FF00; /* Cursor simuliert */
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@keyframes blink {
|
||||
0% { border-right-color: #00FF00; }
|
||||
50% { border-right-color: transparent; }
|
||||
100% { border-right-color: #00FF00; }
|
||||
}
|
||||
.main1_animatedText {
|
||||
animation: blink 0.8s steps(1) infinite; /* Cursor blinkt */
|
||||
}
|
||||
|
||||
/* Header Titles */
|
||||
.main2_Header, .main4_Header, .main5_Header, .main6_Header {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
color: white;
|
||||
font-size: clamp(25px, 4vw, 100px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
padding-bottom: 10px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
border-bottom: solid 1px red;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Sektion 2 - Übersicht */
|
||||
#main2 {
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
.main2_menuContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
max-width: 980px;
|
||||
height: 250px;
|
||||
border-radius: 25px 25px 0 0;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
margin-bottom: 20px;
|
||||
transform: translate(-50%);
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(80,80,80,0.7) rgba(0,0,0,0.3);
|
||||
}
|
||||
.main2_MenuPoint {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s;
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
height: 180px;
|
||||
background-color: rgba(150,150,150,0.3);
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
color: white;
|
||||
cursor: grab;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main2_MenuPoint:hover {
|
||||
transform: scale(1.03) rotate(-3deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.main2_MenuPoint:active {
|
||||
transform: scale(0.97) rotate(-6deg);
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar-track {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(80,80,80,0.7); /* Farbe des Scrollbar-Daumens */
|
||||
border-radius: 10px;
|
||||
border: 2px solid transparent; /* Platz für Padding */
|
||||
background-clip: padding-box; /* Clip für Padding */
|
||||
}
|
||||
.main2_menuContainer::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(50,50,50,0.9); /* Hover-Effekt für den Scroll-Daumen */
|
||||
}
|
||||
.main2_menuPointImage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.main2_menuPointText {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Sektion 3 - Über Mich */
|
||||
#main3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.main3_Header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: white;
|
||||
font-size: clamp(25px, 4vw, 100px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
border-bottom: solid 1px red;
|
||||
}
|
||||
.main3_AboutMe {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 25px;
|
||||
border-radius: 25px;
|
||||
width: 85%;
|
||||
margin: 20px 0;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
.main3_Selfie {
|
||||
width: 30%;
|
||||
filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.main3_Text {
|
||||
flex: 1;
|
||||
height: auto;
|
||||
max-height: 300px;
|
||||
padding: 0px 15px;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
text-align: justify;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: gray transparent;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar-thumb {
|
||||
background: gray;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.main3_Text::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Sektion 4 - Fähigkeiten */
|
||||
.skills-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 35px auto;
|
||||
width: 85%;
|
||||
padding: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
.skill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
.skill-icon {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.skill-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.skill-info span {
|
||||
color: white;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
}
|
||||
.progress-bar-container {
|
||||
background-color: #ccc;
|
||||
border-radius: 5px;
|
||||
height: 15px;
|
||||
padding: 5px;
|
||||
width: 98%;
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: #4caf50;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
/* Sektion 5 - Aktuelle Projekte*/
|
||||
.projects-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 35px auto;
|
||||
width: 85%;
|
||||
padding: 25px;
|
||||
padding-bottom: 35px;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.project {
|
||||
display: flex;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 25px 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
width: 90%;
|
||||
text-align: left; /* Text linksbündig */
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(150,150,150,0.3);
|
||||
}
|
||||
.project-text h3 {
|
||||
font-size: clamp(15px, 3vw, 25px);
|
||||
font-family: 'Metal Mania';
|
||||
}
|
||||
.project-text p {
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
}
|
||||
.project-text a {
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
text-decoration: none;
|
||||
color: red;
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
}
|
||||
.project-content {
|
||||
display: flex; /* Flexbox für Bild und Text */
|
||||
align-items: center; /* Zentriere die Elemente vertikal */
|
||||
}
|
||||
.project-image {
|
||||
width: 100px; /* Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
max-width: 100%; /* Maximale Breite beibehalten */
|
||||
border-radius: 5px;
|
||||
margin-right: 15px; /* Abstand zwischen Bild und Text */
|
||||
}
|
||||
.project-text {
|
||||
flex: 1; /* Text nimmt den restlichen Platz ein */
|
||||
}
|
||||
|
||||
/* Sektion 6 - Kontakt */
|
||||
.main6_Container {
|
||||
margin: 35px auto;
|
||||
width: 85%;
|
||||
padding: 25px;
|
||||
border-radius: 25px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.main6_Form {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 25px;
|
||||
filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
-webkit-filter: brightness(100%) contrast(150%) grayscale(25%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
Executable
+35
@@ -0,0 +1,35 @@
|
||||
.impressum {
|
||||
position: relative;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
max-width: 980px;
|
||||
height: auto;
|
||||
border-radius: 25px;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
margin-bottom: 20px;
|
||||
transform: translate(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Dunklerer Hintergrund für besseren Kontrast */
|
||||
padding: 20px;
|
||||
color: white; /* Schriftfarbe weiß */
|
||||
line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
|
||||
font-size: 16px; /* Schriftgröße für bessere Lesbarkeit */
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
}
|
||||
|
||||
/* Für Links im Impressum */
|
||||
.impressum a {
|
||||
color: #00aaff; /* Farbige Links, die sich abheben */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.impressum a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Für Überschriften im Impressum */
|
||||
.impressum h1, .impressum strong {
|
||||
color: #ffffff; /* Weiße Schrift für Überschriften und wichtige Punkte */
|
||||
font-weight: bold;
|
||||
}
|
||||
Executable
+69
@@ -0,0 +1,69 @@
|
||||
.linktree {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.treeText {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
color: white;
|
||||
font-size: clamp(25px, 4vw, 100px);
|
||||
font-family: 'Metal Mania';
|
||||
text-shadow: 2px 2px 4px red;
|
||||
padding-bottom: 10px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
border-bottom: solid 1px red;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.links-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 50px;
|
||||
gap: 30px; /* Abstand zwischen den Links */
|
||||
}
|
||||
.link {
|
||||
background-color: rgba(100,100,100,0.5);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 25px 25px 10px 10px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
font-family: 'Nanum Gothic Coding';
|
||||
}
|
||||
.link:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.banner {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.link {
|
||||
width: calc(33.33% - 20px); /* 3 Links nebeneinander */
|
||||
}
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.link {
|
||||
width: calc(50% - 20px); /* 2 Links nebeneinander */
|
||||
}
|
||||
}
|
||||
@media (max-width: 399px) {
|
||||
.link {
|
||||
width: 100%; /* 1 Link pro Zeile */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user