-
Notifications
You must be signed in to change notification settings - Fork 0
/
personal.html
176 lines (157 loc) · 7.02 KB
/
personal.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
<!-- -->
<!-- Website of Timon Ensel -->
<!-- timon-ensel.de -->
<!-- -->
<!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">
<meta
name="description"
content="Timon Ensel's personal info site, including buzy-times, wishlists, ...">
<title>Timon Ole Ensel</title>
<link rel="stylesheet" href="index.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
</head>
<body>
<!-- start image and text -->
<h1 id="top" style="height:30%">
<div style="padding-top:10%;padding-left: 5%">Personal Page</div>
<div style="padding-top:5%;padding-left: 5%">
<h4>for my friends and family</h4>
</div>
</h1>
<div id="topbar">
<a href="https://timon-ensel.de">Home</a>
<a href="#intro">Welcome</a>
<a href="#contact">Contact</a>
</div>
<!-- introduction -->
<div id="intro" class="container disapperaring" style="margin-top:60px;margin-bottom:60px">
<div class="text">
<h2>
Hello and welcome!
</h2>
<h3>
Here you can find some personal stuff about me, that probably is more relevant to my friends and family.
</h3>
</div>
</div>
<!-- topics -->
<div id="carreer" class="table disapperaring" style="padding-top:0px">
<stitem id="time-btn">
<h2>
Busy Times & Vacation
</h2>
<h3>
You'll find it less likely to meet up with me at these times.
</h3>
</stitem>
<stitem id="wish-btn">
<h2>
Wishlist
</h2>
<h3>
Wondering what to give me as a present?
</h3>
</stitem>
<!--
<stitem id="acti-btn">
<h2>
Activities
</h2>
<h3>
My Hobbies and related stuff
</h3>
</stitem>
<stitem id="carr-btn" href="https://timon-ensel.de">
<h2 href="https://timon-ensel.de">
Carreer
</h2>
<h3 href="https://timon-ensel.de">
back to the starting page
</h3>
</stitem>
-->
</div>
<!-- HIDEABLES (different selections) -->
<!-- I was inspired to add the 'busy-times' and 'wishlist' section by:
@author Leonardo Oezuluca
@web https://leonardo.oezuluca.de/
Thank you for inspiring me to actually host my own website!
-->
<!-- Busy Times -->
<div id="busytimes" class="container darkened disapperaring" style="margin-top:60px;height:0;visibility:hidden">
<div class="image">
<img class="resize" src="assets/images/clock.png" alt="Timon Ensel Sailing">
</div>
<div class="text" style="margin-top:40px;margin-bottom:20px">
<h2>Busy Times & Vacations</h2>
<h3>My goal this year is to meet more of you more often, so please, feel free to contact me! Nevertheless, there are certain phases, where I'm very unlikely to have time to meet up at all and some, where it is especially likely, that I do have time. I try to communicate some of the important ones here.</h3>
<h2 style="margin-top:40px">Not Avaliable</h2>
<h3>• 14.08. - 03.09.:
<font style="color:#cc99ff"> Hiking in Norway
</font></h3>
<h3>• 08.09. - 13.09.:
<font style="color:#cc99ff"> Sailing in Hungary
</font></h3>
<h3>• 21.09. - 05.10.:
<font style="color:#cc99ff"> Sailing in Croatia
</font></h3>
</div>
</div>
<!-- Wishlist -->
<div id="wishlist" class="container darkened disapperaring" style="margin-top:0px;height:0;visibility:hidden">
<div class="image">
<img class="resize" src="assets/images/present.png" alt="Timon Ensel Sailing">
</div>
<div class="text" style="margin-top:40px;margin-bottom:20px">
<h2>Wishlist</h2>
<h3>Some things, that I need right now, or am always happy about are listed here as inspiration. Although I find the best ones to be those, that come straight out of your wonderful mind!</h3>
<h3>Items on this list should only give you rough ideas. This mainly saves me from the pain of constantly having to update this page :)</h3>
<h3 style="padding-left:40px">• Anything concerning Sailing and learning about it</h3>
<h3 style="padding-left:40px">• Activities</h3>
<h3 style="padding-left:40px">• Clothes (band-shirts / merche, funny socks)</h3>
<h3 style="padding-left:40px">• Books (sailing / self improvement / thriller / fantasy)</h3>
<h3 style="padding-left:40px">• A few bucks: yes, it always helps me finance some bigger dreams & is always appreciated</h3>
<h3 style="padding-left:40px">• ...and any other personal presents!</h3>
<h3>Some conctrete ideas are also located in this <a href="https://www.amazon.de/hz/wishlist/ls/3MQ7UHKMXQ03K?ref_=wl_share">Amazon Wishlist</a>, but be aware that it might be close to empty and not always completely up to date.</h3>
</div>
</div>
<!-- Activities -->
<div id="activities" class="container darkened disapperaring" style="margin-top:0px;height:0;visibility:hidden">
<div class="image">
<img class="resize" src="assets/images/meSailing.webp" alt="Timon Ensel Sailing">
</div>
<div class="text" style="margin-top:40px;margin-bottom:20px">
<h2>Activities</h2>
<h3>Next to learning new IT skills and working on small, private software projects (some of which are shared on GitHub),
there are some other things I enjoy doing in my free time:</h3>
<h3>• Sailing once or twice per year</h3>
<h3>• Playing Chess</h3>
<h3>• Bouldering & Climbing</h3>
</div>
</div>
<!--bottom contact info-->
<div id="contact" class="contact" style="margin-top: 120px">
<h5>Contact me</h5>
<div>
<br>
<a href="https://de.linkedin.com/in/timon-ensel" target="_blank" class="touchable">LinkedIn</a>
<a href="mailto:timon.ensel@tum.de?body=
%0A%0A_________________________
%0AContact%20Mail%20through%20timon-ensel.de"> timon.ensel@tum.de</a>
<a href="https://github.com/forgottosave" target="_blank" class="touchable">GitHub</a>
</br>
</div>
</div class="contact">
<script src="personal.js"></script>
</body>
</html>