-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (146 loc) · 5.65 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Whooop Whooop - It's a Website</title>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- Bootstrap JS, just in case-->
<script defer src="js/jquery-3.5.1.js"></script>
<script defer src="js/popper.min.js"></script>
<script defer src="js/bootstrap.bundle.min.js"></script>
</head>
<!--End of Head-->
<!--Beginning of Main-->
<main>
<header class="sticky-top mt-3 mb-1 mx-0 p-2 shadow bg-light">
<h4 class="text-right mt-50 pt-50 mr-120 text-monospace">
<a href="#top" class="0.25em">Julian Hartmann</a>
</h4>
<nav class="row text-center text-gray 0.25em">
<div class="col-8"></div>
<div class="col-2">
<a href="#contact-section">Contact</a>
</div>
<div class="col-2">
<a href="#bio-section">Bio</a>
</div>
</nav>
</header>
<body class="container m-2">
<section class="container">
<img src="img/jujuhartmann Profile Pic.jpg" class="col" />
<p class="text-white bg-info px-2 text-center text-monospace">
This is just a face. Let it wash over.
</p>
</section>
<!--Beginning of: Experience & Expertise-->
<ul class="col my-2 p-1">
<h2 class="h5 mt-40">Experience & Expertise</h2>
<li class="badge badge-secondary">Ideation</li>
<li class="badge badge-secondary">Conceptual Design</li>
<li class="badge badge-secondary">Design Thinking</li>
<li class="badge badge-secondary">Business Modelling</li>
<li class="badge badge-secondary">Project Management</li>
<li class="badge badge-secondary">Dog Whispering</li>
<li class="badge badge-secondary">Sales</li>
</ul>
<!--End of: Experience & Expertise-->
<!--Beginning of: Hobbies and Interests-->
<ul class="col my-2 p-1">
<h2 class="h5 mt-40">Hobbies & Interests</h2>
<li class="badge badge-secondary">Running</li>
<li class="badge badge-secondary">Dogs</li>
<li class="badge badge-secondary">Beatmaking</li>
<li class="badge badge-secondary">Baking & Cooking</li>
<li class="badge badge-secondary">Frisbee</li>
<li class="badge badge-secondary">Hiking</li>
<li class="badge badge-secondary">Hamsterradsport</li>
</ul>
<!--End of: Hobbies and Interests-->
<!--Beginning of: Contact-->
<section class="cards p-10" id="contact-section">
<article class="card p-2 rounded-corner border-right border-warning">
<h2>Contact</h2>
<!--img src="#" alt="" /> -->
<p>+49 151 1577 5377</p>
<p>j.hartmann@me.com</p>
</article>
<p></p>
<article class="card p-2 rounded-corner border-right border-warning">
<header>
<h2>Let's get butt-naked and fork tonight</h2>
</header>
<img
src="img/octocat.jpg"
alt=""
href="https://github.com/jujuhartmann"
/>
</article>
<p></p>
<article class="card p-2 rounded-corner border-right border-warning">
<header>
<h2>CodePen</h2>
</header>
<!--img src="#" alt="" /> -->
<p><a href="https://www.">CodePen</a></p>
</article>
<p></p>
<article class="card p-2 rounded-corner border-right border-warning">
<header>
<h2>LinkedIn</h2>
</header>
<!--img src="#" alt="" /> -->
<p><a href="https://www.">LinkedIn</a></p>
</article>
</section>
<!--End of: Contact-->
<!--Beginning of: Biography-->
<section id="bio-section" class="row mx-20 mt-30">
<h2>My Universe in a Nutshell</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
enim consectetur quos accusantium dicta velit quidem dolorum nulla
fuga autem, maiores molestias, est eligendi! Deleniti, voluptatibus?
Architecto deleniti ipsum non! Ex id at veniam minima quia magnam
quaerat optio natus. Labore corporis officiis maxime molestiae aliquid
commodi? Incidunt minima ab, nemo voluptas, vitae sit nesciunt
reprehenderit id delectus deleniti aspernatur. Expedita asperiores
saepe perferendis incidunt dicta, repellat, ea rerum architecto
commodi tempore, doloremque nobis excepturi fugiat sint? In aliquid
eum culpa veritatis! Nisi voluptatibus fugiat illum nobis. Quod, alias
perferendis. Distinctio quaerat accusamus, non consequatur quod sint,
laudantium soluta vitae nesciunt delectus nam at nemo quae. Nobis eius
deleniti error esse ex ducimus, reiciendis adipisci possimus accusamus
quia ipsum incidunt.
</p>
</section>
>
<section>
<table class="table table-striped table-dark table-bordered">
<!-- <thaed>
<th scope="col"></th>
</thaed>
-->
<tr>
<td>Mar 2019 - Aug 2020</td>
<td>Think Tank Manager <br />(Dubai)</td>
</tr>
<tr>
<td>Jan 2018 - Dec 2018</td>
<td>Concept & BM Lead <br />(Hamburg)</td>
</tr>
<tr>
<td>Mar 2016 - Oct 2017</td>
<td>Head of Operations <br />(Hamburg)</td>
</tr>
</table>
</section>
<!--End of: Biography-->
</body>
<!--End of Body-->
</main>
<!--End of Main-->
</html>