Skip to content

Commit 0bec418

Browse files
DreckhoffDreckhoff
committed
updated my cv
1 parent 943bd77 commit 0bec418

4 files changed

Lines changed: 251 additions & 17 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎cv.pdf‎

30 Bytes
Binary file not shown.

‎index.html‎

Lines changed: 114 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,29 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Dreckhoff — Personal Website</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
1010
<header>
11-
<h1>Dreckhoff</h1>
11+
<h1>Johannes Dreckhoff</h1>
1212
<nav>
1313
<a href="#bio">Bio</a>
1414
<a href="#publications">Publications</a>
1515
<a href="#cv">CV</a>
1616
<a href="#contact">Contact</a>
1717
</nav>
18+
<button id="theme-toggle" aria-label="Toggle dark mode">🌙</button>
1819
</header>
1920

2021
<section id="bio">
2122
<h2>About Me</h2>
2223
<p>Hi, my name is Johannes, welcome to my website. I am a physics student at the university of Heidelberg, Germany. Currently, I am
23-
writing my master thesis in theoretical biophysics in the Schwarz group at the BioQuant.</p>
24+
writing my master thesis in theoretical biophysics in the Schwarz group at the BioQuant. <br />
25+
26+
This website is a little project of mine, all work-in-progress. <br />
27+
</p>
2428
</section>
2529

2630

@@ -86,7 +90,38 @@ <h3 id="master-thesis">Master Thesis</h3>
8690

8791
<section id="cv">
8892
<h2>Curriculum Vitae</h2>
89-
<p><a href="cv.pdf" download>Download my CV (PDF)</a></p>
93+
<h3><a href="cv.pdf" download> Download my compact CV (PDF)</a> or read a bit about me here:</h3>
94+
<p> I was born on the 18th of January 2001 in Düsseldorf, Germany. I went to school at the <a href="https://tfg-duesseldorf.ekir.de">Theodor Fliedner Gymnasium</a>
95+
and completed my Abitur in 2019. After that, I immediately moved to Heidelberg to study physics.
96+
<br />
97+
I completed my bachelor in 2023, writing my thesis under the supervision of Prof. Dr. Andreas Mielke on pattern formation
98+
in lipid membranes. During my bachelor, I completed an exchange semester at the <a href="https://www.universiteitleiden.nl/en">University of Leiden</a>, Netherlands.
99+
Besides meeting awesome people there, I got to experience the Dutch culture. From an academic perspective, I got the opportunity
100+
to attend courses on the physics of finance, which I found particularly interesting.
101+
<br />
102+
103+
After handing in my bachelor thesis, I immediately started my master in Heidelberg. I entered the group of <a href="https://www.thphys.uni-heidelberg.de/~biophys/">Prof. Dr.
104+
Ulrich Schwarz</a> at the BioQuant, since I really liked the topic of theoretical biophysics during my bachelor. This is where
105+
I am currently writing my master thesis on the curvature generation in clathrin-mediated endocytosis.
106+
<br />
107+
108+
Besides my studies, I started playing ultimate frisbee in the last year which I really enjoy. I like cats, but love dogs even more.
109+
I think Star Wars is better than Star Trek, and I love the Game of Thrones books. To cope with the missing 6th book, I started
110+
reading the Wheel of Time, currently ongoing.
111+
112+
</p>
113+
114+
115+
116+
</section>
117+
118+
<section id="other-links">
119+
<h2>Other Links</h2>
120+
<ul>
121+
<li><p> Find my code on <a href="https://github.com/Dreckhoff" target="_blank" rel="noopener noreferrer">GitHub</a></p></li>
122+
<li><p> Visit me on <a href="https://www.linkedin.com/in/johannes-dreckhoff/" target="_blank" rel="noopener noreferrer">LinkedIn</a></p></li>
123+
<li><p> Code with me on <a href="https://www.hackerrank.com/profile/jdreckhoff" target="_blank" rel="noopener noreferrer">HackerRank</a></p></li>
124+
</ul>
90125
</section>
91126

