-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (155 loc) · 4.06 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
<!DOCTYPE html>
<html>
<head>
<title>Savir Singh - Official Website</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="icon" href="whitelogo.png">
<style>
::-moz-selection {
color: white;
background: #000436;
}
::selection {
color: white;
background: #000436;
}
@font-face {
font-family: Font;
src: url(Font.woff);
}
body {
background-color: white;
font-family: Font;
}
p {
font-size: 20px;
}
.logo {
border-radius: 50%;
border: black 1px solid;
margin-left: 20px;
margin-top: 20px;
}
.phonelogo {
border-radius: 50%;
border: black 1px solid;
margin-left: 20px;
margin-top: 20px;
}
.current {
color: black;
text-decoration: underline;
margin-left: 24px;
font-size: 22px;
}
.profilelink {
color: black;
text-decoration: underline;
margin-left: 24px;
font-size: 22px;
}
.info {
color: black;
margin-left: 24px;
font-size: 22px;
}
#card {
position: fixed;
}
#messylinks {
position: fixed;
margin-left: 82%;
margin-top: 20px;
}
#messylinks a {
color: black;
font-size: 20px;
}
#maincontent {
margin-top: 20px;
width: 60%;
line-height: 1.6;
}
#maincontent a {
color: #2596be;
}
a:hover {
opacity: 0.6;
border: black 1px dotted;
}
img:hover {
opacity: 0.6;
}
@media only screen and (max-width: 600px) {
#card {
display:none;
}
#messylinks {
display:none;
}
.phonelogo {
display:block;
}
#desktoponly {
display:none;
}
}
@media only screen and (min-width: 600px) {
.phonelogo {
display:none;
}
#mobile-hamburger {
display: none;
}
}
#mobile-card {
display: none;
}
#mobile-hamburger {
border: 1px solid blue;
background-color: white;
height:50px;
width:50px;
}
</style>
</head>
<body>
<div id="card">
<img class="logo" width="160px" src="logo.png"><br><br>
<b class="info">Savir Singh</b><br><br>
<a class="current">Home</a> [Current]<br><br>
<a class="profilelink" href="/projects">Projects</a><br><br>
<a class="profilelink" href="/contact">Contact</a><br><br>
<a class="profilelink" href="/resume">Résumé</a>
</div>
<div id="messylinks">
<a target="_blank" href="/contact">- Contact me!</a><br><br>
<a target="_blank" href="https://github.com/savirsingh">- Visit my GitHub!</a><br><br>
</div>
<center><img class="phonelogo" width="160px" src="logo.png"></center><button onclick="toggle_mobile()" id="mobile-hamburger" style="font-size: 30px; float: right">☰</button>
<div id="mobile-card">
<br><a class="profilelink" href="/projects">Projects</a>
<a class="profilelink" href="/contact">Contact</a>
<a class="profilelink" href="/resume">Résumé</a>
</div>
<center><div id="maincontent">
<div id="desktoponly"><br><br><br><br></div><br><h1>Hey, I'm Savir!</h1>
<br><p>I'm a high school student from Canada. I love developing software, creating new technologies, competitive programming, and math, just to name a few things.</p>
<p>I have many major achievements, including winning <a href="https://mycodeclub.io" target="_blank">My Code Club</a>'s Code-A-Thon, placing 1<sup>st</sup> place in <a target="_blank" href="https://peo-mc.ca">
PEO Mississauga Chapter</a>'s High School Coding Contest two years in a row and their annual Mathletics in 2020, as well as achieving a certificate of distinction in the University of Waterloo's Fryer Mathematics Contest 2022.</p>
<p>When I'm not writing code or solving problems, I'm either reading, doing homework, writing programming editorials, or out for a walk.</p>
<p>Since you're already here, you might as well check out <a href="/projects" target="_blank">my projects</a> and <a href="/blog" target="_blank">my active blog</a>. You can also see <a href="/contact" target="_blank">my contact info</a>.</p>
<small>© 2022 Savir Singh. Website front end written 100% in HTML/CSS by me.</small>
</div></center>
<script>
function toggle_mobile() {
if (document.getElementById("mobile-card").style.display=="none") {
document.getElementById("mobile-card").style.display="block";
}
else {
document.getElementById("mobile-card").style.display="none";
}
}
</script>
</body>
</html>