🔥 rm bulma
✨ rework ui+ux ✨ update shader ✨ update profile.avif ✨ update 404
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -3,4 +3,3 @@ dist/
|
|||||||
pkg/
|
pkg/
|
||||||
target/
|
target/
|
||||||
Cargo.lock
|
Cargo.lock
|
||||||
bulma.min.css
|
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
version: '3'
|
|
||||||
services:
|
|
||||||
web:
|
|
||||||
build: ./
|
|
||||||
ports:
|
|
||||||
- "8080:8080"
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="theme-dark">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
<title>i0ur.ing ~ welcome</title>
|
<title>i0ur.ing ~ welcome</title>
|
||||||
|
|
||||||
<link data-trunk rel="copy-file" href="public/misc/favicon.ico" />
|
<link data-trunk rel="copy-file" href="public/misc/favicon.ico" />
|
||||||
|
<link data-trunk rel="copy-file" href="public/misc/404.png" />
|
||||||
<link data-trunk rel="copy-file" href="public/misc/profile.avif" />
|
<link data-trunk rel="copy-file" href="public/misc/profile.avif" />
|
||||||
<link data-trunk rel="copy-file" href="public/misc/oneko.gif" />
|
<link data-trunk rel="copy-file" href="public/misc/oneko.gif" />
|
||||||
<link data-trunk rel="copy-file" href="public/misc/monocraft.ttf" />
|
<link data-trunk rel="copy-file" href="public/misc/monocraft.ttf" />
|
||||||
@@ -30,8 +31,7 @@
|
|||||||
<link data-trunk rel="copy-file" href="public/buttons/void.png" />
|
<link data-trunk rel="copy-file" href="public/buttons/void.png" />
|
||||||
<link data-trunk rel="copy-file" href="public/buttons/aqueer.png" />
|
<link data-trunk rel="copy-file" href="public/buttons/aqueer.png" />
|
||||||
|
|
||||||
<link data-trunk rel="sass" href="main.scss" />
|
<!--<link data-trunk rel="sass" href="main.scss" />-->
|
||||||
<link data-trunk rel="css" href="bulma.min.css" />
|
|
||||||
<link data-trunk rel="rust" />
|
<link data-trunk rel="rust" />
|
||||||
<base data-trunk-public-url />
|
<base data-trunk-public-url />
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
2
justfile
2
justfile
@@ -7,9 +7,7 @@ install:
|
|||||||
cargo install --locked wasm-pack trunk --force
|
cargo install --locked wasm-pack trunk --force
|
||||||
|
|
||||||
debug:
|
debug:
|
||||||
rm bulma.min.css && curl --proto '=https' --tlsv1.3 -LO https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css
|
|
||||||
trunk serve
|
trunk serve
|
||||||
|
|
||||||
build:
|
build:
|
||||||
rm bulma.min.css && curl --proto '=https' --tlsv1.3 -LO https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css
|
|
||||||
trunk build --release
|
trunk build --release
|
||||||
|
|||||||
35
main.scss
35
main.scss
@@ -27,49 +27,18 @@ html * {
|
|||||||
|
|
||||||
.box {
|
.box {
|
||||||
backdrop-filter: blur(4px) !important;
|
backdrop-filter: blur(4px) !important;
|
||||||
--bulma-box-background-color: #1E1E2E80 !important;
|
|
||||||
--bulma-shadow-h: 232 !important;
|
|
||||||
--bulma-shadow-s: 97% !important;
|
|
||||||
--bulma-shadow-l: 85% !important;
|
|
||||||
--bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-shadow-h),
|
|
||||||
var(--bulma-shadow-s),
|
|
||||||
var(--bulma-shadow-l),
|
|
||||||
0.3), 0 0px 0 1px hsla(var(--bulma-shadow-h),
|
|
||||||
var(--bulma-shadow-s),
|
|
||||||
var(--bulma-shadow-l),
|
|
||||||
0.02) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
backdrop-filter: blur(4px) !important;
|
backdrop-filter: blur(4px) !important;
|
||||||
--bulma-card-background-color: #1E1E2E80 !important;
|
|
||||||
--bulma-shadow-h: 232 !important;
|
|
||||||
--bulma-shadow-s: 97% !important;
|
|
||||||
--bulma-shadow-l: 85% !important;
|
|
||||||
--bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-shadow-h),
|
|
||||||
var(--bulma-shadow-s),
|
|
||||||
var(--bulma-shadow-l),
|
|
||||||
0.3), 0 0px 0 1px hsla(var(--bulma-shadow-h),
|
|
||||||
var(--bulma-shadow-s),
|
|
||||||
var(--bulma-shadow-l),
|
|
||||||
0.02) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input,
|
.input,
|
||||||
.select select,
|
.select select,
|
||||||
.textarea {
|
.textarea {
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
--bulma-input-h: 232 !important;
|
background-color: white, 0.213125 !important;
|
||||||
--bulma-input-s: 97% !important;
|
border-color: white !important;
|
||||||
--bulma-input-l: 85% !important;
|
|
||||||
--bulma-input-background-h: var(--bulma-input-h) !important;
|
|
||||||
--bulma-input-background-s: var(--bulma-input-s) !important;
|
|
||||||
--bulma-input-background-l: var(--bulma-input-l) !important;
|
|
||||||
background-color: hsla(var(--bulma-input-h),
|
|
||||||
var(--bulma-input-s),
|
|
||||||
var(--bulma-input-background-l),
|
|
||||||
0.213125) !important;
|
|
||||||
border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-l)) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a.navbar-item,
|
a.navbar-item,
|
||||||
|
|||||||
BIN
public/misc/404.png
Normal file
BIN
public/misc/404.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 224 KiB |
@@ -4,8 +4,6 @@ precision highp float;
|
|||||||
const float CAM_FAR = 20.0;
|
const float CAM_FAR = 20.0;
|
||||||
const vec3 BACKGROUND = vec3(0.0, 0.0, 0.0);
|
const vec3 BACKGROUND = vec3(0.0, 0.0, 0.0);
|
||||||
|
|
||||||
const float PI = radians(180.0);
|
|
||||||
|
|
||||||
uniform float time;
|
uniform float time;
|
||||||
uniform vec2 resolution;
|
uniform vec2 resolution;
|
||||||
uniform bool layer_snow;
|
uniform bool layer_snow;
|
||||||
@@ -19,48 +17,42 @@ vec3 artifactAxis;
|
|||||||
vec3 camFwd;
|
vec3 camFwd;
|
||||||
vec3 camUp;
|
vec3 camUp;
|
||||||
|
|
||||||
float smootherstep(float edge0, float edge1, float x) {
|
|
||||||
x = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
|
|
||||||
return x * x * x * (x * (x * 6.0 - 15.0) + 10.0);
|
|
||||||
}
|
|
||||||
|
|
||||||
float rand(float n) {
|
float rand(float n) {
|
||||||
n = fract(n * 43758.5453);
|
return fract(sin(n) * 43758.5453);
|
||||||
n *= n;
|
|
||||||
return fract(n * 43758.5453);
|
|
||||||
}
|
|
||||||
|
|
||||||
float hash(float n) {
|
|
||||||
return fract(abs(fract(n) * 43758.5453));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
float noise(float x) {
|
float noise(float x) {
|
||||||
float i = floor(x);
|
float i = floor(x);
|
||||||
float f = fract(x);
|
float f = fract(x);
|
||||||
float u = f * f * (3.0 - 2.0 * f);
|
return mix(rand(i), rand(i + 1.0), f * f * (3.0 - 2.0 * f));
|
||||||
return mix(hash(i), hash(i + 1.0), u);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mat4 viewMatrix(vec3 dir, vec3 up) {
|
mat4 viewMatrix(vec3 dir, vec3 up) {
|
||||||
vec3 f = normalize(dir);
|
vec3 f = normalize(dir);
|
||||||
vec3 s = normalize(cross(f, up));
|
vec3 s = normalize(cross(f, up));
|
||||||
return mat4(vec4(s, 0.0), vec4(cross(s, f), 0.0), vec4(-f, 0.0), vec4(0.0, 0.0, 0.0, 1.0));
|
vec3 u = cross(s, f);
|
||||||
|
|
||||||
|
return mat4(
|
||||||
|
vec4(s, 0.0),
|
||||||
|
vec4(u, 0.0),
|
||||||
|
vec4(-f, 0.0),
|
||||||
|
vec4(0.0, 0.0, 0.0, 1.0)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
mat3 rotationAlign(vec3 d, vec3 z) {
|
mat3 rotationAlign(vec3 d, vec3 z) {
|
||||||
vec3 v = cross(z, d);
|
vec3 v = cross(z, d);
|
||||||
float c = dot(z, d);
|
float c = dot(z, d);
|
||||||
float k = 1.0 / (1.0 + c);
|
float k = 1.0 / (1.0 + c);
|
||||||
|
|
||||||
|
float k_vx = v.x * k;
|
||||||
|
float k_vy = v.y * k;
|
||||||
|
float k_vz = v.z * k;
|
||||||
|
|
||||||
return mat3(
|
return mat3(
|
||||||
v.x * v.x * k + c,
|
k_vx * v.x + c, k_vx * v.y - v.z, k_vx * v.z + v.y,
|
||||||
v.y * v.x * k - v.z,
|
k_vy * v.x + v.z, k_vy * v.y + c, k_vy * v.z - v.x,
|
||||||
v.z * v.x * k + v.y,
|
k_vz * v.x - v.y, k_vz * v.y + v.x, k_vz * v.z + c
|
||||||
v.x * v.y * k + v.z,
|
|
||||||
v.y * v.y * k + c,
|
|
||||||
v.z * v.y * k - v.x,
|
|
||||||
v.x * v.z * k - v.y,
|
|
||||||
v.y * v.z * k + v.x,
|
|
||||||
v.z * v.z * k + c
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -74,48 +66,10 @@ vec3 calcRay(vec2 uv, float fov, float aspect) {
|
|||||||
return normalize(vec3(aspect * uv.x, uv.y, d));
|
return normalize(vec3(aspect * uv.x, uv.y, d));
|
||||||
}
|
}
|
||||||
|
|
||||||
vec2 getWave(vec2 position, vec2 dir, float speed, float frequency, float iTimeshift) {
|
|
||||||
float x = dot(dir, position) * frequency + iTimeshift * speed;
|
|
||||||
float wave = exp(sin(x) - 1.0);
|
|
||||||
float dist = wave * cos(x);
|
|
||||||
return vec2(wave, -dist);
|
|
||||||
}
|
|
||||||
|
|
||||||
float heightmap(vec2 worldPos) {
|
|
||||||
const float scale = 0.06;
|
|
||||||
|
|
||||||
vec2 p = worldPos * scale;
|
|
||||||
vec2 p2 = (artifactOffset.xz - vec2(0.0, 1.0)) * scale;
|
|
||||||
|
|
||||||
float d = (1.0 - smootherstep(0.0, 1.0, clamp(length(p2 - p) * 1.25, 0.0, 1.0))) * 0.87;
|
|
||||||
float angle = 0.0;
|
|
||||||
float freq = 5.0;
|
|
||||||
float speed = 2.0;
|
|
||||||
float weight = 1.9;
|
|
||||||
float wave = 0.0;
|
|
||||||
float waveScale = 0.0;
|
|
||||||
|
|
||||||
vec2 dir;
|
|
||||||
vec2 res;
|
|
||||||
|
|
||||||
for (int i = 0; i < 5; i++) {
|
|
||||||
dir = vec2(cos(angle), sin(angle));
|
|
||||||
res = getWave(p, dir, speed, freq, time);
|
|
||||||
p += dir * res.y * weight * 0.05;
|
|
||||||
wave += res.x * weight - d;
|
|
||||||
angle += 12.0;
|
|
||||||
waveScale += weight;
|
|
||||||
weight = mix(weight, 0.0, 0.2);
|
|
||||||
freq *= 1.18;
|
|
||||||
speed *= 1.06;
|
|
||||||
}
|
|
||||||
|
|
||||||
return wave * (1.0 / waveScale);
|
|
||||||
}
|
|
||||||
|
|
||||||
float octahedron(vec3 p, float s) {
|
float octahedron(vec3 p, float s) {
|
||||||
|
const float factor = 0.57735027;
|
||||||
p = abs(p);
|
p = abs(p);
|
||||||
return (p.x + p.y + p.z - s) * 0.57735027;
|
return (p.x + p.y + p.z - s) * factor;
|
||||||
}
|
}
|
||||||
|
|
||||||
void artifact(vec3 p, inout float currDist, inout vec3 glowColor, inout int id) {
|
void artifact(vec3 p, inout float currDist, inout vec3 glowColor, inout int id) {
|
||||||
@@ -145,10 +99,6 @@ float artifactDist(vec3 p) {
|
|||||||
return octahedron(p, 1.2);
|
return octahedron(p, 1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
float objectsDist(vec3 p) {
|
|
||||||
return artifactDist(p);
|
|
||||||
}
|
|
||||||
|
|
||||||
vec3 objectsNormal(vec3 p, float eps) {
|
vec3 objectsNormal(vec3 p, float eps) {
|
||||||
vec2 h = vec2(eps, 0);
|
vec2 h = vec2(eps, 0);
|
||||||
return normalize(vec3(artifactDist(p + h.xyy) - artifactDist(p - h.xyy), eps * 2.0, artifactDist(p + h.yyx) - artifactDist(p - h.yyx)));
|
return normalize(vec3(artifactDist(p + h.xyy) - artifactDist(p - h.xyy), eps * 2.0, artifactDist(p + h.yyx) - artifactDist(p - h.yyx)));
|
||||||
@@ -174,96 +124,41 @@ void marchObjects(vec3 eye, vec3 ray, float wDepth, inout vec4 color) {
|
|||||||
color = dist < 0.01 ? vec4(objectsColor(id, objectsNormal(rayPos, 0.01), ray), depth) : color;
|
color = dist < 0.01 ? vec4(objectsColor(id, objectsNormal(rayPos, 0.01), ray), depth) : color;
|
||||||
}
|
}
|
||||||
|
|
||||||
vec3 waterColor(vec3 ray, vec3 normal, vec3 p) {
|
|
||||||
vec3 color = vec3(0.0);
|
|
||||||
float fogDist = length(p - vec3(0.0, 0.0, -6.0));
|
|
||||||
float dist = 0.0;
|
|
||||||
int objId = 0;
|
|
||||||
vec3 refl = reflect(ray, normal);
|
|
||||||
vec3 rayPos = p + refl * dist;
|
|
||||||
|
|
||||||
if (length(p.xz - artifactOffset.xz) < 8.5 && dot(refl, normalize(artifactOffset - p)) > -0.25) {
|
|
||||||
for (int i = 0; i < 40; i++) {
|
|
||||||
dist = objects(rayPos, color, objId);
|
|
||||||
if (dist < 0.01) {
|
|
||||||
color = objectsColor(objId, objectsNormal(rayPos, 0.001), rayPos);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
rayPos += refl * dist;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
float fresnel = 0.04 + 0.9 * pow(1.0 - max(0.0, dot(-normal, ray)), 7.0);
|
|
||||||
float d = length(artifactOffset - p);
|
|
||||||
const float r = 14.0;
|
|
||||||
float atten = clamp(1.0 - (d * d) / (r * r), 0.0, 1.0);
|
|
||||||
atten *= atten;
|
|
||||||
|
|
||||||
vec3 point = vec3(0.75, 0.55, 0.45) * atten * (1.0 + fresnel) * 0.07;
|
|
||||||
vec3 ambient = dot(normal, normalize(vec3(0.0, 1.0, 0.5))) * max(fresnel, 0.06) * vec3(0.1, 0.5, 1.0) * 0.85;
|
|
||||||
float fog = smootherstep(25.0, 6.0, fogDist) * (1.0 / (fogDist * 0.1));
|
|
||||||
|
|
||||||
return color + (point + ambient) * fog;
|
|
||||||
}
|
|
||||||
|
|
||||||
vec3 waterNormal(vec2 p, float eps) {
|
|
||||||
vec2 h = vec2(eps, 0.0);
|
|
||||||
return normalize(vec3(heightmap(p - h.xy) - heightmap(p + h.xy), eps * 2.0, heightmap(p - h.yx) - heightmap(p + h.yx)));
|
|
||||||
}
|
|
||||||
|
|
||||||
void marchWater(vec3 eye, vec3 ray, inout vec4 color) {
|
|
||||||
const vec3 planeNorm = vec3(0.0, 1.0, 0.0);
|
|
||||||
const float depth = 3.0;
|
|
||||||
float ceilDist = intersectPlane(eye, ray, vec3(0.0, 0.0, 0.0), planeNorm);
|
|
||||||
vec3 normal = vec3(0.0);
|
|
||||||
|
|
||||||
if (dot(planeNorm, ray) > -0.05) {
|
|
||||||
color = vec4(vec3(0.0), CAM_FAR);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
float height = 0.0;
|
|
||||||
vec3 rayPos = eye + ray * ceilDist;
|
|
||||||
for (int i = 0; i < 30; i++) {
|
|
||||||
height = heightmap(rayPos.xz) * depth - depth;
|
|
||||||
if (rayPos.y - height < 0.1) {
|
|
||||||
color.w = distance(rayPos, eye);
|
|
||||||
vec3 normPos = (eye + ray * color.w);
|
|
||||||
color.rgb = waterColor(ray, waterNormal(normPos.xz, 0.005), normPos);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
rayPos += ray * max(rayPos.y - height, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
color = vec4(vec3(0.0), CAM_FAR);
|
|
||||||
}
|
|
||||||
|
|
||||||
vec3 march(vec2 uv, vec3 camPos) {
|
vec3 march(vec2 uv, vec3 camPos) {
|
||||||
mat4 vm = viewMatrix(camFwd, camUp);
|
mat4 vm = viewMatrix(camFwd, camUp);
|
||||||
vec3 ray = (vm * vec4(calcRay(uv, 80.0, resolution.x / resolution.y), 1.0)).xyz;
|
vec3 ray = (vm * vec4(calcRay(uv, 80.0, resolution.x / resolution.y), 1.0)).xyz;
|
||||||
vec4 color = vec4(BACKGROUND, CAM_FAR);
|
vec4 color = vec4(BACKGROUND, CAM_FAR);
|
||||||
vec3 waterColor;
|
|
||||||
marchWater(camPos, ray, color);
|
|
||||||
marchObjects(camPos, ray, color.w, color);
|
marchObjects(camPos, ray, color.w, color);
|
||||||
return color.rgb;
|
return color.rgb;
|
||||||
}
|
}
|
||||||
|
|
||||||
float snow(vec2 uv, float scale) {
|
float snow(vec2 uv, float scale) {
|
||||||
float w = smootherstep(1.0, 0.0, -uv.y * (scale * 0.01));
|
float w = smoothstep(1.0, 0.0, -uv.y * (scale * 0.01));
|
||||||
if (w < 0.1) return 0.0;
|
if (w < 0.1) return 0.0;
|
||||||
uv += time / scale;
|
|
||||||
uv.y += time / scale;
|
float timeScale = time / scale;
|
||||||
|
uv += vec2(timeScale, timeScale);
|
||||||
uv.x += sin(uv.y + time * 0.125) / scale;
|
uv.x += sin(uv.y + time * 0.125) / scale;
|
||||||
uv *= scale;
|
uv *= scale;
|
||||||
vec2 s = floor(uv), f = fract(uv);
|
|
||||||
return smootherstep(0.0, min(length(0.5 + 0.5 * sin(11.0 * fract(sin((s + scale) * mat2(7.0, 3.0, 6.0, 5.0)) * 5.0)) - f), 3.0), sin(f.x + f.y) * 0.01) * w;
|
vec2 s = floor(uv);
|
||||||
|
vec2 f = fract(uv);
|
||||||
|
|
||||||
|
float sinValueX = sin((s.x + scale) * 7.0) * 5.0;
|
||||||
|
float sinValueY = sin((s.y + scale) * 5.0) * 5.0;
|
||||||
|
float combinedSinValue = sinValueX + sinValueY;
|
||||||
|
|
||||||
|
float lengthValue = length(0.5 + 0.5 * sin(11.0 * fract(combinedSinValue)) - f);
|
||||||
|
|
||||||
|
return smoothstep(0.0, min(lengthValue, 3.0), sin(f.x + f.y) * 0.01) * w;
|
||||||
}
|
}
|
||||||
|
|
||||||
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
||||||
vec2 uv = fragCoord * (vec2(1.0) / resolution.xy);
|
vec2 uv = fragCoord / resolution.xy;
|
||||||
|
|
||||||
float s = sin(time);
|
float s = sin(time);
|
||||||
float c = cos(time);
|
float c = cos(time);
|
||||||
|
|
||||||
artifactRotation = mat3(c, 0, s, 0, 1, 0, -s, 0, c) * rotationAlign(vec3(0.0, 1.0, 0.0), vec3(s * 0.2, 1.0, c * 0.2 + 0.3));
|
artifactRotation = mat3(c, 0, s, 0, 1, 0, -s, 0, c) * rotationAlign(vec3(0.0, 1.0, 0.0), vec3(s * 0.2, 1.0, c * 0.2 + 0.3));
|
||||||
artifactOffset = vec3(s * 0.4, c * 0.3 - 1.7, -6.0);
|
artifactOffset = vec3(s * 0.4, c * 0.3 - 1.7, -6.0);
|
||||||
|
|
||||||
@@ -273,9 +168,8 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|||||||
fragColor = vec4(march(uv, vec3(0.0, 1.9, 1.0)) - (length(uv - 0.5) - 0.3) * 0.05, 1.0);
|
fragColor = vec4(march(uv, vec3(0.0, 1.9, 1.0)) - (length(uv - 0.5) - 0.3) * 0.05, 1.0);
|
||||||
|
|
||||||
if (layer_snow) {
|
if (layer_snow) {
|
||||||
vec2 p = fragCoord.xy / resolution.xy;
|
vec2 uvSnow = (fragCoord * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
|
||||||
vec2 uvSnow = (fragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
|
fragColor += vec4(vec3(snow(uvSnow, 4.0)), 0.5) * 0.7;
|
||||||
fragColor += mix(vec4(vec3(snow(uvSnow, 4.0)), 0.5) + vec4(vec3(snow(uvSnow, 3.0)), 0.5), vec4(0.0), vec4(0.7));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
304
src/main.rs
304
src/main.rs
@@ -2,18 +2,19 @@ use js_sys::Float32Array;
|
|||||||
use log::{info, warn};
|
use log::{info, warn};
|
||||||
use std::cell::RefCell;
|
use std::cell::RefCell;
|
||||||
use std::sync::Arc;
|
use std::sync::Arc;
|
||||||
use wasm_bindgen::prelude::*;
|
|
||||||
use wasm_bindgen::JsCast;
|
use wasm_bindgen::JsCast;
|
||||||
use web_sys::{window, HtmlCanvasElement, WebGl2RenderingContext as GL2};
|
use wasm_bindgen::prelude::*;
|
||||||
|
use web_sys::{HtmlCanvasElement, WebGl2RenderingContext as GL2, window};
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use yew_router::prelude::*;
|
use yew_router::prelude::*;
|
||||||
|
|
||||||
mod pages;
|
mod pages;
|
||||||
use crate::pages::about::About;
|
use crate::pages::about::About;
|
||||||
|
use crate::pages::blog::author::Author;
|
||||||
|
use crate::pages::blog::authors::Authors;
|
||||||
use crate::pages::blog::entries::Entries;
|
use crate::pages::blog::entries::Entries;
|
||||||
use crate::pages::blog::entry::Entry;
|
use crate::pages::blog::entry::Entry;
|
||||||
use crate::pages::blog::authors::Authors;
|
use crate::pages::findme::FindMe;
|
||||||
use crate::pages::blog::author::Author;
|
|
||||||
use crate::pages::projects::Projects;
|
use crate::pages::projects::Projects;
|
||||||
use pages::not_found::PageNotFound;
|
use pages::not_found::PageNotFound;
|
||||||
|
|
||||||
@@ -34,6 +35,9 @@ pub enum Route {
|
|||||||
#[at("/projects")]
|
#[at("/projects")]
|
||||||
Projects,
|
Projects,
|
||||||
|
|
||||||
|
#[at("/findme")]
|
||||||
|
FindMe,
|
||||||
|
|
||||||
#[not_found]
|
#[not_found]
|
||||||
#[at("/404")]
|
#[at("/404")]
|
||||||
NotFound,
|
NotFound,
|
||||||
@@ -53,7 +57,10 @@ impl Component for App {
|
|||||||
type Properties = ();
|
type Properties = ();
|
||||||
|
|
||||||
fn create(_ctx: &Context<Self>) -> Self {
|
fn create(_ctx: &Context<Self>) -> Self {
|
||||||
Self { node_ref: NodeRef::default(), navbar_active: false }
|
Self {
|
||||||
|
node_ref: NodeRef::default(),
|
||||||
|
navbar_active: false,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
|
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
|
||||||
@@ -68,115 +75,132 @@ impl Component for App {
|
|||||||
fn view(&self, _ctx: &Context<Self>) -> Html {
|
fn view(&self, _ctx: &Context<Self>) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<canvas style="
|
<canvas width="100%" height="100%" style="
|
||||||
background-color: black !important;
|
background-color: black !important;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
z-index: 0 !important;
|
z-index: 0 !important;
|
||||||
" ref={self.node_ref.clone()}/>
|
" ref={self.node_ref.clone()} />
|
||||||
<div style="
|
<BrowserRouter>
|
||||||
|
<main style="
|
||||||
|
z-index: 1 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: white !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
flex-wrap: wrap !important;
|
height: calc(100vh - 18px) !important;
|
||||||
height: 100vh !important;
|
width: 70% !important;
|
||||||
|
font-family: monospace !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
align-self: center !important;
|
||||||
|
margin-left: auto !important;
|
||||||
|
margin-right: auto !important;
|
||||||
">
|
">
|
||||||
<BrowserRouter>
|
|
||||||
<main style="
|
<nav class="navbar" style="
|
||||||
z-index: 1 !important;
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: row-reverse !important;
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
overflow: visible !important;
|
|
||||||
left: 0 !important;
|
|
||||||
margin-top: calc(var(--bulma-navbar-height)) !important;
|
|
||||||
margin-bottom: calc(var(--bulma-navbar-height) * 2) !important;
|
|
||||||
height: calc(100vh - (var(--bulma-navbar-height) * 2)) !important;
|
|
||||||
width: 100% !important;
|
|
||||||
align-items: center !important;
|
|
||||||
"><Switch<Route> render={switch} />
|
|
||||||
</main>
|
|
||||||
<header style="
|
|
||||||
z-index: 1 !important;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
">{ self.view_header(_ctx) }</header>
|
|
||||||
</BrowserRouter>
|
|
||||||
<footer class="footer" style="
|
|
||||||
--bulma-footer-background-color: #1E1E2E80 !important;
|
|
||||||
z-index: 1 !important;
|
z-index: 1 !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column !important;
|
flex-direction: row !important;
|
||||||
flex-wrap: wrap !important;
|
align-items: center;
|
||||||
position: fixed !important;
|
max-width: 100vw !important;
|
||||||
left: 0px !important;
|
filter: url(post.bloom.svg#process) !important;
|
||||||
bottom: 0px !important;
|
">
|
||||||
margin-bottom: 0 !important;
|
<p>{r"-»{ "}</p>
|
||||||
width: 100% !important;
|
<Link<Route> to={Route::About}>
|
||||||
padding: 0 !important;
|
<a style="color: #CBA6F7FF !important;">{r"about"}</a>
|
||||||
">{ self.view_footer() }</footer>
|
</Link<Route>>
|
||||||
</div>
|
/*<p>{r"."}</p>
|
||||||
|
<Link<Route> to={Route::Entries}>
|
||||||
|
<a style="color: #CBA6F7FF !important;">{r"blog"}</a>
|
||||||
|
</Link<Route>>*/
|
||||||
|
<p>{r"."}</p>
|
||||||
|
<Link<Route> to={Route::FindMe}>
|
||||||
|
<a style="color: #CBA6F7FF !important;">{r"findme"}</a>
|
||||||
|
</Link<Route>>
|
||||||
|
<p>{r"."}</p>
|
||||||
|
<Link<Route> to={Route::Projects}>
|
||||||
|
<a style="color: #CBA6F7FF !important;">{r"projects"}</a>
|
||||||
|
</Link<Route>>
|
||||||
|
<p>{r" }«-"}</p>
|
||||||
|
</nav>
|
||||||
|
<div style="
|
||||||
|
background-color: rgba(0, 0, 0, 0.3125) !important;
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
padding: 4px 0px 0px 4px !important;
|
||||||
|
border-radius: 1.0rem !important;
|
||||||
|
border-style: solid !important;
|
||||||
|
border-color: black !important;
|
||||||
|
border-width: 1px !important;
|
||||||
|
z-index: 1 !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
min-width: 70vw !important;
|
||||||
|
width: 70vh !important;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
min-height: 70vh !important;
|
||||||
|
height: 80vw !important;
|
||||||
|
max-height: 100vh !important;
|
||||||
|
"><Switch<Route> render={switch} /></div>
|
||||||
|
</main>
|
||||||
|
</BrowserRouter>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn rendered(&mut self, _ctx: &Context<Self>, first_render: bool) {
|
fn rendered(&mut self, _ctx: &Context<Self>, first_render: bool) {
|
||||||
if first_render { self.view_canvas(); }
|
if first_render {
|
||||||
|
self.view_canvas();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn switch(routes: Route) -> Html {
|
fn switch(routes: Route) -> Html {
|
||||||
match routes {
|
match routes {
|
||||||
Route::About => { html! { <About /> } }
|
Route::About => {
|
||||||
|
html! { <About /> }
|
||||||
|
}
|
||||||
|
|
||||||
Route::Entries => { html! { <Entries /> } }
|
Route::Entries => {
|
||||||
Route::Entry { id } => { html! { <Entry seed={id as u8} /> } }
|
html! { <Entries /> }
|
||||||
Route::Authors => { html! { <Authors /> } }
|
}
|
||||||
Route::Author { id } => { html! { <Author seed={id} /> } }
|
Route::Entry { id } => {
|
||||||
|
html! { <Entry seed={id as u8} /> }
|
||||||
|
}
|
||||||
|
Route::Authors => {
|
||||||
|
html! { <Authors /> }
|
||||||
|
}
|
||||||
|
Route::Author { id } => {
|
||||||
|
html! { <Author seed={id as u8} /> }
|
||||||
|
}
|
||||||
|
|
||||||
Route::Projects => { html! { <Projects /> } }
|
Route::FindMe => {
|
||||||
Route::NotFound => { html! { <PageNotFound /> } }
|
html! { <FindMe /> }
|
||||||
|
}
|
||||||
|
|
||||||
|
Route::Projects => {
|
||||||
|
html! { <Projects /> }
|
||||||
|
}
|
||||||
|
Route::NotFound => {
|
||||||
|
html! { <PageNotFound /> }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
impl App {
|
impl App {
|
||||||
fn view_header(&self, _ctx: &Context<Self>) -> Html {
|
fn view_list(&self, _ctx: &Context<Self>) -> Html {
|
||||||
let active_class = if self.navbar_active { "is-active" } else { "" };
|
html! {}
|
||||||
html! {
|
|
||||||
<nav class="navbar" style="
|
|
||||||
z-index: 1 !important;
|
|
||||||
position: fixed !important;
|
|
||||||
top: 0px !important;
|
|
||||||
left: 0px !important;
|
|
||||||
width: 100% !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
--bulma-navbar-background-color: #1E1E2E80 !important;
|
|
||||||
backdrop-filter: blur(4px) !important;
|
|
||||||
">
|
|
||||||
<div class="navbar-brand">
|
|
||||||
<button class={classes!("navbar-burger", "burger", active_class)} aria-label="menu" aria-expanded="false" onclick={_ctx.link().callback(|_| Msg::ToggleNavbar)}>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class={classes!("navbar-menu", active_class)}>
|
|
||||||
<div class="navbar-start">
|
|
||||||
<Link<Route> classes={classes!("navbar-item")} to={Route::About}>{r"about"}</Link<Route>>
|
|
||||||
<Link<Route> classes={classes!("navbar-item")} to={Route::Entries}>{r"blog"}</Link<Route>>
|
|
||||||
<Link<Route> classes={classes!("navbar-item")} to={Route::Projects}>{r"projects"}</Link<Route>>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fn view_footer(&self) -> Html {
|
fn view_buttons(&self) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<div class="is-flex is-flex-direction-column is-flex-wrap-wrap" style="
|
<div style="
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
width: 100vw !important;
|
width: 100vw !important;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
@@ -184,63 +208,70 @@ impl App {
|
|||||||
height: 40px !important; max-height: 40px !important;
|
height: 40px !important; max-height: 40px !important;
|
||||||
image-rendering: pixelated !important;
|
image-rendering: pixelated !important;
|
||||||
">
|
">
|
||||||
<div class="is-align-content-flex-start is-flex is-flex-shrink-0 is-flex-direction-column is-align-content-center is-flex-wrap-wrap ml-0 mt-0 mr-0 mb-0" style="width: 100% !important; min-height: 40px !important; height: 40px !important; max-height: 40px !important; overflow-y: hidden !important; overflow-x: auto !important;">
|
<div style="
|
||||||
|
width: 100% !important;
|
||||||
|
min-height: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
max-height: 40px !important;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
">
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://i0ur.ing/"><img loading="eager" alt="servfail" class="image" src="iouring.png" /></a>
|
" href="https://i0ur.ing/"><img loading="eager" alt="iouring" src="iouring.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://webassembly.org/"><img loading="eager" alt="wasm" class="image" src="wasm.png" /></a>
|
" href="https://webassembly.org/"><img loading="eager" alt="wasm" src="wasm.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://beta.servfail.network/"><img loading="eager" alt="servfail" class="image" src="servfail.png" /></a>
|
" href="https://beta.servfail.network/"><img loading="eager" alt="servfail" src="servfail.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://www.dataforest.net/en/"><img loading="eager" alt="dataforest" class="image" src="dataforest.png" /></a>
|
" href="https://www.dataforest.net/en/"><img loading="eager" alt="dataforest" src="dataforest.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://fedoraproject.org/"><img loading="eager" alt="fedora" class="image" src="fedora.png" /></a>
|
" href="https://fedoraproject.org/"><img loading="eager" alt="fedora" src="fedora.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://artixlinux.org/"><img loading="eager" alt="artix" class="image" src="artix.png" /></a>
|
" href="https://artixlinux.org/"><img loading="eager" alt="artix" src="artix.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://nixos.org/"><img loading="eager" alt="nixos" class="image" src="nixos.png" /></a>
|
" href="https://nixos.org/"><img loading="eager" alt="nixos" src="nixos.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://chimera-linux.org/"><img loading="eager" alt="void" class="image" src="chimera.png" /></a>
|
" href="https://chimera-linux.org/"><img loading="eager" alt="void" src="chimera.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://voidlinux.org/"><img loading="eager" alt="void" class="image" src="void.png" /></a>
|
" href="https://voidlinux.org/"><img loading="eager" alt="void" src="void.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://www.rust-lang.org/"><img loading="eager" alt="rust" class="image" src="rust.png" /></a>
|
" href="https://www.rust-lang.org/"><img loading="eager" alt="rust" src="rust.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://dotnet.microsoft.com/en-us/"><img loading="eager" alt="csharp" class="image" src="csharp.png" /></a>
|
" href="https://dotnet.microsoft.com/en-us/"><img loading="eager" alt="csharp" src="csharp.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://kotlinlang.org/"><img loading="eager" alt="kotlin" class="image" src="kotlin.png" /></a>
|
" href="https://kotlinlang.org/"><img loading="eager" alt="kotlin" src="kotlin.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
" href="https://www.java.com/"><img loading="eager" alt="java" class="image" src="java.png" /></a>
|
" href="https://www.java.com/"><img loading="eager" alt="java" src="java.png" /></a>
|
||||||
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
<a class="mt-1 mb-1 mr-1 ml-0" style="
|
||||||
width: 88px !important;
|
width: 88px !important;
|
||||||
height: 31px !important
|
height: 31px !important
|
||||||
"><img loading="eager" alt="aqueer" class="image" src="aqueer.png" /></a>
|
"><img loading="eager" alt="aqueer" src="aqueer.png" /></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
@@ -251,27 +282,37 @@ impl App {
|
|||||||
let canvas = self.node_ref.cast::<HtmlCanvasElement>().unwrap();
|
let canvas = self.node_ref.cast::<HtmlCanvasElement>().unwrap();
|
||||||
|
|
||||||
let gl = canvas
|
let gl = canvas
|
||||||
.get_context("webgl2")
|
.get_context("webgl2")
|
||||||
.unwrap_or(canvas.get_context("webgl").unwrap())
|
.unwrap_or(canvas.get_context("webgl").unwrap())
|
||||||
.unwrap().dyn_into::<GL2>().unwrap();
|
.unwrap()
|
||||||
|
.dyn_into::<GL2>()
|
||||||
|
.unwrap();
|
||||||
|
|
||||||
let vertex_buffer = gl.create_buffer().unwrap();
|
let vertex_buffer = gl.create_buffer().unwrap();
|
||||||
gl.bind_buffer(GL2::ARRAY_BUFFER, Some(&vertex_buffer));
|
gl.bind_buffer(GL2::ARRAY_BUFFER, Some(&vertex_buffer));
|
||||||
gl.buffer_data_with_array_buffer_view(GL2::ARRAY_BUFFER, &Float32Array::from(vec![
|
gl.buffer_data_with_array_buffer_view(
|
||||||
-1.0, 1.0, 0.0,
|
GL2::ARRAY_BUFFER,
|
||||||
-1.0, -1.0, 0.0,
|
&Float32Array::from(
|
||||||
1.0, -1.0, 0.0,
|
vec![
|
||||||
1.0, 1.0, 0.0
|
-1.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0,
|
||||||
].as_slice()), GL2::STATIC_DRAW);
|
]
|
||||||
|
.as_slice(),
|
||||||
|
),
|
||||||
|
GL2::STATIC_DRAW,
|
||||||
|
);
|
||||||
|
|
||||||
let color_buffer = gl.create_buffer().unwrap();
|
let color_buffer = gl.create_buffer().unwrap();
|
||||||
gl.bind_buffer(GL2::ARRAY_BUFFER, Some(&color_buffer));
|
gl.bind_buffer(GL2::ARRAY_BUFFER, Some(&color_buffer));
|
||||||
gl.buffer_data_with_array_buffer_view(GL2::ARRAY_BUFFER, &Float32Array::from(vec![
|
gl.buffer_data_with_array_buffer_view(
|
||||||
1.0, 0.0, 0.0, 1.0,
|
GL2::ARRAY_BUFFER,
|
||||||
0.0, 1.0, 0.0, 1.0,
|
&Float32Array::from(
|
||||||
0.0, 0.0, 1.0, 1.0,
|
vec![
|
||||||
1.0, 1.0, 0.0, 1.0
|
1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 1.0,
|
||||||
].as_slice()), GL2::STATIC_DRAW);
|
]
|
||||||
|
.as_slice(),
|
||||||
|
),
|
||||||
|
GL2::STATIC_DRAW,
|
||||||
|
);
|
||||||
|
|
||||||
let element_buffer = gl.create_buffer().unwrap();
|
let element_buffer = gl.create_buffer().unwrap();
|
||||||
gl.bind_buffer(GL2::ELEMENT_ARRAY_BUFFER, Some(&element_buffer));
|
gl.bind_buffer(GL2::ELEMENT_ARRAY_BUFFER, Some(&element_buffer));
|
||||||
@@ -307,7 +348,11 @@ impl App {
|
|||||||
gl.attach_shader(&shader_program, &fragment_shader);
|
gl.attach_shader(&shader_program, &fragment_shader);
|
||||||
|
|
||||||
gl.link_program(&shader_program);
|
gl.link_program(&shader_program);
|
||||||
if !gl.get_program_parameter(&shader_program, GL2::LINK_STATUS).as_bool().unwrap() {
|
if !gl
|
||||||
|
.get_program_parameter(&shader_program, GL2::LINK_STATUS)
|
||||||
|
.as_bool()
|
||||||
|
.unwrap()
|
||||||
|
{
|
||||||
warn!("shader couldn't be linked!");
|
warn!("shader couldn't be linked!");
|
||||||
}
|
}
|
||||||
gl.use_program(Some(&shader_program));
|
gl.use_program(Some(&shader_program));
|
||||||
@@ -328,7 +373,9 @@ impl App {
|
|||||||
gl.clear_color(0.0, 0.0, 0.0, 1.0);
|
gl.clear_color(0.0, 0.0, 0.0, 1.0);
|
||||||
gl.clear(GL2::COLOR_BUFFER_BIT | GL2::DEPTH_BUFFER_BIT);
|
gl.clear(GL2::COLOR_BUFFER_BIT | GL2::DEPTH_BUFFER_BIT);
|
||||||
|
|
||||||
let default_matrix = vec![1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0];
|
let default_matrix = vec![
|
||||||
|
1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0,
|
||||||
|
];
|
||||||
let unim_matrix = gl.get_uniform_location(&shader_program, "model");
|
let unim_matrix = gl.get_uniform_location(&shader_program, "model");
|
||||||
let unim_time = gl.get_uniform_location(&shader_program, "time");
|
let unim_time = gl.get_uniform_location(&shader_program, "time");
|
||||||
let unim_res = gl.get_uniform_location(&shader_program, "resolution");
|
let unim_res = gl.get_uniform_location(&shader_program, "resolution");
|
||||||
@@ -336,11 +383,18 @@ impl App {
|
|||||||
|
|
||||||
let mut timestamp = 0.0;
|
let mut timestamp = 0.0;
|
||||||
gl.uniform1f(unim_time.as_ref(), timestamp / 2000.0);
|
gl.uniform1f(unim_time.as_ref(), timestamp / 2000.0);
|
||||||
gl.draw_elements_with_i32(GL2::TRIANGLES, element_indices.len() as i32, GL2::UNSIGNED_SHORT, 0);
|
gl.draw_elements_with_i32(
|
||||||
|
GL2::TRIANGLES,
|
||||||
|
element_indices.len() as i32,
|
||||||
|
GL2::UNSIGNED_SHORT,
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
|
||||||
fn request_animation_frame(f: &Closure<dyn FnMut()>) {
|
fn request_animation_frame(f: &Closure<dyn FnMut()>) {
|
||||||
window().unwrap().request_animation_frame(f.as_ref().unchecked_ref())
|
window()
|
||||||
.expect("should register `requestAnimationFrame` OK");
|
.unwrap()
|
||||||
|
.request_animation_frame(f.as_ref().unchecked_ref())
|
||||||
|
.expect("should register `requestAnimationFrame` OK");
|
||||||
}
|
}
|
||||||
|
|
||||||
let cb = Arc::new(RefCell::new(None));
|
let cb = Arc::new(RefCell::new(None));
|
||||||
@@ -355,13 +409,21 @@ impl App {
|
|||||||
gl.uniform_matrix4fv_with_f32_array(unim_matrix.as_ref(), false, default_matrix.as_slice());
|
gl.uniform_matrix4fv_with_f32_array(unim_matrix.as_ref(), false, default_matrix.as_slice());
|
||||||
|
|
||||||
gl.uniform1f(unim_time.as_ref(), timestamp / 2000.0);
|
gl.uniform1f(unim_time.as_ref(), timestamp / 2000.0);
|
||||||
gl.uniform2fv_with_f32_array(unim_res.as_ref(), vec![canvas.width() as f32, canvas.height() as f32].as_slice());
|
gl.uniform2fv_with_f32_array(
|
||||||
|
unim_res.as_ref(),
|
||||||
|
vec![canvas.width() as f32, canvas.height() as f32].as_slice(),
|
||||||
|
);
|
||||||
|
|
||||||
gl.uniform1i(unim_overlay_time.as_ref(), 0); // TODO: ... | add is xmas check
|
gl.uniform1i(unim_overlay_time.as_ref(), 0); // TODO: ... | add is xmas check
|
||||||
|
|
||||||
gl.viewport(0, 0, canvas.width() as i32, canvas.height() as i32);
|
gl.viewport(0, 0, canvas.width() as i32, canvas.height() as i32);
|
||||||
gl.clear(GL2::COLOR_BUFFER_BIT | GL2::DEPTH_BUFFER_BIT);
|
gl.clear(GL2::COLOR_BUFFER_BIT | GL2::DEPTH_BUFFER_BIT);
|
||||||
gl.draw_elements_with_i32(GL2::TRIANGLES, element_indices.len() as i32, GL2::UNSIGNED_SHORT, 0);
|
gl.draw_elements_with_i32(
|
||||||
|
GL2::TRIANGLES,
|
||||||
|
element_indices.len() as i32,
|
||||||
|
GL2::UNSIGNED_SHORT,
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
|
||||||
request_animation_frame(cb.borrow().as_ref().unwrap());
|
request_animation_frame(cb.borrow().as_ref().unwrap());
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,28 +12,82 @@ impl Component for About {
|
|||||||
fn view(&self, _ctx: &Context<Self>) -> Html {
|
fn view(&self, _ctx: &Context<Self>) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<div class="tile is-parent container box is-small is-flex-shrink-5 mb-5 mt-5">
|
<div>
|
||||||
<img alt="insert pfp here" loading="eager" class="image is-128x128 is-square is-inline-block mg-small" src="profile.avif" />
|
<img alt="insert pfp here" style="
|
||||||
<div class="columns is-narrow ml-3 is-inline-block is-vcentered is-centered is-gapless is-multiline is-0 mt-4" style="vertical-align: top !important;">
|
float: left !important;
|
||||||
<p class="column is-narrow" style="filter: url(post.bloom.svg#process) !important; color: #B4BEFE !important;"><img loading="eager" alt="ket" class="image is-24x24 is-square is-inline-block mg-small" src="oneko.gif" />{r" Lucielle R. Hoerner"}</p>
|
margin-right: 10px !important;
|
||||||
<p class="column is-narrow" style="background-clip: text !important; background-image: linear-gradient(45deg, #5BCEFAFF, #F5A9B8FF, #FFFFFFFF) !important;">
|
border-radius: 0.5rem !important;
|
||||||
<p>{r"they/she · transfem"}</p>
|
" loading="eager" width="96px" height="96px" src="profile.avif" />
|
||||||
<p>{r"certified catgirl™"}</p>
|
<div style="
|
||||||
<p>{r"software engineer"}</p>
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
max-height: 96px !important;
|
||||||
|
">
|
||||||
|
<p style="
|
||||||
|
display: flex !important;
|
||||||
|
color: transparent !important;
|
||||||
|
flex-direction: row !important;
|
||||||
|
align-items: center !important;
|
||||||
|
width: fit-content !important;
|
||||||
|
background-clip: text !important;
|
||||||
|
background-image: linear-gradient(45deg, #5BCEFAFF, #F5A9B8FF, #FFFFFFFF) !important;
|
||||||
|
-webkit-background-clip: text !important;
|
||||||
|
margin: unset !important;
|
||||||
|
filter: url(post.bloom.svg#process) !important;
|
||||||
|
">
|
||||||
|
<img loading="eager" alt="ket" src="oneko.gif" />{r" lia · they/she · transfemby"}</p>
|
||||||
|
<p style="margin: unset !important;">
|
||||||
|
<p style="margin: unset !important;">{r"certified catgirl™"}</p>
|
||||||
|
<p style="margin: unset !important;">{r"software engineer"}</p>
|
||||||
|
<p style="margin: unset !important;">{r"professional yapper"}</p>
|
||||||
|
<p style="margin: unset !important;">{r"neurospicy and disabled"}</p>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<hr style="background-color: #B4BEFE60 !important;" />
|
<p style="
|
||||||
<p class="subtitle">{r#"about me"#}</p>
|
font-weight: bold !important;
|
||||||
<div class="content is-size-7">{r#"
|
font-style: italic !important;
|
||||||
haj! i'm luciel, but you can also just call me lucie.
|
font-size: xx-large !important;
|
||||||
i have lots of interests including music, cooking, development and learning new things.
|
">{r"intro"}<br /><p style="
|
||||||
in my free-time i mostly work on my private projects or spent time with my partners or online friends.
|
font-weight: normal !important;
|
||||||
my knowledge is based on autodidactics and experiences with (former) friends.
|
font-style: normal !important;
|
||||||
looking for an apprenticeship or job atm. because i wasn't able to finish my previous one due to some financial circumstances.
|
font-size: medium !important;
|
||||||
you can find public projects i work on somewhere in the header.
|
">{r#"
|
||||||
i may or may not update information stated here.
|
name's lia or lucy. we are creating.
|
||||||
"#}
|
trying to provide a safe space in the internet.
|
||||||
</div>
|
our goal's to make this world a better ~ less trashy ~ place.
|
||||||
|
may sound naive as fuck but fuck it we ball.
|
||||||
|
audhd (certified) and probably bpd or ptsd. i'm not a psychologist tho.
|
||||||
|
interact with caution, may bite.
|
||||||
|
political view's prolly too rad. should be enough to mention i'm social.
|
||||||
|
figure it yourself. use your brain.
|
||||||
|
"#}</p>{r"hobbies"}<br /><p style="
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-style: normal !important;
|
||||||
|
font-size: medium !important;
|
||||||
|
">{r#"
|
||||||
|
watching anime, designing something kewl, playing games, starting a new project or just yapping with friends, nearly everything's included.
|
||||||
|
i especially enjoy cooking or even baking if enough spoons are to avail.
|
||||||
|
which anime? has to be very specific, i'm really picky and judgy regarding them.
|
||||||
|
i uh - design stuff when enough creativity is there. nothing specific. maybe just a button, banner, icon or just anything.
|
||||||
|
has to be something i can somewhat imagine in my fucky-wucky head.
|
||||||
|
gaymes? gay! no uhh - i play ranging from minecraft and stardew, to puzzly metroidvanias like hollow knight and pseudoregalia, or challenging platformers like celeste, nearly anything.
|
||||||
|
i also enjoy playing rhythm games like osu! or muse dash. returning to terraria sometimes and also some old-ish games.
|
||||||
|
projects? you can find public ones in my projects tab.
|
||||||
|
"#}/*</p>{r"hobbies"}<br /><p style="
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-style: normal !important;
|
||||||
|
font-size: medium !important;
|
||||||
|
">{r#"
|
||||||
|
watching anime, designing something kewl, playing games, starting a new project or just yapping/meeting up with friends, nearly everything's included.
|
||||||
|
i especially enjoy cooking or even baking if enough spoons are to avail.
|
||||||
|
which anime? has to be very specific, i'm really picky and judgy regarding them.
|
||||||
|
i uh - design stuff when enough creativity is there. nothing specific. maybe just a button, banner, icon or just anything.
|
||||||
|
has to be something i can somewhat imagine in my fucky-wucky head.
|
||||||
|
gaymes? gay! no uhh - i play ranging from minecraft and stardew, to puzzly metroidvanias like hollow knight and pseudoregalia, or challenging platformers like celeste, nearly anything.
|
||||||
|
i also enjoy playing rhythm games like osu! or muse dash. returning to terraria sometimes and also some old-ish games.
|
||||||
|
projects? you can find public ones in my projects tab.
|
||||||
|
"#}*/</p>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|||||||
67
src/pages/findme.rs
Normal file
67
src/pages/findme.rs
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
pub struct FindMe;
|
||||||
|
impl Component for FindMe {
|
||||||
|
type Message = ();
|
||||||
|
type Properties = ();
|
||||||
|
|
||||||
|
fn create(_ctx: &Context<Self>) -> Self {
|
||||||
|
Self
|
||||||
|
}
|
||||||
|
|
||||||
|
fn view(&self, _ctx: &Context<Self>) -> Html {
|
||||||
|
html! {
|
||||||
|
<>
|
||||||
|
<p style="
|
||||||
|
font-weight: bold !important;
|
||||||
|
font-style: italic !important;
|
||||||
|
font-size: xx-large !important;
|
||||||
|
">{r"follow us"}<br /><p style="
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-style: normal !important;
|
||||||
|
font-size: medium !important;
|
||||||
|
">{" × "}<a style="
|
||||||
|
color: #F5C2E7FF !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
filter: url(post.bloom.svg#process) !important;
|
||||||
|
" href="https://ice.stellaris.fyi/@iouring">{r"fediverse"}</a><br />
|
||||||
|
{" × "}<a style="
|
||||||
|
color: #B4BEFEFF !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
" href="https://bsky.app/profile/i0ur.ing">{r"bluesky"}</a><br />
|
||||||
|
</p>{r"write us"}<br /><p style="
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-style: normal !important;
|
||||||
|
font-size: medium !important;
|
||||||
|
"><a style="
|
||||||
|
color: #94E2D5FF !important;
|
||||||
|
filter: url(post.bloom.svg#process) !important;
|
||||||
|
">{r" × matrix » @iouring:hi.stellaris.fyi"}</a><br />
|
||||||
|
<a style="color: #89B4FAFF !important;">{r" × telegr » @luc1ell3"}</a><br />
|
||||||
|
<a style="color: #F38BA8FF !important;">{r" × ewcord » @donotusedisc0rdkthxbye"}</a>
|
||||||
|
</p>{r"git gud"}<br /><p style="
|
||||||
|
font-weight: normal !important;
|
||||||
|
font-style: normal !important;
|
||||||
|
font-size: medium !important;
|
||||||
|
">{" × "}<a style="
|
||||||
|
color: #F5C2E7FF !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
filter: url(post.bloom.svg#process) !important;
|
||||||
|
" href="https://git.celesteflare.cc/i0uring">{r"my own!!!"}</a><br />
|
||||||
|
{" × "}<a style="
|
||||||
|
color: #CBA6F7FF !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
" href="https://git.gay/luciel">{r"the gay one"}</a><br />
|
||||||
|
{" × "}<a style="
|
||||||
|
color: #B4BEFEFF !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
" href="https://git.rimuru.club/i0uring">{r"git of fren"}</a><br />
|
||||||
|
{" × "}<a style="
|
||||||
|
color: #89B4FAFF !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
" href="https://codeberg.org/i0uring">{r"a mountain what"}</a>
|
||||||
|
</p></p>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
pub mod about;
|
pub mod about;
|
||||||
pub mod blog;
|
pub mod blog;
|
||||||
|
pub mod findme;
|
||||||
pub mod projects;
|
pub mod projects;
|
||||||
|
|
||||||
pub mod not_found;
|
pub mod not_found;
|
||||||
|
|||||||
@@ -11,16 +11,11 @@ impl Component for PageNotFound {
|
|||||||
}
|
}
|
||||||
|
|
||||||
fn view(&self, _ctx: &Context<Self>) -> Html {
|
fn view(&self, _ctx: &Context<Self>) -> Html {
|
||||||
// TODO: ... | personalize
|
|
||||||
html! {
|
html! {
|
||||||
<section class="hero is-danger is-bold is-large">
|
<div style="">
|
||||||
<div class="hero-body">
|
<img loading="eager" alt="huh" class="image is-96x96" src="404.png" />
|
||||||
<div class="container">
|
<h1 class="title">{ "what" }</h1>
|
||||||
<h1 class="title">{ "Page not found" }</h1>
|
</div>
|
||||||
<h2 class="subtitle">{ "Page page does not seem to exist" }</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ impl Projects {
|
|||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<p class="title ml-2 is-size-4">{r#"ongoing projects"#}</p>
|
<p class="title ml-2 is-size-4">{r#"ongoing projects"#}</p>
|
||||||
<div class="columns is-size-7 ml-3 mr-3" style="margin-top: var(--bulma-block-spacing) !important;">
|
<div class="columns is-size-7 ml-3 mr-3">
|
||||||
<div class="column box mb-5 mr-1">
|
<div class="column box mb-5 mr-1">
|
||||||
<p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/app_catnip">
|
<p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/app_catnip">
|
||||||
{r#"catnip"#}
|
{r#"catnip"#}
|
||||||
|
|||||||
Reference in New Issue
Block a user