-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
348 lines (308 loc) · 16.3 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
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ben's Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="terminal">
<div id="output"></div>
<div class="input-line">
<span class="prompt">></span>
<input type="text" id="input" autofocus style="width: 40ch;">
<span class="blinking-cursor"></span>
</div>
</div>
<script>
const input = document.getElementById('input');
const cursor = document.querySelector('.blinking-cursor');
const output = document.getElementById('output');
function isMobileDevice() {
return (window.innerWidth <= 768) ||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
if (isMobileDevice() && !window.location.href.includes('modern_index.html')) {
window.location.href = 'modern_index.html';
}
let currentColorScheme = 'green';
const colorSchemes = {
green: { primary: '#0f0', background: '#000' },
slate: { primary: '#94a3b8', background: '#020617' },
purple: { primary: '#c084fc', background: '#2e1065' },
blue: { primary: '#60a5fa', background: '#172554' },
red: { primary: '#f87171', background: '#450a0a' },
orange: { primary: '#fb923c', background: '#431407' },
yellow: { primary: '#fbbf24', background: '#422006' }
};
function applyColorSchemeToButtons() {
const scheme = colorSchemes[currentColorScheme];
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
const onclickHandler = button.getAttribute('onclick');
button.style.backgroundColor = 'transparent';
button.style.color = scheme.primary;
button.style.borderColor = scheme.primary;
const newButton = document.createElement('button');
newButton.className = 'button';
newButton.innerHTML = button.innerHTML;
if (onclickHandler) {
newButton.setAttribute('onclick', onclickHandler);
}
newButton.style.color = scheme.primary;
newButton.style.borderColor = scheme.primary;
const mouseenterHandler = () => {
newButton.style.backgroundColor = scheme.primary;
newButton.style.color = scheme.background;
};
const mouseleaveHandler = () => {
newButton.style.backgroundColor = 'transparent';
newButton.style.color = scheme.primary;
};
newButton.addEventListener('mouseenter', mouseenterHandler);
newButton.addEventListener('mouseleave', mouseleaveHandler);
button.parentNode.replaceChild(newButton, button);
});
}
function changeColorScheme(colorName) {
const scheme = colorSchemes[colorName];
if (!scheme) return false;
currentColorScheme = colorName;
document.body.style.backgroundColor = scheme.background;
document.body.style.color = scheme.primary;
const terminal = document.querySelector('.terminal');
terminal.style.borderColor = scheme.primary;
input.style.color = scheme.primary;
cursor.style.backgroundColor = scheme.primary;
applyColorSchemeToButtons();
return true;
}
function clearTerminal() {
output.innerHTML = '';
}
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
function typeText(text, callback) {
let index = 0;
const input = document.getElementById('input');
input.disabled = true;
const interval = setInterval(() => {
if (index < text.length) {
input.value += text[index];
updateCursor();
scrollToBottom();
index++;
} else {
clearInterval(interval);
input.disabled = false;
input.focus();
if (callback) callback();
}
}, 50);
}
function simulateEnterWithButtons(commandOutput = "") {
const command = input.value;
output.innerHTML += `<div><span class="prompt">></span> ${command}</div>`;
if (commandOutput) {
const links = " " + commandOutput.split(" ").map(page => {
return `<button class="button" onclick="navigateTo('${page}')">${page}</button>`;
}).join(" ");
output.innerHTML += `<div>${links}</div>`;
applyColorSchemeToButtons();
}
input.value = '';
updateCursor();
scrollToBottom();
}
function simulateEnterWithText(command, commandOutput = "") {
output.innerHTML += `<div><span class="prompt">></span> ${command}</div>`;
if (commandOutput) {
output.innerHTML += `<div>${commandOutput}</div>`;
applyColorSchemeToButtons();
}
input.value = '';
updateCursor();
scrollToBottom();
}
function navigateTo(page, commandRaw = "") {
if (commandRaw === "") {
commandRaw = page;
}
if (page === "CV") {
output.innerHTML += `<div><span class="prompt">></span> ${commandRaw}</div>`;
window.open('CV.pdf', '_blank');
} else {
simulateEnterWithText(commandRaw, pageText[page]);
applyColorSchemeToButtons();
}
input.focus();
scrollToBottom();
}
function handleSocialCommand(commandRaw) {
const command = commandRaw.toLowerCase();
const socialLinks = {
"twitter": "https://twitter.com/ML_BenWalker",
"bluesky": "https://bsky.app/profile/benjamincwalker.bsky.social",
"linkedin": "https://www.linkedin.com/in/benjamin-walker-3880771b9/",
"github": "https://github.com/Benjamin-Walker"
};
if (command in socialLinks) {
window.open(socialLinks[command]);
simulateEnterWithText(commandRaw);
}
}
const pageText = {
"About": `<u>Current Position</u>
I am a PhD student in Mathematics at the University of Oxford, supervised by Terry Lyons. I currently hold a Lectureship in Applied Mathematics at Balliol College.
<u>Research Interests</u>
My research focuses on machine learning for sequential data, particularly in developing theoretically principled approaches to time series modeling. Additional interests include generative modelling and machine learning in healthcare.
<u>Academic Background</u>
- DPhil Mathematics, University of Oxford (2022-2025)
- MSc Mathematical Modelling and Scientific Computing, University of Oxford (2020-2021), Distinction
- MMaths&Physics, University of Manchester (2016-2020), First Class Honours
<u>Teaching Experience</u>
- Lecturer in Applied Mathematics at Balliol College
- Course Author and Teacher for the MSc in MMSC Introduction to Python
- Supervised multiple Master's theses, including a prize-winning dissertation and work published at Machine Learning for Healthcare
<u>Awards and Recognition</u>
- 1st Place in the George B. Moody Physionet Challenge 2024
- Publications at top ML conferences including ICML and NeurIPS
- MMaths&Physics highest dissertation grade
- Raised £7000 for Cancer Research UK hiking 942 miles from John O'Groats to Land's End`,
"Research": `My research interests include time series, neural differential equations, generative modeling, and machine learning in healthcare. My recent publications include:
1. <button class='button' onclick="window.open('https://arxiv.org/abs/2402.18512')">Log Neural Controlled Differential Equations: The Lie Brackets Make a Difference</button>
International Conference on Machine Learning (2024)
Authors: B. Walker, A. D. McLeod, T. Qin, Y. Cheng, H. Li, T. Lyons
2. <button class='button' onclick="window.open('https://arxiv.org/abs/2402.19047')">Theoretical Foundations of Deep Selective State-Space Models</button>
Neural Information Processing Systems (2024)
Authors: N. M. Cirone, A. Orvieto, B. Walker, C. Salvi, T. Lyons
3. <button class='button' onclick="window.open('https://cinc.org/archives/2024/pdf/CinC2024-097.pdf')">Combining Hough Transform and Deep Learning Approaches to Reconstruct ECG Signals From Printouts</button>
Computing in Cardiology (2024)
Authors: F. Krones, B. Walker, T. Lyons, A. Mahdi
4. <button class='button' onclick="window.open('https://proceedings.mlr.press/v219/naseer23a.html')">ScoEHR: Generating Synthetic Electronic Health Records</button>
Machine Learning for Healthcare (2023)
Authors: A. A. Naseer, B. Walker, C. Landon, A. Ambrosy, M. Fudim, N. Wysham, B. Toro, S. Swaminathan, T. Lyons
5. <button class='button' onclick="window.open('https://ieeexplore.ieee.org/abstract/document/10081848/')">Dual Bayesian ResNet: A Deep Learning Approach to Heart Murmur Detection</button>
Computing in Cardiology (2022)
Authors: B. Walker, F. Krones, I. Kiskin, G. Parsons, T. Lyons, A. Mahdi`,
"Code": `My open-source projects are organised into the following categories:
<u>Machine Learning Research</u>
1. <button class='button' onclick="window.open('https://github.com/Benjamin-Walker/log-neural-cdes')">Log Neural CDEs</button>
Implementation of Log Neural Controlled Differential Equations (ICML 2024)
Key features: Efficient training of Neural CDEs using the Log-ODE method in Jax
2. <button class='button' onclick="window.open('https://github.com/Benjamin-Walker/selective-ssms-and-linear-cdes')">SSMs and Linear NCDEs</button>
Theoretical Foundations of Deep Selective State-Space Models (NeurIPS 2024)
Key features: Linear CDEs and Selective SSMs in Jax
<u>Healthcare Applications</u>
3. <button class='button' onclick="window.open('https://github.com/Benjamin-Walker/heart-murmur-detection')">Heart Murmur Detection</button>
Dual Bayesian ResNet for Heart Murmur Detection from Phonocardiograms (CinC 2022)
Key features: Audio processing and Bayesian deep learning in PyTorch
<u>Generative Models</u>
4. <button class='button' onclick="window.open('https://github.com/Benjamin-Walker/diffrax-diffusion-models')">Diffrax Diffusion Models</button>
Score-based diffusion models implemented in JAX
Key Features: VP-SDE diffusion model
<u>Personal Projects</u>
5. <button class='button' onclick="window.open('https://github.com/Benjamin-Walker/live-vinyl-display')">Live Vinyl Display</button>
Real-time music recognition system for vinyl records
Key features: Audio fingerprinting, metadata retrieval, and live visualisation
6. <button class='button' onclick="window.open('https://github.com/Benjamin-Walker/benjamin-walker.github.io')">Personal Website</button>
This website's source code
Key features: Terminal-style interface and modern webpage design`,
"Social": " <button class='button' onclick=\"window.open('https://twitter.com/ML_BenWalker')\">Twitter</button> <button class='button' onclick=\"window.open('https://bsky.app/profile/benjamincwalker.bsky.social')\">Bluesky</button> <button class='button' onclick=\"window.open('https://www.linkedin.com/in/benjamin-walker-3880771b9/')\">LinkedIn</button> <button class='button' onclick=\"window.open('https://github.com/Benjamin-Walker')\">GitHub</button>"
};
// Initial animation
window.onload = () => {
typeText("Welcome to Benjamin Walker's website", () => {
simulateEnterWithButtons();
setTimeout(() => {
typeText("colour slate", () => {
simulateEnterWithButtons();
changeColorScheme('slate')
setTimeout(() => {
typeText("pages", () => {
simulateEnterWithButtons("About CV Research Code Social");
});
}, 500);
});
}, 500);
});
};
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const commandRaw = input.value.trim();
const commandParts = commandRaw.toLowerCase().split(' ');
const command = commandParts[0];
const commands = {
"pages": "Displays all available pages.",
"about": "Who I am and what I do",
"cv": "Opens my CV in a new tab.",
"research": "Highlights some recent research and publications.",
"code": "Lists my coding projects.",
"social": "Displays social media links.",
"twitter": "Opens my Twitter profile.",
"bluesky": "Opens my Bluesky profile.",
"linkedin": "Opens my LinkedIn profile.",
"github": "Opens my GitHub profile.",
"colour": "Changes the colour scheme. Usage: colour [green|slate|purple|blue|red|orange|yellow]",
"modernise": "Switches to modern website view",
"clear": "Clears the terminal screen.",
"exit": "Reloads the website.",
"help": "Displays this help message with a list of all commands.",
};
if (command === "clear") {
clearTerminal();
} else if (command === "pages") {
simulateEnterWithButtons(" About CV Research Code Social");
} else if (command === "cv") {
navigateTo("CV", commandRaw);
} else if (command in {"about": true, "research": true, "code": true, "social": true}) {
navigateTo(command.charAt(0).toUpperCase() + command.slice(1), commandRaw);
} else if (command in {"twitter": true, "bluesky": true, "linkedin": true, "github": true}) {
handleSocialCommand(commandRaw);
} else if (command === "exit") {
output.innerHTML += `<div><span class="prompt">></span> ${commandRaw}</div>`;
location.reload();
} else if (command === "help") {
const helpMessage = Object.entries(commands)
.map(([cmd, desc]) => `- ${cmd}: ${desc}`)
.join("\n");
simulateEnterWithText("help", helpMessage);
} else if (command === "colour") {
const colorName = commandParts[1];
if (!colorName) {
simulateEnterWithText(commandRaw, "Usage: colour [green|slate|purple|blue|red|orange|yellow]");
} else if (changeColorScheme(colorName)) {
simulateEnterWithText(commandRaw, `Color scheme changed to ${colorName}`);
} else {
simulateEnterWithText(commandRaw, `Invalid color scheme. Available options: ${Object.keys(colorSchemes).join(', ')}`);
}
} else if (command === "modernise") {
output.innerHTML += `<div><span class="prompt">></span> ${commandRaw}</div>`;
window.location.href = 'modern_index.html';
} else {
simulateEnterWithText(commandRaw, "Command not recognised. Type 'help' to get a list of available commands.");
}
input.value = '';
updateCursor();
}
});
input.addEventListener('input', updateCursor);
function updateCursor() {
const textWidth = getTextWidth(input.value, window.getComputedStyle(input).font);
cursor.style.transform = `translateX(${textWidth}px)`;
}
function getTextWidth(text, font) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = font;
return context.measureText(text).width;
}
updateCursor();
document.body.addEventListener('click', () => {
input.focus();
});
</script>
</body>
</html>