-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path404.html
More file actions
159 lines (128 loc) · 5.92 KB
/
Copy path404.html
File metadata and controls
159 lines (128 loc) · 5.92 KB
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
<!--
Copyright © 2024 – 2026 Kiran Brahmatewari.
Modification of original work by Chris Price.
(https://codepen.io/studiochris/pen/NZYzWq)
Modification of original work by Siddharth Nalwaya.
(https://codepen.io/siddharth-nalwaya/pen/MWMJrMO)
Siddharth Nalwaya's work is a fork of an original work by Ksenia Kondrashova.
(https://codepen.io/ksenia-k/pen/vYwgrWv)
This work is licensed under the terms of the MIT license.
Refer to https://opensource.org/licenses/MIT for a copy.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>404: Page Not Found</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/stylesheets/css/404.css">
<link rel="icon" href="/assets/img/favicons-404/favicon.ico">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicons-404/favicon-96x96.png">
<link rel="icon" type="image/svg+xml" href="/assets/img/favicons-404/favicon.svg">
<link rel="icon" type="image/x-icon" href="/assets/img/favicons-404/favicon.ico">
<link rel="shortcut icon" href="/assets/img/favicons-404/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons-404/apple-touch-icon.png">
<link rel="manifest" href="/assets/img/favicons-404/site.webmanifest">
<link rel="preload" as="script" href="/dist/utilities/404.js">
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" onload="this.onload=null;this.rel='stylesheet'" referrerpolicy="no-referrer">
<!-- Fallback for preload if there's no JavaScript -->
<noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</noscript>
<meta name="description" content="404 page of Kiran Brahmatewari's macOS-inspired personal website">
<meta name="author" content="Kiran Brahmatewari">
<meta name="apple-mobile-web-app-title" content="Lynkos">
<meta name="keywords" content="404, error, code, lynkos, front-end, website, macos, terminal, apple">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#116359">
<meta property="og:title" content="404: Page Not Found">
<meta property="og:description" content="404 page of Kiran Brahmatewari's macOS-inspired personal website">
<meta property="og:site_name" content="404: Page Not Found">
<meta property="og:image" content="https://lynkos.dev/assets/img/favicons-404/favicon.svg">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@0xLynkos">
<meta name="twitter:creator" content="@0xLynkos">
<meta name="twitter:title" content="Lynkos">
<meta name="twitter:description" content="404 page of Kiran Brahmatewari's macOS-inspired personal website">
<meta name="twitter:image" content="https://lynkos.dev/assets/img/favicons-404/favicon.svg">
<script src="https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js"></script>
</head>
<body>
<div class="layer"></div>
<canvas id="neuro"></canvas>
<div class="window active">
<div class="title-bar">
<div class="handle"></div>
<div class="title-bar-text">Error 404: Page Not Found</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<div class="button-container">
<button class="windows00" onclick="window.history.back()" title="Link to go to previous page">Go Back</button>
<button class="windows00" onclick="window.location.href='https://lynkos.dev'" title="Link to homepage">Homepage</button>
</div>
</div>
</div>
<script type="x-shader/x-fragment" id="vertShader">
precision mediump float;
varying vec2 vUv;
attribute vec2 a_position;
void main() {
vUv = .2 * (a_position + 1.);
gl_Position = vec4(a_position, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragShader">
precision mediump float;
varying vec2 vUv;
uniform float u_time;
uniform float u_ratio;
uniform vec2 u_pointer_position;
uniform float u_scroll_progress;
vec2 rotate(vec2 uv, float th) {
return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
}
float neuro_shape(vec2 uv, float t, float p) {
vec2 sine_acc = vec2(0.);
vec2 res = vec2(0.);
float scale = 8.;
float cos_rot = cos(1.);
float sin_rot = sin(1.);
mat2 rotation_matrix = mat2(cos_rot, sin_rot, -sin_rot, cos_rot);
for (int j = 0; j < 50; j++) {
uv = rotation_matrix * uv;
sine_acc = rotation_matrix * sine_acc;
vec2 layer = uv * scale + float(j) + sine_acc - t;
sine_acc += sin(layer);
res += (.5 + .5 * cos(layer)) / scale;
scale *= ((j<5?1.2:j<45?1.3:1.35) - .07 * p);
}
return res.x + res.y;
}
void main() {
vec2 uv = 2.95 * vUv;
uv.x *= u_ratio;
vec2 pointer = vUv - u_pointer_position;
pointer.x *= u_ratio;
float p = clamp(length(pointer), 0., 1.);
p = .05 * pow(1. - p, 2.);
float t = .0009 * u_time;
vec3 color = vec3(0.);
float noise = neuro_shape(uv, t, p);
noise = 1.05 * pow(noise, 1.);
noise += pow(noise, 10.);
noise = max(.0, noise - .5);
noise *= (1. - length(vUv - .5));
color = normalize(vec3(0.4, .7 + .0 * cos(3. * u_scroll_progress), .6 + .9 * sin(3. * u_scroll_progress)));
color = color * noise;
gl_FragColor = vec4(color, noise);
}
</script>
<script src="/dist/utilities/404.js"></script>
</body>
</html>