Hey there!

I'm Billy.

I like building things.

I like making things pretty, but they gotta be fast too.

In fact, I've put everything about this site here so you can see just how fast it is :)

Feel free to look around, and make yourself at home.

Let's Chat →Resume ↗

▲Vercel

● Ready

$ next build

Route (app)

┌ ○ /

├ ○ /temp

├ ƒ /api/chat

└ ○ /berta

+ 3 more

✓ Compiled in 7.2s · Turbopack

Next.js 16 · iad1 · Measured 25d ago

⎇dev·a027f94—Add blog system with Clerk auth and custom sign-in flow - Blog platform at /blogs: post listing, individual post pages with markdown rendering, likes, and comments backed by Neon Postgres - Admin-only post creation form at /blogs/admin (server-side guard) - Clerk auth via proxy.ts: protects comment/like APIs and admin route - Custom SignInModal replacing Clerk's pre-built UI — email OTP + Google OAuth, animated step transitions, CLS-free navbar button - SSO callback at /sso-callback using useClerk().handleRedirectCallback with sessionStorage-based redirect-after-login - NavBar updated: auth state via useAuth(), UserButton with dark theme - ClerkProvider gets @clerk/themes dark base theme for UserButton popover - Added @clerk/themes and @neondatabase/serverless dependencies

GitHub

Dx-B/portfolio

dev·a027f94·25d ago

Add blog system with Clerk auth and custom sign-in flow - Blog platform at /blogs: post listing, individual post pages with markdown rendering, likes, and comments backed by Neon Postgres - Admin-only post creation form at /blogs/admin (server-side guard) - Clerk auth via proxy.ts: protects comment/like APIs and admin route - Custom SignInModal replacing Clerk's pre-built UI — email OTP + Google OAuth, animated step transitions, CLS-free navbar button - SSO callback at /sso-callback using useClerk().handleRedirectCallback with sessionStorage-based redirect-after-login - NavBar updated: auth state via useAuth(), UserButton with dark theme - ClerkProvider gets @clerk/themes dark base theme for UserButton popover - Added @clerk/themes and @neondatabase/serverless dependencies

+259−203

View Repository

Lighthouse

billyzhang.dev/temp · desktop

Perf

A11y

B.P.

SEO

LCP0.8s

FCP0.5s

CLS0.00

TBT0ms

Reviewed May 4, 2026, 1:46 AM UTC

Next.js·TypeScript·React·Claude API·Framer Motion·Python·FastAPI·Tailwind v4·OpenAI SDK·PostgreSQL·Docker·discord.py·PyTorch·Vercel·Redis·Next.js·TypeScript·React·Claude API·Framer Motion·Python·FastAPI·Tailwind v4·OpenAI SDK·PostgreSQL·Docker·discord.py·PyTorch·Vercel·Redis·

Preview variant

Your Dreams

My Passion

4+ Years

Building and shipping

Full-Stack

Frontend + Backend

AI-Native

Claude · OpenAI

Production

Live applications

Preview variant

Ask me anything

About Billy's work and experience

Ask about Billy's background, projects, or availability.

Who am I?

AI · Full-Stack

Rutgers University · Class of 2027

I'm Billy Zhang, a Computer Science & Software Engineering student at Rutgers University. I build full-stack web apps and AI-powered tools — from game mods to production Next.js apps. 8+ years of hands-on engineering and community leadership across frontend, backend, and systems.

I've shipped a Python Discord music bot serving 200+ concurrent users, led development on a Minecraft Fabric mod startup, and contributed QA to the open-source SPT-AKI TypeScript server. Today I focus on full-stack web development and AI integration — building fast, modern experiences with Next.js, React, and the Claude and OpenAI APIs.

2018

Started leading online communities — grew to 60,000+ members.

2022

Lead developer on a Minecraft Fabric mod startup.

2023

Shipped a Python Discord bot; QA on SPT-AKI TypeScript server.

2025

Full-stack + AI focus. Building with Next.js, Claude, and OpenAI.

Study

CS + SWE

Experience

8+ Years

Stack

Next.js

Projects

5 total

BreakdownCNN Classifier

Model

5-layer CNN with batch normalization, dropout regularization, and ReLU activations.

PyTorchCUDAPython

Training

Trained on CIFAR-10 with data augmentation and cosine annealing scheduler.

Weights & BiasesNumPyMatplotlib

Inference

Exported to ONNX for cross-platform deployment with sub-10ms CPU inference.

ONNXFastAPIDocker

View project

AI Chat Platform

Real-time streaming AI chat with memory.

Next.jsOpenAI

CNN Classifier

