-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
365 lines (325 loc) · 17.1 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
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<!DOCTYPE html>
<html>
<head>
<title>Mukul Singh</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">
<style type="text/css">
body { background: #fff; margin: 0; }
canvas { opacity: 0.2;
margin: 0; position: fixed; width: 100%; height: 100%;
top: 0; left: 0; z-index: -1;
}
div#background {
position: fixed;
background-color: #fff;
top: 0; left: 0; width: 100%; height: 100%;
z-index: -2;
}
div#projects-container {
background-color: transparent;
}
article {
padding: 10vmin 5vmin 0;
}
article #projects-container {
margin-top: 4rem;
margin-bottom: 4rem;
}
article #projects-container #projects {
display: flex;
flex-flow: row wrap;
justify-content: start;
row-gap: 3rem;
column-gap: 1rem;
margin-top: 2rem;
}
article #projects-container #projects .project {
flex-basis: 320px;
}
article #projects-container #projects .project a,
article #projects-container #projects .project span {
font-family: monospace;
}
article #projects-container h2 {
font-size: 3rem;
font-family: ui-monospace;
}
h1, h2, h3,
h6,
p,
a,
span {
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
width: 100%;
}
.name svg {
height: 100.61px;
}
a {
text-decoration: none;
color: #000;
}
h1 {
font-size: 6em;
margin-left: -.05em;
line-height: .9
}
h6 {
font-size: 1em;
color: #666;
}
.name {
display: inline-block;
}
.icon-link {
display: inline-block;
width: 24px;
height: 24px;
}
#email_addr {
display: inline-block;
border-bottom: 1px #888 solid;
margin-top: 8px;
height: 1.5em;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
}
div#background {
background-color: #1a1a1a;
}
h1, h2, h3, h4, h5, p, a, span {
color: #e4e4e4;
}
h6 {
color: #aaa;
}
svg {
fill: #e4e4e4;
}
}
</style>
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-twitter" viewBox="0 0 32 32">
<path
d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z">
</path>
</symbol>
<symbol id="icon-github" viewBox="0 0 32 32">
<path
d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z">
</path>
</symbol>
<symbol id="icon-linkedin" viewBox="0 0 50 50">
<path
d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z">
</path>
</symbol>
<symbol id="f-name" viewBox="421.013 5.508 128.122 30.419">
<path
d="M 453.814 35.353 L 446.534 35.353 L 446.454 20.513 L 439.254 32.593 L 435.734 32.593 L 428.574 20.913 L 428.574 35.353 L 421.254 35.353 L 421.254 7.353 L 427.774 7.353 L 437.614 23.513 L 447.214 7.353 L 453.734 7.353 L 453.814 35.353 ZM 474.24 13.673 L 481.84 13.673 L 481.84 35.353 L 474.6 35.353 L 474.6 33.033 C 473.8 33.913 472.84 34.58 471.72 35.033 C 470.6 35.486 469.413 35.713 468.16 35.713 C 465.36 35.713 463.127 34.886 461.46 33.233 C 459.793 31.58 458.96 29.1 458.96 25.793 L 458.96 13.673 L 466.56 13.673 L 466.56 24.553 C 466.56 26.18 466.867 27.366 467.48 28.113 C 468.093 28.86 468.987 29.233 470.16 29.233 C 471.36 29.233 472.34 28.813 473.1 27.973 C 473.86 27.133 474.24 25.846 474.24 24.113 L 474.24 13.673 ZM 502.63 35.353 L 496.55 27.753 L 494.31 30.033 L 494.31 35.353 L 486.71 35.353 L 486.71 5.673 L 494.31 5.673 L 494.31 21.233 L 502.07 13.673 L 511.07 13.673 L 502.07 22.953 L 511.83 35.353 L 502.63 35.353 ZM 528.94 13.673 L 536.54 13.673 L 536.54 35.353 L 529.3 35.353 L 529.3 33.033 C 528.5 33.913 527.54 34.58 526.42 35.033 C 525.3 35.486 524.114 35.713 522.86 35.713 C 520.06 35.713 517.827 34.886 516.16 33.233 C 514.494 31.58 513.66 29.1 513.66 25.793 L 513.66 13.673 L 521.26 13.673 L 521.26 24.553 C 521.26 26.18 521.567 27.366 522.18 28.113 C 522.794 28.86 523.687 29.233 524.86 29.233 C 526.06 29.233 527.04 28.813 527.8 27.973 C 528.56 27.133 528.94 25.846 528.94 24.113 L 528.94 13.673 ZM 541.41 35.353 L 541.41 5.673 L 549.01 5.673 L 549.01 35.353 L 541.41 35.353 Z">
</path>
</symbol>
<symbol id="l-name" viewBox="418.958 2.974 120.102 40.808">
<path
d="M 431.094 35.913 C 428.827 35.913 426.627 35.633 424.494 35.073 C 422.361 34.513 420.627 33.766 419.294 32.833 L 421.894 26.993 C 423.147 27.82 424.601 28.486 426.254 28.993 C 427.907 29.5 429.534 29.753 431.134 29.753 C 434.174 29.753 435.694 28.993 435.694 27.473 C 435.694 26.673 435.261 26.08 434.394 25.693 C 433.527 25.306 432.134 24.9 430.214 24.473 C 428.107 24.02 426.347 23.533 424.934 23.013 C 423.521 22.493 422.307 21.66 421.294 20.513 C 420.281 19.366 419.774 17.82 419.774 15.873 C 419.774 14.166 420.241 12.626 421.174 11.253 C 422.107 9.88 423.501 8.793 425.354 7.993 C 427.207 7.193 429.481 6.793 432.174 6.793 C 434.014 6.793 435.827 7 437.614 7.413 C 439.401 7.826 440.974 8.433 442.334 9.233 L 439.894 15.113 C 437.227 13.673 434.641 12.953 432.134 12.953 C 430.561 12.953 429.414 13.186 428.694 13.653 C 427.974 14.12 427.614 14.726 427.614 15.473 C 427.614 16.22 428.041 16.78 428.894 17.153 C 429.747 17.526 431.121 17.913 433.014 18.313 C 435.147 18.766 436.914 19.253 438.314 19.773 C 439.714 20.293 440.927 21.12 441.954 22.253 C 442.981 23.386 443.494 24.926 443.494 26.873 C 443.494 28.553 443.027 30.073 442.094 31.433 C 441.161 32.793 439.761 33.88 437.894 34.693 C 436.027 35.506 433.761 35.913 431.094 35.913 ZM 446.761 35.353 L 446.761 13.673 L 454.361 13.673 L 454.361 35.353 L 446.761 35.353 Z M 450.561 11.273 C 449.174 11.273 448.054 10.886 447.201 10.113 C 446.347 9.34 445.921 8.38 445.921 7.233 C 445.921 6.086 446.347 5.126 447.201 4.353 C 448.054 3.58 449.174 3.193 450.561 3.193 C 451.947 3.193 453.067 3.56 453.921 4.293 C 454.774 5.026 455.201 5.966 455.201 7.113 C 455.201 8.313 454.774 9.306 453.921 10.093 C 453.067 10.88 451.947 11.273 450.561 11.273 ZM 473.394 13.313 C 476.088 13.313 478.254 14.113 479.894 15.713 C 481.534 17.313 482.354 19.726 482.354 22.953 L 482.354 35.353 L 474.754 35.353 L 474.754 24.193 C 474.754 21.233 473.568 19.753 471.194 19.753 C 469.888 19.753 468.841 20.18 468.054 21.033 C 467.268 21.886 466.874 23.166 466.874 24.873 L 466.874 35.353 L 459.274 35.353 L 459.274 13.673 L 466.514 13.673 L 466.514 16.033 C 467.368 15.153 468.381 14.48 469.554 14.013 C 470.728 13.546 472.008 13.313 473.394 13.313 ZM 503.5 13.673 L 510.74 13.673 L 510.74 31.393 C 510.74 35.42 509.647 38.44 507.46 40.453 C 505.274 42.466 502.127 43.473 498.02 43.473 C 495.887 43.473 493.887 43.233 492.02 42.753 C 490.154 42.273 488.567 41.566 487.26 40.633 L 490.02 35.313 C 490.9 36.033 492.014 36.6 493.36 37.013 C 494.707 37.426 496.034 37.633 497.34 37.633 C 499.34 37.633 500.807 37.193 501.74 36.313 C 502.674 35.433 503.14 34.126 503.14 32.393 L 503.14 31.673 C 501.674 33.38 499.527 34.233 496.7 34.233 C 494.78 34.233 493.007 33.8 491.38 32.933 C 489.754 32.066 488.46 30.84 487.5 29.253 C 486.54 27.666 486.06 25.833 486.06 23.753 C 486.06 21.7 486.54 19.88 487.5 18.293 C 488.46 16.706 489.754 15.48 491.38 14.613 C 493.007 13.746 494.78 13.313 496.7 13.313 C 499.794 13.313 502.06 14.313 503.5 16.313 L 503.5 13.673 Z M 498.5 28.193 C 499.86 28.193 500.987 27.78 501.88 26.953 C 502.774 26.126 503.22 25.06 503.22 23.753 C 503.22 22.446 502.78 21.386 501.9 20.573 C 501.02 19.76 499.887 19.353 498.5 19.353 C 497.114 19.353 495.974 19.76 495.08 20.573 C 494.187 21.386 493.74 22.446 493.74 23.753 C 493.74 25.06 494.194 26.126 495.1 26.953 C 496.007 27.78 497.14 28.193 498.5 28.193 ZM 529.726 13.313 C 532.419 13.313 534.586 14.113 536.226 15.713 C 537.866 17.313 538.686 19.726 538.686 22.953 L 538.686 35.353 L 531.086 35.353 L 531.086 24.193 C 531.086 21.233 529.899 19.753 527.526 19.753 C 526.219 19.753 525.172 20.18 524.386 21.033 C 523.599 21.886 523.206 23.166 523.206 24.873 L 523.206 35.353 L 515.606 35.353 L 515.606 5.673 L 523.206 5.673 L 523.206 15.673 C 524.032 14.9 525.006 14.313 526.126 13.913 C 527.246 13.513 528.446 13.313 529.726 13.313 Z">
</path>
</symbol>
</defs>
</svg>
<canvas id="canvas" ></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
strokeColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? "#fff" : "#000";
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
if (event.matches) {
strokeColor = "#fff";
} else {
strokeColor = "#111";
}
})
var curve_array = [];
var curve = function(x1, y1, x2, y2,
x1dx, y1dy, x2dx, y2dy){
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.x1dx = x1dx;
this.y1dy = y1dy;
this.x2dx = x2dx;
this.y2dy = y2dy;
};
function canvasResize(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function canvasInit(){
for (var i = 0; i < 64; i++) {
var x1 = canvas.width * Math.random();
var y1 = canvas.height * Math.random();
var x2 = canvas.width * Math.random();
var y2 = canvas.height * Math.random();
var x1dx = (Math.random() * 2 - 1)/4;
var y1dy = (Math.random() * 2 - 1)/4;
var x2dx = (Math.random() * 2 - 1)/4;
var y2dy = (Math.random() * 2 - 1)/4;
curve_array.push(new curve(
x1, y1, x2, y2,
x1dx, y1dy, x2dx, y2dy
));
}
}
function canvasDraw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
ctx.strokeStyle = strokeColor;
for (var i = 0; i < curve_array.length ; i++) {
var curr_curve = curve_array[i];
ctx.beginPath();
ctx.moveTo(-100, canvas.height + 100);
ctx.bezierCurveTo(
curr_curve.x1, curr_curve.y1,
curr_curve.x2, curr_curve.y2,
canvas.width + 100, - 100
);
ctx.stroke();
if (curr_curve.x1 < 0 || curr_curve.x1 > canvas.width){
curr_curve.x1 -= curr_curve.x1dx;
curr_curve.x1dx *= -1;
}
if (curr_curve.y1 < 0 || curr_curve.y1 > canvas.height){
curr_curve.y1 -= curr_curve.y1dy;
curr_curve.y1dy *= -1;
}
if (curr_curve.x2 < 0 || curr_curve.x2 > canvas.width){
curr_curve.x2 -= curr_curve.x2dx;
curr_curve.x2dx *= -1;
}
if (curr_curve.y2 < 0 || curr_curve.y2 > canvas.height){
curr_curve.y2 -= curr_curve.y2dy;
curr_curve.y2dy *= -1;
}
curr_curve.x1 += curr_curve.x1dx;
curr_curve.y1 += curr_curve.y1dy;
curr_curve.x2 += curr_curve.x2dx;
curr_curve.y2 += curr_curve.y2dy;
curve_array[i] = curr_curve;
}
window.requestAnimationFrame(canvasDraw);
}
function myCanvas(){
canvasResize();
canvasInit();
canvasDraw();
}
function setScrollBehaviour(){
}
(function(){
setScrollBehaviour();
myCanvas();
window.addEventListener('resize', function () {
canvasResize();
curve_array = [];
canvasInit();
});
})();
</script>
<div id="background"></div>
<article>
<h1 class="name">
<svg>
<use xlink:href="#f-name"></use>
</svg>
<svg>
<use xlink:href="#l-name"></use>
</svg>
</h1><br><br>
<a class="icon-link" href="https://github.com/mukuzz" title="github" target="_blank">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#icon-github"></use>
</svg>
</a>
<a class="icon-link" href="https://twitter.com/mukuz_" title="twitter" style="margin-left: 12px;" target="_blank">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#icon-twitter"></use>
</svg>
</a>
<a class="icon-link" href="https://www.linkedin.com/in/mukul124/" title="linkedin" style="margin-left: 12px;" target="_blank">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#icon-linkedin"></use>
</svg>
</a><br>
<a id="email_addr" href="mailto:[email protected]" title="email">[email protected]</a>
<div id="projects-container">
<div><h2>PROJECTS</h2></div>
<div id="projects">
<div class="project">
<h3>Cars Showcase</h3><br>
<p>A Demo Website built with Next.js. The website allows for quick searching of cars based on their make and model and provides the user with the details of the car.</p><br>
<span style="font-family: monospace;">Tech Stack: Next.js | tailwind</span><br/>
<u><a href="https://cars.mukulsingh.in" target="_blank">Demo</a></u>
<span> — </span>
<u><a href="https://github.com/mukuzz/car_showcase" target="_blank">Source Code</a></u>
</div>
<div class="project">
<h3>Quality Assurance Dashboard</h3><br>
<p>Part of a whole solution to track quality of manufactured products in textile factory. It consists of a dashboard built in React.js to fetch data from backend APIs and display various reports.</p><br>
<span style="font-family: monospace;">Tech Stack: React.js</span><br/>
<u><a href="https://uazo.mukulsingh.in" target="_blank">Demo</a></u><span> — </span>
<u><a href="https://github.com/mukuzz/uazo_dashboard" target="_blank">Source Code</a></u>
</div>
<div class="project">
<h3>College Notice Bot</h3><br>
<p>Django Bot for telegram which scraps the college website every 10 mins and sends any new notices to a telegram channel</p><br>
<span style="font-family: monospace;">Tech Stack: Django</span><br/>
<u><a href="https://github.com/mukuzz/dsc_notice_bot" target="_blank">Source Code</a></u><span> — </span>
<u><a href="https://t.me/dyalsinghcollege" target="_blank">Telegram Channel</a></u>
</div>
<div class="project">
<h3>Uazo | Factory Floor QA Application</h3><br>
<p>A full stack solution to track quality of manufactured products in textile factory</p><br>
<span style="font-family: monospace;">Tech Stack: React.js | Django | Flutter</span><br/>
<u><a href="https://github.com/mukuzz/uazo_backend" target="_blank">Backend Code</a></u><span> — </span>
<u><a href="https://github.com/mukuzz/uazo_dashboard" target="_blank">Dashboard Code</a></u>
</div>
<div class="project">
<h3>Norae - Discord Music Bot</h3><br>
<p>A Discord bot to stream music from youtube to discord channels</p><br>
<span style="font-family: monospace;">Tech Stack: Django</span><br/>
<u><a href="https://github.com/mukuzz/norae" target="_blank">Source Code</a></u>
</div>
<div class="project">
<h3>Chess Replay</h3><br>
<p>A portal to upload and replay chess games as they had been playedl</p><br>
<span style="font-family: monospace;">Tech Stack: Php</span><br/>
<u><a href="https://github.com/mukuzz/chess_db" target="_blank">Source Code</a></u>
</div>
<div class="project">
<h3>Thought Board DUCS</h3><br>
<p>Open Chat Flutter Application for intradepartmental communications for Department of Computer Science, University of Delhi</p><br>
<span style="font-family: monospace;">Tech Stack: Flutter</span><br/>
<u><a href="https://github.com/mukuzz/ThoughtBoard-DUCS" target="_blank">Source Code</a></u>
</div>
</div>
</div>
</article>
</body>
</html>