& {
- asChild?: boolean;
- }) {
- const Comp = asChild ? Slot.Root : "button";
-
- return (
-
- );
-}
-
-export { Button, buttonVariants };
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index af751c4d..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,155 +0,0 @@
-@import url("https://fonts.ob248.com/commitmono");
-@import url("https://fonts.ob248.com/ft88");
-@import url("https://fonts.ob248.com/picnic");
-
-@import "tailwindcss";
-
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
- --radius: 0.625rem;
- --background: #ded6c4;
- --foreground: #2e2b23;
- --card: #efe6d4;
- --card-foreground: #2e2b23;
- --popover: #f5ecdb;
- --popover-foreground: #2e2b23;
- --primary: #5f4a33;
- --primary-foreground: #f6efe3;
- --secondary: #e5dccb;
- --secondary-foreground: #3a3329;
- --muted: #dbd0bd;
- --muted-foreground: #6e6457;
- --accent: #df7126;
- --accent-foreground: #5f361b;
- --destructive: #b8482b;
- --border: #cbbfae;
- --input: #d8cfbd;
- --ring: #8f7b60;
- --chart-1: #c6662a;
- --chart-2: #7a6a4b;
- --chart-3: #8f4c2a;
- --chart-4: #a4813a;
- --chart-5: #4f3f2b;
- --sidebar: #e8dfcf;
- --sidebar-foreground: #2e2b23;
- --sidebar-primary: #5f4a33;
- --sidebar-primary-foreground: #f6efe3;
- --sidebar-accent: #e1c9a8;
- --sidebar-accent-foreground: #3a3329;
- --sidebar-border: #cbbfae;
- --sidebar-ring: #8f7b60;
-}
-
-@theme inline {
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
- --radius-2xl: calc(var(--radius) + 8px);
- --radius-3xl: calc(var(--radius) + 12px);
- --radius-4xl: calc(var(--radius) + 16px);
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-ring: var(--ring);
- --color-chart-1: var(--chart-1);
- --color-chart-2: var(--chart-2);
- --color-chart-3: var(--chart-3);
- --color-chart-4: var(--chart-4);
- --color-chart-5: var(--chart-5);
- --color-sidebar: var(--sidebar);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-ring: var(--sidebar-ring);
-}
-
-.dark {
- --background: #1b1813;
- --foreground: #f6efe3;
- --card: #242019;
- --card-foreground: #f6efe3;
- --popover: #221e17;
- --popover-foreground: #f6efe3;
- --primary: #e1c9a8;
- --primary-foreground: #2a241b;
- --secondary: #2f2a21;
- --secondary-foreground: #f1e9dc;
- --muted: #2b261e;
- --muted-foreground: #b8ad9d;
- --accent: #df7126;
- --accent-foreground: #2a241b;
- --destructive: #cc5a3a;
- --border: #3b3328;
- --input: #3f372c;
- --ring: #9d8568;
- --chart-1: #df7126;
- --chart-2: #c39a55;
- --chart-3: #a5633a;
- --chart-4: #8a6a3a;
- --chart-5: #f0c27b;
- --sidebar: #211d17;
- --sidebar-foreground: #f6efe3;
- --sidebar-primary: #e1c9a8;
- --sidebar-primary-foreground: #2a241b;
- --sidebar-accent: #2f291f;
- --sidebar-accent-foreground: #f1e9dc;
- --sidebar-border: #3b3328;
- --sidebar-ring: #9d8568;
-}
-
-@layer base {
- * {
- @apply border-border outline-ring/50;
- }
- body {
- @apply bg-background text-foreground;
- }
-}
-
-body {
- font-family: "Commit Mono", monospace;
- font-weight: 400;
- background-color: var(--background);
- color: var(--foreground);
-}
-
-.commitmono {
- font-family: "Commit Mono", monospace;
- font-weight: 400;
-}
-
-.ft88 {
- font-family: "FT88", serif;
- font-weight: 80;
-}
-
-.ft88-bold {
- font-family: "FT88", serif;
- font-weight: 200;
-}
-
-.picnic {
- font-family: "PicNic", serif;
- font-weight: 400;
-}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
deleted file mode 100644
index ac680b30..00000000
--- a/src/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
-}
diff --git a/src/main.tsx b/src/main.tsx
deleted file mode 100644
index 409e6d93..00000000
--- a/src/main.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import { ThemeProvider } from "@/components/theme-provider";
-import "./index.css";
-import App from "./App.tsx";
-
-const root = document.getElementById("root");
-if (!root) throw new Error("Failed to find the root element");
-createRoot(root).render(
-
-
-
-
-
-
- ,
-);
diff --git a/src/projects/factor-e/index.tsx b/src/projects/factor-e/index.tsx
deleted file mode 100644
index 60be5637..00000000
--- a/src/projects/factor-e/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Demo } from "@/components/Demo";
-import { ProjectPage } from "@/components/ProjectPage";
-
-export const metadata = {
- title: "factor-e",
- description:
- "Isometric factory sandbox prototype in C++/raylib with procedural worlds, tile building, inventory & tools.",
- date: "August 2025",
- slug: "factor-e",
- image: "/factor-e-icon.svg",
- github: "https://github.com/hex248/factor-e",
- hidden: false,
- tags: ["Game", "C++", "OpenGL", "CMake", "Pixel Art"],
- type: "personal",
-};
-
-export function FactorEProject() {
- return (
-
-
- "factor-e" is an isometric factory sandbox prototype I built to learn
- C++ and{" "}
-
- raylib
-
- . Inspired by Minecraft and{" "}
-
- Terrafactor
-
- , it explores tile-based building, inventory management and procedural
- world generation.
-
-
-
-
-
- Key features
-
-
- - Isometric rendering with my own pixel art
- - Procedural world generation using Perlin noise
- - Simple tile place/destroy loop
- - Basic inventory and tool system
- - Dev/debug overlay
- - Cross-platform builds (Windows + Linux)
- -
- Status: active prototype
-
-
-
-
-
-
- Technologies
-
-
- - C++
- - raylib (OpenGL)
- - CMake
- - Perlin noise generation
- - Aseprite
- - Engine-less game development
-
-
-
- "flackie" is a portable FLAC music player I built using a Raspberry Pi
- Zero 2 W, a small e-ink display, and some physical buttons. The device
- features a custom Python UI for browsing and playing FLAC files. The
- case was designed in CAD and 3D printed to house all the components
- neatly.
-
-
-
-
-
- Key features
-
-
- - Portable design with a compact form factor
- - Custom Python UI for easy navigation
- - Physical buttons for playback control
- - 3D printed case
- - Supports FLAC audio playback
-
-
-
-
-
- Technologies
-
-
- - C++
- - CMake
- - Python
- - Pillow
- - Raspberry Pi Zero 2 W
- - E-ink display
- - 3D printing
-
-
-
- fonts.ob248.com is a lightweight site for browsing and using my go-to
- fonts. It simplifies the importing processign for .ttf and .otf fonts on
- the web.
-
-
-
-
- );
-}
diff --git a/src/projects/glimpse/index.tsx b/src/projects/glimpse/index.tsx
deleted file mode 100644
index 29228b3a..00000000
--- a/src/projects/glimpse/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Demo } from "@/components/Demo";
-import { ProjectPage } from "@/components/ProjectPage";
-
-export const metadata = {
- title: "glimpse",
- description: "Simple social media app inspired by early Instagram.",
- date: "May 2025",
- slug: "glimpse",
- image: "/glimpse-icon.svg",
- url: "https://glimpse.ob248.com",
- github: "https://github.com/hex248/glimpse",
- hidden: false,
- tags: [
- "Web",
- "React",
- "TypeScript",
- "PostgreSQL",
- "Blob Storage",
- "Databases",
- "OAuth2",
- ],
- type: "personal",
-};
-
-export function GlimpseProject() {
- return (
-
-
- "glimpse" is a full-stack social app for sharing photos with friends and
- building real community. Early Instagram and tumblr were huge
- inspirations, no influencers and brands, just keeping up with your
- friends and family. Sign in with Google, and immediately access a
- dynamic feed, view and comment on posts. Choose your profile colour, and
- enable push notifications for new posts, comments, and friend requests.
-
-
-
-
- Key features
-
-
- - Photo uploads with caption and cropping function
- - User profiles with customisable colour themes
- - Dynamic, server-rendered feed of friends' photos
- - Commenting on posts
- - User search
- - Push notifications
-
-
-
-
-
- Technologies
-
-
- - Next.js + TypeScript
- - Prisma ORM + PostgreSQL
- - Tailwind CSS
- - Google OAuth with NextAuth.js
- - Web Push API
- - Next.js server-side rendering and API routes
- - Progressive Web App (PWA)
-
-
-
-
Screenshots
-
-
-
-
-
-
-
-
-
- "good morning!" is a web app I built to help couples or friends share
- daily notices, songs, and photos with each other. It features a simple
- and intuitive interface for sending and receiving messages, along with
- support for photo attachments. The app is built with React and
- TypeScript on the frontend, and Go with PostgreSQL on the backend. Media
- files are stored securely using Cloudflare R2 (AWS S3).
-
-
-
-
-
- Key features
-
-
- - Create daily notices with photos and Spotify songs
- - Simple user interface
- - Google OAuth2 authentication for user accounts
-
-
-
-
-
- Technologies
-
-
- - React
- - TypeScript
- - Go
- - PostgreSQL
- - Cloudflare R2 (AWS S3)
- - Spotify API
- - OAuth2 Authentication
- - Progressive Web App (PWA)
-
-
-
- I led a four-person team to create MIZU, a popular anime trading card
- game on Discord. In this role, I was responsible for the full lifecycle
- of the application: designing the core architecture, building the
- application with Node.js and TypeScript, and deploying it on a
- self-managed VPS. We successfully scaled to serve over 4,000 players.
- Although MIZU is no longer active, it was a significant experience in
- leading a team and scaling a live application.
-
-
-
-
-
- Technologies
-
-
- - Node.js
- - TypeScript
- - Express.js
- - Discord.js
- - PostgreSQL
- - AWS S3
-
-
-
-
Gameplay
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pre-Production
-
-
-
-
-
-
-
-
-
-
- Pray Together and Grow Together: Join a diverse community of
- individuals from around the world who are passionate about prayer and
- spiritual growth. Create and share prayer requests with your PrayerBud
- community who are ready to offer support, encouragement, and heartfelt
- prayers.
-
-
- For prayer teams or churches, the app offers a streamlined way to
- manage and organise prayer requests, ensuring that no request goes
- unnoticed.
-
-
-
-
- Key features
-
-
- - Create and manage prayer networks
- - Manage prayer communities
- - Intimate engagement with friends and family
- - Admin dashboard for managing users and user content
- - Responsive design for mobile and desktop
-
-
-
-
-
- Technologies
-
-
- - Next.js
- - React
- - TypeScript
- - PostgreSQL
- - Node.js
-
-
-
-
Screenshots
-
-
-
-
-
-
-
-
-
- Shleep is a couch co-op base defense game where you can build towers to
- help aid you and your party to protect a sleeping child from nightmares.
-
-
-
-
- Technologies
-
-
- - Unity
- - C#
- - HLSL
- - Shader Graph
- - Visual Effects Graph
-
-
-
Screenshots
-
-
-
-
-
-
-
-
-
- Sprint is a lightweight, self-hostable project management tool built for
- developers who want simplicity over complexity. Frustrated with bloated
- tools like Jira, I created Sprint to focus on what matters: tracking
- tasks within organisations and projects without the overhead. Deploy it
- on your own infrastructure for full control over your data, and access
- it via the web or as a native desktop application via Tauri.
-
-
-
-
-
- Key features
-
-
- - Organisation and project management
- - Issue creation with titles and descriptions
- - Issue assignment to team members
- - Time tracking with start, pause, and resume timers
- - Sprint management with date ranges
- - Customizable issue statuses per organisation
- - Resizable split-pane interface
- - Role-based access: owner, admin, member
- - Avatar uploads with S3 storage
- - Native desktop app via Tauri
-
-
-
-
-
- Technologies
-
-
- - React + TypeScript (frontend)
- - Bun.serve + Drizzle ORM (backend)
- - PostgreSQL
- - Tailwind + shadcn/ui
- - Tauri (desktop)
- - S3 file storage (avatars)
-
-
-
-
Architecture
-
- Sprint uses a monorepo structure with three packages: a shared package
- containing database schemas and types, a Bun.serve API with Drizzle
- ORM and auth middleware, and a React frontend that runs as a web app
- or is bundled as a native desktop application with Tauri.
-
-
-
Screenshots
-
-
-
-
-
-
-
-
-
-
-
-
-
-
watercooler description here
-
-
-
-
- Key features
-
-
- - feature1
- -
- Status: active prototype
-
-
-
-
-
-
- Technologies
-
-
- - LiveKit (WebRTC)
- - Next.js + TypeScript
- - Prisma ORM + PostgreSQL
- - Tailwind CSS
- - Google OAuth with NextAuth.js
- - Next.js server-side rendering and API routes
-
-
-
-
Screenshots
-
-
-
-
-
-
-
- Spotify listening activity web app with dynamic visuals, built with
- Next.js.
-
-
-
-
-
- Key features
-
-
- - Live fetch from Spotify API
- - OAuth 2.0 authentication
- - Dynamic colour palette extraction
- - Smooth song transitions
-
-
-
-
-
- Technologies
-
-
- - Next.js + TypeScript
- - Spotify API
- - OAuth 2.0 with fastify
- - Next.js server-side rendering and API routes
- - Colour palette extraction with node-vibrant
-
-
-
-
Screenshots
-
-
-
-
-
-
-
-
-
- ) : (
-
- )}
-