First commit of ayerble.com
Create vite configuration Create Three.js animation background Add docker support
This commit is contained in:
Aaron Po
7
.dockerignore
Normal file
7
.dockerignore
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.git
|
||||||
|
.idea
|
||||||
|
.vite
|
||||||
|
*.md
|
||||||
|
|
||||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
.vite/
|
||||||
|
|
||||||
15
Dockerfile
Normal file
15
Dockerfile
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
# Build stage
|
||||||
|
FROM node:22-alpine AS build
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json package-lock.json ./
|
||||||
|
RUN npm ci
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Production stage
|
||||||
|
FROM node:22-alpine
|
||||||
|
RUN npm install -g serve
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=build /app/dist ./dist
|
||||||
|
EXPOSE 3627
|
||||||
|
CMD ["serve", "dist", "-l", "3627"]
|
||||||
8
docker-compose.yml
Normal file
8
docker-compose.yml
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
services:
|
||||||
|
ayerble:
|
||||||
|
build: .
|
||||||
|
container_name: ayerble
|
||||||
|
ports:
|
||||||
|
- "127.0.0.1:3627:3627"
|
||||||
|
restart: unless-stopped
|
||||||
|
|
||||||
49
index.html
Normal file
49
index.html
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>ayerble</title>
|
||||||
|
<meta name="description" content="ayerble — personal pages and projects." />
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas id="bg-canvas" aria-hidden="true"></canvas>
|
||||||
|
<a class="skip-link" href="#main">Skip to main content</a>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">ayerble</h1>
|
||||||
|
<p class="subtitle">// personal pages & projects</p>
|
||||||
|
|
||||||
|
<nav aria-label="Site links">
|
||||||
|
<ul class="site-list" id="site-list">
|
||||||
|
<li>
|
||||||
|
<a href="https://aaronwilliampo.com" target="_blank" rel="noopener noreferrer"
|
||||||
|
aria-label="aaronwilliampo.com (opens in new tab)">
|
||||||
|
aaronwilliampo.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://git.aaronwilliampo.com" target="_blank" rel="noopener noreferrer"
|
||||||
|
aria-label="git.aaronwilliampo.com (opens in new tab)">
|
||||||
|
git.aaronwilliampo.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://yerb-engine.aaronwilliampo.com" target="_blank" rel="noopener noreferrer"
|
||||||
|
aria-label="yerb-engine.aaronwilliampo.com (opens in new tab)">
|
||||||
|
yerb-engine.aaronwilliampo.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer><small>© 2026 ayerble</small></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1186
package-lock.json
generated
Normal file
1186
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "ayerble.com",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"three": "^0.172.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/three": "^0.172.0",
|
||||||
|
"typescript": "^5.7.0",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
58
src/background.ts
Normal file
58
src/background.ts
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import * as THREE from 'three';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialise the Three.js wireframe background scene.
|
||||||
|
* @param canvas – the `<canvas>` element to render into.
|
||||||
|
*/
|
||||||
|
export function initBackground(canvas: HTMLCanvasElement): void {
|
||||||
|
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
|
||||||
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
|
||||||
|
const scene = new THREE.Scene();
|
||||||
|
const aspect = window.innerWidth / window.innerHeight;
|
||||||
|
const camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 200);
|
||||||
|
camera.position.set(0, 0, 10);
|
||||||
|
camera.lookAt(new THREE.Vector3(0, 0, 0));
|
||||||
|
|
||||||
|
// Wireframe sphere at exact origin
|
||||||
|
const geo = new THREE.SphereGeometry(3.5, 32, 32);
|
||||||
|
const mat = new THREE.MeshBasicMaterial({
|
||||||
|
color: 0x00ffe7,
|
||||||
|
wireframe: true,
|
||||||
|
opacity: 0.28,
|
||||||
|
transparent: true,
|
||||||
|
});
|
||||||
|
const mesh = new THREE.Mesh(geo, mat);
|
||||||
|
mesh.position.set(0, 0, 0);
|
||||||
|
scene.add(mesh);
|
||||||
|
|
||||||
|
// Grid floor
|
||||||
|
const grid = new THREE.GridHelper(30, 30, 0xff2d78, 0xff2d78);
|
||||||
|
grid.material.opacity = 0.1;
|
||||||
|
grid.material.transparent = true;
|
||||||
|
grid.position.y = -3.2;
|
||||||
|
scene.add(grid);
|
||||||
|
|
||||||
|
// Handle resize
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
const w = window.innerWidth;
|
||||||
|
const h = window.innerHeight;
|
||||||
|
renderer.setSize(w, h);
|
||||||
|
camera.aspect = w / h;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
});
|
||||||
|
|
||||||
|
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
|
(function animate() {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
if (!reduced) {
|
||||||
|
mesh.rotation.y += 0.003;
|
||||||
|
mesh.rotation.z += 0.004;
|
||||||
|
grid.rotation.y += 0.0008;
|
||||||
|
}
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
11
src/main.ts
Normal file
11
src/main.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import './style.css';
|
||||||
|
import { initBackground } from './background';
|
||||||
|
import { initNavigation } from './navigation';
|
||||||
|
|
||||||
|
const canvas = document.getElementById('bg-canvas') as HTMLCanvasElement | null;
|
||||||
|
if (canvas) {
|
||||||
|
initBackground(canvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
initNavigation();
|
||||||
|
|
||||||
40
src/navigation.ts
Normal file
40
src/navigation.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
/**
|
||||||
|
* Initialise arrow-key (↑ / ↓ / Enter) navigation for the site link list.
|
||||||
|
*/
|
||||||
|
export function initNavigation(): void {
|
||||||
|
const links = Array.from(
|
||||||
|
document.querySelectorAll<HTMLAnchorElement>('#site-list a'),
|
||||||
|
);
|
||||||
|
let idx = -1;
|
||||||
|
|
||||||
|
function setActive(i: number): void {
|
||||||
|
links.forEach((l) => l.classList.remove('active'));
|
||||||
|
if (i >= 0 && i < links.length) {
|
||||||
|
links[i].classList.add('active');
|
||||||
|
links[i].focus();
|
||||||
|
idx = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
setActive(idx < links.length - 1 ? idx + 1 : 0);
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
setActive(idx > 0 ? idx - 1 : links.length - 1);
|
||||||
|
} else if (e.key === 'Enter' && idx >= 0) {
|
||||||
|
links[idx].click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sync idx when focus moves via mouse / tab
|
||||||
|
links.forEach((l, i) => {
|
||||||
|
l.addEventListener('focus', () => {
|
||||||
|
idx = i;
|
||||||
|
l.classList.add('active');
|
||||||
|
});
|
||||||
|
l.addEventListener('blur', () => l.classList.remove('active'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
139
src/style.css
Normal file
139
src/style.css
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*, *::before, *::after { animation: none !important; transition: none !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--cyan: #00ffe7;
|
||||||
|
--magenta: #ff2d78;
|
||||||
|
--yellow: #f5e642;
|
||||||
|
--text: #c8d0e0;
|
||||||
|
--text-dim: #6b7280;
|
||||||
|
--font: "Courier New", Courier, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { background: #0d0d0f; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: var(--font);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scanlines */
|
||||||
|
body::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 0px, transparent 3px,
|
||||||
|
rgba(0,0,0,.15) 3px, rgba(0,0,0,.15) 4px
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background canvas */
|
||||||
|
#bg-canvas {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skip link */
|
||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: 1rem;
|
||||||
|
background: var(--cyan);
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: .4rem .8rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
z-index: 10000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.skip-link:focus { top: 1rem; }
|
||||||
|
|
||||||
|
/* Main content */
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2.5rem 3rem;
|
||||||
|
background: rgba(13, 13, 15, 0.65);
|
||||||
|
border: 1px solid rgba(0, 255, 231, 0.08);
|
||||||
|
border-radius: 6px;
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2rem, 8vw, 3.5rem);
|
||||||
|
letter-spacing: .12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--cyan);
|
||||||
|
margin-bottom: .4rem;
|
||||||
|
}
|
||||||
|
h1 span { color: var(--magenta); }
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: .9rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Link list */
|
||||||
|
.site-list {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: .75rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-list li a {
|
||||||
|
display: block;
|
||||||
|
font-size: clamp(.95rem, 2.5vw, 1.15rem);
|
||||||
|
color: #8a95a8;
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: .06em;
|
||||||
|
padding: .55rem 1.5rem;
|
||||||
|
border: 1px solid rgba(138, 149, 168, 0.2);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: color .12s, border-color .12s, background .12s;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Arrow-key highlight + hover + focus all share the same style */
|
||||||
|
.site-list li a.active,
|
||||||
|
.site-list li a:hover,
|
||||||
|
.site-list li a:focus-visible {
|
||||||
|
color: var(--cyan);
|
||||||
|
border-color: var(--cyan);
|
||||||
|
background: rgba(0,255,231,.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Visible keyboard focus ring for AODA */
|
||||||
|
.site-list li a:focus-visible {
|
||||||
|
outline: 2px solid var(--yellow);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 1.5rem;
|
||||||
|
font-size: .75rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
2
src/vite-env.d.ts
vendored
Normal file
2
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user