216 lines
7.1 KiB
HTML
216 lines
7.1 KiB
HTML
<!doctype html>
|
|
|
|
{% if title %}
|
|
{% set pagetitle = title %}
|
|
{% else %}
|
|
{% set pagetitle = page.fileSlug %}
|
|
{% endif %}
|
|
|
|
<html class="latte dark:mocha">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Portfolio - {{ pagetitle | markdownToPlaintext | safe }}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta property="og:title" content="Portfolio - {{ pagetitle | markdownToPlaintext | safe }}" />
|
|
<meta property="og:description" content="{{ description | markdownToPlaintext | safe }}" />
|
|
{% if image %}
|
|
<meta property="og:image" content="https://gaiety.me{{ image }}" />
|
|
{% else %}
|
|
<meta property="og:image" content="https://gaiety.me/img/site/falling.gif" />
|
|
{% endif %}
|
|
{% if imageDescription %}
|
|
<meta property="og:image:alt" content="{{imageDescription}}" />
|
|
{% else %}
|
|
<meta property="og:image:alt" content="Gaiety's visual representation as a fursona (an original furry fandom character) depicted as an animated gif falling downward with a controlled hand outstretched. Faer hair and tail waves in the wind while their floppy dog ears flop about as well. Fae are an anthromorphic canine like a german shepherd clothed like a human in a t-shirt and denim shorts. Art is by Lynte." />
|
|
{% endif %}
|
|
<meta property="og:url" content="https://gaiety.me{{ page.url }}" />
|
|
<meta name="generator" content="Eleventy v3.0.0">
|
|
|
|
<link href="/styles.css" rel="stylesheet">
|
|
<link href="/catppuccin-variables.rgb.css" rel="stylesheet">
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/site/favicons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/img/site/favicons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/img/site/favicons/favicon-16x16.png">
|
|
<link rel="manifest" href="/img/site/favicons/site.webmanifest">
|
|
<script src="https://xemantic.github.io/shader-web-background/dist/shader-web-background.min.js"></script>
|
|
|
|
<script type="x-shader/x-fragment" id="Image">
|
|
precision highp float;
|
|
|
|
uniform vec2 iResolution;
|
|
uniform float iTime;
|
|
uniform sampler2D iChannel0;
|
|
// ... other needed uniforms
|
|
|
|
// -- Paste your Shadertoy code here:
|
|
#define NUM_LAYERS 10.
|
|
|
|
mat2 Rot(float a) {
|
|
float c = cos(a), s = sin(a);
|
|
return mat2(c, -s, s, c);
|
|
}
|
|
|
|
float Star(vec2 uv, float flare) {
|
|
float col = 0.;
|
|
float d = length(uv);
|
|
float m = .02/d;
|
|
|
|
float rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
|
|
m += rays * flare;
|
|
uv *= Rot(3.1415/4.);
|
|
rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
|
|
m += rays * .3 * flare;
|
|
|
|
m *= smoothstep(1., .2, d);
|
|
|
|
return m;
|
|
}
|
|
|
|
float Hash21(vec2 p) {
|
|
p = fract(p * vec2(123.34, 456.21));
|
|
p += dot(p, p+45.32);
|
|
|
|
return fract(p.x*p.y);
|
|
}
|
|
|
|
vec3 StarLayer(vec2 uv) {
|
|
vec3 col = vec3(0.);
|
|
|
|
vec2 gv = fract(uv) - 0.5;
|
|
vec2 id = floor(uv);
|
|
|
|
for(int y = -1; y <= 1; y++ ) {
|
|
for(int x = -1; x <= 1; x++) {
|
|
vec2 offs = vec2(x, y);
|
|
|
|
float n = Hash21(id + offs);
|
|
float size = fract(n*345.32);
|
|
|
|
vec2 p = vec2(n, fract(n*34.));
|
|
|
|
float star = Star(gv - offs - p + .5, smoothstep(.8, 1., size) * .6);
|
|
|
|
vec3 hueShift = fract(n*2345.2 + dot(uv /420.,texture2D(iChannel0, vec2(0.25, 0.)).rg))*vec3(.2, .3, .9)*123.2;
|
|
|
|
vec3 color = sin(hueShift) * .5 + .5;
|
|
color = color * vec3(1., .25, 1.+size);
|
|
|
|
star *= sin(iTime*3.+n*6.2831)*.4+1.;
|
|
col += star * size * color;
|
|
}
|
|
}
|
|
|
|
return col;
|
|
|
|
}
|
|
|
|
vec2 N(float angle) {
|
|
return vec2(sin(angle), cos(angle));
|
|
}
|
|
|
|
void mainImage( out vec4 fragColor, in vec2 fragCoord )
|
|
{
|
|
vec2 uv = (fragCoord - 0.5*iResolution.xy)/iResolution.y;
|
|
vec2 M = (fragCoord - iResolution.xy*.5)/iResolution.y;
|
|
float t = iTime * .01;
|
|
|
|
uv.x = abs(uv.x);
|
|
uv.y += tan((5./6.) * 3.1415) * .5;
|
|
|
|
vec2 n = N((5./6.) * 3.1415);
|
|
float d = dot(uv - vec2(.5, 0.), n);
|
|
uv -= n * max(0., d) * 2.;
|
|
|
|
// col += smoothstep(.01, .0, abs(d));
|
|
|
|
n = N((2./3.) * 3.1415);
|
|
float scale = 1.;
|
|
uv.x += 1.5 / 1.25;
|
|
for(int i=0; i<5; i++) {
|
|
scale *= 1.25;
|
|
uv *= 1.25;
|
|
uv.x -= 1.5;
|
|
|
|
uv.x = abs(uv.x);
|
|
uv.x -= 0.5;
|
|
uv -= n * min(0., dot(uv, n)) * 2.;
|
|
}
|
|
|
|
|
|
uv += M * 4.;
|
|
|
|
uv *= Rot(t);
|
|
vec3 col = vec3(0.);
|
|
|
|
float layers = 10.;
|
|
|
|
for(float i=0.; i < 1.; i+=1./NUM_LAYERS) {
|
|
float depth = fract(i+t);
|
|
float scale = mix(20., .5, depth);
|
|
float fade = depth * smoothstep(1., .9, depth);
|
|
col += StarLayer(uv * scale + i * 453.2) * fade;
|
|
}
|
|
|
|
fragColor = vec4(col,1.0);
|
|
}
|
|
// -- End of Shadertoy code
|
|
|
|
|
|
void main() {
|
|
mainImage(gl_FragColor, gl_FragCoord.xy);
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
shaderWebBackground.shade({
|
|
shaders: {
|
|
Image: {
|
|
uniforms: {
|
|
iResolution: (gl, loc, ctx) => gl.uniform2f(loc, ctx.width, ctx.height),
|
|
iTime: (gl, loc) => gl.uniform1f(loc, performance.now() / 5000),
|
|
iChannel0: (gl, loc, ctx) => ctx.texture(loc, ctx.buffers.BufferA),
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body class="bg-crust bg-[length:20rem]">
|
|
<div class="flex gap-y-12 flex-col sm:flex-row">
|
|
<header class="flex gap-2 justify-between flex-col xs:flex-row sm:flex-col sm:justify-start">
|
|
<img
|
|
src="/img/site/falling.gif"
|
|
alt="Gaiety's visual representation as a fursona (an original furry fandom character) depicted as an animated gif falling downward with a controlled hand outstretched. Faer hair and tail waves in the wind while their floppy dog ears flop about as well. Fae are an anthromorphic canine like a german shepherd clothed like a human in a t-shirt and denim shorts. Art is by Lynte."
|
|
title="Art by Lynte"
|
|
aria-describedby="lynte"
|
|
class="h-auto w-auto xs:max-w-48 motion-safe:hover:animate-shake motion-safe:hover:animation-infinite motion-safe:hover:animate-duration-[1500ms] motion-safe:hover:animate-ease-out"
|
|
/>
|
|
<nav class="
|
|
inline-flex flex-col relative my-auto pl-2 pb-2 sm:my-0
|
|
border-l-2 border-l-lavender
|
|
rounded-bl md:rounded-tr md:rounded-br md:rounded-bl-none shadow bg-crust/25 contrast-more:bg-crust
|
|
">
|
|
{%- for navItem in navigation -%}
|
|
<a
|
|
href="{{navItem.url}}"
|
|
class="motion-safe:transition-colors {% if page.url == navItem.url %} border-mauve text-mauve {% else %} hover:border-pink active:border-pink text-subtext1 hover:text-subtext0 active:text-subtext0 border-transparent{% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium outline-link"
|
|
{% if page.url == navItem.url %}aria-current="page"{% endif %}
|
|
>
|
|
{{navItem.title}}
|
|
</a>
|
|
{%- endfor -%}
|
|
|
|
{%- for navItem in links -%}
|
|
<a
|
|
href="{{navItem.url}}"
|
|
class="ml-1 mt-1 pr-4 link hidden xs:inline-flex"
|
|
{% if page.url == navItem.url %}aria-current="page"{% endif %}
|
|
>
|
|
{{navItem.title}}
|
|
</a>
|
|
{%- endfor -%}
|
|
</nav>
|
|
</header>
|