PyTorch image classifier, 92% test accuracy.

PyTorchPython

Discord Music Bot

Python bot serving 200+ concurrent users.

Backend

Pythondiscord.py

Task Manager

Offline-first productivity tool.

Systems

TypeScriptIndexedDB

E-commerce UI

High-performance storefront interface.

Backend

Next.jsStripe

My Process

From brief to production — how I approach every project.

Project BriefMVP

AI Chat Assistant

A conversational interface backed by the Claude API — real-time streaming, persistent history.

Acceptance Criteria

User can send messages and receive AI responses

Responses stream token-by-token in real time

Chat history persists across page refreshes

Works on mobile with a responsive layout

Priority: High

Target: this sprint

Scope

Define what success looks like, who the end user is, and what the MVP actually needs to be.

01 · Scope

Define what success looks like, who the end user is, and what the MVP actually needs to be.

wireframe.figLayout v2

Nav

Hero

Feature Cards

Design

Architecture decisions and wireframe or Figma mockup. Framework, API strategy, and state management chosen here.

02 · Design

Architecture decisions and wireframe or Figma mockup. Framework, API strategy, and state management chosen here.

ChatBot.tsxapi.tstypes.ts

export function ChatBot() {

const [msgs, setMsgs] = useState<Msg[]>([])

// stream each token as it arrives

const send = async (msg: string) => {

for await (const tok of stream(msg)) {

setMsgs(prev => [...prev, tok])

}

Build

Components built in isolation with unit tests written alongside the code. Architecture stays clean and composable.

03 · Build

Components built in isolation with unit tests written alongside the code. Architecture stays clean and composable.

feat: streaming chat response

3 files changed · +47 −12 · self-review

api.ts

- const resp = await fetch(chatUrl)

- return resp.json()

+ const stream = await streamChat(chatUrl)

+ for await (const tok of stream) yield tok

Review note

Handle 429 rate-limit: add retry with backoff before yielding error token.

Review & QA

PR-gated self-review against the diff, end-to-end testing, manual QA across screen sizes, and edge case coverage.

04 · Review & QA

PR-gated self-review against the diff, end-to-end testing, manual QA across screen sizes, and edge case coverage.

CI Pipeline · push to main

Lint & format

Type check

Unit tests

Build (Next.js)

Deploy to Vercelrunning…

CI/CD

Automated pipeline runs lint, tests, and build validation. GitHub Actions or Vercel CI gates every deploy.

05 · CI/CD

Automated pipeline runs lint, tests, and build validation. GitHub Actions or Vercel CI gates every deploy.

Deployment complete

prod → billy-zhang.vercel.app

just now

billy-zhang.vercel.app

AI Chat Assistant

Ask me anything…

Live · 0 errors · p95 latency: 42ms

Ship

Live in production. Monitor errors, gather real feedback, and iterate.

06 · Ship

Live in production. Monitor errors, gather real feedback, and iterate.

Tech Stack

Frontend

Next.js 15React 19TypeScriptTailwind CSS v4Framer Motion

Middleware / Auth

Next.js API RoutesNextAuth.jsJWT / SessionsZod ValidationREST APIs

Backend

PostgreSQLPrisma ORMOpenAI APIClaude APINode.js

Cloud / Tooling

VercelGitHub ActionsGitVS CodeDocker (learning)

Full-Stack Data Flow

Submit the form to trace a request from UI → middleware → database.

Frontend

ReactTailwind CSSFramer MotionTypeScript

Middleware

app/api/auth/

├ route.ts

├ middleware.ts

└ [...nextauth]/

└ route.ts

Active Route

— no active route

schema.parse({ email, password })

// ZodError | void

Next.js API RoutesNextAuth.jsZodJWT

Backend

db.users

id	email	joined
1	alice@example.com	Jan 2025
2	bob@example.com	Mar 2025

Last Query

— awaiting query

Response

— awaiting request

PostgreSQLPrisma ORMVercel

Components

Live swatches of UI patterns used across this page.

Gradient Rule

Animated section header divider

Section Title

Framer MotionTailwind CSS v4

Segmented Toggle

Layout switcher with sliding selection

ReactFramer Motion · layoutId

Stagger Reveal

Sequential entry used throughout the page

01Scope

02Design

03Build

Framer MotionReact

Count-Up Stat

Animated metric used in project cards

Concurrent Users

ReactuseEffect

Contact

Open to opportunities

Want to build something together?

I'm interested in design-forward software, AI products, and systems that feel polished, useful, and memorable. Have something in mind? I'm open to thoughtful projects, collaborations, and new opportunities.