Skip to content

Commit c2ead86

Browse files
domnomgdomnomg
committed
Ausrichtung -a little about me |-Animationen für das scrollen hinzugefügt | -Struktur angepasst
1 parent 4a1013f commit c2ead86

File tree

6 files changed

+181
-74
lines changed

6 files changed

+181
-74
lines changed

‎P1.JPG

2.89 MB
Loading

‎P2.png

405 KB
Loading

‎P22.png

390 KB
Loading

‎index.html

+37-24
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
<script src="javascript.js"></script>
99
</head>
1010
<body>
11+
12+
1113

12-
<!--Titelseite -->
14+
<!--Titelseite - erscheint beim öffnen -->
1315
<div class="container">
1416
<div class="image-section"></div>
1517
<div class="text-section">
@@ -20,31 +22,42 @@ <h1 class="title">
2022
</div>
2123
</div>
2224

23-
<!-- TEIL 1 -->
24-
<div class="content-section">
25-
<div class="left-section">
26-
<div class="info-box">
27-
<ul class="info-list">
28-
<li>Dominique Noémie (25)</li>
29-
<li>Business IT & AI (5. Semester)</li>
30-
<li>Bern, Switzerland</li>
31-
<li>German, French (B2), English (C1)</li>
32-
</ul>
33-
<!-- BUTTONS -->
34-
<div class="buttons">
35-
<!-- Verknüpfung zu skill.html -->
36-
<a href="Skills.html"><button class="btn">Skills</button></a>
37-
<!-- Verknüpfung zu projects.html -->
38-
<a href="Projects.html"><button class="btn">Projects</button></a>
39-
</div>
40-
</div>
41-
</div>
42-
<!--Profilbild -->
43-
<div class="right-section">
44-
<img src="Profil.JPG" alt="Profil" class="profile-pic">
45-
</div>
25+
26+
27+
<!-- A little about me -->
28+
29+
<div class="about-container">
30+
<!-- Linker Bereich mit Titel und Text -->
31+
<div class="about-left">
32+
<h2 class="about-title">A little about me</h2>
33+
<p class="about-description">
34+
I am Dominique, 25 years old and based in the beautiful city of Bern. I’m currently in my final year of studying Business IT and Artificial Intelligence as part of my Bachelor's degree, and I am excited to pursue a Master’s in Artificial Intelligence.<br><br>
35+
Surfing is my passion, and I am always looking for ways to combine my business interests with this passion, bringing both together on one platform.
36+
</p>
4637
</div>
4738

39+
<!-- Rechter Bereich mit Bildern -->
40+
<div class="about-right">
41+
<img src="P22.png" alt="Profilbild" class="about-image-small">
42+
<img src="P2.png" alt="Zweites Bild" class="about-image-large">
43+
</div>
44+
</div>
45+
46+
47+
48+
<!-- Buttons Skills and Projects -->
49+
<div class="content-section">
50+
<!-- BUTTONS -->
51+
<div class="buttons">
52+
<!-- Verknüpfung zu skill.html -->
53+
<a href="Skills.html"><button class="btn">Skills</button></a>
54+
<!-- Verknüpfung zu projects.html -->
55+
<a href="Projects.html"><button class="btn">Projects</button></a>
56+
</div>
57+
</div>
58+
59+
60+
4861
<!-- TIMELINE (Richtige Position nach den Buttons) -->
4962
<div class="timeline">
5063
<div class="timeline-header">

‎javascript.js

