(getStoredTheme);
+ const resolvedTheme = theme === "system" ? getSystemTheme() : theme;
+
+ useEffect(() => {
+ if (typeof window === "undefined") return;
+ window.localStorage.setItem(storageKey, theme);
+
+ const root = document.documentElement;
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+ const applyTheme = (next: "light" | "dark") => {
+ root.classList.toggle("dark", next === "dark");
+ };
+
+ applyTheme(theme === "system" ? getSystemTheme() : theme);
+
+ const handleChange = () => {
+ if (theme === "system") {
+ applyTheme(getSystemTheme());
+ }
+ };
+
+ mediaQuery.addEventListener("change", handleChange);
+ return () => mediaQuery.removeEventListener("change", handleChange);
+ }, [theme]);
+
+ const value = useMemo(
+ () => ({ theme, resolvedTheme, setTheme }),
+ [theme, resolvedTheme],
+ );
+
+ return (
+ {children}
+ );
+}
+
+const useTheme = () => {
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error("useTheme must be used within ThemeProvider");
+ }
+ return context;
+};
+
+export { ThemeProvider, useTheme, type Theme };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000..ac680b30
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+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
new file mode 100644
index 00000000..409e6d93
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,18 @@
+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
new file mode 100644
index 00000000..60be5637
--- /dev/null
+++ b/src/projects/factor-e/index.tsx
@@ -0,0 +1,104 @@
+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
new file mode 100644
index 00000000..29228b3a
--- /dev/null
+++ b/src/projects/glimpse/index.tsx
@@ -0,0 +1,104 @@
+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
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+