initial commit
This commit is contained in:
Executable
+55
@@ -0,0 +1,55 @@
|
||||
<div class="error-container">
|
||||
<h1>404</h1>
|
||||
<h2 data-lang="errorTextOne"></h2>
|
||||
<p data-lang="errorTextTwo"></p>
|
||||
<p data-lang="errorTextThree"></p>
|
||||
<a data-lang="errorButton" onclick="loadPage('home')"></a>
|
||||
</div>
|
||||
<style>
|
||||
.error-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
}
|
||||
.error-container h1 {
|
||||
font-size: 120px;
|
||||
margin: 0;
|
||||
color: var(--alert-color);
|
||||
}
|
||||
.error-container h2 {
|
||||
font-size: 24px;
|
||||
margin: 10px 0;
|
||||
color: var(--info-color);
|
||||
}
|
||||
.error-container p {
|
||||
font-size: 16px;
|
||||
color: var(--primary-text-color);
|
||||
max-width: 600px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.error-container a {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
color: var(--secondary-color);
|
||||
text-decoration: none;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
top: 350px;
|
||||
padding: 12px 24px;
|
||||
border: 2px solid #1E90FF;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.error-container a:hover {
|
||||
background-color: #1E90FF;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.error-container .lang {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
<div class="cookie">
|
||||
<h1 data-lang="cookie-heading" class="merriweather"></h1>
|
||||
<p data-lang="cookie-intro" class="anonymous-pro-regular"></p>
|
||||
<ul data-lang="cookie-info" class="anonymous-pro-regular"></ul>
|
||||
<p data-lang="cookie-acceptance" class="anonymous-pro-regular"></p>
|
||||
</div>
|
||||
Executable
+39
@@ -0,0 +1,39 @@
|
||||
<div class="dataProtection">
|
||||
<h1 data-lang="dataProtectionHeader" class="merriweather"></h1>
|
||||
<p data-lang="dataProtectionParagraph1"></p>
|
||||
<p data-lang="dataProtectionParagraph2"></p>
|
||||
<p data-lang="dataProtectionParagraph3"></p>
|
||||
<p data-lang="dataProtectionParagraph4"></p>
|
||||
<p data-lang="dataProtectionParagraph5"></p>
|
||||
<div>
|
||||
<p><strong data-lang="dataProtectionHeader2"></strong></p>
|
||||
<p data-lang="dataProtectionParagraph6"></p>
|
||||
<p data-lang="dataProtectionParagraph7"></p>
|
||||
Andreas Reimann<br>Lagerlöfstr. 8, <br>Rostock<br>01520 648 2495<br>business@areimann.de
|
||||
</div>
|
||||
<div>
|
||||
<p><strong data-lang="dataProtectionHeader3"></strong></p>
|
||||
<p data-lang="dataProtectionParagraph8"></p>
|
||||
<ul data-lang="dataProtectionList1"></ul>
|
||||
<p data-lang="dataProtectionParagraph9"></p>
|
||||
<p><strong data-lang="dataProtectionParagraph10"></strong></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><strong data-lang="dataProtectionHeader4"></strong></p>
|
||||
<p data-lang="dataProtectionParagraph11"></p>
|
||||
<div data-lang="dataProtectionParagraph12"></div>
|
||||
<div data-lang="dataProtectionParagraph13"></div>
|
||||
<div data-lang="dataProtectionParagraph14"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div data-lang="dataProtectionParagraph15"></div>
|
||||
<div data-lang="dataProtectionParagraph16"></div>
|
||||
<div data-lang="dataProtectionParagraph17"></div>
|
||||
<div data-lang="dataProtectionParagraph18"></div>
|
||||
<div data-lang="dataProtectionParagraph19"></div>
|
||||
<div data-lang="dataProtectionParagraph20"></div>
|
||||
<div data-lang="dataProtectionParagraph21"></div>
|
||||
<div data-lang="dataProtectionParagraph22"></div>
|
||||
</div>
|
||||
<div data-lang="dataProtectionLink"></div>
|
||||
</div>
|
||||
Executable
+683
@@ -0,0 +1,683 @@
|
||||
<div class="homeBanner">
|
||||
<div class="bannerContent">
|
||||
<h1 data-lang="bannerWelcome" class="merriweather"></h1>
|
||||
<p data-lang="bannerInfo" class="chakra-petch-light"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeMainContent">
|
||||
<div class="leftSection slide-left">
|
||||
<p id="homeMotto" class="motto chakra-petch-semibold-italic"></p>
|
||||
<div class="aboutMe">
|
||||
<div class="sectionLeftAboutMe">
|
||||
<h1 data-lang="profileAboutMeHeader" class="merriweather"></h1>
|
||||
<p data-lang="homeAboutMeTextOne"></p>
|
||||
<button class="chakra-petch-light" data-lang="moreInfo" onclick="loadPage('profile')"></button>
|
||||
</div>
|
||||
<div class="sectionRightAboutMe">
|
||||
<img src="images/selfPicLookLeft.webp" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeDeviderLeft"></div>
|
||||
<div class="skillsCardContainer">
|
||||
<div class="skillsCardSlider" id="skillsSlider"></div>
|
||||
</div>
|
||||
<div class="homeDeviderLeft"></div>
|
||||
<div class="timeline">
|
||||
<h1 class="merriweather" data-lang="mileStones"></h1>
|
||||
<div class="timeline-container">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">2001</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesFirstMusic"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">2005</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesSchool"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">11.06.2014</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesFirstVideo"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">07.07.2014</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesFirstStream"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">2014</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesGraficsdesign"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">2015</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesSchoolOut"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">01.08.2016</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesApprenticeship"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">09.2016</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesMusicProduce"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">08.2018</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesWebdev"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">28.02.2020</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesApprenticeshipEnd"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">05.2022</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesDavinci"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">06.2023</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesWriting"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">02.10.2023</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesTeamGiftwolf"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">05.2024</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesWebsite"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-icon"></div>
|
||||
<div class="timeline-content">
|
||||
<span class="timeline-date chakra-petch-semibold">28.03.2025</span>
|
||||
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesPodcast"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightSection slide-right">
|
||||
<h1 data-lang="homeNewsHeader" class="merriweather"></h1>
|
||||
<div class="newsDevider"></div>
|
||||
<div class="newsTicker" id="newsTicker"></div>
|
||||
</div>
|
||||
<div class="homeDevider"></div>
|
||||
<div class="projectsContainer">
|
||||
<h1 data-lang="homeProjects" class="merriweather"></h1>
|
||||
<div class="projectCardContainer" id="projectCardContainer"></div>
|
||||
</div>
|
||||
<div class="homeDevider"></div>
|
||||
<span data-lang="moreFollows" class="moreFollows merriweather"></span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bannerContent h1,
|
||||
.rightSection h1,
|
||||
.projectsContainer h1 {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
text-align: left;
|
||||
line-height: 0.9;
|
||||
font-size: 2.3em;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: var(--secondary-color);
|
||||
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||
}
|
||||
.moreFollows {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.bannerContent h1 {
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
}
|
||||
.rightSection h1 {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.homeBanner::before {
|
||||
content: "";
|
||||
background: url('images/banners/homeBanner.webp') center/cover no-repeat;
|
||||
filter: blur(5px) brightness(0.6);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
animation: slideFromTop 1s ease-out forwards;
|
||||
}
|
||||
.homeBanner {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
height: auto;
|
||||
padding: 100px 0 100px 0;
|
||||
transform: translate(-50%);
|
||||
width: calc(100% + 100px);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
.bannerContent p {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
color: var(--button-text-color);
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.homeMainContent {
|
||||
position: relative;
|
||||
width: calc(100% + 100px);
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.leftSection {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
max-width: calc(75% - 25px);
|
||||
}
|
||||
.motto::before {
|
||||
content: "„"
|
||||
}
|
||||
.motto::after {
|
||||
content: "“"
|
||||
}
|
||||
.motto {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 50px;
|
||||
font-size: 2.5em;
|
||||
text-shadow:
|
||||
0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.aboutMe {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
left: 0;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
text-align: justify;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.sectionLeftAboutMe {
|
||||
position: relative;
|
||||
max-width: 60%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.skillsCardContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
flex-wrap: nowrap;
|
||||
color: var(--primary-text-color);
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
padding: 10px 75px;
|
||||
left: 0px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 50px;
|
||||
box-shadow:
|
||||
inset 0 6px 12px rgba(0, 0, 0, 0.4),
|
||||
inset 0 -6px 12px rgba(255, 255, 255, 0.05),
|
||||
inset 4px 0 8px rgba(0, 0, 0, 0.25),
|
||||
inset -4px 0 8px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.skillsCardSlider {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 35px;
|
||||
flex-wrap: nowrap;
|
||||
width: max-content;
|
||||
animation: scrollLeft 60s linear infinite;
|
||||
}
|
||||
.skillsCardContainer img {
|
||||
width: 100px;
|
||||
padding: 5px;
|
||||
justify-content: space-evenly;
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.sectionRightAboutMe {
|
||||
position: relative;
|
||||
max-width: 40%;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
}
|
||||
.sectionRightAboutMe img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
.aboutMe h1 {
|
||||
margin: 0 0 10px;
|
||||
line-height: 0.9;
|
||||
font-size: 2.3em;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: var(--secondary-color);
|
||||
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||
}
|
||||
.aboutMe p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.aboutMe button {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
border-radius: 25px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
margin: 0;
|
||||
background: var(--tertiary-color);
|
||||
color: var(--primary-text-color);
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aboutMe button:hover {
|
||||
transform: translate(-50%,-5px) scale(1.05);
|
||||
background: var(--hover-color);
|
||||
}
|
||||
.timeline {
|
||||
margin: 0;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.timeline h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Merriweather', serif;
|
||||
font-size: 2em;
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
color: var(--secondary-color);
|
||||
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||
}
|
||||
.timeline-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
gap: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 300px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
flex-grow: 1;
|
||||
max-width: 300px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.timeline-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: 12px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.timeline-item:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.timeline-item:hover::before {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
.timeline-item:hover .timeline-icon {
|
||||
background-color: var(--hover-color);
|
||||
}
|
||||
.timeline-item .timeline-icon {
|
||||
background-color: #3498db;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
.timeline-item .timeline-content {
|
||||
background-color: var(--card-bg);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border: solid 1px var(--border-color);
|
||||
z-index: 1;
|
||||
}
|
||||
.timeline-date {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
color: var(--tertiary-color);
|
||||
}
|
||||
.timeline-description {
|
||||
margin-top: 10px;
|
||||
font-size: 1em;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.timeline-item:nth-child(odd) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.timeline-item:nth-child(odd) .timeline-content {
|
||||
text-align: right;
|
||||
}
|
||||
.rightSection {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-width: 350px;
|
||||
max-width: calc(20% - 25px);
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.newsDevider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: solid 1px var(--border-color);
|
||||
}
|
||||
.newsTicker {
|
||||
position: relative;
|
||||
width: calc(100% - 50px);
|
||||
padding: 25px;
|
||||
height: auto;
|
||||
}
|
||||
.newsTicker iframe {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.newsTicker h2 {
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.newsTicker p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: justify;
|
||||
}
|
||||
.newsTicker a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: -15px;
|
||||
color: var(--link-color);
|
||||
}
|
||||
.newsTicker a:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
.projectsContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.projectCardContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
gap: 20px;
|
||||
}
|
||||
.projectCard {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
max-width: 325px;
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.projectCard .logoImage {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.projectCard img {
|
||||
position: relative;
|
||||
width: 35%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.projectCard h2 {
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
color: var(--card-header-text);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.projectCard p {
|
||||
max-height: 100px;
|
||||
text-overflow: ellipsis;
|
||||
text-align: justify;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: -webkit-box;
|
||||
white-space: normal;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.projectCard button {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
font-size: 1.2em;
|
||||
color: var(--link-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.projectCard button:hover {
|
||||
color: var(--link-hover-color);
|
||||
scale: 1.1;
|
||||
}
|
||||
.homeDeviderLeft {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 25px 0;
|
||||
}
|
||||
.homeDevider {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 25px 0;
|
||||
}
|
||||
@media screen and (max-width: 1500px) {
|
||||
.rightSection {
|
||||
display: none;
|
||||
}
|
||||
.leftSection {
|
||||
max-width: 95%;
|
||||
}
|
||||
.skillsCardContainer img {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1300px) {
|
||||
.motto {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
.motto {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.aboutMe {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
padding: 25px 10px;
|
||||
}
|
||||
.sectionRightAboutMe {
|
||||
display: none;
|
||||
}
|
||||
.sectionLeftAboutMe {
|
||||
max-width: 100%;
|
||||
top: 0px;
|
||||
}
|
||||
.sectionLeftAboutMe h1,
|
||||
.projectsContainer h1,
|
||||
.timeline h1 {
|
||||
text-align: center;
|
||||
}
|
||||
.sectionLeftAboutMe p {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 785px) {
|
||||
.bannerContent h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.bannerContent p {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.homeBanner {
|
||||
padding: 50px 0 50px 0;
|
||||
}
|
||||
.projectCard {
|
||||
max-width: 95%;
|
||||
}
|
||||
.skillsCardSlider {
|
||||
animation: scrollLeft 30s linear infinite;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
<div class="impress">
|
||||
<h1 data-lang="impressHeader" class="merriweather"></h1>
|
||||
<p data-lang="impressParagraph5"></p>
|
||||
<p data-lang="impressName"></p>
|
||||
<p data-lang="impressAddress"></p>
|
||||
<p><strong data-lang="impressRepresentativeTitle"></strong><br>
|
||||
<span data-lang="impressRepresentative"></span>
|
||||
</p>
|
||||
<p><strong data-lang="impressContactTitle"></strong><br>
|
||||
<span data-lang="impressPhone"></span><br>
|
||||
<a href="mailto:business@areimann.de" data-lang="impressEmailLink"></a>
|
||||
</p>
|
||||
<p><strong data-lang="impressLiabilityTitle"></strong></p>
|
||||
<p><strong data-lang="impressLiabilityContentTitle"></strong></p>
|
||||
<p data-lang="impressLiabilityContent"></p>
|
||||
<p><strong data-lang="impressLinkLiabilityTitle"></strong></p>
|
||||
<p data-lang="impressLinkLiabilityContent"></p>
|
||||
<p><strong data-lang="impressCopyrightTitle"></strong></p>
|
||||
<p data-lang="impressCopyrightContent"></p>
|
||||
<p><strong data-lang="impressPrivacyTitle"></strong></p>
|
||||
<p data-lang="impressPrivacyContent"></p>
|
||||
<p data-lang="impressGeneratorInfo"></p>
|
||||
</div>
|
||||
Executable
+180
@@ -0,0 +1,180 @@
|
||||
<div class="linkFilterMenu slide-top" onclick="toggleLinkFilterMenu()">
|
||||
<h2 class="chakra-petch-light">Filter</h2>
|
||||
<button class="resetButton chakra-petch-light" id="resetButton">Reset</button>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<div class="tagList" id="tagList"></div>
|
||||
</div>
|
||||
<div class="linkContainer fade-in" id="linkContainer"></div>
|
||||
|
||||
<style>
|
||||
.linkFilterMenu {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
max-height: 75px;
|
||||
overflow: hidden;
|
||||
background-color: var(--card-bg);
|
||||
margin-bottom: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.linkFilterMenu h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
text-align: left;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.linkFilterMenu .fa-arrow-down {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
top: 35px;
|
||||
right: 25px;
|
||||
animation: arrowJumper 2s linear infinite;
|
||||
cursor: pointer;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.linkFilterMenu .fa-arrow-down:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.linkFilterMenu:hover .fa-arrow-down {
|
||||
animation: none !important;
|
||||
}
|
||||
.linkFilterMenu .resetButton {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 89%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: var(--primary-text-color);
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.linkFilterMenu .resetButton:hover {
|
||||
background: var(--link-hover-color);
|
||||
transform: translateX(-50%) scale(1.02);
|
||||
}
|
||||
.linkFilterMenu .tagList {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
.linkFilterMenu .tagList button {
|
||||
flex-grow: 1;
|
||||
background: var(--link-color);
|
||||
color: white;
|
||||
margin: 5px;
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.linkFilterMenu .tagList button:hover {
|
||||
background: var(--link-hover-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.tagList button.active {
|
||||
background: var(--success-color);
|
||||
color: var(--primary-text-color);
|
||||
box-shadow: 0 3px 8px rgba(0, 255, 120, 0.3);
|
||||
}
|
||||
.linkContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: calc(100% + 20px);
|
||||
gap: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.linkCard {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
flex-basis: calc(100% / 6 - 20px);
|
||||
min-width: 15%;
|
||||
max-width: 100%;
|
||||
height: 175px;
|
||||
padding: 16px;
|
||||
margin: 12px;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.linkCard:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
background: var(--link-hover-color);
|
||||
box-shadow:
|
||||
inset 0 1px 5px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 3px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.linkCard .spanContainer {
|
||||
position: absolute;
|
||||
min-width: 100px;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: inherit;
|
||||
padding: 10px;
|
||||
}
|
||||
.linkCard span {
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.linkCard img {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.linkCard:hover img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
.linkContainer {
|
||||
width: calc(100% + 85px);
|
||||
}
|
||||
.linkCard {
|
||||
min-width: 25%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Executable
+444
@@ -0,0 +1,444 @@
|
||||
<section class="profileAboutMe">
|
||||
<div class="aboutMeText">
|
||||
<h2 data-lang="profileAboutMeHeader" class="profileHeaderHeader"></h2>
|
||||
<img src="images/selfPicLookRight.webp" alt="Andreas Reimann" style="float: left; margin-right: 20px; height: auto;" onclick="openModal('images/selfPicLookRight.webp')">
|
||||
<p data-lang="aboutName" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="aboutBirthday" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="aboutIntro1" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="aboutSkills1" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="aboutSkills2" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="aboutProjects" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="aboutOutro" class="anonymous-pro-regular"></p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="profileDevider"></div>
|
||||
<section class="profileCertificates">
|
||||
<h2 data-lang="profileCertificatesHeader" class="profileHeaderHeader"></h2>
|
||||
<div id="certificatesGallery" class="gallery"></div>
|
||||
</section>
|
||||
<div class="profileDevider"></div>
|
||||
<section class="profilePartnerships">
|
||||
<h2 data-lang="profilePartnershipsHeader" class="profileHeaderHeader"></h2>
|
||||
<div class="partnershipsContainer" id="partnersContainer"></div>
|
||||
</section>
|
||||
<div class="profileDevider"></div>
|
||||
<section class="profileGalery">
|
||||
<h2 data-lang="profileGaleryHeader" class="profileHeaderHeader"></h2>
|
||||
<div class="galleryContainer" id="galleryContainer"></div>
|
||||
</section>
|
||||
<div id="imageModal" class="modal">
|
||||
<span class="close" onclick="closeModal()">×</span>
|
||||
<img class="modal-content" id="modalImage">
|
||||
</div>
|
||||
<div class="profileDevider"></div>
|
||||
<section class="profileFAQ">
|
||||
<h2 data-lang="profileFAQHeader" class="profileHeaderHeader"></h2>
|
||||
<div class="faqContainer">
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion1" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer1"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion2" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer2"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion3" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer3"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion4" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer4"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion5" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer5"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion6" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer6"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion7" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer7"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion8" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer8"></p>
|
||||
</div>
|
||||
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||
<h3 data-lang="profileFAQQuestion9" class="chakra-petch-light"></h3>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="profileFAQAnswer9"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
.profileAboutMe,
|
||||
.profileCertificates,
|
||||
.profilePartnerships,
|
||||
.profileGalery,
|
||||
.profileFAQ {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
.profileHeaderHeader {
|
||||
font-size: 2.2em;
|
||||
color: var(--tertiary-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Merriweather", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
"wdth" 100;
|
||||
color: var(--tertiary-color);
|
||||
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.aboutMeText img {
|
||||
max-width: 280px;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
object-fit: cover;
|
||||
}
|
||||
.aboutMeText img:hover {
|
||||
transform: scale(1.03);
|
||||
box-shadow:
|
||||
inset 0 1px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -2px 6px rgba(0, 0, 0, 0.1),
|
||||
0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.aboutMeText {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.4;
|
||||
color: var(--primary-text-color);
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(4px);
|
||||
text-align: justify;
|
||||
font-family: "Anonymous Pro", monospace;
|
||||
}
|
||||
.aboutMeText p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.aboutMeText strong {
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 20px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
align-content: center;
|
||||
}
|
||||
.cert {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cert img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.cert img:hover {
|
||||
transform: scale(1.05);
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow:
|
||||
inset 0 1px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -5px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 15px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.partnershipsContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.partner {
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 2px 2px 5px var(--shadow-color), 2px 2px 5px var(--shadow-color), 2px 2px 5px var(--shadow-color) inset;
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
background-image: linear-gradient(to bottom, var(--background-color), var(--secondary-color));
|
||||
}
|
||||
.partner:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 12px 20px var(--shadow-color);
|
||||
border-color: #3a8dff;
|
||||
}
|
||||
.partner img {
|
||||
width: 90%;
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.partner a {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.partner-description {
|
||||
font-size: 14px;
|
||||
text-align: justify;
|
||||
color: var(--card-header-text);
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
line-height: 1.6;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.partner a:hover {
|
||||
color: #3a8dff;
|
||||
}
|
||||
.galleryContainer {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.galleryContainer img {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
object-fit: cover;
|
||||
border-radius: 15px;
|
||||
border: solid 2px var(--border-color);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.galleryContainer::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.galleryContainer img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-content {
|
||||
margin: auto;
|
||||
display: block;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 115px;
|
||||
right: 35px;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.faqContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.faqItem {
|
||||
position: relative;
|
||||
height: auto;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
max-height: 65px;
|
||||
overflow: hidden;
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.faqItem.expanded {
|
||||
max-height: 1000px;
|
||||
}
|
||||
.faqItem.expanded .fa-arrow-down {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.faqItem h3 {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 5px;
|
||||
margin-left: 25px;
|
||||
text-align: left;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.faqItem p {
|
||||
position: relative;
|
||||
text-align: justify;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 45px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
font-size: 1.4em;
|
||||
color: var(--primary-text-color);
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
}
|
||||
.faqItem .fa-arrow-down {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
animation: arrowJumper 2s linear infinite;
|
||||
cursor: pointer;
|
||||
}
|
||||
.faqItem .fa-arrow-down:hover {
|
||||
scale: 1.05;
|
||||
}
|
||||
.faqItem:hover .fa-arrow-down {
|
||||
animation: none !important;
|
||||
}
|
||||
.profileDevider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 25px 0;
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
.close {
|
||||
top: 160px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1099px) {
|
||||
.close {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 786px) {
|
||||
.profileAboutMe,
|
||||
.profileCertificates,
|
||||
.profilePartnerships,
|
||||
.profileGalery,
|
||||
.profileFAQ {
|
||||
width: 110%;
|
||||
}
|
||||
.profileHeaderHeader {
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
}
|
||||
.faqItem h3 {
|
||||
margin-left: 5px;
|
||||
font-size: 1.1em;
|
||||
width: 85%;
|
||||
}
|
||||
.faqItem p {
|
||||
font-size: 1em;
|
||||
}
|
||||
.aboutMeContainer {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.aboutMeImage {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.aboutMeText {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
.aboutMeText img {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.aboutMeText img:hover {
|
||||
transform: translate(-50%) scale(1.03);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Executable
+334
@@ -0,0 +1,334 @@
|
||||
<h2 class="projectsHeader slide-top merriweather" data-lang="projectsHeader"></h2>
|
||||
<div class="projectsFilterMenu slide-top" id="projectsFilterMenu" onclick="toggleProjectFilterMenu(event)">
|
||||
<h2 class="chakra-petch-light">Filter</h2>
|
||||
<i class='fa-solid fa-arrow-down'></i>
|
||||
<p data-lang="sortAfter"></p>
|
||||
<div id="sortSelect" class="dropdown">
|
||||
<button class="dropdown-option chakra-petch-light" data-sort="default" data-lang="sortSelect"></button>
|
||||
<button class="dropdown-option chakra-petch-light" data-sort="status" data-lang="sortbyStatus"></button>
|
||||
<button class="dropdown-option chakra-petch-light" data-sort="startdate" data-lang="sortbyStart"></button>
|
||||
<button class="dropdown-option chakra-petch-light" data-sort="lastupdate" data-lang="sortbyLatest"></button>
|
||||
<button class="dropdown-option chakra-petch-light" data-sort="planneddate" data-lang="sortbyPlanned"></button>
|
||||
<button class="dropdown-option chakra-petch-light" data-sort="enddate" data-lang="sortbyEnd"></button>
|
||||
</div>
|
||||
<div class="tagList" id="tagList"></div>
|
||||
</div>
|
||||
<div class="projectsContainer slide-left" id="projectsContainer"></div>
|
||||
<style>
|
||||
.projectsHeader {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0 0 10px;
|
||||
font-size: 2.3em;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--tertiary-color);
|
||||
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#projectsFilterMenu {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
max-height: 75px;
|
||||
overflow: hidden;
|
||||
background-color: var(--card-bg);
|
||||
margin-bottom: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
#projectsFilterMenu h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
text-align: left;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
#projectsFilterMenu .fa-arrow-down {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
top: 35px;
|
||||
right: 25px;
|
||||
animation: arrowJumper 2s linear infinite;
|
||||
cursor: pointer;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
#projectsFilterMenu .fa-arrow-down:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
#projectsFilterMenu:hover .fa-arrow-down {
|
||||
animation: none !important;
|
||||
}
|
||||
#projectsFilterMenu p {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
flex-grow: 1;
|
||||
}
|
||||
#projectsFilterMenu.open {
|
||||
max-height: 1000px;
|
||||
opacity: 1;
|
||||
}
|
||||
#sortSelect {
|
||||
position: relative;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
height: auto;
|
||||
width: 90%;
|
||||
margin-top: 50px;
|
||||
left: 50%;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.dropdown-option {
|
||||
position: relative;
|
||||
padding: 10px 35px;
|
||||
min-width: 16%;
|
||||
background-color: var(--background-color);
|
||||
color: var(--primary-text-color);
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
font-size: 15px;
|
||||
}
|
||||
.dropdown-option:hover {
|
||||
background-color: var(--hover-color);
|
||||
}
|
||||
.dropdown-option.active {
|
||||
background-color: var(--alert-color);
|
||||
}
|
||||
.dropdown-option::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0.5em;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.8em;
|
||||
transition: transform 0.2s ease;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.dropdown-option.active.asc::after {
|
||||
content: '▲';
|
||||
}
|
||||
.dropdown-option.active.desc::after {
|
||||
content: '▼';
|
||||
}
|
||||
#projectsFilterMenu .tagList {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
#projectsFilterMenu .tagList button {
|
||||
flex-grow: 1;
|
||||
background: var(--link-color);
|
||||
color: white;
|
||||
margin: 5px;
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
font-style: normal;
|
||||
}
|
||||
#projectsFilterMenu .tagList button:hover {
|
||||
background: var(--link-hover-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
#projectsFilterMenu .tagList button.active {
|
||||
background: var(--success-color);
|
||||
color: var(--primary-text-color);
|
||||
box-shadow: 0 3px 8px rgba(0, 255, 120, 0.3);
|
||||
}
|
||||
#projectsContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: 20px;
|
||||
}
|
||||
.projectCard {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 380px;
|
||||
width: 100vw;
|
||||
max-width: 580px;
|
||||
height: auto;
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.projectCard .logoImage {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.projectCard:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow:
|
||||
inset 0 1px 5px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 3px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.projectCard img {
|
||||
position: relative;
|
||||
width: 35%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.projectCard h2 {
|
||||
text-align: center;
|
||||
font-size: 1.7rem;
|
||||
color: var(--card-header-text);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.projectCard span {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
.projectCard p {
|
||||
text-align: justify;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
.projectCard a {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
top: 10px;
|
||||
border-radius: 25px;
|
||||
background: var(--tertiary-color);
|
||||
color: var(--primary-text-color);
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.projectCard a:hover {
|
||||
background: var(--hover-color);
|
||||
color: var(--primary-text-color);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%) scale(1.05);
|
||||
}
|
||||
.projectOpen {
|
||||
background-color: var(--alert-color);
|
||||
color: var(--alert-text);
|
||||
}
|
||||
.projectWIP {
|
||||
background-color: var(--info-color);
|
||||
color: var(--info-text);
|
||||
}
|
||||
.projectFrozen {
|
||||
background-color: var(--disabled-color);
|
||||
color: var(--disabled-text);
|
||||
}
|
||||
.projectDone {
|
||||
background-color: var(--success-color);
|
||||
color: var(--success-text);
|
||||
}
|
||||
.galleryOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 50px 0;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.galleryContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
justify-items: center;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
.galleryContainer img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 300px;
|
||||
border-radius: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.galleryContainer img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.closeGallery {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 2rem;
|
||||
background: none;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
}
|
||||
.galleryButton {
|
||||
position: absolute;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
font-size: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.galleryButton:hover {
|
||||
background-color: var(--hover-color);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
Executable
+291
@@ -0,0 +1,291 @@
|
||||
<section class="skillsIntro">
|
||||
<div class="textContainer slide-top">
|
||||
<h1 data-lang="skillsIntroHeader" class="merriweather"></h1>
|
||||
<p data-lang="skillsIntroTextOne" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="skillsIntroTextTwo" class="anonymous-pro-regular"></p>
|
||||
<p data-lang="skillsIntroTextThree" class="anonymous-pro-regular"></p>
|
||||
</div>
|
||||
<img src="images/selfPicLookLeft.webp" alt="" class="bounce">
|
||||
</section>
|
||||
<div class="skillDevider"></div>
|
||||
<section class="skillsTree slide-right">
|
||||
<div class="imgContainer">
|
||||
</div>
|
||||
</section>
|
||||
<div class="skillDevider"></div>
|
||||
<section class="skillsProcess">
|
||||
<h1 data-lang="skillsProcessHeader" class="merriweather"></h1>
|
||||
<div class="processMenuContainer" id="processMenuContainer">
|
||||
<button data-lang="allProcessesButton" class="resetButton anonymous-pro-regular" id="resetButton">Alle</button>
|
||||
</div>
|
||||
<div class="processCardContainer" id="processCardContainer"></div>
|
||||
</section>
|
||||
<style>
|
||||
.skillsIntro {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 25px;
|
||||
color: var(--primary-text-color);
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
gap: 50px;
|
||||
}
|
||||
.skillsIntro .textContainer {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 70%;
|
||||
background: var(--card-bg);
|
||||
padding: 25px;
|
||||
margin-right: 5%;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
text-align: justify;
|
||||
}
|
||||
.skillsIntro .textContainer h1, .skillsProcess h1 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 2.3em;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--tertiary-color);
|
||||
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.skillsIntro .textContainer p {
|
||||
font-size: 1.3em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.skillsIntro img {
|
||||
position: relative;
|
||||
max-width: 30%;
|
||||
padding: 12px;
|
||||
}
|
||||
.skillsTree {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
border-radius: 25px;
|
||||
color: var(--primary-text-color);
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.skillsTree .imgContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
}
|
||||
.skillsTree img {
|
||||
width: 90px;
|
||||
padding: 5px;
|
||||
transition: all 0.3s;
|
||||
justify-content: space-evenly;
|
||||
cursor: pointer;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.skillsTree img:hover {
|
||||
scale: 1.2;
|
||||
}
|
||||
.skillsProcess {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
padding: 25px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
border-radius: 25px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.processMenuContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.processMenuContainer button {
|
||||
background-color: var(--link-color);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
flex-grow: 1;
|
||||
font-size: 1.2em;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#resetButton {
|
||||
background: var(--alert-color);
|
||||
color: var(--primary-text-color);
|
||||
margin-right: 15px;
|
||||
}
|
||||
#resetButton:hover {
|
||||
background: var(--link-hover-color);
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
}
|
||||
.processMenuContainer button:hover {
|
||||
background-color: var(--link-hover-color);
|
||||
color: var(--primary-text-color);
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
}
|
||||
.processMenuContainer button.active {
|
||||
background-color: var(--success-color);
|
||||
color: var(--primary-text-color);
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
}
|
||||
.processCardContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
.processCard {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: var(--card-bg);
|
||||
color: var(--primary-text-color);
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
flex-basis: calc(100% / 6 - 20px);
|
||||
min-width: 25%;
|
||||
max-width: calc(100%);
|
||||
height: 75px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.processCard img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.processCard h2 {
|
||||
position: absolute;
|
||||
left: 110px;
|
||||
top: 5px;
|
||||
font-size: 1.2em;
|
||||
color: var(--primary-text-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.processCard span {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
bottom: 30px;
|
||||
color: var(--link-color);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.processCard:hover img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.mainBar {
|
||||
position: relative;
|
||||
top: 60px;
|
||||
left: 100px;
|
||||
background-color: var(--input-bg);
|
||||
width: calc(100% - 110px);
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: 1px 1px 2px var(--shadow-color), 2px 2px 2px var(--shadow-color), 2px 2px 5px var(--shadow-color) inset;
|
||||
}
|
||||
.mainBar div {
|
||||
background-color: var(--success-header);
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
transition: width 0.5s ease-in-out;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.skillDevider {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 25px 0;
|
||||
}
|
||||
@media (max-width: 1150px) {
|
||||
.skillsIntro {
|
||||
flex-direction: column-reverse;
|
||||
text-align: center;
|
||||
gap: 0;
|
||||
width: calc(100% + 75px);
|
||||
margin-top: -50px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
.skillsIntro .textContainer h1, .skillsProcess h1 {
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
}
|
||||
.skillsIntro .textContainer p {
|
||||
font-size: 1em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.skillsIntro .textContainer {
|
||||
max-width: 120%;
|
||||
margin-right: 0;
|
||||
text-align: justify;
|
||||
padding: 15px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.skillsIntro img {
|
||||
max-width: 90%;
|
||||
max-height: 300px;
|
||||
right: -25%;
|
||||
top: 12px;
|
||||
transform: none;
|
||||
}
|
||||
.skillsTree .imgContainer {
|
||||
width: calc(100% + 100px);
|
||||
gap: 15px;
|
||||
}
|
||||
.skillsProcess {
|
||||
width: calc(100% + 75px);
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
.skillDevider {
|
||||
width: calc(100% + 75px);
|
||||
}
|
||||
.processCard {
|
||||
flex-basis: calc(100% / 3 - 20px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 786px) {
|
||||
.processCard {
|
||||
flex-basis: calc(100% / 2 - 20px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Executable
+43
@@ -0,0 +1,43 @@
|
||||
<div class="sources">
|
||||
<h1 data-lang="sourcesHeader" class="merriweather"></h1>
|
||||
<div class="sourceItem">
|
||||
<h2>Font Awesome</h2>
|
||||
<p data-lang="fontAwesome" class="anonymous-pro-regular"></p>
|
||||
<a href="https://fontawesome.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
<div class="sourceItem">
|
||||
<h2>Google Fonts</h2>
|
||||
<p data-lang="googleFonts" class="anonymous-pro-regular"></p>
|
||||
<a href="https://fonts.google.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
<div class="sourceItem">
|
||||
<h2>Unsplash</h2>
|
||||
<p data-lang="unsplash" class="anonymous-pro-regular"></p>
|
||||
<a href="https://unsplash.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
<div class="sourceItem">
|
||||
<h2>Icons8</h2>
|
||||
<p data-lang="icons8" class="anonymous-pro-regular"></p>
|
||||
<a href="https://icons8.de/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
<div class="sourceItem">
|
||||
<h2>Flaticon</h2>
|
||||
<p data-lang="flaticon" class="anonymous-pro-regular"></p>
|
||||
<a href="https://www.flaticon.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
<div class="sourceItem">
|
||||
<h2>ChatGPT</h2>
|
||||
<p data-lang="chatgpt" class="anonymous-pro-regular"></p>
|
||||
<a href="https://chatgpt.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
<div class="sourceItem">
|
||||
<h2>LinkedIn</h2>
|
||||
<p data-lang="linkedin" class="anonymous-pro-regular"></p>
|
||||
<a href="https://linkedin.com" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
<div class="sourceItem">
|
||||
<h2>Programming Hub</h2>
|
||||
<p data-lang="programmingHub" class="anonymous-pro-regular"></p>
|
||||
<a href="https://programminghub.io/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 787 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 830 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 846 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Executable
+1
@@ -0,0 +1 @@
|
||||
<svg id="svg4187" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 89.4" width="2500" height="639"><style>.st0{fill:#000}.st1{fill:#ff5400}</style><g id="text4151"><path id="path4162" class="st0" d="M121.1 18.4h5V.3h-5v18.1z"/><path id="path4164" class="st0" d="M129.4 18.4h5V8.5l7.8 9.9h4.4V.3h-5v9.6L134.1.3h-4.7v18.1z"/><path id="path4166" class="st0" d="M156.9 18.7c4.4 0 7.3-2.2 7.3-5.9v-.1c0-3.4-2.6-4.7-6.7-5.6-2.5-.6-3.2-.9-3.2-1.8 0-.7.6-1.2 1.8-1.2 1.6 0 3.4.6 5.1 1.8l2.5-3.5c-2-1.6-4.4-2.4-7.5-2.4-4.4 0-7 2.4-7 5.8v.1c0 3.7 3 4.8 6.8 5.7 2.5.6 3.1 1 3.1 1.8v.1c0 .8-.7 1.2-2.1 1.2-2.1 0-4.1-.8-5.9-2.2l-2.8 3.3c2.3 1.9 5.3 2.9 8.6 2.9z"/><path id="path4168" class="st0" d="M170.6 18.4h5V4.7h5.4V.3h-15.9v4.4h5.4v13.7z"/><path id="path4170" class="st0" d="M179.5 18.4h5.3l1.3-3.3h7l1.3 3.3h5.4L192 .2h-4.8l-7.7 18.2zm8-7.1l2-5.1 2 5.1h-4z"/><path id="path4172" class="st0" d="M201.5 18.4h5V8.5l7.8 9.9h4.4V.3h-5v9.6L206.2.3h-4.7v18.1z"/><path id="path4174" class="st0" d="M226.2 18.4h5V4.7h5.4V.3h-15.9v4.4h5.4v13.7z"/></g><g id="text4155"><path id="path4149" class="st1" d="M33.5 89.4c11.3 0 20.3-4.1 26.8-9.6V52.1H32v12.5h12.1v7.5c-2.5 1.7-5.6 2.6-9.9 2.6-9.8 0-16.7-7.1-16.7-17.2v-.2c0-9.4 6.9-16.8 15.8-16.8 6.2 0 10.5 2.1 14.9 5.8l10-12.2c-6.5-5.6-14.2-8.9-25-8.9C14.1 25.2 0 39.3 0 57.3v.2c0 18.6 14.3 31.9 33.5 31.9z"/><path id="path4151" class="st1" d="M60.5 88.1h17.9L82.8 77h23.9l4.4 11.1h18.3L103.2 26H86.7L60.5 88.1zm27.3-24.4l7-17.5 6.9 17.5H87.8z"/><path id="path4153" class="st1" d="M130.9 88.1h16.7V52.8l15.7 24.1h.4l15.8-24.2v35.4h17V26.4h-18.1l-14.7 23.9L149 26.4h-18.1v61.7z"/><path id="path4155" class="st1" d="M203.2 88.1h17.1V26.4h-17.1v61.7z"/><path id="path4157" class="st1" d="M227 88.1h16.9V54.3l26.4 33.9h14.9V26.4h-16.9V59L243 26.4h-16v61.7z"/><path id="path4159" class="st1" d="M323.2 89.4c11.3 0 20.3-4.1 26.8-9.6V52.1h-28.3v12.5h12.1v7.5c-2.5 1.7-5.6 2.6-9.9 2.6-9.8 0-16.7-7.1-16.7-17.2v-.2c0-9.4 6.9-16.8 15.8-16.8 6.2 0 10.5 2.1 14.9 5.8l10-12.2c-6.5-5.6-14.2-8.9-25-8.9-19 0-33.1 14.1-33.1 32.1v.2c-.1 18.6 14.2 31.9 33.4 31.9z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 844 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1010 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Executable
+117
@@ -0,0 +1,117 @@
|
||||
// Function on links page
|
||||
async function getLinks(){try{let e=await fetch("db/links.json"),a=await e.json(),t=document.getElementById("linkContainer"),n=document.getElementById("tagList"),l={},r=a.links,s=null;function o(){r.sort((e,a)=>{let t=e.plattform.localeCompare(a.plattform);return 0!==t?t:e.username.localeCompare(a.username)}),c(r),s=null,i()}function c(e){t.innerHTML="";let a=[];e.forEach(e=>{let n=document.createElement("a");n.classList.add("linkCard"),n.href=e.url,n.target="_blank",n.innerHTML=`
|
||||
<img src="${e.icon}" alt="${e.plattform}">
|
||||
<div class="spanContainer">
|
||||
<span class="anonymous-pro-regular">${e.username}</span>
|
||||
<span class="anonymous-pro-regular">${e.plattform}</span>
|
||||
<span class="anonymous-pro-regular" data-lang="${e.thema||"Default Thema"}"></span>
|
||||
</div>
|
||||
`,t.appendChild(n),a.push(n),addHoverEffectToLinkCard(n,a),requestAnimationFrame(()=>initLanguage())})}function i(){let e=n.querySelectorAll("button");e.forEach(e=>{e.innerText.toLowerCase()===s?.toLowerCase()?e.classList.add("active"):e.classList.remove("active")})}a.links.forEach(e=>{e.tags.forEach(a=>{l[a]||(l[a]=[]),l[a].push(e)})}),Object.keys(l).sort().forEach(e=>{let a=document.createElement("button");a.innerText=e.charAt(0).toUpperCase()+e.slice(1),a.classList.add("chakra-petch-light"),a.onclick=()=>(function e(a){s=a;let t=l[a].slice().sort((e,a)=>{let t=e.plattform.localeCompare(a.plattform);return 0!==t?t:e.username.localeCompare(a.username)});c(t),i()})(e),n.appendChild(a)});let p=document.getElementById("resetButton");p.addEventListener("click",()=>{s=null,o(),i()}),o()}catch(u){console.error("Fehler beim Laden der Links:",u)}}
|
||||
// Function on skills page
|
||||
async function getSkillsTree(){try{let response=await fetch("db/skillsTree.json"),skills=await response.json(),imgContainer=document.querySelector(".imgContainer");imgContainer.innerHTML="",skills.forEach(skill=>{let imgElement=document.createElement("img");imgElement.src=skill.src,imgElement.alt=skill.alt,imgElement.title=skill.title,imgElement.onclick=()=>eval(skill.onclick),imgElement.onmouseover=()=>addHoverEffectToImages(imgElement),imgElement.onmouseleave=()=>removeHoverEffectFromImages(imgElement),imgContainer.appendChild(imgElement)})}catch(error){console.error("Error loading skills tree:",error)}}
|
||||
async function getProcess(){try{let e=await fetch("db/process.json"),t=await e.json(),a=document.getElementById("processCardContainer"),s=document.getElementById("processMenuContainer"),n={},r=t.processes,c=null;function o(){r.sort((e,t)=>parseInt(t.percentage)-parseInt(e.percentage)),l(r),c=null,i()}function l(e){a.innerHTML="";let t=[];e.forEach(e=>{let s=document.createElement("div");s.classList.add("processCard"),s.innerHTML=`
|
||||
<img src="${e.icon}" alt="${e.processName}">
|
||||
<h2 data-lang="${e.processName}" class="anonymous-pro-regular"></h2>
|
||||
<div class="mainBar">
|
||||
<div style="width: ${e.percentage}%;"></div>
|
||||
</div>
|
||||
<span class="anonymous-pro-regular">${e.percentage}%</span>
|
||||
`,a.appendChild(s),t.push(s),addHoverEffectToProcessCard(s,t),requestAnimationFrame(()=>initLanguage())})}function i(){let e=s.querySelectorAll("button");e.forEach(e=>{e.dataset.lang.toLowerCase()===c?.toLowerCase()?e.classList.add("active"):e.classList.remove("active")})}t.processes.forEach(e=>{e.tags.forEach(t=>{n[t]||(n[t]=[]),n[t].push(e)})}),Object.keys(n).sort().forEach(e=>{let t=document.createElement("button");t.classList.add("chakra-petch-light"),t.dataset.lang=`${e}`,t.onclick=()=>(function e(t){c=t;let a=n[t].slice().sort((e,t)=>parseInt(t.percentage)-parseInt(e.percentage));l(a),i()})(e),s.appendChild(t)});let d=document.getElementById("resetButton");d.addEventListener("click",()=>{c=null,o(),i()}),o()}catch(p){console.error("Fehler beim Laden der Links:",p)}}
|
||||
// Function on projects page
|
||||
async function getProjects() {
|
||||
try {
|
||||
const response=await fetch("db/projects.json"),data=await response.json(),projectsContainer=document.getElementById("projectsContainer"),projectsFilterMenu=document.getElementById("tagList"),sortSelect=document.getElementById("sortSelect");let allProjects=data.projects,currentSort="default",currentDirection="asc",currentTag=null;const tagGroups={};data.projects.forEach(t=>{t.tags.forEach(e=>{tagGroups[e]||(tagGroups[e]=[]),tagGroups[e].push(t)})});const showAllButton=document.createElement("button");showAllButton.dataset.lang="allProjectsButton",showAllButton.classList.add("tagButton","chakra-petch-light","active"),showAllButton.textContent="Show All",showAllButton.onclick=()=>{currentTag=null,updateActiveTag(null),sortByCriteria(currentSort,currentDirection)},projectsFilterMenu.appendChild(showAllButton),Object.keys(tagGroups).sort().forEach(t=>{let e=document.createElement("button");e.classList.add("tagButton","chakra-petch-light"),e.textContent=t,e.onclick=()=>{updateActiveTag(currentTag=currentTag===t?null:t),sortByCriteria(currentSort,currentDirection)},projectsFilterMenu.appendChild(e)});
|
||||
function sortByCriteria(e,t="asc"){currentSort=e,currentDirection=t;let a=currentTag?tagGroups[currentTag]:allProjects,s=document.querySelector(`#sortSelect .dropdown-option[data-sort="${e}"]`);s&&(document.querySelectorAll("#sortSelect .dropdown-option").forEach(e=>{e.classList.remove("active","asc","desc")}),s.classList.add("active",t)),a.sort((a,s)=>{let d,r;switch(e){case"startdate":d=new Date(a.startdate),r=new Date(s.startdate);break;case"enddate":d=new Date(a.enddate||0),r=new Date(s.enddate||0);break;case"lastupdate":d=new Date(a.lastupdate),r=new Date(s.lastupdate);break;case"planneddate":d=new Date(a.planneddate||0),r=new Date(s.planneddate||0);break;case"status":d=a.status,r=s.status;break;default:d=a.title.toLowerCase(),r=s.title.toLowerCase()}return d<r?"asc"===t?-1:1:d>r?"asc"===t?1:-1:0}),renderProjects(a)}
|
||||
function renderProjects(t){projectsContainer.innerHTML="",t.forEach(t=>{let a=document.createElement("div");if(a.classList.add("projectCard"),a.innerHTML=`
|
||||
<div class="logoImage">
|
||||
<img src="${t.logo}" alt="Not found">
|
||||
<h2 class="merriweather">${t.title}</h2><br>
|
||||
</div>
|
||||
<p><strong data-lang="projectDescription"></strong></p><p data-lang="${t.description}"></p><br>
|
||||
<span><p><strong>Status:</strong></p><p data-lang="${t.status}"></p></span><br>
|
||||
<p><strong data-lang="technologies"></strong></p><p>${t.technologies.join(", ")}</p><br>
|
||||
<span><p><strong data-lang="startDate"></strong></p><p> ${new Date(t.startdate).toLocaleDateString()}</p></span>
|
||||
<span><p><strong data-lang="upDate"></strong></p><p> ${new Date(t.lastupdate).toLocaleDateString()}</p></span>
|
||||
<span><p><strong data-lang="plannedDate"></strong></p><p>${t.planneddate?new Date(t.planneddate).toLocaleDateString():"TBA"}</p></span>
|
||||
<span><p><strong data-lang="endDate"></strong></p><p>${t.enddate?new Date(t.enddate).toLocaleDateString():"TBA"}</p></span>
|
||||
`,t.link){let e=document.createElement("a");e.href=t.link,e.setAttribute("data-lang","moreInfo"),e.target="_blank",a.appendChild(e),a.appendChild(document.createElement("br")),a.appendChild(document.createElement("br"))}if(Array.isArray(t.gallery)&&t.gallery.length>0){let n=document.createElement("button");n.textContent="\uD83D\uDCF7",n.classList.add("galleryButton"),n.onclick=()=>openGallery(t.gallery),a.appendChild(n)}"projectOpen"===t.status?a.classList.add("projectOpen"):"projectWIP"===t.status?a.classList.add("projectWIP"):"projectFrozen"===t.status?a.classList.add("projectFrozen"):"projectDone"===t.status&&a.classList.add("projectDone"),projectsContainer.appendChild(a)})}
|
||||
function updateActiveTag(t){let a=projectsFilterMenu.querySelectorAll("button");a.forEach(a=>{a.textContent===t?a.classList.add("active"):null===t&&"allProjectsButton"===a.dataset.lang?a.classList.add("active"):a.classList.remove("active")})}
|
||||
function openGallery(e){if(!Array.isArray(e)||0===e.length)return;let t=document.createElement("div");t.classList.add("galleryOverlay");let l=document.createElement("div");l.classList.add("galleryContainer"),e.forEach(e=>{let t=document.createElement("img");t.src=e,l.appendChild(t)});let a=document.createElement("button");a.textContent="\xd7",a.classList.add("closeGallery"),a.onclick=e=>{e.stopPropagation(),t.remove()},t.appendChild(a),t.appendChild(l),t.onclick=e=>{e.target===t&&t.remove()},document.body.appendChild(t)}document.querySelectorAll("#sortSelect .dropdown-option").forEach(e=>{e.addEventListener("click",()=>{let t=e.dataset.sort;currentSort===t?currentDirection="asc"===currentDirection?"desc":"asc":(currentSort=t,currentDirection="asc"),sortByCriteria(currentSort,currentDirection)})}),sortByCriteria(currentSort,currentDirection);
|
||||
}catch (error){console.error('Fehler beim Laden der Projekte:', error);}
|
||||
}
|
||||
// Functions on profile page
|
||||
async function loadCertificates(){try{let e=document.getElementById("certificatesGallery"),t=await fetch("get-certificates"),i=await t.json(),c="";i.forEach(e=>{c+=`
|
||||
<div class="cert">
|
||||
<img src="docs/certificates/${e}" alt="Zertifikat ${e}" title="${e}" class="cert-thumbnail" onclick="openModal('docs/certificates/${e}')">
|
||||
</div>
|
||||
`}),e.innerHTML=c}catch(a){console.error("Fehler beim Laden der Zertifikate:",a)}}
|
||||
async function getPartnerships(){try{let r=await fetch("db/partnerships.json"),a=await r.json(),n=document.getElementById("partnersContainer"),t="";a.forEach(r=>{t+=`
|
||||
<div class="partner">
|
||||
<a href="${r.url}" target="_blank">
|
||||
<img src="${r.logo}" alt="${r.name}" title="${r.name}">
|
||||
</a>
|
||||
<p class="partner-description anonymous-pro-regular" data-lang="${r.description}"></p>
|
||||
</div>
|
||||
`}),n.innerHTML=t}catch(e){console.error("Error loading partnerships:",e)}}
|
||||
async function loadGallery(){try{let a=document.getElementById("galleryContainer"),e=await fetch("get-images"),l=await e.json();console.log(l);let r="";l.forEach(a=>{r+=`<img src="images/gallery/${a}" alt="Gallery image ${a}" class="gallery-image" onclick="openModal('images/gallery/${a}')">`}),closeModal(),a.innerHTML=r}catch(g){console.error("Error loading images:",g)}}
|
||||
function openModal(e){let t=document.getElementById("imageModal"),l=document.getElementById("modalImage");t.style.display="flex",l.src=e}function closeModal(){let e=document.getElementById("imageModal");e?e.style.display="none":console.error("Modal not found")}window.onclick=function(e){let t=document.getElementById("imageModal");e.target===t&&closeModal()},document.addEventListener("contextmenu",e=>{"IMG"===e.target.tagName&&e.preventDefault()});
|
||||
// Functions on homepage
|
||||
async function getNewsTicker() {
|
||||
try {
|
||||
const response=await fetch("db/newsTicker.json"),data=await response.json(),newsTicker=document.getElementById("newsTicker");newsTicker.innerHTML="";
|
||||
|
||||
data.forEach(item => {
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('newsCard');
|
||||
|
||||
let mediaElement = '';
|
||||
|
||||
switch (item.type) {
|
||||
case 'audio':
|
||||
mediaElement = `<audio controls style="width: 100%;"><source src="${item.media}" type="audio/mpeg"></audio>`;
|
||||
break;
|
||||
case 'video':
|
||||
mediaElement = `<video controls style="width: 100%; max-height: 300px;"><source src="${item.media}" type="video/mp4"></video>`;
|
||||
break;
|
||||
case 'image':
|
||||
mediaElement = `<img src="${item.media}" alt="${item.title || ''}" style="width: 100%; border-radius: 8px;">`;
|
||||
break;
|
||||
case 'document':
|
||||
mediaElement = `<a href="${item.media}" target="_blank" class="anonymous-pro-regular" style="display:block;margin-top:10px;">📄 <span data-lang="${item.titleOne || 'document'}"></span></a>`;
|
||||
break;
|
||||
case 'link':
|
||||
mediaElement = `<a href="${item.media}" target="_blank" class="anonymous-pro-regular" style="display:block;margin-top:10px;"><span data-lang="${item.titleOne || 'document'}"></span></a>`;
|
||||
break;
|
||||
case 'external':
|
||||
mediaElement = `<iframe src="${item.media}" width="100%" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
|
||||
break;
|
||||
case 'podcast':
|
||||
mediaElement = `<iframe src="${item.media}" width="100%" height="150" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
|
||||
break;
|
||||
default:
|
||||
mediaElement = `<p style="color:red;">Unbekannter Medientyp: ${item.type}</p>`;
|
||||
}
|
||||
let titleElement=item.title?`<h2 class="anonymous-pro-regular" data-lang="${item.title}"></h2>`:"",descriptionElement=item.description?`<p class="anonymous-pro-regular" data-lang="${item.description}"></p>`:"",buttonElement=item.moreInfoLink?`<a href="${item.moreInfoLink}" target="_blank"><button class="moreInfoBtn anonymous-pro-regular" data-lang="moreInfo" style="margin-top:10px;"></button></a>`:"";
|
||||
card.innerHTML = `
|
||||
${titleElement}
|
||||
${descriptionElement}
|
||||
${mediaElement}
|
||||
${buttonElement}
|
||||
`;
|
||||
newsTicker.appendChild(card);
|
||||
});
|
||||
requestAnimationFrame(() => initLanguage());
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden des NewsTickers:', error);
|
||||
}
|
||||
}
|
||||
let allSkills=[];async function getHomeSkills(){try{let l=await fetch("db/skillsTree.json");if(allSkills=await l.json(),0===allSkills.length)return;createInfiniteSlider()}catch(e){console.error("Error loading skills tree:",e)}}function shuffleArray(l){return l.map(l=>({value:l,sort:Math.random()})).sort((l,e)=>l.sort-e.sort).map(({value:l})=>l)}function createInfiniteSlider(){let l=document.getElementById("skillsSlider"),e=shuffleArray(allSkills);e.forEach(e=>{let t=createSkillImage(e);l.appendChild(t)}),e.forEach(e=>{let t=createSkillImage(e);l.appendChild(t)})}function createSkillImage(skill){let img=document.createElement("img");return img.src=skill.src,img.alt=skill.alt||"",img.title=skill.title||"",img.onclick=()=>eval(skill.onclick),img}
|
||||
async function getHomeProjects(){try{let e=await fetch("db/projects.json"),t=await e.json();document.getElementById("projectCardContainer");let r=["projectDone","projectOpen","projectFrozen"],n=t.projects.filter(e=>!r.includes(e.status));n.sort((e,t)=>{let r=new Date(e.startdate),n=new Date(t.startdate);if(e.planneddate&&t.planneddate){let a=new Date(e.planneddate),o=new Date(t.planneddate);if(a<o)return -1;if(a>o)return 1}else{if(r<n)return -1;if(r>n)return 1}return 0}),n=n.slice(0,5),function e(t){let r=document.getElementById("projectCardContainer");r.innerHTML="",t.forEach(e=>{let t=document.createElement("div");t.classList.add("projectCard"),t.innerHTML=`
|
||||
<div class="logoImage">
|
||||
<img src="${e.logo}" alt="Not found">
|
||||
<h2 class="merriweather">${e.title}</h2><br>
|
||||
</div>
|
||||
<p><strong data-lang="projectDescription" class="anonymous-pro-regular"></strong></p><p data-lang="${e.description}" class="anonymous-pro-regular"></p><br>
|
||||
<button onclick="loadPage('projects')" data-lang="moreInfo" class="chakra-petch-light"></button>
|
||||
`,r.appendChild(t)})}(n)}catch(a){console.error("Fehler beim Laden der Projekte:",a)}}
|
||||
async function updateMottoMessage(){let e={de:["Solange nicht alles gut ist, liegt der Weg noch vor uns.","Jeder Tag ist eine neue Chance, etwas Gro\xdfartiges zu beginnen.","Wer aufh\xf6rt, besser zu werden, hat aufgeh\xf6rt, gut zu sein.","Visionen werden zur Realit\xe4t, wenn man den ersten Schritt wagt.","Zwischen Idee und Umsetzung liegt nur der Wille.","Dein Weg ist einzigartig – geh ihn mit \xdcberzeugung.","Gro\xdfe Dinge beginnen oft im Kleinen.","Kreativit\xe4t kennt keine Grenzen – nur Anf\xe4nge.","Komm rein und sprich dich aus, geh raus und rede nicht mehr dr\xfcber.","Gl\xfccklich ist, wer kein Gl\xfcck sucht.","Manchmal ist der Umweg der Weg.","Geduld ist nicht Schw\xe4che, sondern St\xe4rke mit Ausdauer.","Stillstand ist nur dann gef\xe4hrlich, wenn man ihn akzeptiert.","Es braucht keine Perfektion, um etwas Bedeutendes zu schaffen.","Mut beginnt dort, wo Zweifel laut werden.","Nicht jede T\xfcr f\xfchrt weiter – manche zeigen nur, wo du nicht hingeh\xf6rst.","Die besten Ideen kommen oft dann, wenn man nicht nach ihnen sucht.","Ver\xe4nderung beginnt mit einem ehrlichen Blick auf sich selbst.","Was du heute denkst, formt dein Morgen.","Tr\xe4ume gro\xdf – aber handle bodenst\xe4ndig."],en:["As long as not everything is good, the journey isn't over yet.","Every day is a new chance to start something great.","Those who stop getting better stop being good.","Visions become reality when you take the first step.","Between idea and execution lies only willpower.","Your path is unique – walk it with confidence.","Great things often start small.","Creativity knows no limits – only beginnings.","Come in and speak out, go out and stop talking about it.","Happy is he who does not seek happiness.","Sometimes the detour is the path.","Patience is not weakness, but strength with endurance.","Stagnation is only dangerous if you accept it.","You don't need perfection to create something meaningful.","Courage begins where doubt gets loud.","Not every door leads forward – some just show where you don't belong.","The best ideas often appear when you're not searching for them.","Change begins with an honest look at yourself.","What you think today shapes your tomorrow.","Dream big – but act grounded."]},n=getCookie("lang")||"en",t=e[n]||e.en,i=Math.floor(Math.random()*t.length);document.getElementById("homeMotto").innerText=t[i]}
|
||||
Executable
+165
@@ -0,0 +1,165 @@
|
||||
const mainContent = document.getElementById('content');
|
||||
let isNavOpen=!1,isSettingsOpen=!1;function openMobilMenu(e){switch(e){case"nav":isSettingsOpen&&(document.getElementById("mobileSettings").style.right="",isSettingsOpen=!1),isNavOpen?document.querySelector("#navigation .mainMenu").style.top="":document.querySelector("#navigation .mainMenu").style.top="0",isNavOpen=!isNavOpen;break;case"contact":loadPage("contact");break;case"home":loadPage("home");break;case"projects":loadPage("projects");break;case"settings":isNavOpen&&(document.querySelector("#navigation .mainMenu").style.top="",isNavOpen=!1),isSettingsOpen?document.getElementById("mobileSettings").style.right="":document.getElementById("mobileSettings").style.right="0",isSettingsOpen=!isSettingsOpen;break;default:console.log("Unbekanntes Men\xfc")}}
|
||||
let isDeskNavOpen=!1;function toggleDeskMenu(){isDeskNavOpen?(document.querySelector("#navigation .mainMenu").style.left="",document.querySelector("#navigation .navButton span:nth-child(1)").style.marginTop="",document.querySelector("#navigation .navButton span:nth-child(2)").style.opacity="",document.querySelector("#navigation .navButton span:nth-child(3)").style.marginTop="",document.querySelector("#navigation .navButton span:nth-child(1)").style.transform="",document.querySelector("#navigation .navButton span:nth-child(3)").style.transform=""):(document.querySelector("#navigation .mainMenu").style.left="0",document.querySelector("#navigation .navButton span:nth-child(1)").style.marginTop="0",document.querySelector("#navigation .navButton span:nth-child(2)").style.opacity="0",document.querySelector("#navigation .navButton span:nth-child(3)").style.marginTop="0",document.querySelector("#navigation .navButton span:nth-child(1)").style.transform="translate(-50%,-50%) rotate(-45deg)",document.querySelector("#navigation .navButton span:nth-child(3)").style.transform="translate(-50%,-50%) rotate(45deg)"),isDeskNavOpen=!isDeskNavOpen}
|
||||
let currentPage = '';
|
||||
function loadPage(page) {
|
||||
if (page === currentPage) {
|
||||
console.log(`Seite '${page}' ist bereits aktiv – kein erneuter Ladevorgang.`);
|
||||
return;
|
||||
}
|
||||
currentPage = page;
|
||||
|
||||
document.getElementById('loadingScreen').style.display = 'flex';
|
||||
|
||||
switch (page) {
|
||||
case 'home':
|
||||
loadHTML('content/home.html', mainContent, () => {
|
||||
checkMenus();
|
||||
getNewsTicker();
|
||||
getHomeSkills();
|
||||
updateMottoMessage();
|
||||
getHomeProjects();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'profile':
|
||||
loadHTML('content/profile.html', mainContent, () => {
|
||||
checkMenus();
|
||||
loadCertificates();
|
||||
getPartnerships();
|
||||
loadGallery();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'projects':
|
||||
loadHTML('content/projects.html', mainContent, () => {
|
||||
checkMenus();
|
||||
getProjects();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'skills':
|
||||
loadHTML('content/skills.html', mainContent, () => {
|
||||
checkMenus();
|
||||
getSkillsTree();
|
||||
getProcess();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'contact':
|
||||
loadHTML('content/links.html', mainContent, () => {
|
||||
checkMenus();
|
||||
getLinks();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'impress':
|
||||
loadHTML('content/impress.html', mainContent, () => {
|
||||
checkMenus();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'privacy':
|
||||
loadHTML('content/dataprotection.html', mainContent, () => {
|
||||
checkMenus();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'cookies':
|
||||
loadHTML('content/cookies.html', mainContent, () => {
|
||||
checkMenus();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
case 'sources':
|
||||
loadHTML('content/sources.html', mainContent, () => {
|
||||
checkMenus();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
default:
|
||||
loadHTML('content/404.html', mainContent, () => {
|
||||
checkMenus();
|
||||
scrollToTop();
|
||||
});
|
||||
break;
|
||||
}
|
||||
setTimeout(()=>{initLanguage()},2500);
|
||||
const validPages = ['home', 'profile', 'projects', 'skills', 'contact', 'impress', 'privacy', 'cookies', 'sources'];
|
||||
setTemporaryCookie("page",validPages.includes(page)?page:"404"),updateURLWithCookies();
|
||||
}
|
||||
function loadHTML(e,n,r){fetch(e).then(e=>{if(!e.ok)throw Error("Fehler beim Laden der HTML-Datei");return e.text()}).then(e=>{n.innerHTML=e,"function"==typeof r&&r()}).catch(e=>{console.error("Fehler:",e),n.innerHTML="<p>Fehler beim Laden der Ansicht.</p>"})}
|
||||
function checkMenus(){isNavOpen?openMobilMenu("nav"):isDeskNavOpen?toggleDeskMenu():isSettingsOpen&&openMobilMenu("settings")}
|
||||
function toggleTheme(){let e="light"===(getCookie("theme")||"light")?"dark":"light";setTheme(e),setCookie("theme",e,365),updateURLWithCookies()}function setTheme(e){let t=document.documentElement,l=document.querySelectorAll(".modeSelect");t.classList.toggle("darkTheme","dark"===e),t.classList.toggle("lightTheme","light"===e),l.forEach(t=>t.style.marginLeft="dark"===e?"20px":"-20px")}function initTheme(){let e=getCookie("theme")||"light";"dark"!==e&&"light"!==e&&(e="dark"),setCookie("theme",e,365),updateURLWithCookies(),setTheme(e)}
|
||||
let isLinkFilterOpen=!1;function toggleLinkFilterMenu(){isLinkFilterOpen?(document.querySelector(".linkFilterMenu").style.maxHeight="",document.querySelector(".linkFilterMenu .fa-arrow-down").style.rotate="",document.querySelector(".linkFilterMenu .fa-arrow-down").style.animation=""):(document.querySelector(".linkFilterMenu").style.maxHeight="1000px",document.querySelector(".linkFilterMenu .fa-arrow-down").style.rotate="180deg",document.querySelector(".linkFilterMenu .fa-arrow-down").style.animation="none"),isLinkFilterOpen=!isLinkFilterOpen}
|
||||
let isProjectFilterOpen=!1;function toggleProjectFilterMenu(e){let t=document.getElementById("tagList"),r=document.getElementById("sortSelect"),o=document.querySelector("#projectsFilterMenu"),n=document.querySelector("#projectsFilterMenu .fa-arrow-down");r.contains(e.target)||t.contains(e.target)||(isProjectFilterOpen?(o.classList.remove("open"),n.style.transform="rotate(0deg)"):(o.classList.add("open"),n.style.transform="rotate(180deg)"),isProjectFilterOpen=!isProjectFilterOpen)}
|
||||
function toggleFAQItem(e){e.classList.contains("expanded")?e.classList.remove("expanded"):(document.querySelectorAll(".faqItem").forEach(e=>{e.classList.remove("expanded")}),e.classList.add("expanded"))}document.querySelectorAll(".faqItem").forEach(e=>{e.classList.remove("expanded")});
|
||||
function openLink(url) {
|
||||
switch (url) {
|
||||
case 'html5':
|
||||
window.open('https://html.spec.whatwg.org/multipage/', '_blank');
|
||||
break;
|
||||
case 'php':
|
||||
window.open('https://www.php.net/', '_blank');
|
||||
break;
|
||||
case 'css3':
|
||||
window.open('https://developer.mozilla.org/en-US/docs/Web/CSS', '_blank');
|
||||
break;
|
||||
case 'javascript':
|
||||
window.open('https://www.javascript.com/', '_blank');
|
||||
break;
|
||||
case 'nodejs':
|
||||
window.open('https://nodejs.org/en', '_blank');
|
||||
break;
|
||||
case 'vscode':
|
||||
window.open('https://code.visualstudio.com/', '_blank');
|
||||
break;
|
||||
case 'cmd':
|
||||
window.open('https://learn.microsoft.com/de-de/windows-server/administration/windows-commands/cmd', '_blank');
|
||||
break;
|
||||
case 'ps':
|
||||
window.open('https://learn.microsoft.com/de-de/powershell/', '_blank');
|
||||
break;
|
||||
case 'chatgpt':
|
||||
window.open('https://chatgpt.com/', '_blank');
|
||||
break;
|
||||
case 'xampp':
|
||||
window.open('https://www.apachefriends.org/de/index.html', '_blank');
|
||||
break;
|
||||
case 'apache':
|
||||
window.open('https://httpd.apache.org/', '_blank');
|
||||
break;
|
||||
case 'mysql':
|
||||
window.open('https://www.mysql.com/de/', '_blank');
|
||||
break;
|
||||
case 'davinci':
|
||||
window.open('https://www.blackmagicdesign.com/de/products/davinciresolve/', '_blank');
|
||||
break;
|
||||
case 'obsstudio':
|
||||
window.open('https://obsproject.com/de', '_blank');
|
||||
break;
|
||||
case 'flstudio':
|
||||
window.open('https://www.image-line.com/', '_blank');
|
||||
break;
|
||||
case 'voicemeeter':
|
||||
window.open('https://vb-audio.com/Voicemeeter/', '_blank');
|
||||
break;
|
||||
case 'trello':
|
||||
window.open('https://trello.com/', '_blank');
|
||||
break;
|
||||
case 'notion':
|
||||
window.open('https://www.notion.com/', '_blank');
|
||||
break;
|
||||
default:
|
||||
loadPage('404');
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleBodyClick(e){let t=document.getElementById("navigation"),n=document.getElementById("mobileFooter"),r=document.getElementById("mobileSettings"),a=document.querySelectorAll(".faqItem"),o=document.querySelector(".linkFilterMenu"),i=document.querySelector("#projectsFilterMenu");if(t?.contains(e.target)||n?.contains(e.target)||r?.contains(e.target)||o?.contains(e.target)||i?.contains(e.target))return;let l=!1;a.forEach(t=>{t.contains(e.target)&&(l=!0)}),l||a.forEach(e=>e.classList.remove("expanded")),isLinkFilterOpen&&toggleLinkFilterMenu(),isProjectFilterOpen&&toggleProjectFilterMenu(e),checkMenus()}
|
||||
function addHoverEffectToLinkCard(e,r){e.addEventListener("mouseover",()=>{r.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),e.style.backgroundColor="rgba(255, 255, 255, 0.1)"}),e.addEventListener("mouseout",()=>{r.forEach(e=>{e.style.filter=""}),e.style.backgroundColor=""})}function addHoverEffectToProcessCard(e,r){e.addEventListener("mouseover",()=>{r.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),e.style.backgroundColor="rgba(255, 255, 255, 0.1)"}),e.addEventListener("mouseout",()=>{r.forEach(e=>{e.style.filter=""}),e.style.backgroundColor=""})}function addHoverEffectToImages(e){let r=document.querySelectorAll(".imgContainer img"),o=document.querySelectorAll(".skillsCardContainer img");r.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),o.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),e.style.backgroundColor="var(--hover-color)"}function removeHoverEffectFromImages(){let e=document.querySelectorAll(".imgContainer img"),r=document.querySelectorAll(".skillsCardContainer img");e.forEach(e=>{e.style.filter="",e.style.backgroundColor=""}),r.forEach(e=>{e.style.filter="",e.style.backgroundColor=""})}
|
||||
function scrollToTop(){window.scrollTo({top:0,behavior:"smooth"})}
|
||||
// DOMContentLoaded
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setCookiesFromURL(),getCookie("cookieConsent")||document.getElementById("cookie-banner").classList.remove("hidden"),document.getElementById("cookie-accept").addEventListener("click",function(){setCookie("cookieConsent","true",365),document.getElementById("cookie-banner").classList.add("hidden")});
|
||||
setTimeout(()=>{initTheme()},2500),setTimeout(()=>{initLanguage()},5e3);
|
||||
});
|
||||
Executable
+111
File diff suppressed because one or more lines are too long
Executable
+8
@@ -0,0 +1,8 @@
|
||||
/* Privacy Policy */
|
||||
.dataProtection{max-width:1000px;margin:0 auto;padding:2rem;background-color:var(--card-bg);color:var(--primary-text-color);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.dataProtection h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.dataProtection h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--tertiary-color);font-family:"Anonymous Pro",monospace;font-weight:700;font-style:normal}.dataProtection h3,.dataProtection h4,.dataProtection h5,.dataProtection h6{margin-top:1.5rem;margin-bottom:1rem;font-weight:700;color:var(--tertiary-color);font-family:"Anonymous Pro",monospace;font-style:normal}.dataProtection h3{font-size:1.25rem}.dataProtection h4{font-size:1.125rem}.dataProtection h5{font-size:1rem}.dataProtection h6{font-size:.875rem}.dataProtection ul{list-style-type:disc;margin-left:1rem;margin-bottom:1.5rem;text-align:justify}.dataProtection p{line-height:1.7;margin-bottom:1.2rem;text-align:justify;font-family:"Anonymous Pro",monospace;font-weight:400;font-style:normal}.dataProtection strong{color:var(--tertiary-color);font-family:"Anonymous Pro",monospace;font-weight:700;font-style:normal}.dataProtection a{color:var(--link-color);text-decoration:none}.dataProtection a:hover{text-decoration:underline;color:var(--link-hover-color)}@media (max-width:600px){.dataProtection{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.dataProtection h1{font-size:1.5rem}}
|
||||
/* Cookies Page */
|
||||
.cookie{max-width:1000px;margin:0 auto;padding:2rem;background-color:var(--card-bg);color:var(--primary-text-color);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15)}.cookie h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.cookie p,.cookie ul{text-align:justify}.cookie p{line-height:1.7;margin-bottom:1.2rem}.cookie strong{color:var(--tertiary-color)}.cookie a{color:var(--link-color);text-decoration:none}.cookie a:hover{text-decoration:underline;color:var(--link-hover-color)}@media (max-width:600px){.cookie{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.cookie h1{font-size:1.5rem}}
|
||||
/* Sources Page */
|
||||
.sourceItem,.sources{background-color:var(--card-bg);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15)}.sources{max-width:1000px;margin:0 auto;padding:2rem;color:var(--primary-text-color);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.sources h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.sources p{line-height:1.7;margin-bottom:1.2rem;text-align:justify}.sources a{color:var(--link-color);text-decoration:none}.sources a:hover{text-decoration:underline;color:var(--link-hover-color)}.sources h2{margin-top:1rem;font-size:1.5rem;color:var(--secondary-color)}.sourceItem{margin-bottom:2rem;padding:1rem}@media (max-width:600px){.sources{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.sources h1{font-size:1.5rem}}
|
||||
/* Impress Page */
|
||||
.impress{max-width:1000px;margin:0 auto;padding:2rem;background-color:var(--card-bg);color:var(--primary-text-color);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15)}.impress h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.impress p{line-height:1.7;margin-bottom:1.2rem;text-align:justify;font-family:"Anonymous Pro",monospace;font-weight:400;font-style:normal}.impress strong{color:var(--tertiary-color)}.impress a{color:var(--link-color);text-decoration:none}.impress a:hover{text-decoration:underline;color:var(--link-hover-color)}@media (max-width:600px){.impress{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.impress h1{font-size:1.5rem}}
|
||||
Reference in New Issue
Block a user