+66-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,64 @@
1+
// ANIMATION, die den Titel auf der Titelseit auseinander zieht
2+
window.addEventListener('scroll', function() {
3+
const scrollAmount = window.scrollY; // Die aktuelle Scroll-Höhe
4+
const portfolio = document.getElementById('portfolio'); // Zugriff auf das PORTFOLIO-Element
5+
const name = document.getElementById('name'); // Zugriff auf das DOMINIQUE GAVIN-Element
6+
7+
// Definieren Sie den Verschiebungsfaktor (je höher der Wert, desto schneller die Trennung)
8+
const shiftFactor = scrollAmount * 0.2;
9+
10+
// Setze die Transform-Eigenschaft, um die Titel auseinander zu ziehen
11+
portfolio.style.transform = `translateX(${-shiftFactor}px)`; // Portfolio nach links
12+
name.style.transform = `translateX(${shiftFactor}px)`; // Dominique Gavin nach rechts
13+
});
14+
15+
16+
17+
18+
//ANIMATION, die macht, dass das Titelbild verschwindet sobald man beim "A little about me ankommt"
19+
document.addEventListener("DOMContentLoaded", function () {
20+
// Alle Timeline-Container-Elemente sammeln
21+
const containers = document.querySelectorAll('.timeline-container');
22+
23+
// Erstelle den IntersectionObserver für die Timeline
24+
const observer = new IntersectionObserver((entries, observer) => {
25+
entries.forEach(entry => {
26+
if (entry.isIntersecting) {
27+
entry.target.classList.add('show');
28+
} else {
29+
entry.target.classList.remove('show');
30+
}
31+
});
32+
}, { threshold: 0 }); // 0% des Elements müssen sichtbar sein, bevor es erscheint
33+
34+
// Jedes Container-Element dem Observer hinzufügen
35+
containers.forEach(container => {
36+
observer.observe(container);
37+
});
38+
39+
// Neuen Observer für das Titelbild erstellen
40+
const titleImageContainer = document.querySelector('.container');
41+
42+
const titleImageObserver = new IntersectionObserver((entries) => {
43+
entries.forEach(entry => {
44+
if (entry.intersectionRatio <= 0.15) { // Wenn nur noch 15 % sichtbar sind
45+
entry.target.style.opacity = '0'; // Verblassen (ausblenden)
46+
entry.target.style.transition = 'opacity 0.5s ease'; // Schnelles, aber weiches Ausblenden
47+
} else {
48+
entry.target.style.opacity = '1'; // Sichtbar machen, wenn mehr als 15 % sichtbar sind
49+
entry.target.style.transition = 'opacity 0.5s ease'; // Schnelles, aber weiches Einblenden
50+
}
51+
});
52+
}, { threshold: [0.15] }); // Überwacht, wenn 15 % oder weniger sichtbar sind
53+
54+
// Titelbild dem Observer hinzufügen
55+
titleImageObserver.observe(titleImageContainer);
56+
});
57+
58+
59+
60+
61+
//ANIMATION für das Erscheinen der einzelnen Container beim Scrollen der Timeline
162
document.addEventListener("DOMContentLoaded", function () {
263
// Alle Timeline-Container-Elemente sammeln
364
const containers = document.querySelectorAll('.timeline-container');
@@ -22,19 +83,12 @@ document.addEventListener("DOMContentLoaded", function () {
2283
});
2384

2485

86+
//Neue Funktion hier einfügen -----------------------------------------
87+
88+
89+
90+
2591

26-
// Neue Funktion hier einfügen!!
2792

28-
// Funktion, die auf das Scrollen reagiert
29-
window.addEventListener('scroll', function() {
30-
const scrollAmount = window.scrollY; // Die aktuelle Scroll-Höhe
31-
const portfolio = document.getElementById('portfolio'); // Zugriff auf das PORTFOLIO-Element
32-
const name = document.getElementById('name'); // Zugriff auf das DOMINIQUE GAVIN-Element
3393

34-
// Definieren Sie den Verschiebungsfaktor (je höher der Wert, desto schneller die Trennung)
35-
const shiftFactor = scrollAmount * 0.2;
3694

37-
// Setze die Transform-Eigenschaft, um die Titel auseinander zu ziehen
38-
portfolio.style.transform = `translateX(${-shiftFactor}px)`; // Portfolio nach links
39-
name.style.transform = `translateX(${shiftFactor}px)`; // Dominique Gavin nach rechts
40-
});

‎style.css

+78-38
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Allgemeine Einstellungen */
1+
/*__________________________________________Allgemeine Einstellungen_________________________________________________*/
22
body, html {
33
margin: 0;
44
padding: 0;
@@ -48,40 +48,75 @@ body, html {
4848
text-align: center;
4949
}
5050

51-
/* ______________________________________Vorstellung ICH_____________________________________ */
52-
.content-section {
51+
/*_______________________________A little about me____________________________________*/
52+
53+
/* Gesamtcontainer für "A little about me" */
54+
.about-container {
5355
display: flex;
54-
padding: 20px;
56+
justify-content: space-between;
57+
padding:50px;
58+
margin-top: 1cm; /* Abstand von 5cm vom Titelbild */
59+
background-color: white;
5560
}
5661

57-
.left-section {
58-
width: 50%;
59-
padding: 20px;
62+
/* Linke Seite: Titel und Text */
63+
.about-left {
64+
width: 30%;
65+
text-align: left; /* Linksbündige Ausrichtung */
6066
}
6167

62-
.right-section {
63-
width: 50%;
68+
/* Titel "A little about me" */
69+
.about-title {
70+
font-family: 'Times New Roman', Times, serif;
71+
font-size: 36px;
72+
color: black;
73+
margin-bottom: 20px;
74+
padding-left: 30px;
75+
}
76+
77+
/* Beschreibungstext unter dem Titel */
78+
.about-description {
79+
font-family: 'Aptos Textkörper', sans-serif;
80+
font-size: 15px;
81+
line-height: 1.6;
82+
color: #333;
83+
text-align: left; /* Linksbündige Ausrichtung */
84+
transform: translateX(140px);
85+
}
86+
87+
/* Rechte Seite: Bilder */
88+
.about-right {
89+
width: 35%;
90+
position: relative;
6491
display: flex;
6592
justify-content: center;
6693
align-items: center;
6794
}
6895

69-
.profile-pic {
70-
width: 40%;
71-
height: auto;
96+
/* Fancybild_P22 */
97+
.about-image-small {
98+
width: 40%; /* Verkleinertes Profilbild */
99+
transform: rotate(-15deg); /* Rotation */
100+
position: absolute;
101+
top: -20px; /*Verschiebt das Bild weiter nach oben*/
102+
left: -35%; /* Linksorientiert */
103+
z-index: 2;
72104
}
73105

74-
/* Info-Box */
75-
.info-box {
76-
border: 1px solid gray;
77-
padding: 20px;
78-
background-color: white;
106+
/* Profilbild_P2 */
107+
.about-image-large {
108+
width: 60%; /* Kleineres zweites Bild */
109+
position: absolute;
110+
top: 5px;
111+
left: 20px;
112+
z-index: 1;
79113
}
80114

81-
/* Auflistung der Eigenschaften */
82-
.info-list {
83-
list-style: none;
84-
padding: 0;
115+
/* ______________________________________Buttons_____________________________________ */
116+
.content-section {
117+
display: flex;
118+
justify-content: center; /* Zentriert die Buttons */
119+
padding: 20px;
85120
}
86121

87122
/* Buttons */
@@ -93,14 +128,33 @@ body, html {
93128
padding: 10px;
94129
margin-top: 10px;
95130
cursor: pointer;
96-
width: 100%;
131+
width: 150px; /* Angepasste Breite für die Buttons */
97132
font-size: 16px;
98133
}
99134

100135
.btn:hover {
101136
background-color: #f0f0f0;
102137
}
103138

139+
140+
/*_____________________________Titel für Timeline_______________________________*/
141+
.timeline-header {
142+
text-align: center;
143+
margin-bottom: 20px;
144+
}
145+
146+
.timeline-title {
147+
font-size: 24px;
148+
font-weight: bold;
149+
margin-bottom: 10px;
150+
}
151+
152+
.timeline-subtitle {
153+
font-size: 18px;
154+
color: #666;
155+
}
156+
157+
104158
/* _______________________________TIMELINE_____________________________________________ */
105159
.timeline {
106160
position: relative;
@@ -238,19 +292,5 @@ body, html {
238292
transform: translateY(0);
239293
}
240294
}
241-
/*______________________________________Titel für Timeline_______________________________*/
242-
.timeline-header {
243-
text-align: center;
244-
margin-bottom: 20px;
245-
}
246-
247-
.timeline-title {
248-
font-size: 24px;
249-
font-weight: bold;
250-
margin-bottom: 10px;
251-
}
252-
253-
.timeline-subtitle {
254-
font-size: 18px;
255-
color: #666;
256-
}
295+
296+

0 commit comments

Comments
 (0)