-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
315 lines (290 loc) · 11.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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
<meta
name="viewport"
content="width=device-width, initial-scale=1 minimum-scale=1"
/>
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="./index.js" defer></script>
<title>Phillip Oehlenberg</title>
<link rel="icon" type="image/x-icon" href="./img/Favicon.png" />
</head>
<body>
<header>
<nav>
<a href="./index.html" class="nav-link nav-link1">HOME</a>
<a href="#profile" class="nav-link nav-link2">PROFILE</a>
<a href="#portfolio" class="nav-link nav-link3">PORTFOLIO</a>
<a href="#cv" class="nav-link nav-link4">CV</a>
<a href="#contact" class="nav-link nav-link5">CONTACT</a>
</nav>
</header>
<div class="header-container">
<h1>
<span class="h1-highlight">HEY THERE,</span> <br />
I'M PHILLIP. <br />
<span class="h1-highlight">NICE TO MEET YOU!</span>
</h1>
<img
class="logo-animation"
src="/img/logo-ani-small.webp"
alt="header-animation"
/>
</div>
<main>
<section id="profile" class="segment profile">
<img
class="headline-icon headline-icon-profile"
src="./img/Icon_Profile.svg"
alt="icon-profile"
/>
<div class="headline headline-profile">
<h2>THAT'S ME</h2>
</div>
<div class="filler-profile-left"></div>
<div class="profile-image-container">
<img
class="profile-image"
src="/img/profile.jpg"
alt="profile-picture"
/>
</div>
<div class="filler-profile-right"></div>
<p class="profile-text">
I'm a seasoned graphic designer calling Hamburg my home. I have over a
dozen years of professional experience in the design field. Before
that, I've crafted my skills in the academic hubs of Cologne and the
creative whirlwind of London.
<br />
<br />
I'm currently delving into the world of web development to expand my
creative toolkit and add some extra sprinkles to my portfolio.
<br />
<br />
My design spectrum? It's as varied as the cityscape at sunset—ranging
from sleek and professional to whimsically playful. Whether it's
pixels or paper, I've got you covered with a keen eye for detail and a
knack for bringing ideas to life.
<br />
<br />
When it comes to work, I'm reliable, conscientious, and always up for
a chat. Because let's be real, good design is not just about
visuals—it's about building connections.
<br />
<br />
Excited to collaborate? Drop me a message, and let's make some design
magic together.
</p>
</section>
<section id="portfolio" class="segment portfolio">
<div class="filler-portfolio filler-portfolio-left"></div>
<img
class="headline-icon"
src="./img/Icon_Portfolio.svg"
alt="icon-portfolio"
/>
<div class="headline headline-portfolio">
<h2>CHECK OUT MY PORTFOLIOS</h2>
</div>
<div class="card card-left" data-js="card-left">
<img
class="card-image"
src="/img/Icon_img.jpg"
alt="graphics-image"
data-js="card-left-image"
/>
<h3 class="card-headline">GRAPHIC DESIGN</h3>
<p class="card-text">Go >>></p>
</div>
<div class="filler-portfolio filler-portfolio-middle"></div>
<div class="card card-right">
<img
class="card-image"
src="/img/webdev-image.jpg"
alt="webdev-image"
/>
<h3 class="card-headline">WEB DEVELOPMENT</h3>
<p class="card-text">Go >>></p>
</div>
<div class="filler-portfolio filler-portfolio-right"></div>
</section>
<section id="cv" class="segment cv">
<img class="headline-icon" src="./img/Icon_CV.svg" alt="icon-cv" />
<div class="headline headline-cv">
<h2>CV</h2>
</div>
<div class="cv-chapter">
<h3 class="cv-category">WORK EXPERIENCE</h3>
<div class="cv-station">
<h6 class="cv-station-date">06/2005 - today</h6>
<h4 class="cv-station-name">Freelance</h4>
<h5 class="cv-station-kind">Art director</h5>
<p class="cv-station-description">
Concept, design and realisation of brand designs, corporate
designs, advertising materials, illustrations, websites and
packaging in direct collaboration with various clients
</p>
<p class="cv-station-description cv-station-description-clients">
<strong>Clients:</strong> Bio-Obst Augustin, Cognac Expert,
Dissonar, Donet, Gleitsmann, Helena Reich Relations, MAISCH,
recyclehero, Schlosser & Partner, Schwartau, SO COSI
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">04/2010 - 02/2024</h6>
<h4 class="cv-station-name">envise Werbeagentur / Hamburg</h4>
<h5 class="cv-station-kind">Graphic designer</h5>
<p class="cv-station-description">
Concept, design and realisation of brand designs, corporate
designs, advertising material, illustrations, infographics and
websites, in direct correspondence with customers and service
providers
</p>
<p class="cv-station-description cv-station-description-clients">
<strong>Clients:</strong> Becker Marine Systems, Clean Logistics
Continental ContiTech, eCap Mobility, elblinien, Hallite
Dichtelemente, Hoppe Marine, HPE Hybrid Port Energy, HSVA, Lehmann
Marine, MKO Marine Consulting, Phoenix Xtra Blankets, STG
Schiffbautechnische Gesellschaft, Home of Classics
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">04/2007 - 09/2007</h6>
<h4 class="cv-station-name">Wunderman / Cologne</h4>
<h5 class="cv-station-kind">Internship</h5>
<p class="cv-station-description">
Concept and realisation of campaigns and advertising material for
direct marketing and customer relationship marketing
</p>
<p class="cv-station-description cv-station-description-clients">
<strong>Clients:</strong> Kraft Foods (Tassimo), Ford, Mazda
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">09/2003 - 12/2004</h6>
<h4 class="cv-station-name">2wei50 Kino / Lübeck</h4>
<h5 class="cv-station-kind">Employed</h5>
<p class="cv-station-description">
Ticket and food counter, window and interior decoration, design of
monthly programme and flyers for special events such as concerts
and parties
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">07/2002 – 06/2003</h6>
<h4 class="cv-station-name">Malteser Hilfsorganisation / Lübeck</h4>
<h5 class="cv-station-kind">Civilian service</h5>
<p class="cv-station-description">
Integration assistant for a disabled child in the school
environment and home emergency call helper on standby duty
</p>
</div>
</div>
<div class="cv-chapter">
<h3 class="cv-category">EDUCATION</h3>
<div class="cv-station">
<h6 class="cv-station-date">03/2014 – today</h6>
<h4 class="cv-station-name">neue fische / Hamburg</h4>
<h5 class="cv-station-kind">Web development bootcamp</h5>
<p class="cv-station-description">
Web development course – HTML 5, CSS, JavaScript, React, Node.js,
Git, Shell
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">11/2023 – 03/2024</h6>
<h4 class="cv-station-name">Tech Labs / Hamburg</h4>
<h5 class="cv-station-kind">Digital Shaper Program</h5>
<p class="cv-station-description">
Web development course – HTML 5, CSS, JavaScript, React, Node.js
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">01/2008 – 07/2009</h6>
<h4 class="cv-station-name">Middlesex University / London</h4>
<h5 class="cv-station-kind">Graphic design</h5>
<p class="cv-station-description">
<strong>Degree:</strong> Bachelor of Arts (2.1 Honours) Graphic
Design
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">03/2005 – 06/2007</h6>
<h4 class="cv-station-name">Kölner Design Akademie / Köln</h4>
<h5 class="cv-station-kind">Graphic design</h5>
<p class="cv-station-description">
<strong>Degree:</strong> Diploma in Design (KDA)
</p>
</div>
</div>
<div class="cv-chapter">
<h3 class="cv-category">SCHOOL</h3>
<div class="cv-station">
<h6 class="cv-station-date">08/1999 – 06/2002</h6>
<h4 class="cv-station-name">Johanneum zu Lübeck / Lübeck</h4>
<h5 class="cv-station-kind">Secondary school</h5>
<p class="cv-station-description">
<strong>Degree:</strong> Abitur
</p>
</div>
<div class="cv-station">
<h6 class="cv-station-date">08/1993 – 06/1999</h6>
<h4 class="cv-station-name">Thomas-Mann-Schule / Lübeck</h4>
<h5 class="cv-station-kind cv-station-kind-end">
Secondary school
</h5>
</div>
<div class="cv-station">
<h6 class="cv-station-date">07/1989 – 06/1993</h6>
<h4 class="cv-station-name">Kalandschule / Lübeck</h4>
<h5 class="cv-station-kind cv-station-kind-end">Primary school</h5>
</div>
</div>
</section>
<section id="contact" class="segment contact">
<img class="headline-icon" src="./img/Icon_Contact.svg" alt="icon-cv" />
<div class="headline headline-contact">
<h2>Drop me a message</h2>
</div>
<form class="contact-form">
<label class="contact-form-label" for="email">Email address*</label>
<input
class="contact-form-input"
type="email"
id="email"
name="email"
required
/>
<label class="contact-form-label" for="subject">Subject*</label>
<input
class="contact-form-input"
type="text"
name="subject"
id="subject"
required
/>
<label class="contact-form-label" for="message">Your message*</label>
<textarea
class="contact-form-input contact-form-input-message"
id="message"
name="message"
rows="8"
required
></textarea>
<p>*required</p>
<button
class="contact-form-button-submit"
type="submit"
name="submit-button"
>
Send
</button>
</form>
</section>
</main>
</body>
</html>