-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
313 lines (294 loc) · 15.4 KB
/
index.html
File metadata and controls
313 lines (294 loc) · 15.4 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Johannes Dreckhoff - Physics student, researcher, and science enthusiast. Exploring theoretical biophysics, computational modeling and the connection to artificial intelligence.">
<meta name="author" content="Johannes Dreckhoff">
<title>Johannes Dreckhoff - Physics, Biology and Computation</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header & Navigation -->
<header>
<div class="container">
<a href="#" class="logo">Johannes Dreckhoff</a>
<nav>
<a href="#about">About</a>
<a href="#professional">Professional</a>
<a href="#gallery">Gallery</a>
<a href="places.html">Places</a>
<a href="blog/index.html">Blog</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Hi, I'm Johannes</h1>
<p class="tagline">Physics student at the University of Heidelberg, researching theoretical
biophysics and exploring the fascinating intersection of mathematics, computation, and
life sciences.</p>
<div class="cta-buttons">
<a href="#about" class="btn btn-primary">Learn More</a>
<a href="assets/documents/CV Johannes Dreckhoff.pdf" class="btn btn-secondary" target="_blank">Download CV</a>
</div>
</div>
</section>
<!-- Personal Bio Section -->
<section id="about">
<div class="container">
<div class="section-header">
<h2>About Me</h2>
<p>Get to know my personal side</p>
</div>
<div class="bio-content">
<p>
Welcome to my website! I'm Johannes, a physics student at the University of Heidelberg, Germany.
I was born on January 18th, 2001 in Düsseldorf, and after completing my Abitur in 2019, I moved to
Heidelberg to study physics.
</p>
<p>
During my bachelor studies, I had the wonderful opportunity to spend a semester at the University of
Leiden in the Netherlands. I got to meet wonderful people, explore the Dutch culture and the "nice" weather.
I also learned a new side of physics at the intersection to the physics of finance, which opened my eyes to the diverse applications of
physical principles. I have recently finished my studies with my Master degree in physics and am currently looking
for a PhD position in theoretical and computational biophysics. Let's see where this journey takes me.
</p>
<p>
Outside of academia I like sports like the classics (soccer). However, I've recently discovered ultimate frisbee, which I absolutely love. I'm a dog
person (though I like cats too!), and I'm deeply invested
in the Game of Thrones books. While waiting for the elusive 6th book, I've been making my way through
the Wheel of Time series. However, the new "A Knight of the Seven Kingdoms" show is also quite nice!
</p>
<p>
This website is my corner of the internet where I share my academic work, research interests, personal
adventures, and thoughts on topics I find fascinating. Feel free to explore and don't hesitate to reach out!
</p>
</div>
</div>
</section>
<!-- Professional Bio Section -->
<section id="professional">
<div class="container">
<div class="section-header">
<h2>Professional Background</h2>
<p>My academic journey and research work</p>
</div>
<div class="bio-content">
<h3>Education</h3>
<p>
I completed my <a href="assets/documents/bachelor-thesis.pdf" target="_blank">bachelor's degree</a> in physics in 2023, writing my thesis under the supervision of
Prof. Dr. Andreas Mielke on pattern formation in lipid membranes. The research tackled a fascinating
question: "Why is everything we see in nature so sharp?" Think of zebra stripes - why aren't they a
blurry mess?
</p>
<p>
In my thesis, I explored how patterns emerge in cell membranes through nonlinear feedback suppression,
similar to how a single chant can take over an entire stadium. It's a mechanism where competing patterns
actively suppress each other until one dominant pattern emerges.
</p>
<p>
From November 2024 until December 2025 I worked on my <a href="assets/documents/Master Thesis Johannes Dreckhoff.pdf" target="_blank">master thesis</a> in the group of Prof. Dr. Ulrich Schwarz shared between the Institute for
Theoretical Physics and the BioQuant in Heidelberg. The thesis focused on how cells wrap around things they want to "eat". It does so by creating a
layer of proteins (called clathrin) on its surface which assists in the bending. For this project,
I developed simulation software using JAX (typically used for machine learning) combined with Python's object-oriented programming.
This approach allowed me to create fast, efficient simulations while maintaining clean, manageable code. It was an exciting blend of
computational physics, biophysics, and software engineering.
</p>
<p>
We were able to show that the protein coat becomes "stronger" while it grows which helps it to bend the membrane. The protein coat has usually
a very symmetric structure (hexagonal). We could also show that the coat can bend the membrane a bit and then "lock" this curvature in by
creating a "defect" (a pentagon) in its structure. This is a bit like how you can create a cone by cutting out a slice of paper and then gluing the
edges together. The cut creates a "defect" in the otherwise flat sheet, allowing it to
bend into a cone shape.
</p>
<h3>Current Research</h3>
<p>
I'm currently employed in the Schwarz group to further refine the findings of my master thesis. In an ideal world we would like to publish the results
before I start my PhD. But let's see how that goes!
</p>
<h3>Resources</h3>
<div class="grid grid-3" style="margin-top: 2rem; gap: 2rem;">
<div class="card">
<h4>Bachelor Thesis</h4>
<p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1rem;">
Pattern Formation in Lipid Membranes (2023)
</p>
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<a href="assets/documents/bachelor-thesis.pdf" target="_blank" class="btn btn-primary">Download PDF</a>
<details style="margin-top: 0.5rem;">
<summary style="cursor: pointer; color: var(--primary-color); font-weight: 600;">Audio Summaries (NotebookLM)</summary>
<div style="margin-top: 1rem;">
<p style="font-size: 0.9rem; margin-bottom: 0.5rem;">German:</p>
<audio controls style="width: 100%; margin-bottom: 1rem;">
<source src="assets/documents/ger-audio-summary.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p style="font-size: 0.9rem; margin-bottom: 0.5rem;">English:</p>
<audio controls style="width: 100%;">
<source src="assets/documents/eng-audio-summary.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</details>
<details style="margin-top: 0.5rem;">
<summary style="cursor: pointer; color: var(--primary-color); font-weight: 600;">Summary Poster (NotebookLM)</summary>
<div style="margin-top: 1rem;">
<a href="assets/documents/bachelor_thesis_summary_poster.png" target="_blank" style="display: block; margin-bottom: 0.75rem;">
<img src="assets/documents/bachelor_thesis_summary_poster.png" alt="Bachelor Thesis Summary Poster" style="width: 100%; border-radius: var(--border-radius); border: 1px solid var(--border-color); cursor: pointer; transition: var(--transition);" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
</a>
<a href="assets/documents/bachelor_thesis_summary_poster.png" download="Bachelor_Thesis_Summary_Poster.png" class="btn btn-secondary" style="width: 100%; text-align: center;">Download Poster</a>
</div>
</details>
</div>
</div>
<div class="card">
<h4>Master Thesis</h4>
<p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1rem;">
Curvature Generation in Clathrin-Mediated Endocytosis (2024-2025)
</p>
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<a href="assets/documents/Master Thesis Johannes Dreckhoff.pdf" target="_blank" class="btn btn-primary">Download PDF</a>
<details style="margin-top: 0.5rem;">
<summary style="cursor: pointer; color: var(--primary-color); font-weight: 600;">Summary Poster (NotebookLM)</summary>
<div style="margin-top: 1rem;">
<a href="assets/documents/master_thesis_summary_poster.png" target="_blank" style="display: block; margin-bottom: 0.75rem;">
<img src="assets/documents/master_thesis_summary_poster.png" alt="Master Thesis Summary Poster" style="width: 100%; border-radius: var(--border-radius); border: 1px solid var(--border-color); cursor: pointer; transition: var(--transition);" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
</a>
<a href="assets/documents/master_thesis_summary_poster.png" download="Master_Thesis_Summary_Poster.png" class="btn btn-secondary" style="width: 100%; text-align: center;">Download Poster</a>
</div>
</details>
</div>
</div>
<div class="card">
<h4>Curriculum Vitae</h4>
<p style="color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1rem;">
Complete academic and professional background
</p>
<a href="assets/documents/CV Johannes Dreckhoff.pdf" target="_blank" class="btn btn-primary">Download CV</a>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery">
<div class="container">
<div class="section-header">
<h2>Gallery</h2>
<p>Some snapshots from my life and travels</p>
</div>
<div class="gallery-grid">
<div class="gallery-item">
<img src="assets/gallery/sending_love.jpeg" alt="Sending love in Elsass" loading="lazy">
<div class="gallery-overlay">
<h4>Elsass</h4>
<p>Sending a heart to my dear friends</p>
</div>
</div>
<div class="gallery-item">
<img src="assets/gallery/doing_research.jpeg" alt="Research work" loading="lazy">
<div class="gallery-overlay">
<h4>Doing Research</h4>
<p>While maintaining top posture</p>
</div>
</div>
<div class="gallery-item">
<img src="assets/gallery/in_a_church.jpeg" alt="In a church" loading="lazy">
<div class="gallery-overlay">
<h4>In a Church</h4>
<p>Where it was really quiet</p>
</div>
</div>
<div class="gallery-item">
<img src="assets/gallery/wet_heidelberg.jpeg" alt="Wet Heidelberg" loading="lazy">
<div class="gallery-overlay">
<h4>Wet Heidelberg</h4>
<p>After some very rainy days</p>
</div>
</div>
</div>
</div>
</section>
<!-- Places Teaser Section -->
<section id="places-teaser" style="background: var(--background-primary);">
<div class="container">
<div class="section-header">
<h2>Places I Dream of Visiting</h2>
<p>Exploring beautiful destinations around the world</p>
</div>
<div class="bio-content" style="text-align: center;">
<p>
I've always been fascinated by different cities and cultures around the world. I've compiled a collection
of places I've visited or dream of exploring, complete with live weather updates and local times to help
imagine what it's like to be there right now.
</p>
<a href="places.html" class="btn btn-primary" style="margin-top: 1rem;">Explore Places</a>
</div>
</div>
</section>
<!-- Blog Preview Section -->
<section id="blog">
<div class="container">
<div class="section-header">
<h2>Thoughts & Writing</h2>
<p>Sharing ideas and reflections on science, life, and everything in between</p>
</div>
<div class="blog-preview-grid">
<div class="blog-card">
<h3><a href="blog/welcome.html">Welcome to My Blog</a></h3>
<div class="blog-meta">February 4, 2026 · 2 min read</div>
<p class="blog-excerpt">
This is the beginning of my writing journey. I plan to share thoughts on physics, research,
books I'm reading, and interesting things I come across. Stay tuned for more!
</p>
<a href="blog/welcome.html" class="read-more">Read more →</a>
</div>
<!-- More blog posts will be added here -->
</div>
<div style="text-align: center; margin-top: 2rem;">
<a href="blog/index.html" class="btn btn-secondary">View All Posts</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="section-header">
<h2>Get in Touch</h2>
<p>Let's connect and have a conversation</p>
</div>
<div class="contact-container">
<div class="contact-links">
<h3>Find me online</h3>
<ul class="social-links">
<li><a href="https://github.com/Dreckhoff" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/johannes-dreckhoff/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
<li><a href="https://www.hackerrank.com/profile/jdreckhoff" target="_blank" rel="noopener noreferrer">HackerRank</a></li>
</ul>
</div>
<form action="https://formspree.io/f/xwpqyepk" method="POST">
<h3 style="text-align: center; margin-bottom: 1.5rem;">Send me a message</h3>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="_replyto" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2026 Johannes Dreckhoff. All rights reserved.</p>
<p><a href="impressum.html">Impressum</a></p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>