🔥 rm bulma

 rework ui+ux
 update shader
 update profile.avif
 update 404
This commit is contained in:
lia
2025-08-20 08:38:03 +00:00
parent 510897d94b
commit bfd8c187c6
14 changed files with 374 additions and 341 deletions

1
.gitignore vendored
View File

@@ -3,4 +3,3 @@ dist/
pkg/
target/
Cargo.lock
bulma.min.css

View File

@@ -1,6 +0,0 @@
version: '3'
services:
web:
build: ./
ports:
- "8080:8080"

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="theme-dark">
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -7,6 +7,7 @@
<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/404.png" />
<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/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/aqueer.png" />
<link data-trunk rel="sass" href="main.scss" />
<link data-trunk rel="css" href="bulma.min.css" />
<!--<link data-trunk rel="sass" href="main.scss" />-->
<link data-trunk rel="rust" />
<base data-trunk-public-url />
</head>

View File

@@ -7,9 +7,7 @@ install:
cargo install --locked wasm-pack trunk --force
debug:
rm bulma.min.css && curl --proto '=https' --tlsv1.3 -LO https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css
trunk serve
build:
rm bulma.min.css && curl --proto '=https' --tlsv1.3 -LO https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css
trunk build --release

View File

@@ -27,49 +27,18 @@ html * {
.box {
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 {
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,
.select select,
.textarea {
backdrop-filter: blur(4px);
--bulma-input-h: 232 !important;
--bulma-input-s: 97% !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;
background-color: white, 0.213125 !important;
border-color: white !important;
}
a.navbar-item,

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

View File

@@ -4,8 +4,6 @@ precision highp float;
const float CAM_FAR = 20.0;
const vec3 BACKGROUND = vec3(0.0, 0.0, 0.0);
const float PI = radians(180.0);
uniform float time;
uniform vec2 resolution;
uniform bool layer_snow;
@@ -19,48 +17,42 @@ vec3 artifactAxis;
vec3 camFwd;
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) {
n = fract(n * 43758.5453);
n *= n;
return fract(n * 43758.5453);
}
float hash(float n) {
return fract(abs(fract(n) * 43758.5453));
return fract(sin(n) * 43758.5453);
}
float noise(float x) {
float i = floor(x);
float f = fract(x);
float u = f * f * (3.0 - 2.0 * f);
return mix(hash(i), hash(i + 1.0), u);
return mix(rand(i), rand(i + 1.0), f * f * (3.0 - 2.0 * f));
}
mat4 viewMatrix(vec3 dir, vec3 up) {
vec3 f = normalize(dir);
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) {
vec3 v = cross(z, d);
float c = dot(z, d);
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(
v.x * v.x * k + c,
v.y * v.x * k - v.z,
v.z * v.x * k + v.y,
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
k_vx * v.x + c, k_vx * v.y - v.z, k_vx * v.z + v.y,
k_vy * v.x + v.z, k_vy * v.y + c, k_vy * v.z - v.x,
k_vz * v.x - v.y, k_vz * v.y + v.x, k_vz * v.z + c
);
}
@@ -74,48 +66,10 @@ vec3 calcRay(vec2 uv, float fov, float aspect) {
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) {
const float factor = 0.57735027;
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) {
@@ -145,10 +99,6 @@ float artifactDist(vec3 p) {
return octahedron(p, 1.2);
}
float objectsDist(vec3 p) {
return artifactDist(p);
}
vec3 objectsNormal(vec3 p, float eps) {
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)));
@@ -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;
}
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) {
mat4 vm = viewMatrix(camFwd, camUp);
vec3 ray = (vm * vec4(calcRay(uv, 80.0, resolution.x / resolution.y), 1.0)).xyz;
vec4 color = vec4(BACKGROUND, CAM_FAR);
vec3 waterColor;
marchWater(camPos, ray, color);
marchObjects(camPos, ray, color.w, color);
return color.rgb;
}
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;
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 *= 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) {
vec2 uv = fragCoord * (vec2(1.0) / resolution.xy);
vec2 uv = fragCoord / resolution.xy;
float s = sin(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));
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);
if (layer_snow) {
vec2 p = fragCoord.xy / resolution.xy;
vec2 uvSnow = (fragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
fragColor += mix(vec4(vec3(snow(uvSnow, 4.0)), 0.5) + vec4(vec3(snow(uvSnow, 3.0)), 0.5), vec4(0.0), vec4(0.7));
vec2 uvSnow = (fragCoord * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
fragColor += vec4(vec3(snow(uvSnow, 4.0)), 0.5) * 0.7;
}
}

View File

@@ -2,18 +2,19 @@ use js_sys::Float32Array;
use log::{info, warn};
use std::cell::RefCell;
use std::sync::Arc;
use wasm_bindgen::prelude::*;
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_router::prelude::*;
mod pages;
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::entry::Entry;
use crate::pages::blog::authors::Authors;
use crate::pages::blog::author::Author;
use crate::pages::findme::FindMe;
use crate::pages::projects::Projects;
use pages::not_found::PageNotFound;
@@ -34,6 +35,9 @@ pub enum Route {
#[at("/projects")]
Projects,
#[at("/findme")]
FindMe,
#[not_found]
#[at("/404")]
NotFound,
@@ -53,7 +57,10 @@ impl Component for App {
type Properties = ();
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 {
@@ -68,115 +75,132 @@ impl Component for App {
fn view(&self, _ctx: &Context<Self>) -> Html {
html! {
<>
<canvas style="
<canvas width="100%" height="100%" style="
background-color: black !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 0 !important;
" ref={self.node_ref.clone()} />
<div style="
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
height: 100vh !important;
">
<BrowserRouter>
<main 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;
background-color: transparent !important;
color: white !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
position: fixed !important;
left: 0px !important;
bottom: 0px !important;
margin-bottom: 0 !important;
width: 100% !important;
padding: 0 !important;
">{ self.view_footer() }</footer>
</div>
height: calc(100vh - 18px) !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;
">
<nav class="navbar" style="
z-index: 1 !important;
display: flex !important;
flex-direction: row !important;
align-items: center;
max-width: 100vw !important;
filter: url(post.bloom.svg#process) !important;
">
<p>{r"-»{ "}</p>
<Link<Route> to={Route::About}>
<a style="color: #CBA6F7FF !important;">{r"about"}</a>
</Link<Route>>
/*<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) {
if first_render { self.view_canvas(); }
if first_render {
self.view_canvas();
}
}
}
fn switch(routes: Route) -> Html {
match routes {
Route::About => { html! { <About /> } }
Route::About => {
html! { <About /> }
}
Route::Entries => { html! { <Entries /> } }
Route::Entry { id } => { html! { <Entry seed={id as u8} /> } }
Route::Authors => { html! { <Authors /> } }
Route::Author { id } => { html! { <Author seed={id} /> } }
Route::Entries => {
html! { <Entries /> }
}
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::NotFound => { html! { <PageNotFound /> } }
Route::FindMe => {
html! { <FindMe /> }
}
Route::Projects => {
html! { <Projects /> }
}
Route::NotFound => {
html! { <PageNotFound /> }
}
}
}
impl App {
fn view_header(&self, _ctx: &Context<Self>) -> Html {
let active_class = if self.navbar_active { "is-active" } else { "" };
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_list(&self, _ctx: &Context<Self>) -> Html {
html! {}
}
fn view_footer(&self) -> Html {
fn view_buttons(&self) -> Html {
html! {
<>
<div class="is-flex is-flex-direction-column is-flex-wrap-wrap" style="
<div style="
backdrop-filter: blur(4px);
width: 100vw !important;
text-align: left !important;
@@ -184,63 +208,70 @@ impl App {
height: 40px !important; max-height: 40px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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="
width: 88px !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>
</>
@@ -253,25 +284,35 @@ impl App {
let gl = canvas
.get_context("webgl2")
.unwrap_or(canvas.get_context("webgl").unwrap())
.unwrap().dyn_into::<GL2>().unwrap();
.unwrap()
.dyn_into::<GL2>()
.unwrap();
let vertex_buffer = gl.create_buffer().unwrap();
gl.bind_buffer(GL2::ARRAY_BUFFER, Some(&vertex_buffer));
gl.buffer_data_with_array_buffer_view(GL2::ARRAY_BUFFER, &Float32Array::from(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
].as_slice()), GL2::STATIC_DRAW);
gl.buffer_data_with_array_buffer_view(
GL2::ARRAY_BUFFER,
&Float32Array::from(
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,
]
.as_slice(),
),
GL2::STATIC_DRAW,
);
let color_buffer = gl.create_buffer().unwrap();
gl.bind_buffer(GL2::ARRAY_BUFFER, Some(&color_buffer));
gl.buffer_data_with_array_buffer_view(GL2::ARRAY_BUFFER, &Float32Array::from(vec![
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);
gl.buffer_data_with_array_buffer_view(
GL2::ARRAY_BUFFER,
&Float32Array::from(
vec![
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,
);
let element_buffer = gl.create_buffer().unwrap();
gl.bind_buffer(GL2::ELEMENT_ARRAY_BUFFER, Some(&element_buffer));
@@ -307,7 +348,11 @@ impl App {
gl.attach_shader(&shader_program, &fragment_shader);
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!");
}
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(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_time = gl.get_uniform_location(&shader_program, "time");
let unim_res = gl.get_uniform_location(&shader_program, "resolution");
@@ -336,10 +383,17 @@ impl App {
let mut timestamp = 0.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()>) {
window().unwrap().request_animation_frame(f.as_ref().unchecked_ref())
window()
.unwrap()
.request_animation_frame(f.as_ref().unchecked_ref())
.expect("should register `requestAnimationFrame` OK");
}
@@ -355,13 +409,21 @@ impl App {
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.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.viewport(0, 0, canvas.width() as i32, canvas.height() as i32);
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());
}

View File

@@ -12,28 +12,82 @@ impl Component for About {
fn view(&self, _ctx: &Context<Self>) -> Html {
html! {
<>
<div class="tile is-parent container box is-small is-flex-shrink-5 mb-5 mt-5">
<img alt="insert pfp here" loading="eager" class="image is-128x128 is-square is-inline-block mg-small" src="profile.avif" />
<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;">
<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>
<p class="column is-narrow" style="background-clip: text !important; background-image: linear-gradient(45deg, #5BCEFAFF, #F5A9B8FF, #FFFFFFFF) !important;">
<p>{r"they/she · transfem"}</p>
<p>{r"certified catgirl™"}</p>
<p>{r"software engineer"}</p>
<div>
<img alt="insert pfp here" style="
float: left !important;
margin-right: 10px !important;
border-radius: 0.5rem !important;
" loading="eager" width="96px" height="96px" src="profile.avif" />
<div style="
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>
</div>
<hr style="background-color: #B4BEFE60 !important;" />
<p class="subtitle">{r#"about me"#}</p>
<div class="content is-size-7">{r#"
haj! i'm luciel, but you can also just call me lucie.
i have lots of interests including music, cooking, development and learning new things.
in my free-time i mostly work on my private projects or spent time with my partners or online friends.
my knowledge is based on autodidactics and experiences with (former) friends.
looking for an apprenticeship or job atm. because i wasn't able to finish my previous one due to some financial circumstances.
you can find public projects i work on somewhere in the header.
i may or may not update information stated here.
"#}
</div>
<p style="
font-weight: bold !important;
font-style: italic !important;
font-size: xx-large !important;
">{r"intro"}<br /><p style="
font-weight: normal !important;
font-style: normal !important;
font-size: medium !important;
">{r#"
name's lia or lucy. we are creating.
trying to provide a safe space in the internet.
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>
</>
}

67
src/pages/findme.rs Normal file
View 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>
</>
}
}
}

View File

@@ -1,5 +1,6 @@
pub mod about;
pub mod blog;
pub mod findme;
pub mod projects;
pub mod not_found;

View File

@@ -11,16 +11,11 @@ impl Component for PageNotFound {
}
fn view(&self, _ctx: &Context<Self>) -> Html {
// TODO: ... | personalize
html! {
<section class="hero is-danger is-bold is-large">
<div class="hero-body">
<div class="container">
<h1 class="title">{ "Page not found" }</h1>
<h2 class="subtitle">{ "Page page does not seem to exist" }</h2>
<div style="">
<img loading="eager" alt="huh" class="image is-96x96" src="404.png" />
<h1 class="title">{ "what" }</h1>
</div>
</div>
</section>
}
}
}

View File

@@ -25,7 +25,7 @@ impl Projects {
html! {
<>
<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">
<p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/app_catnip">
{r#"catnip"#}