-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (132 loc) · 3.99 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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Jotham Wong</title>
<style>
:root {
/* Light theme */
--primary-bg-color: #f5f5f5;
--primary-text-color: #333;
--link-color: #1678c2;
--hr-color: #ccc;
}
body {
font-family: "Palanquin", monospace;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
background-color: var(--primary-bg-color);
color: var(--primary-text-color);
}
.container {
width: 50%;
max-width: 66.66%; /* 2/3 of the viewport width */
padding: 0; /* no padding on the sides */
margin: 2em auto;
text-align: left; /* Left-justify the text */
}
a {
color: var(--link-color);
}
nav a {
margin-right: 1em;
}
nav a:last-child {
margin-right: 0;
}
hr {
border: 1px solid var(--hr-color);
width: 100%; /* make the line fill up the full width */
}
.name {
font-size: 1.5rem;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.centered-content {
display: flex;
flex-direction: column;
justify-content: start;
height: 100%;
}
h1,
h2,
p,
ul {
margin-top: 0.5em; /* adds some vertical space between text elements */
margin-bottom: 0.1em; /* adds some vertical space between text elements */
}
/* Media queries for responsiveness */
@media (max-width: 800px) {
.container {
width: 100%;
}
nav a {
margin-right: 0.5em;
}
}
button {
background-color: var(--primary-bg-color);
color: var(--primary-text-color);
border: 2px solid var(--link-color);
padding: 2px;
font-size: 1rem;
width: 2em;
height: 2em;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
outline: none;
}
button:hover {
background-color: var(--link-color);
color: var(--primary-bg-color);
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Comic+Neue"
rel="stylesheet"
/>
</head>
<body>
<div class="container centered-content">
<div class="header">
<div class="name">Jotham Wong</div>
<nav>
<a href="./">about</a>
</nav>
</div>
<hr />
<h2>About</h2>
<p>
Hello! I am Jotham Wong and I am working towards my dream of becoming a professor. I am interested in systems research, notably distributed systems, cloud computing as well as low level computer architecture. I am currently working on a stream processing engine for my UROP. In a previous life, I was a software engineering intern at a Chinese social media company, a Southeast Asian food delivery company and a New York trading firm.
</p>
<h2>Life goals</h2>
<p>
Go to a nice grad school.
Come back to NUS as a professor and teach CS4225.
Demolish the bell curve.
Remove all MRQ and MCQ exam formats.
The ideal exam format is a mix of short answer questions as well as fair format questions.
Fair format questions involve a final answer and workings. If final answer is right, we are done. If it's not, award marks based on workings.
I also want to work on meaningful projects and write beautiful papers that people will read.
Have meaningful collaborations with smart students and industry researchers. SystemsResearch@Google is a goal.
</p>
<hr />
<img src="./turtle.jpg">
This turtle represents me.
</div>
</body>
</html>