92127
<section id="contact">
@@ -114,5 +149,80 @@ <h2>Contact Me</h2>
114149
</footer>
115150

116151

152+
153+
154+
<script>
155+
const toggleButton = document.getElementById('theme-toggle');
156+
157+
// Apply saved theme on load
158+
const savedTheme = localStorage.getItem('theme');
159+
if (savedTheme) {
160+
document.body.classList.add(savedTheme);
161+
} else {
162+
// No saved theme → follow system preference
163+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
164+
document.body.classList.add('dark-mode');
165+
}
166+
}
167+
168+
// Handle button click
169+
toggleButton.addEventListener('click', () => {
170+
if (document.body.classList.contains('dark-mode')) {
171+
document.body.classList.remove('dark-mode');
172+
document.body.classList.add('light-mode');
173+
localStorage.setItem('theme', 'light-mode');
174+
toggleButton.textContent = '🌙';
175+
} else {
176+
document.body.classList.remove('light-mode');
177+
document.body.classList.add('dark-mode');
178+
localStorage.setItem('theme', 'dark-mode');
179+
toggleButton.textContent = '☀️';
180+
}
181+
});
182+
</script>
183+
184+
185+
<script>
186+
function smoothScrollTo(targetY, duration = 800) {
187+
const startY = window.pageYOffset;
188+
const distance = targetY - startY;
189+
let startTime = null;
190+
191+
function animation(currentTime) {
192+
if (!startTime) startTime = currentTime;
193+
const timeElapsed = currentTime - startTime;
194+
const progress = Math.min(timeElapsed / duration, 1);
195+
196+
// easeInOutCubic easing function
197+
const ease = progress < 0.5
198+
? 4 * progress * progress * progress
199+
: 1 - Math.pow(-2 * progress + 2, 3) / 2;
200+
201+
window.scrollTo(0, startY + distance * ease);
202+
203+
if (timeElapsed < duration) {
204+
requestAnimationFrame(animation);
205+
}
206+
}
207+
requestAnimationFrame(animation);
208+
}
209+
210+
document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
211+
anchor.addEventListener('click', function (e) {
212+
e.preventDefault();
213+
const targetID = this.getAttribute('href').substring(1);
214+
const target = document.getElementById(targetID);
215+
if (!target) return;
216+
217+
const headerOffset = document.querySelector('header').offsetHeight;
218+
const elementPosition = target.getBoundingClientRect().top;
219+
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
220+
221+
smoothScrollTo(offsetPosition, 500); // Duration in ms, here 1000 = 1 second
222+
});
223+
});
224+
</script>
225+
226+
117227
</body>
118228
</html>

‎style.css‎

Lines changed: 137 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,47 @@
1+
/* ===== Base Styles ===== */
12
body {
2-
font-family: Arial, sans-serif;
3-
max-width: 700px;
4-
margin: 2rem auto;
5-
padding: 0 1rem;
6-
line-height: 1.6;
7-
color: #333;
8-
background: #f9f9f9;
3+
font-family: Arial, sans-serif; /* Sets font */
4+
max-width: 700px; /* Limits width on large screens */
5+
margin: 2rem auto; /* Centers content horizontally */
6+
padding: 0 1rem; /* Space inside the edges */
7+
line-height: 1.6; /* Improves text readability */
8+
color: #333; /* Dark gray text */
9+
background: #f9f9f9; /* Light background */
910
}
1011

1112
header {
12-
text-align: center;
13-
margin-bottom: 2rem;
13+
position: sticky;
14+
top: 0;
15+
background: white;
16+
z-index: 1000;
17+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
18+
padding: 1rem 0;
19+
text-align: center; /* Center all text inside */
1420
}
1521

1622
header h1 {
17-
margin-bottom: 0.2rem;
23+
margin: 0 0 0.5rem 0;
24+
}
25+
26+
/* Keep nav links centered below the name */
27+
nav {
28+
display: inline-flex; /* Inline-flex so nav shrinks to content width */
29+
justify-content: center;
30+
gap: 1rem;
31+
flex-wrap: wrap;
32+
margin: 0 auto; /* Center nav horizontally */
33+
}
34+
35+
36+
37+
html {
38+
scroll-behavior: smooth;
1839
}
1940

