-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (216 loc) · 10.7 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--===========================Title===========================-->
<title>Portfolio Page Marc Steiner</title>
<!--=================================SEO===================================-->
<meta name="keywords" content="portfolio, web developer, projects, skills">
<meta name="description" content="Portfolio-page showcasing skills, projects, and experience.">
<!--===========================Favicon===========================-->
<link rel="icon" type="image/x-icon" href="./assests/favicon/favicon-96x96.ico">
<!--===========================PNG favicons===============================-->
<link rel="icon" type="image/png" sizes="16x16" href="./assests/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/favicon/favicon-192x192.png">
<!--===========================Icons===============================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<!--======================CSS============================-->
<link rel="stylesheet" href="./assests/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"/>
<!--======================JS============================-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
<header></header>
<!--===================Navigation============================-->
<nav class="navbar">
<div class="nav-logo">
<!--==============Animated SVG Logo==============-->
<svg class="animated-logo" viewBox="0 0 500 100">
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="logo-text">
Marc Steiner
</text>
</svg>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!--=========================Home Section============================-->
<section id="home" class="home-section">
<div id="particles-js"></div>
<div class="home-content">
<h1 id="typewriter"></h1>
<p>Discover my work, my skills, and the vision that drives me forward.</p>
</div>
</section>
<div class="scroll-down"></div>
<!--===========================About section=====================================-->
<section id="about" class="about-section" data-aos="fade-up">
<div class="about-container">
<div class="about-content">
<h2>About Me</h2>
<p>
Hi, I’m <strong>Marc Steiner</strong> 👋.
I’m currently studying <strong>Business IT / Digital Business & AI</strong> at the
<strong>Bern University of Applied Sciences</strong>, with a strong focus on
<strong>Business Data Analytics</strong> and <strong>Software Design & Architecture</strong>.
</p>
<p>
My journey has always been about bridging the gap between <strong>business and technology</strong>.
While <strong>data analytics</strong> has allowed me to turn complex data into clear, actionable insights, my passion for <strong>software design & architecture</strong> has empowered me to build structured, scalable solutions that solve real world challenges.
Whether it’s crafting analytical models or designing robust system architectures, I enjoy creating solutions that bring clarity, efficiency, and long term value to businesses.
</p>
<p>
Before my studies, I spent time in <strong>client consulting</strong> while working at a bank, where I
learned the importance of trust, clear communication, and understanding customer needs. Combine that
with my growing passion for <strong>programming</strong> especially in <strong>Python</strong> and now
<strong>R</strong> and you’ll see how I thrive at the intersection of data, technology, and strategy.
</p>
<p>
I’m constantly learning and growing, driven by the belief that
<em>data isn’t just numbers – it’s a story waiting to be told, and well-designed systems are the frameworks that bring these stories to life</em>.
</p>
<!-- Quote -->
<blockquote class="about-quote" data-aos="fade-up" data-aos-delay="1200">
<p>
“Data is like a compass – it only points the way forward when you know how to read it.”
<br>
<span>– A great AI once told me... or maybe it’s just good advice for life.</span>
</p>
</blockquote>
</div>
<!-- Avatar -->
<div class="about-avatar" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="400">
<img src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFro&accessoriesType=Blank&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=PastelBlue&eyeType=Happy&eyebrowType=DefaultNatural&mouthType=Smile&skinColor=Brown"
alt="Marc Steiner Avatar">
</div>
</div>
</section>
<!--===========================About section=====================================-->
<section id="skills" class="skills-section" data-aos="fade-up">
<h2>Skills</h2>
<!-- Toggle Buttons -->
<div class="skills-toggle">
<button id="toggle-tech" class="custom-btn active"><span>Technical Skills</span></button>
<button id="toggle-soft" class="custom-btn"><span>Soft Skills</span></button>
</div>
<!-- Technical Skills -->
<div id="technical-skills" class="skills-container active">
<div class="skill-item">
<span>Python</span>
<div class="progress-bar">
<div class="progress" data-width="60%"></div>
</div>
</div>
<div class="skill-item">
<span>SQL</span>
<div class="progress-bar">
<div class="progress" data-width="70%"></div>
</div>
</div>
<div class="skill-item">
<span>R</span>
<div class="progress-bar">
<div class="progress" data-width="80%"></div>
</div>
</div>
<div class="skill-item">
<span>HTML</span>
<div class="progress-bar">
<div class="progress" data-width="85%"></div>
</div>
</div>
<div class="skill-item">
<span>CSS</span>
<div class="progress-bar">
<div class="progress" data-width="75%"></div>
</div>
</div>
<div class="skill-item">
<span>Javascript</span>
<div class="progress-bar">
<div class="progress" data-width="70%"></div>
</div>
</div>
</div>
<!-- Soft Skills -->
<div id="soft-skills" class="skills-container">
<div class="skill-item">
<span>Analytical thinking</span>
<div class="progress-bar">
<div class="progress" data-width="85%"></div>
</div>
</div>
<div class="skill-item">
<span>Communication</span>
<div class="progress-bar">
<div class="progress" data-width="80%"></div>
</div>
</div>
<div class="skill-item">
<span>Adaptability</span>
<div class="progress-bar">
<div class="progress" data-width="90%"></div>
</div>
</div>
<div class="skill-item">
<span>Teamwork</span>
<div class="progress-bar">
<div class="progress" data-width="85%"></div>
</div>
</div>
<div class="skill-item">
<span>Organizational skills</span>
<div class="progress-bar">
<div class="progress" data-width="80%"></div>
</div>
</div>
<div class="skill-item">
<span>Time management</span>
<div class="progress-bar">
<div class="progress" data-width="75%"></div>
</div>
</div>
</div>
</section>
<!--===========================Projects=====================================-->
<section id="projects" class="projects-section" data-aos="fade-up">
<h2>My Projects</h2>
<div id="projects-container" class="projects-container">
</div>
</section>
<!--================================Contact Section======================================-->
<section id="contact" class="contact-section" data-aos="fade-up">
<h2>Contact Me</h2>
<div class="contact-container">
<a href="https://github.com/Merinques" target="_blank" class="contact-icon">
<i class="fab fa-github"></i>
<span>GitHub</span>
</a>
<a href="mailto:marc.steiner@students.bfh.ch" target="_blank" class="contact-icon">
<i class="fas fa-envelope"></i>
<span>Email</span>
</a>
<a href="https://linkedin.com/in/marc-steiner-b1b9a2339/" target="_blank" class="contact-icon">
<i class="fab fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</div>
</section>
<!--================================Footer===================================-->
<footer>
<p>© 2024 Designed & Developed by <a href="#home">Merinques</a></p>
</footer>
<!--Main JS-->
<script src="./assests/js/main.js"></script>
</body>
</html>