-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (122 loc) · 5.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="javascript.js"></script>
</head>
<body>
<!-- Titelseite -->
<div class="container">
<div class="image-section"></div>
<div class="text-section">
<h1 class="title">
<span class="portfolio" id="portfolio">PORTFOLIO</span><br>
<span class="name" id="name">DOMINIQUE GAVIN</span>
</h1>
<!-- Social Media Icons -->
<div class="social-container">
<div class="social-icon">
<a href="https://www.instagram.com/domi_nom_g" target="_blank">
<img src="Instagram.png" alt="Instagram Icon" class="icon">
</a>
</div>
<div class="social-icon">
<a href="https://www.linkedin.com/in/dominique-noémie-gavin-7886a1283" target="_blank">
<img src="linkdin.png" alt="LinkedIn Icon" class="icon">
</a>
</div>
<div class="social-icon">
<a href="https://github.com/domnomg" target="_blank">
<img src="GITHUB.png" alt="GitHub Icon" class="icon">
</a>
</div>
</div>
<!-- Spotify Player als Quadrat -->
<div class="spotify-container">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/0GOx72r5AAEKRGQFn3xqXK?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
</div>
</div>
<label class="switch">
<input type="checkbox" id="colorModeToggle">
<span class="slider"></span>
</label>
<!-- About Me Section -->
<div class="about-container">
<!-- Linker Bereich mit Titel und Text -->
<div class="about-left">
<h2 class="about-title">A little about me</h2>
<p class="about-description">
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>
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.
</p>
</div>
<!-- Rechter Bereich mit Bildern -->
<div class="about-right">
<img src="P22.png" alt="Profilbild" class="about-image-small">
<img src="P2.png" alt="Zweites Bild" class="about-image-large">
</div>
</div>
<!-- Buttons: Skills, Projects, Contact -->
<div class="content-section">
<div class="buttons">
<a href="Skills.html"><button class="btn">Skills</button></a>
<a href="Projects.html"><button class="btn">Projects</button></a>
<a href="contact.html"><button class="btn">Contact</button></a>
</div>
</div>
<!-- Timeline -->
<div class="timeline">
<div class="timeline-header">
<h1 class="timeline-title">Time passes fast</h1>
<p class="timeline-subtitle">My journey so far...</p>
</div>
<div class="timeline-container left">
<div class="content">
<h2>2024 <span class="icon1">💻🎓📖 </span></h2>
<p>5.Semester Bachelor Wirtschaftsinformatik BFH</p>
</div>
</div>
<div class="timeline-container right">
<div class="content">
<h2>2024 <span class="icon1">🗃️📒💬 </span></h2>
<p>eCoach BFH Virtuelle Akademie Berner Fachhochschule</p>
</div>
</div>
<div class="timeline-container left">
<div class="content">
<h2>2022 <span class="icon1">💻🎓📖 </span></h2>
<p>1.Semester Bachelor Wirtschaftsinformatik ZHAW</p>
</div>
</div>
<div class="timeline-container right">
<div class="content">
<h2>2022 <span class="icon1">🏨📊📑</span></h2>
<p>Dipl. Hoteliere-Restauratrice HF Hotelfachschule Thun</p>
</div>
</div>
<div class="timeline-container left">
<div class="content">
<h2>2021 <span class="icon1">🛎🏨🛌🏻</span></h2>
<p>Juniorkaderpraktikum Hotel Mercure Biel</p>
</div>
</div>
<div class="timeline-container right">
<div class="content">
<h2>2019 <span class="icon1">🍷🍽️🍸</span></h2>
<p>Restaurationsfachfrau EFZ Sportgastro AG</p>
</div>
</div>
</div>
<!-- Random Facts About Me -->
<div class="fact-container">
<h2 class="fact-title">Random facts about me</h2>
<div class="fact-bar">
<div id="factText" class="fact-text"></div>
</div>
</div>
</body>
</html>