Cayden Website 2.0: Rewrite with t3code & hand
This commit is contained in:
Cayden Schwechten
parent
75a0e8f5fc
commit
243527af9f
34 changed files with 1652 additions and 1001 deletions
|
|
@ -1,27 +0,0 @@
|
|||
import Link from "next/link"
|
||||
import type {ArticleItem} from "@/types";
|
||||
|
||||
interface Props {
|
||||
category: string,
|
||||
articles: ArticleItem[]
|
||||
}
|
||||
|
||||
const ArticleItemList = ({category, articles}: Props) => {
|
||||
return (
|
||||
<>
|
||||
<div className={"flex flex-col gap-5"}>
|
||||
<h2 className={"font-cormorantGaramond text-4xl"}>{category}</h2>
|
||||
<div className={"flex flex-col gap-2.5 font-poppins text-lg"}>
|
||||
{articles.map((article, id) => (
|
||||
<Link href={`/blog/${article.id}`} key={id}
|
||||
className={"hover:text-nord-12 transition duration-250"}>
|
||||
{article.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArticleItemList
|
||||
766
components/GradientWaves.tsx
Normal file
766
components/GradientWaves.tsx
Normal file
|
|
@ -0,0 +1,766 @@
|
|||
// From https://reactbits.dev/ - $ npx shadcn@latest add @react-bits/GradientWaves-TS-TW Aurora
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useRef, type CSSProperties } from 'react';
|
||||
|
||||
export interface GradientWavesProps {
|
||||
horizonColor?: string;
|
||||
waveColor?: string;
|
||||
crestColor?: string;
|
||||
backgroundColor?: string;
|
||||
lightMode?: boolean;
|
||||
speed?: number;
|
||||
amplitude?: number;
|
||||
waveScale?: number;
|
||||
waveRatio?: number;
|
||||
swell?: number;
|
||||
turbulence?: number;
|
||||
tilt?: number;
|
||||
zoom?: number;
|
||||
height?: number;
|
||||
fogDepth?: number;
|
||||
relief?: number;
|
||||
lightAngle?: number;
|
||||
sheen?: number;
|
||||
brightness?: number;
|
||||
opacity?: number;
|
||||
grain?: number;
|
||||
quality?: 'low' | 'medium' | 'high';
|
||||
intro?: boolean;
|
||||
mouseInteraction?: boolean;
|
||||
parallaxStrength?: number;
|
||||
mouseStrength?: number;
|
||||
swellOnClick?: boolean;
|
||||
paused?: boolean;
|
||||
dpr?: number;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
type RGB = [number, number, number];
|
||||
|
||||
interface Swell {
|
||||
x: number;
|
||||
y: number;
|
||||
at: number;
|
||||
}
|
||||
|
||||
interface View {
|
||||
zoom: number;
|
||||
tilt: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const ROOT = 'relative h-full w-full overflow-hidden';
|
||||
const CANVAS = 'absolute inset-0 block h-full w-full';
|
||||
|
||||
const MAX_SWELLS = 4;
|
||||
const SWELL_SECONDS = 3.2;
|
||||
const SWELL_GAIN = 2.8;
|
||||
const SWELL_WIDTH = 8;
|
||||
const INTRO_SECONDS = 2.6;
|
||||
const CAMERA_HEIGHT = 30;
|
||||
const QUALITY: Record<string, number> = { low: 56, medium: 84, high: 120 };
|
||||
|
||||
const VERTEX = `#version 300 es
|
||||
in vec2 aPosition;
|
||||
void main() {
|
||||
gl_Position = vec4(aPosition, 0.0, 1.0);
|
||||
}`;
|
||||
|
||||
const FRAGMENT = `#version 300 es
|
||||
precision highp float;
|
||||
uniform vec2 uResolution;
|
||||
uniform float uTime;
|
||||
uniform float uClock;
|
||||
uniform float uAmplitude;
|
||||
uniform float uWaveScale;
|
||||
uniform float uWaveRatio;
|
||||
uniform float uSwell;
|
||||
uniform float uTurbulence;
|
||||
uniform float uHeight;
|
||||
uniform float uTilt;
|
||||
uniform float uZoom;
|
||||
uniform vec2 uLook;
|
||||
uniform float uFogDepth;
|
||||
uniform float uBrightness;
|
||||
uniform float uOpacity;
|
||||
uniform float uGrain;
|
||||
uniform vec3 uHorizon;
|
||||
uniform vec3 uWave;
|
||||
uniform vec3 uCrest;
|
||||
uniform vec3 uBackground;
|
||||
uniform float uOpaque;
|
||||
uniform float uLight;
|
||||
uniform vec3 uSun;
|
||||
uniform float uRelief;
|
||||
uniform float uSheen;
|
||||
uniform float uSteps;
|
||||
uniform float uStride;
|
||||
uniform vec3 uIntro;
|
||||
uniform vec3 uSwells[${MAX_SWELLS}];
|
||||
uniform float uSwellWidth;
|
||||
out vec4 outColor;
|
||||
|
||||
const float FAR = 4000.0;
|
||||
|
||||
float hash(vec2 p) {
|
||||
vec3 p3 = fract(vec3(p.xyx) * 0.1031);
|
||||
p3 += dot(p3, p3.yzx + 33.33);
|
||||
return fract((p3.x + p3.y) * p3.z);
|
||||
}
|
||||
|
||||
vec3 surface(vec2 xy) {
|
||||
vec2 freq = vec2(uWaveScale / 7.0, (uWaveScale * uWaveRatio) / 3.0);
|
||||
vec4 tc = vec4(uTime / 0.130, uTime / 0.810, uTime / 0.200, uTime / 0.710);
|
||||
float a = xy.x + tc.x;
|
||||
float swellPhase = (xy.y + a) / 20.0 + tc.y;
|
||||
float bend = uSwell * cos(swellPhase) / 20.0;
|
||||
float mx = a + uSwell * sin(swellPhase);
|
||||
float crossPhase = xy.x / 23.0 + tc.w;
|
||||
float my = xy.y - tc.z + uTurbulence * cos(crossPhase);
|
||||
float twist = -uTurbulence * sin(crossPhase) / 23.0;
|
||||
float cx = cos(mx * freq.x);
|
||||
float cy = cos(my * freq.y);
|
||||
float rise = 1.0;
|
||||
if (uIntro.z > 0.0) rise = mix(1.0, smoothstep(uIntro.y * 0.45, uIntro.y * 1.6, xy.x), uIntro.z);
|
||||
float amp = uAmplitude * rise;
|
||||
float h = (sin(mx * freq.x) + sin(my * freq.y)) * amp + uHeight;
|
||||
float dx = amp * (freq.x * cx * (1.0 + bend) + freq.y * cy * twist);
|
||||
float dy = amp * (freq.x * cx * bend + freq.y * cy);
|
||||
for (int k = 0; k < ${MAX_SWELLS}; k++) {
|
||||
vec3 sw = uSwells[k];
|
||||
if (sw.z <= 0.0) continue;
|
||||
float u = (xy.x - sw.x) / uSwellWidth;
|
||||
float v = (xy.y - sw.y) / (uSwellWidth * 3.5);
|
||||
float bump = sw.z * exp(-u * u - v * v);
|
||||
h += bump;
|
||||
dx += bump * (-2.0 * u / uSwellWidth);
|
||||
dy += bump * (-2.0 * v / (uSwellWidth * 3.5));
|
||||
}
|
||||
return vec3(h, dx, dy);
|
||||
}
|
||||
|
||||
float march(vec3 origin, vec3 dir) {
|
||||
float dist = 0.0;
|
||||
for (int i = 0; i < 128; i++) {
|
||||
if (float(i) >= uSteps) break;
|
||||
float gap = origin.z + dist * dir.z - surface(origin.xy + dist * dir.xy).x;
|
||||
if (abs(gap) < 0.002 * dist + 0.01) break;
|
||||
dist += uStride * gap;
|
||||
if (!(abs(dist) < FAR)) return FAR;
|
||||
}
|
||||
return dist;
|
||||
}
|
||||
|
||||
void main() {
|
||||
float c;
|
||||
float s;
|
||||
float vfov = (3.14159 / 2.3) / max(uZoom, 0.05);
|
||||
vec3 cam = vec3(0.0, 0.0, ${CAMERA_HEIGHT.toFixed(1)});
|
||||
vec2 uv = gl_FragCoord.xy / uResolution - 0.5;
|
||||
uv.x *= uResolution.x / uResolution.y;
|
||||
uv.y *= -1.0;
|
||||
|
||||
vec3 dir = vec3(0.0, 0.0, -1.0);
|
||||
float ulen = length(uv);
|
||||
float xrot = vfov * ulen;
|
||||
c = cos(xrot);
|
||||
s = sin(xrot);
|
||||
dir = mat3(1.0, 0.0, 0.0, 0.0, c, -s, 0.0, s, c) * dir;
|
||||
vec2 nuv = ulen > 1e-5 ? uv / ulen : vec2(1.0, 0.0);
|
||||
dir = mat3(nuv.x, -nuv.y, 0.0, nuv.y, nuv.x, 0.0, 0.0, 0.0, 1.0) * dir;
|
||||
c = cos(uTilt + uLook.y);
|
||||
s = sin(uTilt + uLook.y);
|
||||
dir = mat3(c, 0.0, s, 0.0, 1.0, 0.0, -s, 0.0, c) * dir;
|
||||
c = cos(uLook.x);
|
||||
s = sin(uLook.x);
|
||||
dir = mat3(c, s, 0.0, -s, c, 0.0, 0.0, 0.0, 1.0) * dir;
|
||||
|
||||
float dist = march(cam, dir);
|
||||
vec3 pos = cam + dist * dir;
|
||||
vec3 field = surface(pos.xy);
|
||||
vec3 view = -dir;
|
||||
|
||||
float crest = clamp((field.x - uHeight) / max(2.0 * uAmplitude, 0.001) * 0.5 + 0.5, 0.0, 1.0);
|
||||
vec3 body = mix(uWave, uCrest, smoothstep(0.45, 1.0, crest) * 0.5);
|
||||
vec3 normal = normalize(vec3(-field.yz * (1.0 + 1.5 * uRelief), 1.0));
|
||||
float diffuse = clamp(dot(normal, uSun) * 0.5 + 0.5, 0.0, 1.0);
|
||||
float lightness = mix(1.0, diffuse * diffuse * (3.0 - 2.0 * diffuse), uRelief);
|
||||
float sheen = pow(clamp(dot(normal, normalize(uSun + view)), 0.0, 1.0), 14.0) * uSheen * (0.4 + 0.6 * uRelief);
|
||||
float rim = pow(1.0 - clamp(dot(normal, view), 0.0, 1.0), 3.0);
|
||||
|
||||
vec3 col;
|
||||
float alpha;
|
||||
float haze = 1.0 - exp(-dist / (uFogDepth * 5.0));
|
||||
float fade = 1.0 - smoothstep(0.35, 1.0, haze);
|
||||
if (uLight < 0.5) {
|
||||
vec3 lit = mix(uHorizon * 0.18, body, lightness) + uCrest * sheen;
|
||||
lit = mix(lit, uHorizon, rim * 0.15 * uRelief);
|
||||
col = mix(lit, uHorizon, smoothstep(0.0, 1.0, haze)) * 0.85 * uBrightness;
|
||||
alpha = fade;
|
||||
} else {
|
||||
vec3 hue = mix(uHorizon, body, 0.35 + 0.65 * lightness);
|
||||
float density = mix(0.16, 0.9, 1.0 - lightness);
|
||||
density *= 1.0 - clamp(sheen, 0.0, 1.0) * 0.85;
|
||||
density *= 1.0 - 0.5 * smoothstep(0.0, 1.0, haze);
|
||||
col = hue;
|
||||
alpha = fade * clamp(density * uBrightness, 0.0, 1.0);
|
||||
}
|
||||
|
||||
float reveal = uIntro.x;
|
||||
col = clamp(col, 0.0, 1.0);
|
||||
float grain = (hash(gl_FragCoord.xy + fract(uClock) * 64.0) - 0.5) * uGrain;
|
||||
alpha = clamp(alpha * (1.0 + grain), 0.0, 1.0) * reveal * uOpacity;
|
||||
if (uOpaque > 0.5) {
|
||||
outColor = vec4(mix(uBackground, col, alpha), 1.0);
|
||||
} else {
|
||||
outColor = vec4(col * alpha, alpha);
|
||||
}
|
||||
}`;
|
||||
|
||||
const clamp = (value: number, min: number, max: number) =>
|
||||
Math.min(max, Math.max(min, value));
|
||||
|
||||
const easeInOut = (t: number) =>
|
||||
t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
|
||||
|
||||
let probe: CanvasRenderingContext2D | null = null;
|
||||
|
||||
const parseColor = (value: string, fallback: RGB | null): RGB | null => {
|
||||
if (value === 'transparent') return null;
|
||||
if (typeof document === 'undefined') return fallback;
|
||||
if (!probe) probe = document.createElement('canvas').getContext('2d');
|
||||
if (!probe) return fallback;
|
||||
probe.fillStyle = '#000000';
|
||||
probe.fillStyle = value;
|
||||
const text = probe.fillStyle;
|
||||
if (text.startsWith('#')) {
|
||||
const hex = parseInt(text.slice(1), 16);
|
||||
return [
|
||||
((hex >> 16) & 255) / 255,
|
||||
((hex >> 8) & 255) / 255,
|
||||
(hex & 255) / 255,
|
||||
];
|
||||
}
|
||||
const match =
|
||||
/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?/.exec(text);
|
||||
if (!match) return fallback;
|
||||
if (match[4] !== undefined && Number(match[4]) === 0) return null;
|
||||
return [
|
||||
Number(match[1]) / 255,
|
||||
Number(match[2]) / 255,
|
||||
Number(match[3]) / 255,
|
||||
];
|
||||
};
|
||||
|
||||
const compile = (gl: WebGL2RenderingContext, type: number, source: string) => {
|
||||
const shader = gl.createShader(type);
|
||||
if (!shader) return null;
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
console.error(gl.getShaderInfoLog(shader));
|
||||
gl.deleteShader(shader);
|
||||
return null;
|
||||
}
|
||||
return shader;
|
||||
};
|
||||
|
||||
const rayAt = (point: number[], aspect: number, s: View, look: number[]) => {
|
||||
const uvx = (point[0] - 0.5) * aspect;
|
||||
const uvy = point[1] - 0.5;
|
||||
const vfov = Math.PI / 2.3 / Math.max(s.zoom, 0.05);
|
||||
const length = Math.hypot(uvx, uvy);
|
||||
const turn = vfov * length;
|
||||
let dir = [0, -Math.sin(turn), -Math.cos(turn)];
|
||||
const nx = length > 1e-5 ? uvx / length : 1;
|
||||
const ny = length > 1e-5 ? uvy / length : 0;
|
||||
dir = [nx * dir[0] + ny * dir[1], -ny * dir[0] + nx * dir[1], dir[2]];
|
||||
const pitch = s.tilt + look[1];
|
||||
const cp = Math.cos(pitch);
|
||||
const sp = Math.sin(pitch);
|
||||
dir = [cp * dir[0] - sp * dir[2], dir[1], sp * dir[0] + cp * dir[2]];
|
||||
const cy = Math.cos(look[0]);
|
||||
const sy = Math.sin(look[0]);
|
||||
dir = [cy * dir[0] - sy * dir[1], sy * dir[0] + cy * dir[1], dir[2]];
|
||||
return dir;
|
||||
};
|
||||
|
||||
const groundAt = (point: number[], aspect: number, s: View, look: number[]) => {
|
||||
const dir = rayAt(point, aspect, s, look);
|
||||
if (dir[2] > -0.02) return null;
|
||||
const travel = (CAMERA_HEIGHT - s.height) / -dir[2];
|
||||
return [dir[0] * travel, dir[1] * travel];
|
||||
};
|
||||
|
||||
const prefersReduced = () =>
|
||||
typeof window !== 'undefined' &&
|
||||
(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
|
||||
|
||||
export default function GradientWaves({
|
||||
horizonColor = '#5227FF',
|
||||
waveColor = '#FF9FFC',
|
||||
crestColor = '#FFFFFF',
|
||||
backgroundColor = 'transparent',
|
||||
lightMode = false,
|
||||
speed = 0.4,
|
||||
amplitude = 2.5,
|
||||
waveScale = 0.6,
|
||||
waveRatio = 0.9,
|
||||
swell = 35,
|
||||
turbulence = 20,
|
||||
tilt = 64,
|
||||
zoom = 1,
|
||||
height = 5.5,
|
||||
fogDepth = 15,
|
||||
relief = 1,
|
||||
lightAngle = 120,
|
||||
sheen = 0,
|
||||
brightness = 1,
|
||||
opacity = 1,
|
||||
grain = 0.2,
|
||||
quality = 'medium',
|
||||
intro = true,
|
||||
mouseInteraction = true,
|
||||
parallaxStrength = 0.5,
|
||||
mouseStrength = 0.6,
|
||||
swellOnClick = true,
|
||||
paused = false,
|
||||
dpr = 2,
|
||||
className = '',
|
||||
style,
|
||||
}: GradientWavesProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const horizon = useMemo(
|
||||
(): RGB => parseColor(horizonColor, [0.32, 0.15, 1]) ?? [0.32, 0.15, 1],
|
||||
[horizonColor],
|
||||
);
|
||||
const wave = useMemo(
|
||||
(): RGB => parseColor(waveColor, [1, 0.62, 0.99]) ?? [1, 0.62, 0.99],
|
||||
[waveColor],
|
||||
);
|
||||
const crest = useMemo(
|
||||
(): RGB => parseColor(crestColor, [1, 1, 1]) ?? [1, 1, 1],
|
||||
[crestColor],
|
||||
);
|
||||
const paper = useMemo(
|
||||
() => parseColor(backgroundColor, null),
|
||||
[backgroundColor],
|
||||
);
|
||||
|
||||
const settings = {
|
||||
horizon,
|
||||
wave,
|
||||
crest,
|
||||
paper,
|
||||
lightMode,
|
||||
speed,
|
||||
amplitude: Math.max(0, amplitude),
|
||||
waveScale: Math.max(0.01, waveScale),
|
||||
waveRatio: Math.max(0.01, waveRatio),
|
||||
swell,
|
||||
turbulence,
|
||||
tilt: (clamp(tilt, 10, 85) * Math.PI) / 180,
|
||||
zoom: Math.max(0.05, zoom),
|
||||
height,
|
||||
fogDepth: Math.max(0.5, fogDepth),
|
||||
relief: clamp(relief, 0, 1),
|
||||
lightAngle: (lightAngle * Math.PI) / 180,
|
||||
sheen: Math.max(0, sheen),
|
||||
brightness: Math.max(0, brightness),
|
||||
opacity: clamp(opacity, 0, 1),
|
||||
grain:
|
||||
typeof grain === 'number' ? Math.max(0, grain) : grain ? 0.05 : 0,
|
||||
steps: QUALITY[quality] ?? QUALITY.medium,
|
||||
intro,
|
||||
mouseInteraction,
|
||||
parallaxStrength: Math.max(0, parallaxStrength),
|
||||
mouseStrength: clamp(mouseStrength, 0, 1),
|
||||
swellOnClick,
|
||||
paused,
|
||||
dpr: Math.max(0.5, dpr),
|
||||
};
|
||||
const settingsRef = useRef(settings);
|
||||
settingsRef.current = settings;
|
||||
const wakeRef = useRef<(() => void) | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
wakeRef.current?.();
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return undefined;
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.className = CANVAS;
|
||||
container.appendChild(canvas);
|
||||
const gl = canvas.getContext('webgl2', {
|
||||
alpha: true,
|
||||
antialias: false,
|
||||
depth: false,
|
||||
stencil: false,
|
||||
premultipliedAlpha: true,
|
||||
powerPreference: 'high-performance',
|
||||
});
|
||||
if (!gl) {
|
||||
canvas.remove();
|
||||
return undefined;
|
||||
}
|
||||
const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
|
||||
const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);
|
||||
const program = gl.createProgram();
|
||||
if (!vertex || !fragment || !program) {
|
||||
canvas.remove();
|
||||
return undefined;
|
||||
}
|
||||
gl.attachShader(program, vertex);
|
||||
gl.attachShader(program, fragment);
|
||||
gl.bindAttribLocation(program, 0, 'aPosition');
|
||||
gl.linkProgram(program);
|
||||
gl.deleteShader(vertex);
|
||||
gl.deleteShader(fragment);
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
gl.deleteProgram(program);
|
||||
canvas.remove();
|
||||
return undefined;
|
||||
}
|
||||
const names = [
|
||||
'uResolution',
|
||||
'uTime',
|
||||
'uClock',
|
||||
'uAmplitude',
|
||||
'uWaveScale',
|
||||
'uWaveRatio',
|
||||
'uSwell',
|
||||
'uTurbulence',
|
||||
'uHeight',
|
||||
'uTilt',
|
||||
'uZoom',
|
||||
'uLook',
|
||||
'uFogDepth',
|
||||
'uBrightness',
|
||||
'uOpacity',
|
||||
'uGrain',
|
||||
'uHorizon',
|
||||
'uWave',
|
||||
'uCrest',
|
||||
'uBackground',
|
||||
'uOpaque',
|
||||
'uLight',
|
||||
'uSun',
|
||||
'uRelief',
|
||||
'uSheen',
|
||||
'uSteps',
|
||||
'uStride',
|
||||
'uIntro',
|
||||
'uSwells',
|
||||
'uSwellWidth',
|
||||
];
|
||||
const u: Record<string, WebGLUniformLocation | null> = {};
|
||||
names.forEach((name) => {
|
||||
u[name] = gl.getUniformLocation(program, name);
|
||||
});
|
||||
const vao = gl.createVertexArray();
|
||||
gl.bindVertexArray(vao);
|
||||
const buffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||
gl.bufferData(
|
||||
gl.ARRAY_BUFFER,
|
||||
new Float32Array([-1, -1, 3, -1, -1, 3]),
|
||||
gl.STATIC_DRAW,
|
||||
);
|
||||
gl.enableVertexAttribArray(0);
|
||||
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
|
||||
gl.useProgram(program);
|
||||
|
||||
const swellData = new Float32Array(MAX_SWELLS * 3);
|
||||
const state = {
|
||||
width: 1,
|
||||
height: 1,
|
||||
cssWidth: 0,
|
||||
cssHeight: 0,
|
||||
time: 0,
|
||||
clock: 0,
|
||||
last: 0,
|
||||
raf: 0,
|
||||
visible: false,
|
||||
introAt: -1,
|
||||
pointer: [0.5, 0.5],
|
||||
inside: false,
|
||||
look: [0, 0],
|
||||
steer: [0, 0],
|
||||
swells: [] as Swell[],
|
||||
quiet: 0,
|
||||
seen: null as typeof settings | null,
|
||||
};
|
||||
|
||||
const fit = () => {
|
||||
const s = settingsRef.current;
|
||||
const ratio = Math.min(window.devicePixelRatio || 1, s.dpr);
|
||||
const width = Math.max(1, Math.round(state.cssWidth * ratio));
|
||||
const height = Math.max(1, Math.round(state.cssHeight * ratio));
|
||||
if (width === state.width && height === state.height) return;
|
||||
state.quiet = 0;
|
||||
state.width = width;
|
||||
state.height = height;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
};
|
||||
|
||||
const measure = () => {
|
||||
state.cssWidth = container.clientWidth;
|
||||
state.cssHeight = container.clientHeight;
|
||||
fit();
|
||||
wake();
|
||||
};
|
||||
|
||||
const introProgress = (s: typeof settings, reduced: boolean) => {
|
||||
if (!s.intro || reduced || state.introAt < 0) return 1;
|
||||
return clamp((state.clock - state.introAt) / INTRO_SECONDS, 0, 1);
|
||||
};
|
||||
|
||||
const render = (reduced: boolean) => {
|
||||
const s = settingsRef.current;
|
||||
gl.viewport(0, 0, state.width, state.height);
|
||||
gl.uniform2f(u.uResolution, state.width, state.height);
|
||||
gl.uniform1f(u.uTime, state.time);
|
||||
gl.uniform1f(u.uClock, state.clock);
|
||||
gl.uniform1f(u.uAmplitude, s.amplitude);
|
||||
gl.uniform1f(u.uWaveScale, s.waveScale);
|
||||
gl.uniform1f(u.uWaveRatio, s.waveRatio);
|
||||
gl.uniform1f(u.uSwell, s.swell);
|
||||
gl.uniform1f(u.uTurbulence, s.turbulence);
|
||||
gl.uniform1f(u.uHeight, s.height);
|
||||
gl.uniform1f(u.uTilt, s.tilt);
|
||||
gl.uniform1f(u.uZoom, s.zoom);
|
||||
gl.uniform2f(u.uLook, state.look[0], state.look[1]);
|
||||
gl.uniform1f(u.uFogDepth, s.fogDepth);
|
||||
gl.uniform1f(u.uBrightness, s.brightness);
|
||||
gl.uniform1f(u.uOpacity, s.opacity);
|
||||
gl.uniform1f(u.uGrain, s.grain);
|
||||
gl.uniform3fv(u.uHorizon, s.horizon);
|
||||
gl.uniform3fv(u.uWave, s.wave);
|
||||
gl.uniform3fv(u.uCrest, s.crest);
|
||||
const paperColor = s.paper ?? [0, 0, 0];
|
||||
gl.uniform3f(
|
||||
u.uBackground,
|
||||
paperColor[0],
|
||||
paperColor[1],
|
||||
paperColor[2],
|
||||
);
|
||||
gl.uniform1f(u.uOpaque, s.paper ? 1 : 0);
|
||||
gl.uniform1f(u.uLight, s.lightMode ? 1 : 0);
|
||||
const elevation = 0.52;
|
||||
const angle = s.lightAngle + state.steer[0] * s.mouseStrength * 2;
|
||||
const altitude = elevation - state.steer[1] * s.mouseStrength * 0.7;
|
||||
gl.uniform3f(
|
||||
u.uSun,
|
||||
Math.cos(altitude) * Math.cos(angle),
|
||||
Math.cos(altitude) * Math.sin(angle),
|
||||
Math.sin(altitude),
|
||||
);
|
||||
gl.uniform1f(u.uRelief, s.relief);
|
||||
gl.uniform1f(u.uSheen, s.sheen);
|
||||
gl.uniform1f(u.uSteps, s.steps);
|
||||
const slope =
|
||||
s.amplitude *
|
||||
((s.waveScale / 7) * (1 + Math.abs(s.swell) / 20) +
|
||||
((s.waveScale * s.waveRatio) / 3) *
|
||||
(1 + Math.abs(s.turbulence) / 23));
|
||||
const progress = introProgress(s, reduced);
|
||||
const shown = Math.min(1, progress / 0.22);
|
||||
const crest =
|
||||
160 *
|
||||
Math.pow(
|
||||
3 / 160,
|
||||
easeInOut(Math.max(0, (progress - 0.1) / 0.9)),
|
||||
);
|
||||
const settle = clamp((progress - 0.75) / 0.25, 0, 1);
|
||||
gl.uniform3f(
|
||||
u.uIntro,
|
||||
shown * shown * (3 - 2 * shown),
|
||||
crest,
|
||||
1 - settle * settle * (3 - 2 * settle),
|
||||
);
|
||||
swellData.fill(0);
|
||||
let swellPeak = 0;
|
||||
state.swells.forEach((swell, index) => {
|
||||
const age = state.clock - swell.at;
|
||||
const life = age / SWELL_SECONDS;
|
||||
const envelope =
|
||||
(1 - Math.exp(-age / 0.25)) * Math.pow(1 - life, 1.6);
|
||||
const lift = s.amplitude * SWELL_GAIN * envelope;
|
||||
swellData.set([swell.x - age * 12, swell.y, lift], index * 3);
|
||||
swellPeak = Math.max(swellPeak, lift);
|
||||
});
|
||||
gl.uniform3fv(u.uSwells, swellData);
|
||||
gl.uniform1f(u.uSwellWidth, SWELL_WIDTH);
|
||||
gl.uniform1f(
|
||||
u.uStride,
|
||||
0.9 /
|
||||
Math.max(
|
||||
1,
|
||||
(slope + (swellPeak * 0.86) / SWELL_WIDTH) / 1.5,
|
||||
),
|
||||
);
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||||
};
|
||||
|
||||
const tick = (now: number) => {
|
||||
state.raf = 0;
|
||||
if (!state.visible || document.hidden) return;
|
||||
const s = settingsRef.current;
|
||||
const dt = state.last
|
||||
? Math.min((now - state.last) / 1000, 0.1)
|
||||
: 0;
|
||||
state.last = now;
|
||||
const reduced = prefersReduced();
|
||||
state.clock += dt;
|
||||
if (state.introAt < 0) state.introAt = state.clock;
|
||||
if (!s.paused && !reduced) state.time += dt * s.speed;
|
||||
|
||||
const steering = s.mouseInteraction && state.inside && !reduced;
|
||||
const target = steering ? state.pointer : [0.5, 0.5];
|
||||
const ease = 1 - Math.exp(-dt / 0.45);
|
||||
const goalX = (target[0] - 0.5) * s.parallaxStrength * 0.35;
|
||||
const goalY = (target[1] - 0.5) * s.parallaxStrength * 0.18;
|
||||
state.look[0] += (goalX - state.look[0]) * ease;
|
||||
state.look[1] += (goalY - state.look[1]) * ease;
|
||||
const moving =
|
||||
Math.abs(goalX - state.look[0]) +
|
||||
Math.abs(goalY - state.look[1]) >
|
||||
0.0002;
|
||||
|
||||
const steerEase = 1 - Math.exp(-dt / 0.6);
|
||||
const steerX = steering ? state.pointer[0] - 0.5 : 0;
|
||||
const steerY = steering ? 0.5 - state.pointer[1] : 0;
|
||||
state.steer[0] += (steerX - state.steer[0]) * steerEase;
|
||||
state.steer[1] += (steerY - state.steer[1]) * steerEase;
|
||||
const turning =
|
||||
Math.abs(steerX - state.steer[0]) +
|
||||
Math.abs(steerY - state.steer[1]) >
|
||||
0.0005;
|
||||
state.swells = state.swells.filter(
|
||||
(swell) => state.clock - swell.at < SWELL_SECONDS,
|
||||
);
|
||||
|
||||
const still = s.paused || reduced;
|
||||
const transient =
|
||||
moving ||
|
||||
turning ||
|
||||
state.swells.length > 0 ||
|
||||
introProgress(s, reduced) < 1;
|
||||
if (state.seen !== s || transient || !still) state.quiet = 0;
|
||||
else state.quiet += 1;
|
||||
state.seen = s;
|
||||
if (state.quiet > 3) return;
|
||||
|
||||
state.raf = requestAnimationFrame(tick);
|
||||
fit();
|
||||
render(reduced);
|
||||
};
|
||||
|
||||
const wake = () => {
|
||||
if (state.raf || !state.visible || document.hidden) return;
|
||||
state.last = 0;
|
||||
state.raf = requestAnimationFrame(tick);
|
||||
};
|
||||
wakeRef.current = wake;
|
||||
|
||||
const local = (event: PointerEvent) => {
|
||||
const rect = container.getBoundingClientRect();
|
||||
return {
|
||||
x: (event.clientX - rect.left) / Math.max(rect.width, 1),
|
||||
y: (event.clientY - rect.top) / Math.max(rect.height, 1),
|
||||
inside:
|
||||
event.clientX >= rect.left &&
|
||||
event.clientX <= rect.right &&
|
||||
event.clientY >= rect.top &&
|
||||
event.clientY <= rect.bottom,
|
||||
};
|
||||
};
|
||||
|
||||
const onMove = (event: PointerEvent) => {
|
||||
const point = local(event);
|
||||
const was = state.inside;
|
||||
state.inside = point.inside;
|
||||
if (point.inside) state.pointer = [point.x, point.y];
|
||||
if ((point.inside || was) && settingsRef.current.mouseInteraction)
|
||||
wake();
|
||||
};
|
||||
|
||||
const onLeave = () => {
|
||||
state.inside = false;
|
||||
wake();
|
||||
};
|
||||
|
||||
const onDown = (event: PointerEvent) => {
|
||||
const s = settingsRef.current;
|
||||
if (!s.swellOnClick || event.button !== 0 || prefersReduced())
|
||||
return;
|
||||
if (
|
||||
event.target instanceof Element &&
|
||||
event.target.closest(
|
||||
'a, button, input, textarea, select, label, [role="button"]',
|
||||
)
|
||||
)
|
||||
return;
|
||||
const point = local(event);
|
||||
if (!point.inside) return;
|
||||
const ground = groundAt(
|
||||
[point.x, point.y],
|
||||
state.width / Math.max(state.height, 1),
|
||||
s,
|
||||
state.look,
|
||||
);
|
||||
if (!ground) return;
|
||||
state.swells.push({ x: ground[0], y: ground[1], at: state.clock });
|
||||
if (state.swells.length > MAX_SWELLS) state.swells.shift();
|
||||
wake();
|
||||
};
|
||||
|
||||
const visibility = new IntersectionObserver((entries) => {
|
||||
state.visible = entries.some((entry) => entry.isIntersecting);
|
||||
wake();
|
||||
});
|
||||
visibility.observe(container);
|
||||
const sizes = new ResizeObserver(measure);
|
||||
sizes.observe(container);
|
||||
measure();
|
||||
document.addEventListener('visibilitychange', wake);
|
||||
window.addEventListener('pointermove', onMove, { passive: true });
|
||||
window.addEventListener('pointerdown', onDown);
|
||||
document.documentElement.addEventListener('pointerleave', onLeave);
|
||||
state.raf = requestAnimationFrame(tick);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(state.raf);
|
||||
wakeRef.current = null;
|
||||
document.removeEventListener('visibilitychange', wake);
|
||||
visibility.disconnect();
|
||||
sizes.disconnect();
|
||||
window.removeEventListener('pointermove', onMove);
|
||||
window.removeEventListener('pointerdown', onDown);
|
||||
document.documentElement.removeEventListener(
|
||||
'pointerleave',
|
||||
onLeave,
|
||||
);
|
||||
gl.deleteProgram(program);
|
||||
gl.deleteBuffer(buffer);
|
||||
gl.deleteVertexArray(vao);
|
||||
gl.getExtension('WEBGL_lose_context')?.loseContext();
|
||||
canvas.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={[ROOT, className].filter(Boolean).join(' ')}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
21
components/layout/layout-footer.tsx
Normal file
21
components/layout/layout-footer.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { site } from '@/lib/site';
|
||||
|
||||
const Footer = () => (
|
||||
<footer className="border-t border-white/10 bg-obsidian/40 backdrop-blur-sm">
|
||||
<div className="container-page flex items-center justify-between py-6 text-xs text-ink/65">
|
||||
<p>
|
||||
© {new Date().getFullYear()} {site.name}
|
||||
</p>
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="transition-colors hover:text-aurora"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -1,68 +1,103 @@
|
|||
'use client'
|
||||
'use client';
|
||||
|
||||
import React, {useState} from 'react'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Logo from "../../public/borb.png"
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import Logo from '@/public/borb.png';
|
||||
import { nav, site } from '@/lib/site';
|
||||
|
||||
const Header = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const close = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="font-poppins bg-polar-night-light z-10">
|
||||
<div className="justify-between px-2 lg:px-0 mx-auto lg:max-w-7xl md:items-center md:flex md:px-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between md:block">
|
||||
<div className='flex items-center justify-between md:py-3 gap-10'>
|
||||
<Link href={"/"} className="flex flex-col items-center gap-0 leading-none">
|
||||
<Image src={Logo} width={100} alt='Logo'/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
className="p-3 text-gray-700 rounded-md outline-none focus:border-gray-400 border-2 focus:border bg-nord-10"
|
||||
onClick={() => setNavbar(!navbar)}>
|
||||
{navbar ? (
|
||||
<div className="bar text-snow-storm"></div>
|
||||
) : (
|
||||
<div className="close text-snow-storm"></div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className='md:opacity-0 md:pt-3'></hr>
|
||||
<div>
|
||||
<div
|
||||
className={`flex-1 justify-self-center md:block md:pb-0 md:mt-0 ${navbar ? 'p-12 md:p-0 block' : 'hidden'}`}>
|
||||
<ul className=" md:h-auto items-center justify-center md:flex">
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 md:px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="/" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-52 md:px-0'>Home</Link>
|
||||
</li>
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-white/10 bg-obsidian/45 backdrop-blur-md">
|
||||
<div className="container-page flex h-16 items-center justify-between">
|
||||
<Link
|
||||
href="/"
|
||||
onClick={close}
|
||||
className="flex items-center gap-2.5 text-sm font-medium tracking-tight text-ink"
|
||||
aria-label="Home"
|
||||
>
|
||||
<Image
|
||||
src={Logo}
|
||||
alt=""
|
||||
width={40}
|
||||
height={40}
|
||||
loading="eager"
|
||||
className="h-9 w-9 object-contain"
|
||||
/>
|
||||
<span>{site.name}</span>
|
||||
</Link>
|
||||
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="/blog" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-52 md:px-0'>Blog</Link>
|
||||
</li>
|
||||
<nav
|
||||
aria-label="Primary"
|
||||
className="hidden items-center gap-7 text-sm md:flex"
|
||||
>
|
||||
{nav.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-ink/75 transition-colors hover:text-ink"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="border-l border-white/15 pl-6 text-aurora transition-colors hover:text-crest"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-9 w-9 place-items-center border border-white/15 text-ink hover:border-aurora md:hidden"
|
||||
aria-expanded={open}
|
||||
aria-controls="mobile-nav"
|
||||
aria-label={open ? 'Close menu' : 'Open menu'}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
{open ? (
|
||||
<XMarkIcon className="h-4 w-4" aria-hidden />
|
||||
) : (
|
||||
<Bars3Icon className="h-4 w-4" aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="https://gitlab.com/caydens" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-48 md:px-0'>GitLab</Link>
|
||||
</li>
|
||||
{open && (
|
||||
<nav
|
||||
id="mobile-nav"
|
||||
aria-label="Mobile"
|
||||
className="flex flex-col border-t border-white/10 bg-obsidian/90 backdrop-blur-md md:hidden"
|
||||
>
|
||||
{nav.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={close}
|
||||
className="border-b border-white/10 px-6 py-3.5 text-sm text-ink/80 hover:bg-white/5 hover:text-ink"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="px-6 py-3.5 text-sm text-aurora hover:bg-white/5"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="/contact" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-48 md:px-0'>Contact</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Header
|
||||
export default Header;
|
||||
|
|
|
|||
28
components/layout/page-background.tsx
Normal file
28
components/layout/page-background.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import GradientWaves from '@/components/GradientWaves';
|
||||
|
||||
// React Bits GradientWaves "Aurora" preset, tuned to fill the viewport.
|
||||
const PageBackground = () => (
|
||||
<div aria-hidden className="fixed inset-0 -z-10 overflow-hidden">
|
||||
<GradientWaves
|
||||
horizonColor="#064e3b"
|
||||
waveColor="#34d399"
|
||||
crestColor="#d1fae5"
|
||||
speed={0.35}
|
||||
amplitude={2.6}
|
||||
waveScale={0.7}
|
||||
waveRatio={0.9}
|
||||
swell={38}
|
||||
turbulence={24}
|
||||
fogDepth={12}
|
||||
lightAngle={170}
|
||||
sheen={0.28}
|
||||
height={5.5}
|
||||
tilt={64}
|
||||
className="h-full w-full"
|
||||
/>
|
||||
{/* Dark wash keeps foreground text readable */}
|
||||
<div className="absolute inset-0 bg-obsidian/25" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default PageBackground;
|
||||
32
components/sections/contact.tsx
Normal file
32
components/sections/contact.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { site } from '@/lib/site';
|
||||
|
||||
const Contact = () => (
|
||||
<section id="contact" className="container-page pt-12 pb-24">
|
||||
<div className="flex flex-col items-start justify-between gap-6 panel p-6 sm:flex-row sm:items-center md:p-9">
|
||||
<div>
|
||||
<h2 className="font-display text-2xl font-medium tracking-tight text-ink md:text-3xl">
|
||||
Get in touch
|
||||
</h2>
|
||||
<p className="mt-1.5 text-sm text-ink/70">
|
||||
Have a project, role, or panel in mind? Let's talk.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-sm font-medium">
|
||||
<a href={`mailto:${site.email}`} className="btn-primary">
|
||||
{site.email} →
|
||||
</a>
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-ghost"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Contact;
|
||||
31
components/sections/feats.tsx
Normal file
31
components/sections/feats.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import Reveal from '@/components/ui/reveal';
|
||||
import SectionHeading from '@/components/ui/section-heading';
|
||||
import { feats } from '@/lib/site';
|
||||
|
||||
const Feats = () => (
|
||||
<section id="feats" className="container-page py-16">
|
||||
<SectionHeading title="Leadership">
|
||||
Operations and community work outside of code.
|
||||
</SectionHeading>
|
||||
|
||||
<ul className="grid panel sm:grid-cols-2">
|
||||
{feats.map((feat, i) => (
|
||||
<li
|
||||
key={feat.title}
|
||||
className="border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] sm:odd:border-r sm:odd:nth-last-2:border-b-0 md:p-7"
|
||||
>
|
||||
<Reveal delay={i * 60}>
|
||||
<h3 className="font-display text-base font-medium text-ink">
|
||||
{feat.title}
|
||||
</h3>
|
||||
<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
|
||||
{feat.detail}
|
||||
</p>
|
||||
</Reveal>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Feats;
|
||||
69
components/sections/hero.tsx
Normal file
69
components/sections/hero.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import Image from 'next/image';
|
||||
import { about, site, stack } from '@/lib/site';
|
||||
|
||||
const Hero = () => (
|
||||
<section id="about" className="container-page py-20 md:pt-28 md:pb-24">
|
||||
<div className="max-w-2xl">
|
||||
<p className="mb-4 flex items-center gap-3 font-mono text-xs tracking-[0.2em] text-aurora uppercase">
|
||||
<span aria-hidden className="h-px w-6 bg-aurora" />
|
||||
<span>{site.role}</span>
|
||||
</p>
|
||||
<h1 className="font-display text-5xl font-semibold tracking-[-0.035em] text-ink sm:text-6xl md:text-7xl">
|
||||
Howdy, I'm {site.name}.
|
||||
</h1>
|
||||
<p className="mt-4 max-w-xl text-lg leading-relaxed text-ink/85 md:text-xl">
|
||||
{site.tagline}
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-3 text-sm font-medium">
|
||||
<a href="#work" className="btn-primary">
|
||||
Selected work ↓
|
||||
</a>
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn-ghost"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid panel md:mt-20 md:grid-cols-[14rem_1fr]">
|
||||
<div className="border-b border-white/12 p-5 md:border-r md:border-b-0 md:p-6">
|
||||
<div className="relative aspect-[8/7] overflow-hidden border border-white/12 bg-obsidian/60">
|
||||
<Image
|
||||
src="/cayden-portrait.png"
|
||||
alt="Cayden"
|
||||
fill
|
||||
loading="eager"
|
||||
sizes="(min-width: 768px) 13rem, 90vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between">
|
||||
<div className="space-y-4 p-6 text-[15.5px] leading-relaxed text-ink/85 md:p-8">
|
||||
{about.map((paragraph) => (
|
||||
<p key={paragraph}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ul className="flex flex-wrap gap-x-6 gap-y-2 border-t border-white/12 px-6 py-3.5 font-mono text-xs text-crest/80 md:px-8">
|
||||
{stack.map((tech) => (
|
||||
<li
|
||||
key={tech}
|
||||
className="transition-colors hover:text-aurora"
|
||||
>
|
||||
{tech}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Hero;
|
||||
34
components/sections/projects.tsx
Normal file
34
components/sections/projects.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import Reveal from '@/components/ui/reveal';
|
||||
import SectionHeading from '@/components/ui/section-heading';
|
||||
import { projects } from '@/lib/site';
|
||||
|
||||
const Projects = () => (
|
||||
<section id="work" className="container-page py-16">
|
||||
<SectionHeading title="Selected Work">
|
||||
Instant-Response Web Applications
|
||||
</SectionHeading>
|
||||
|
||||
<div className="grid divide-y divide-white/12 panel md:grid-cols-3 md:divide-x md:divide-y-0">
|
||||
{projects.map((project, i) => (
|
||||
<Reveal key={project.title} delay={i * 60}>
|
||||
<article className="flex h-full flex-col justify-between p-6 transition-colors hover:bg-white/4 md:p-7">
|
||||
<div>
|
||||
<h3 className="font-display text-lg font-medium tracking-tight text-ink">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="mt-2.5 text-sm leading-relaxed text-ink/70">
|
||||
{project.blurb}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-8 border-t border-white/10 pt-3 font-mono text-xs text-aurora/90">
|
||||
{project.stack}
|
||||
</p>
|
||||
</article>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Projects;
|
||||
49
components/ui/reveal.tsx
Normal file
49
components/ui/reveal.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
'use client';
|
||||
|
||||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type CSSProperties,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
delay?: number;
|
||||
};
|
||||
|
||||
// Fades content up as it scrolls into view.
|
||||
const Reveal = ({ children, delay = 0 }: Props) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const node = ref.current;
|
||||
if (!node) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setVisible(true);
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.12 },
|
||||
);
|
||||
observer.observe(node);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-visible={visible}
|
||||
className="reveal"
|
||||
style={{ '--reveal-delay': `${delay}ms` } as CSSProperties}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Reveal;
|
||||
20
components/ui/section-heading.tsx
Normal file
20
components/ui/section-heading.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type { ReactNode } from 'react';
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
children?: ReactNode;
|
||||
};
|
||||
|
||||
const SectionHeading = ({ title, children }: Props) => (
|
||||
<div className="mb-6 flex flex-col justify-between gap-2 border-b border-white/15 pb-4 sm:flex-row sm:items-end">
|
||||
<div className="flex items-center gap-3">
|
||||
<span aria-hidden className="h-px w-5 bg-aurora" />
|
||||
<h2 className="font-display text-2xl font-medium tracking-tight text-ink md:text-3xl">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
{children && <p className="text-sm text-ink/70">{children}</p>}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default SectionHeading;
|
||||
Loading…
Add table
Add a link
Reference in a new issue