41+
42+
43+
2044
nav a {
21-
margin: 0 1rem;
2245
text-decoration: none;
2346
color: #007acc;
2447
}
@@ -27,6 +50,7 @@ nav a:hover {
2750
text-decoration: underline;
2851
}
2952

53+
/* ===== Section Boxes ===== */
3054
section {
3155
background: white;
3256
padding: 1rem 1.5rem;
@@ -41,8 +65,10 @@ h2 {
4165
margin-bottom: 1rem;
4266
}
4367

44-
form input, form textarea {
45-
width: 100%;
68+
/* ===== Forms ===== */
69+
form input,
70+
form textarea {
71+
width: 100%; /* Make inputs take full width */
4672
padding: 0.5rem;
4773
margin-bottom: 1rem;
4874
border: 1px solid #ccc;
@@ -64,9 +90,107 @@ button:hover {
6490
background-color: #005fa3;
6591
}
6692

93+
/* ===== Footer ===== */
6794
footer {
6895
text-align: center;
6996
font-size: 0.9rem;
7097
color: #777;
7198
margin-top: 3rem;
7299
}
100+
101+
/* Dark mode link colors */
102+
body.dark-mode a {
103+
color: #4da3ff; /* Bright blue for unvisited links */
104+
}
105+
106+
body.dark-mode a:visited {
107+
color: #9b6aff; /* Softer purple/blue for visited links */
108+
}
109+
110+
body.dark-mode a:hover {
111+
color: #82cfff; /* Lighter blue on hover */
112+
}
113+
114+
/* Light mode visited link color */
115+
body a:visited {
116+
color: #551a8b; /* Example: deeper purple for light mode */
117+
}
118+
119+
120+
/* ===== Responsive Design ===== */
121+
@media (max-width: 600px) {
122+
body {
123+
font-size: 16px; /* Slightly bigger text for readability */
124+
padding: 0 0.5rem; /* Less padding on very small screens */
125+
}
126+
127+
nav {
128+
flex-direction: column; /* Stack navigation vertically */
129+
align-items: center; /* Center each link */
130+
}
131+
132+
nav a {
133+
display: block; /* Make links take up their own row */
134+
margin: 0.5rem 0; /* Space between stacked links */
135+
}
136+
137+
section {
138+
padding: 1rem; /* Slightly smaller padding */
139+
}
140+
141+
img, video, audio {
142+
max-width: 100%; /* Make media scale to fit screen */
143+
height: auto;
144+
}
145+
}
146+
147+
148+
/* Theme toggle button style */
149+
#theme-toggle {
150+
position: absolute;
151+
top: 1rem;
152+
right: 1rem;
153+
background: none;
154+
border: none;
155+
font-size: 1.5rem;
156+
cursor: pointer;
157+
}
158+
159+
/* Dark mode overrides */
160+
body.dark-mode {
161+
background: #121212;
162+
color: #ddd;
163+
}
164+
165+
body.dark-mode section {
166+
background: #1e1e1e;
167+
box-shadow: 0 0 5px #000;
168+
}
169+
170+
body.dark-mode nav a {
171+
color: #4da3ff;
172+
}
173+
174+
body.dark-mode nav a:hover {
175+
color: #82cfff;
176+
}
177+
178+
body.dark-mode h2 {
179+
border-bottom: 2px solid #4da3ff;
180+
}
181+
182+
body.dark-mode button {
183+
background-color: #4da3ff;
184+
}
185+
186+
body.dark-mode button:hover {
187+
background-color: #82cfff;
188+
}
189+
190+
/* Auto dark mode if no preference is saved */
191+
@media (prefers-color-scheme: dark) {
192+
body:not(.light-mode) {
193+
background: #121212;
194+
color: #ddd;
195+
}
196+
}

0 commit comments

Comments
 (0)