jet/website
jet/website
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: move to vite

Browse source
This commit is contained in:
Jet Pham 2026-03-05 17:26:17 -08:00
parent 5cbe032c23
commit 4c09d416cf
No known key found for this signature in database
14 changed files with 112 additions and 881 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/App.tsx
View file

@ -1,75 +0,0 @@
import { BorderedBox } from "~/components/bordered-box";
import { FrostedBox } from "~/components/frosted-box";
import Header from "~/components/header";
import { CgolCanvas } from "~/components/cgol-canvas";
import Jet from "~/assets/Jet.txt?ansi";
export default function App() {
return (
<>
<CgolCanvas />
<main>
<div className="flex flex-col items-center justify-start px-4">
<FrostedBox className="my-[2ch] w-full max-w-[66.666667%] min-w-fit md:mt-[4ch]">
<div className="flex flex-col items-center justify-center gap-[2ch] md:flex-row">
<div className="order-1 flex flex-col items-center md:order-2">
<Header content={Jet} />
<div className="mt-[2ch]">Software Extremist</div>
</div>
<div className="order-2 shrink-0 md:order-1">
<img
src="/jet.svg"
alt="Jet"
width={250}
height={250}
className="aspect-square w-full max-w-[250px] object-cover md:h-[263px] md:w-[175px] md:max-w-none"
/>
</div>
</div>
<BorderedBox label="Contact" className="mt-[2ch]">
<a href="mailto:jet@extremist.software">
jet@extremist.software
</a>
</BorderedBox>
<BorderedBox label="Links">
<ol>
<li>
<a
href="https://git.extremist.software"
className="inline-flex items-center"
>
Forgejo
</a>
</li>
<li>
<a
href="https://github.com/jetpham"
className="inline-flex items-center"
>
GitHub
</a>
</li>
<li>
<a
href="https://x.com/jetpham5"
className="inline-flex items-center"
>
X
</a>
</li>
<li>
<a
href="https://bsky.app/profile/jetpham.com"
className="inline-flex items-center"
>
Bluesky
</a>
</li>
</ol>
</BorderedBox>
</FrostedBox>
</div>
</main>
</>
);
}

28
src/components/bordered-box.tsx
View file

@ -1,28 +0,0 @@
import { type ReactNode } from "react";
interface BorderedBoxProps {
label?: string;
children: ReactNode;
className?: string;
}
export function BorderedBox({
label,
children,
className = "",
}: BorderedBoxProps) {
return (
<fieldset
className={`mt-[2ch] border-2 border-white px-[calc(1.5ch-0.5px)] pb-[1ch] pt-0 ${className}`}
>
{label && (
<legend className="-mx-[0.5ch] px-[0.5ch] text-white">
{label}
</legend>
)}
{children}
</fieldset>
);
}

33
src/components/cgol-canvas.tsx
View file

@ -1,33 +0,0 @@
import { useEffect, useRef } from "react";
let wasmStarted = false;
export function CgolCanvas() {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
if (wasmStarted) return;
wasmStarted = true;
import("cgol").then(async (cgolModule) => {
if (typeof cgolModule.default === "function") {
await cgolModule.default();
}
if (typeof cgolModule.start === "function") {
cgolModule.start();
}
}).catch((error: unknown) => {
console.error("Failed to initialize CGOL WebAssembly module:", error);
wasmStarted = false;
});
}, []);
return (
<canvas
ref={canvasRef}
id="canvas"
className="fixed top-0 left-0 -z-10 h-screen w-screen"
aria-hidden="true"
/>
);
}

47
src/components/frosted-box.tsx
View file

@ -1,47 +0,0 @@
import { type ReactNode } from "react";
interface FrostedBoxProps {
label?: string;
children: ReactNode;
className?: string;
}
export function FrostedBox({
label,
children,
className = "",
}: FrostedBoxProps) {
return (
<div
className={`relative my-[calc(2ch-2px)] px-[2ch] py-[2ch] ${className}`}
>
{/* Extended frosted glass backdrop with mask */}
<div
className="pointer-events-none absolute inset-0 h-[200%]"
style={{
backgroundColor: "rgba(0, 0, 0, 0.75)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
maskImage:
"linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)",
WebkitMaskImage:
"linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)",
}}
/>
{/* Border */}
<div className="absolute inset-0 border-2 border-white" />
{/* Content */}
<div className="relative z-10">
{label && (
<span className="absolute -top-[1ch] left-2 bg-transparent text-white">
{label}
</span>
)}
{children}
</div>
</div>
);
}

13
src/components/header.tsx
View file

@ -1,13 +0,0 @@
interface HeaderProps {
content: string;
className?: string;
}
export default function Header({ content, className }: HeaderProps) {
return (
<div
className={className}
dangerouslySetInnerHTML={{ __html: content }}
/>
);
}

17
src/main.ts Normal file
View file

@ -0,0 +1,17 @@
import "~/styles/globals.css";
import Jet from "~/assets/Jet.txt?ansi";
document.getElementById("ansi-art")!.innerHTML = Jet;
import("cgol")
.then(async (cgolModule) => {
if (typeof cgolModule.default === "function") {
await cgolModule.default();
}
if (typeof cgolModule.start === "function") {
cgolModule.start();
}
})
.catch((error: unknown) => {
console.error("Failed to initialize CGOL WebAssembly module:", error);
});

10
src/main.tsx
View file

@ -1,10 +0,0 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "~/styles/globals.css";
import App from "./App";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
);

2
src/styles/globals.css
View file

@ -39,7 +39,7 @@
margin: 0 auto;
font-family: "IBM VGA", monospace;
font-size: 1.25rem; /* Smaller font size for mobile */
white-space: pre;
white-space: normal;
line-height: 1;
box-sizing: border-box;
overflow: hidden; /* Disable scrolling */