Open to internships & freelance work

ZadeedHaque

Computer Science×AI×Creativity

CS student at Swinburne University of Technology in Melbourne, majoring in AI.I'm a Web Developer

▶ Director · Streamer </> TypeScript · Python ● Illustrator · Premiere · After Effects
Developerweb · games · AI
Creatordesign · video · streaming
Leaderdirector · production
01 · About

Code. Create. Solve.

I'm a Computer Science student specialising in Artificial Intelligence, and I like building things that solve real problems.

I started with Computer Science & Engineering at BRAC University in Dhaka, building my foundation in programming, algorithms and object-oriented design. At Swinburne I'm taking that into AI, software architecture, cloud computing and web development.

Before code, I spent years editing and producing video, including leading a small production team. That taught me to plan, collaborate and ship something polished, and I bring the same habits to software.

This year I've shipped an interactive 3D physics lab that covers a whole national syllabus in two languages, a 3D prayer guide in three, a four-role healthcare booking platform, a CNN that reads handwritten numbers, a prize wheel for an in-store campaign, and four browser games built without a single asset file.

Team leadershipCreative problem solvingAdaptabilityTime managementCollaborationAlways learning

off the clock →football · gaming · movies & anime · the gym · my cat Ayra

Zadeed on a coastal lookout above the ocean
Turning ideas into things people actually use.
AIDegree major
2027Expected graduation
02 · Roles

Many hats

Nine roles I've taken on so far — building software, creating visual stories, and leading the people and projects behind them.

Build

Web Developer

React · TypeScript · Three.js · CSS

Ships live sites and web apps — a 3D physics lab, a 3D prayer guide, four browser games, a prize-wheel app and this portfolio — plus coursework sites with semantic HTML, validated forms and responsive CSS. Everything is deployed on Vercel or GitHub Pages.

Build

Software Developer

TypeScript · Python · Java · AWS

Builds software end to end — a four-role healthcare platform in Next.js and Prisma, a CNN that reads handwritten numbers, a bilingual physics lab behind a 308-test gate and four browser games with their own tooling — plus sixty C++ and Java programs and multi-AZ AWS infrastructure.

Create

Graphic Designer

Creative IT Institute · Illustrator

Trained in graphic design at Creative IT Institute. Designs brand graphics, social posts, thumbnails, stream overlays and presentation visuals in Adobe Illustrator.

Create

Photographer

Freelance · personal

Shoots freelance and personal photography, with an eye for light, framing and people that carries into every design and video project.

Create

Videographer

Camera · lighting

Shot educational videos and freelance gigs, handling the camera, lighting and on-set setup.

Create

Video Editor

2021 — 2023

Edited in After Effects and Filmora for Luxurious Sky — a YouTube channel now at 10k subscribers — and several movie-explanation channels.

Create

Streamer

YouTube · Streamlabs

Streams PC gameplay to YouTube on a self-built rig — RTX 4070 NVENC encoding, a Nikon D3400 as a webcam, and dedicated lighting.

Lead

Director

Concept → final cut

Directed educational video productions at Brain Stormers Coaching Center, shaping each piece from concept to final cut.

Lead

Production Manager

2023 — 2024

Managed a small production team at Brain Stormers — planning shoots, coordinating people and keeping the full pipeline on schedule.

03 · Journey

Work & Study

Years behind the edit, then a deep dive into computing — two paths that shaped how I build.

Experience

2023 — 2024

Video Production Lead

Brain Stormers Coaching Center

Led a small team shooting and editing educational videos, owning the full process from concept to final edit.

LeadershipProductionCoordination
2021 — 2023

Freelance Video Editor

Luxurious Sky · movie-explanation channels

Cut videos for Luxurious Sky — a YouTube channel now at 10k subscribers — and several movie-explanation channels.

After EffectsFilmoraYouTube

Education

Now · graduating Nov 2027

Swinburne University

Bachelor of Computer Science · AI major
30% scholarshipHigh Distinction ×2Advanced standing
2024 — 2025
Computer Science & Engineering
CGPA 3.64 / 4.00Credit transferred
2022 — 2023
Higher Secondary Certificate
GPA 5.00 / 5.00IELTS 7.5SAT 1300
Certificate
Graphic Design · Adobe Illustrator
04 · Selected work

Things I built

Thirteen projects — a 153-topic physics lab, four browser games built from nothing, an interactive 3D prayer guide, a healthcare booking platform, a CNN that reads handwriting, cloud infrastructure, and thirty programs written in both C++ and Java.

Latest
Lava Lift title screen: a rescue helicopter over a burning city with a chain of survivors hanging below it
Solo build · Browser game · JavaScript & Matter.js

Lava Lift

A volcano is erupting and the lava keeps rising. Fly a rescue helicopter, pick up stranded survivors and carry them to a camp on the mountain — not inside the cabin, but as a swinging human chain below it, each survivor a six-part physics ragdoll holding the ankles of the one above. Carry too many or fly too roughly and the chain snaps.

JavaScriptHTML5 CanvasMatter.jsWeb Audio APIViteTouch controls0 asset files
▶ Play it ↗ GitHub ↗
Learn Salah: a faceless 3D figure bowing in ruku on a prayer mat, with the lesson text beside it
Solo build · Interactive 3D web app · React & Three.js

Learn Salah

Don't just read how to pray — see it. A faceless 3D figure, generated entirely in code, performs each movement of the Islamic prayer while the instructions, Arabic, transliteration and translation stay in sync beside it. All five daily prayers, four madhhabs side by side, in English, বাংলা and العربية.

React 19TypeScriptThree.jsReact Three FiberTailwind CSS 4ZustandVite0 model files
Dhakar Rasta: a red car driving down a stylised Dhaka street with Bangla shop signs
Solo build · 3D browser game · TypeScript & Three.js

Dhakar Rasta

A 3D game about surviving Dhaka traffic, entirely in Bangla. Wrong-way rickshaws, buses that stop anywhere, people crossing under a perfectly good footbridge — and a fairness system that guarantees every hazard can be avoided. Every vehicle, building and sound is generated in code.

TypeScriptThree.jsViteWeb AudioBangla UI~170 kB gzipped0 asset files
▶ Play it ↗ GitHub ↗
The Physics Lab showing a hydrogen atom emitting photons, with the Lyman, Balmer and Paschen spectral lines building up below
Solo build · Interactive education · React & Three.js

Zadeed's Physics Lab

An interactive 3D laboratory covering the entire Bangladesh HSC Physics syllabus — 153 topics across both papers, where every slider changes real physics and every number on screen comes from the equations. Bilingual, phone-first, and gated behind 308 automated tests.

ReactTypeScriptThree.jsViteTailwind CSS153 topics115 simulations308 testsEN · বাংলা
Crownfall title screen — a pixel-art palace arcade at night under a crescent moon
Solo build · 2D parkour platformer · Phaser 3

Crownfall

A browser parkour platformer with no enemies, no weapons and no asset files. Three hand-designed levels, a twelve-move movement system, and every tile, sprite, sound and UI glyph generated in code at boot — 28 kB gzipped on top of the engine.

JavaScriptPhaser 3Vite3 levels37 source files0 asset files28 kB gzipped
▶ Play it ↗ GitHub ↗
Neon Snake title screen: a glowing 3D grid arena
Solo build · 3D browser game · React & Three.js

Neon Snake

Snake rebuilt in real 3D in the browser — a neon arena drawn with custom shaders, a snake made of instanced geometry, and a soundtrack synthesised as it plays. No models, textures or sound files anywhere in the project: every pixel and every note is generated in code.

React 19TypeScriptThree.jsReact Three FiberGLSLWeb AudioVite380 kB gzipped
▶ Play it ↗ GitHub ↗
Solo build · Machine learning · Python

Handwritten Number Recognition

A system that reads handwritten numbers from images. It splits each image into digits, recognises each digit with a custom CNN, and joins the results. It reaches 89% exact-match accuracy on 2,000 test images, and comes with an interactive web app.

PythonTensorFlow/KerasOpenCVscikit-learnGradioGoogle Colab
▶ Live demo ↗ GitHub ↗
MediCare BD landing page
Solo build · Full-stack web app · Next.js

MediCare BD

A multi-hospital healthcare booking platform for Bangladesh. Patients find verified doctors by specialty and location and book open time slots; hospitals and doctors are approved through a two-step review; doctors run consultations and issue prescriptions — with a separate dashboard for each of four roles.

Next.js 16React 19TypeScriptPrismaSQLiteTailwind CSSZodRecharts
Spin & Win prize wheel in gold and green
Solo build · Promotional web app · React & TypeScript

Spin & Win

A keyboard-driven promotional prize wheel for an in-store campaign: space to spin, then type a name to claim the prize. One weight per prize sets both the slice size and the real odds, and the spin solves for where it must stop before it starts turning — so the wheel can never lie about the odds.

React 18TypeScriptViteSVGState machinelocalStorage~55 kB gzipped
▶ Play it ↗ GitHub ↗
01–20 Fundamentals21–40 Object-oriented41–60 Data structures
Personal challenge · C++ & Java · complete

60 Projects Challenge

Thirty programs in three escalating tiers — fundamentals, object-oriented design, then data structures and algorithms — each written twice, in C++ and in Java, for sixty in all. They run from a menu-driven calculator to a min heap measured against Floyd's O(N) build.

C++JavaOOPData structuresAlgorithms60 / 60 done
GitHub ↗
Cloud · AWS

Multi-AZ VPC

A custom VPC across two Availability Zones with public and private subnets, a bastion host into private resources, a MySQL database, and locked-down security groups and IAM.

AWSEC2VPCIAMMySQL
Design · Wadeye, NT

Flood-Resilience Raft

A low-cost floating household raft for a remote Indigenous community facing flood isolation — drum flotation, bamboo frame, solar power, and sensors for water, temperature, GPS, tilt and SOS.

Design thinkingSensorsLow-costCommunity
Web · HTML & CSS

Web Projects

Semantic, responsive sites with validated forms and tables, published on GitHub Pages — plus the About page, structure and styling for a team cybersecurity website.

HTMLCSSJavaScriptGitHub Pages
05 · Toolkit

What I use

Code 07

TypeScriptJavaScriptPythonJavaC++HTMLCSS

CS Core 07

OOPData structuresAlgorithmsLinked listsTrees & BSTsSortingFile I/O

Web & Apps 10

ReactNext.jsThree.jsPhaser 3VitestPrismaTailwind CSSViteNode.jsREST & server actions

Cloud & Net 09

AWSEC2VPCIAMMySQLTCP/IPVLAN · 802.1QDHCPPacket Tracer

AI & Data 06

TensorFlow / KerasOpenCVscikit-learnNumPy & pandasGradioHugging Face Spaces

Tooling 06

Git & GitHubGitHub ActionsGitHub PagesVS CodeSoftware architectureRequirements analysis

Media 05

Premiere ProAfter EffectsIllustratorFilmoraPresentation design

Streaming 05

StreamlabsNVIDIA NVENCDSLR as webcamLightingWindows tuning
06 · Latest cuts

Fresh off the timeline

Watch on YouTube ↗
Promo reel · 2026Grocery delivery adConcept, shoot direction, edit and motion text — a short, punchy spot built around everyday moments.
Motion design · 20263D logo revealA clean embossed-to-colour logo animation, rendered at 1080p60.
07 · Gaming & streaming

Press start. Go live.

PC gaming turned into streaming — and streaming turned into a love for cameras, lighting, encoding and post-production.

Stream capture: EA Sports FC match with Zadeed's webcam overlay
LIVEEA Sports FC · 1080p60
PlatformYouTube ↗
SoftwareStreamlabs
Audio

Battle station

CPU
Ryzen 7 7700G
GPU
RTX 4070
RAM
16 GB Corsair Vengeance
Camera
Nikon D3400 DSLR
Lighting
Back-fill setup
08 · Hobbies

Off the clock

Football, films, games, the gym — and a cat called Ayra. The things that keep me going when the laptop's closed.

Zadeed walking onto a floodlit pitch in his number 14 shirt
Zadeed in green making a run during a campus match
Zadeed holding the RS House Championship football trophy
Champions
RS House Championship football Most Valuable Player award
MVP
Football

The game that shaped me

Football has been a big part of my life. It taught me teamwork and discipline — and, most of all, how to regulate my emotions when the pressure is on.

  1. 2017
    International debutRepresented Bangladesh
  2. 2019–23
    Inter-college circuitPlayed in multiple inter-college tournaments
  3. 2023
    Runners-upAIUB Inter-College Tournament
  4. 2025
    Champions · MVPRS House Championship (Football), BRAC University Savar Campus — representing Monpura House

I don't play regularly any more, but the lessons stuck.

Movies · Anime · Series

Screen time

There's almost always an anime or a series on the go — and I've seen nearly every Marvel film.

  • Favourite filmThe Shawshank Redemption
  • Favourite animeAttack on Titan · One Piece
  • Favourite seriesGame of Thrones
  • Favourite universeMarvel (MCU)
Gym

Leisure, lifted

These days the gym is where I unwind. Favourite muscle group to train?

BACKDAY
Ayra, Zadeed's white, black and ginger cat
Pets

Meet Ayra

A cat person and a dog person — but Ayra, my cat, runs the house.

Games

Controller in hand

Red Dead Redemption 2 key artAll-time bestRed Dead Redemption 2
Fortnite Battle Royale key artBattle royaleFortnite
Rocket League key artChill pickRocket League
Also played
Apex LegendsCS:GOCS2Among UsPhasmophobiaGenshin ImpactRed Dead RedemptionBatman: Arkham KnightBatman: Arkham CityMarvel's Spider-Man 2Ghost of TsushimaPrince of Persia: The Sands of Time
09 · Contact
zadeedhuq2018
@gmail.com

Internships, freelance web & design work, video, or an AI idea you want to prototype — I'm in.

Solo build · Based on the COS30018 Intelligent Systems brief · Swinburne University of Technology · 2026

Handwritten Number Recognition System

I built a machine-learning pipeline on my own that recognises handwritten numbers — from single digits to multi-digit numbers like “120” — in images of real handwriting.

98.9%CNN on MNIST
(SVM: 95.9%)
64.6% → 89.35%Exact-match accuracy on held-out real handwriting
2,000Test images

How it works

  1. SegmentationOpenCV thresholding and connected-component analysis split each image into single digits.
  2. ClassificationA CNN I designed and trained from scratch recognises each digit.
  3. JoiningThe digit predictions are combined from left to right into the final number.

What I did

Try it live

Draw or upload a number to see each digit's prediction and confidence. Hosted on Hugging Face Spaces — if it's asleep, give it a few seconds to wake up, or open the demo in a new tab ↗.

Key skills

Deep learningComputer visionError analysisModel evaluationData cleaningExperiment design

Tech stack

PythonTensorFlow/KerasOpenCVscikit-learnNumPypandasMatplotlibGradioGoogle ColabGitHub
Solo build · Full-stack web app · 2026

MediCare BD

A HotDoc-style healthcare platform built for Bangladesh's multi-hospital system. I designed and built the whole thing myself — data model, authentication, business logic and four role-based dashboards.

4User roles, each with its own dashboard
19Database tables in the Prisma schema
8Appointment states, from confirmed to completed
0Double bookings — slots are locked in a transaction
MediCare BD home page with doctor search by specialty and location
Public home page — search doctors by specialty, hospital or division.

Who does what

Top doctors grid with ratings, fees in taka and Book buttons
Doctor listings with ratings, experience and fees in BDT.
Platform admin dashboard with stats, charts and pending hospital approvals
Platform admin dashboard — live stats, charts and the approval queue.

What I built

How it flows

Hospitaladmin Platformadmin Doctor System review yes no review approved save Apply to joinstatus: PENDING Approvehospital? Rejectedreason + notified Hospital ACTIVEadd departments Register under hospitalBMDC no. · PENDING Approvedoctor? Set weekly scheduledays · hours · slot length Generate slotsnext 21 days Doctor bookableshown in search
Onboarding: two approval gates before a doctor becomes bookable.
Patient System Doctor Platformadmin book taken → retry notify both complete complaint Search doctorsspecialty · division Pick a free slot+ reason for visit Slot stillfree? Lock slot + createappointment CONFIRMED Patient arrivesmark WAITING Consultationdiagnosis · Rx · report COMPLETEDnotify: prescription ready View Rx & recordsleave review Resolvecomplaints
Booking: the slot is re-checked and locked in one transaction.
book CONFIRMED WAITING IN_CONSULTATION COMPLETED CANCELLED RESCHEDULED NO_SHOW arrives start complete cancel → slot freed reschedule new CONFIRMED appointment · old slot freed didn't show → diagnosis, prescription, medical record, follow-up
Appointment lifecycle: cancel frees the slot; reschedule swaps it.
Login formemail + password Passwordmatches? Signed session cookieJWT · httpOnly · 7 days Open a dashboard pagerequireRole(...) Rightrole? Page loads/admin · /hospital · /doctor · /patient Redirect to owndashboard (or /login) Back to /login"Invalid email or password" submit yes · bcrypt go no / inactive yes no
Login & access: one login, four role-protected dashboards.

Key skills

Full-stack developmentDatabase designAuthenticationRole-based accessTransactionsDashboard UISystem design

Tech stack

Next.js 16 (App Router)React 19TypeScriptPrismaSQLiteTailwind CSS 4Zodbcryptjose (JWT)Rechartsdate-fnsLucide

Demo platform with fictional data — not for real medical use. Source code available on request.

Solo build · Promotional web app · 2026

Spin & Win

A prize wheel for an in-store promotion, built from scratch in React and TypeScript. Staff run it on a screen at the counter and players use only the keyboard: space to spin, then a name to claim what they win.

4Screens driven by one state machine
18,000Simulated spins, zero landing misses
0.093Percentage points of maximum drift from the set odds, over 500,000 draws
55 kBGzipped — no libraries beyond React
The wheel screen: prize slices for discounts, vouchers and a rare $100 prize, with a pointer at the top
The wheel — slice sizes are the odds, drawn as SVG.

How it works

Jackpot screen: you won $100
The jackpot screen for the rarest prize.
Claim screen asking for the winner's name
Claim step — the winner's name goes on the prize.

What I built

Previous records table listing player names, prizes and times
Records screen — every spin on this device, with a clear button.

Bugs testing caught

Key skills

ReactTypeScriptState machinesSVG geometryProbability & weightingAnimationTesting & verification

Tech stack

React 18TypeScriptViteSVGCSS animationlocalStorageNode verify script
Solo build · Interactive education · 2026

Zadeed's Physics Lab

An interactive 3D laboratory covering the entire Bangladesh HSC Physics syllabus — 153 topics across both papers, where every slider changes real physics and every number on screen comes from the equations rather than a lookup table.

153Syllabus topics, both papers, organised as students meet them
1153D simulations, each built for its own topic
308Automated tests, run before every deploy
2Languages — English and বাংলা
The projectile motion page: syllabus sidebar, 3D scene with labelled vectors, parameters card and live graphs
One workspace, the same everywhere — learn one simulation and you can use all 115.

The brief: make the physics visible, not just the formulas

HSC Physics in Bangladesh is two dense papers — 21 chapters running from vernier callipers to nuclear fission, semiconductors and the H–R diagram. Most students meet these ideas as static textbook diagrams and formulas to memorise. The goal was a single place where they could change the variables and watch the laws respond, and the brief set a high bar for honesty:

Anatomy of a simulation

SyllabusBoth papers, every chapter and topic, plus favourites and recents
3D sceneThree.js, with labelled vectors and measurements you can orbit, pan and zoom
ParametersSliders with units and one-tap presets, in a tinted high-contrast card
Live graphsDriven by the simulation state, not canned curves

Below the scene each page also carries Results, Equations with live substitution, a Learn panel, and an optional Experiment mode that records measurements to a table and exports CSV. Playback runs play, pause, single-step, restart and slow motion down to 0.1×. Behind that shared layout each simulation is built for its own topic: rigid bodies and orbits, wave fields rendered in shaders, particle gases, circuit solvers, ray optics and Monte-Carlo nuclear physics.

Logic gates simulation with clickable switches in the 3D scene and a real timing diagram
Logic gates — switches are clickable; clock mode draws a real timing diagram.
Nuclear chain reaction simulation with a cloud of green neutrons
Chain reaction — enrichment, fuel and control rods decide whether k rises above 1.

Physics as pure functions, simulations as modules

The codebase separates what is true from what is drawn. Formulas live in a small library of pure TypeScript functions — kinematics, gravitation, optics, circuits, nuclear physics — each unit-tested on its own. Every simulation is one self-contained module that declares its parameters, presets, graphs and Learn content, and gets registered automatically just by existing in the folder.

Keeping it honest — 308 tests

“No NaN, no dead sliders” is easy to promise and hard to keep across 115 simulations, so it is enforced by tests rather than by hand. One suite runs every module through its defaults, every preset, the minimum and maximum of every slider, six random parameter sets and every dropdown option. For each it steps the physics, presses every button, clicks every clickable 3D object, sweeps each parameter and resets — then asserts that no readout, equation or graph point is NaN, Infinity or undefined. The suite also checks that every syllabus entry points at a real module, that labels are unique, that every Bangla translation is complete, and that every formula survives the fraction formatter unchanged. It runs on every push, and the site only deploys if it passes.

What is checkedTests
Physics formula library (unit tests)44
Simulation modules, each under a dozen or more parameter sets118
Bangla content complete for every simulation116
Formula-to-fraction parser (edge cases)30
Total, run before every deploy308

Bugs it caught along the way: a heap overflow when a ruler tried to draw ticks for a zero-length track; a charged particle circling the wrong way; a prism ray rotated the wrong direction; Lenz's-law poles reversed; interference nodal lines offset by half a wavelength; a readout of “Infinity” after a Doppler source passed the listener; and a duplicate label that broke React's rendering of the fission panel.

Details that matter to students

Equations panel showing formulas stacked as fractions with the student's current values substituted in
Equations with live substitution.
The parameters card with presets, sliders, units and toggles
The Parameters card.

A 3D lab that doesn't fight your thumb

On a touchscreen, a 3D view that eats every swipe makes the page impossible to scroll. So on phones and tablets the camera starts locked: swipes scroll the page, and one tap on Locked hands control back to the 3D scene. The page header, controls and graphs stack into a single column. On a laptop the syllabus sidebar can be tucked away for a wider stage, and the choice is remembered between visits.

The Physics Lab home screen on a phone
Home on a phone.
A simulation on a phone with the view locked by default
View locked by default.

Learn it in English or বাংলা

The Learn panel showing special relativity explained in Bangla
Special relativity, in বাংলা.
Young's double slit simulation in the light theme
Young's double slit, light theme.

Every simulation's Learn panel has an English | বাংলা switch, and the Bangla versions cover all 115 simulations — the concept, the meaning of every variable, what to observe and the experiment challenge — using the terms from Bangladesh's HSC textbooks, such as লঘিষ্ঠ গণন (least count), আবেগ (momentum) and কার্যাপেক্ষক (work function). Symbols and formulas stay as printed in the textbooks, so a student can move between languages without re-learning notation. The Bangla text loads only when someone picks বাংলা (41 kB compressed), and a test fails if any simulation is missing a translation.

From neon to trustworthy

The visual identity went through several quick rounds, each shipped live and judged on real pages rather than mock-ups: a clean dark interface in sky blue built to get every simulation working; a “flashy” round of neon pink, violet and cyan with glowing gradients and a sci-fi display face; a type pass that dropped that face as gimmicky and settled on Exo 2 from a side-by-side of five candidates; and finally a professional redesign — navy and slate with a single calm blue, Source Serif 4 headings and Inter body text, with gradients, glows and animated headings removed so the physics carries the colour. Colours inside the simulations were deliberately left out of every redesign: red for positive charge, blue for negative, amber for current and so on carry physical meaning and stay consistent across all 115 scenes. Both light and dark themes are fully designed, and follow the device setting by default.

Fast to load, safe to update

The app is a static site with no server. Every push to main runs the type check and all 308 tests in GitHub Actions and, only if they pass, publishes to GitHub Pages. A Vercel configuration is included for teams who prefer it, with rewrites so any simulation link opens directly.

BundleSizeGzipped
Three.js (3D engine)627 kB158 kBOnce, then cached
App shell, navigation, panels399 kB126 kBOnce, then cached
One simulation module3–10 kB1.5–4.5 kBOnly when that page opens
Bangla Learn content199 kB41 kBOnly if বাংলা is chosen
Styles35 kB8 kBOnce

Where it stands

Built solo with AI pair-programming (Claude Code). Screenshots are from the production build.

Key skills

Simulation designNumerical methods3D graphicsGLSL shadersTest architectureInternationalisationInformation architectureMobile UXCI/CD

Tech stack

ReactTypeScriptThree.jsViteTailwind CSSVitestGitHub ActionsGitHub PagesVercel
Solo build · 2D parkour platformer · September 2026

Crownfall

A side-scrolling parkour platformer that runs in a browser tab. You play Rashan, the last heir of a house that no longer exists, crossing the fortress that outlived it. There is nothing to fight — the whole game is traversal, and the movement controller is the product rather than a supporting system.

0Asset files — every tile, sprite, sound and glyph is drawn or synthesised at boot
28 kBGame code gzipped, on top of the Phaser chunk
12Moves in the controller, from ledge grab to wall jump
3Hand-designed levels across 37 source files
The Broken Span — Rashan on a stone pillar under a night sky, with the on-screen hint 'falling costs you only the climb back'
Chapter two, The Broken Span. Falling costs the climb back and nothing else.

A game made only of movement

Removing combat removes the usual source of difficulty, so every ounce of interest has to come from how the character moves. That set three rules for the whole build.

No asset files

The game ships zero images and zero audio. Every pixel and every sound is drawn or synthesised into memory during a four-step boot, which is why the game code is 28 kB gzipped and starts instantly.

Tile sets16 tiles at 16 px, drawn per palette with seeded noise so stone is never flat
Character45 frames posed from a skeletal rig — hip, shoulder, head, two arms, two legs
ParallaxThree layers: sky gradient, mountain and dome skyline, palace arcade
UI fontHand-authored 5 × 7 bitmap glyphs, baked into a texture as a Phaser RetroFont
SoundWeb Audio oscillators and noise bursts for every effect
MusicA generative piece in a double-harmonic mode, scheduled a bar ahead

The character is the part worth explaining. Rather than hand-placing pixels, each frame is a pose: joint angles for both arms and both legs, a torso lean and a hip offset. A walk and a run are tables of eight such poses, and everything else — hanging, climbing, vaulting, wall-sliding — is authored the same way. Changing how a jump looks means editing two numbers. Three palettes carry the mood: warm morning sandstone, cold dusk ruins, and a night fortress lit by torches. The practical payoff is that the art is a variable, not a dependency — every generator writes to a fixed texture key and skips a key that already exists, so hand-drawn PNGs can be loaded over the top later without touching game logic.

Rashan clinging to a brick wall mid-climb, with the hint 'push into the wall and jump again'
Rashan running along a tiled parapet above the palace arcade

The movement controller

A state machine with an idle state and twelve moves — walk, run, jump, fall, crouch, land, vault, step-up, ledge grab, ledge climb, wall slide and wall jump. All tuning lives in one file, so feel is edited in one place.

The forgiveness layer

Coyote time — 0.10 sA jump still registers just after walking off an edge
Jump buffer — 0.13 sPressing jump slightly early still fires on landing
Variable height — ×0.42Tapping hops, holding clears the gap
Turn boost — ×1.9 accelReversing direction bites instead of sliding
Wall stick — 0.09 sA wall jump lands even if you left the wall a frame ago

Levels as code — and a tool that proves they work

Levels are functions against a builder API rather than ASCII maps or a Tiled export, so a level file reads as a list of intentions:

b.ground(0, 26, 29);walkable floor at row 26, 29 tiles wide
b.plat(86, 17, 3);one-way platform you can drop through
b.ledge(96, 14, 12, 4, T.ROOF);floating slab, 12 wide and 4 thick
b.mover(75, 44, 82, 44, 34);platform that slides between two points
b.faller(45, 62);slab that crumbles under you
b.checkpoint(41, 61);lights a brazier you respawn at
b.door(161, 20);the way out of the chapter

Every distance stays explicit and reviewable, and the builder is the one place to enforce invariants — it refuses to let decorative tiles overwrite collision geometry, which killed a whole bug class where dressing a wall with columns punched holes in the floor beneath.

Each level is designed against a jump budget derived from the physics rather than guessed: 2.2 tiles up from standing, 4 tiles across from a run on level ground, 3 tiles across when landing three rows up (caught as a ledge grab), four rows up not possible at all, and about two tiles of height per kick in a 48 px wall-jump shaft.

A budget on paper still lets you ship an impossible jump, and I did: a run of crumbling slabs ended four rows below the ledge it led to. No skill clears that, and it took a player reaching 32 deaths before it surfaced. The fix was a tool, not a patch. npm run audit turns each level into a graph of standing positions and walks it from the spawn using the real budget — ledge grabs, platform rides and wall-jump chimneys included. It fails the build if the exit or any checkpoint cannot be reached, and lists footing whose only way onward is a drop.

PASSlevel1Courtyard of Dawn168 × 34
PASSlevel2The Broken Span100 × 76
PASSlevel3Fortress of Ashes194 × 64

Run against the broken layout it fails outright: exit unreachable, three checkpoints stranded. A design mistake that took a human 32 attempts to find now takes 200 ms.

Rashan standing on a crumbling slab between two torch-lit platforms, five falls on the counter
The chapter cleared panel for Fortress of Ashes showing a new best time of 1:21.3 and five falls

Three bugs worth writing down

The pattern across all three: the failure was never in the code I was looking at. It was in an assumption about what the framework did when I was not watching.

Results

60 fpsTarget held on integrated graphics at 480 × 270 internal, scaled to fit
86 kBGame code raw, 28 kB gzipped; Phaser split into its own cached chunk
~3 sProduction build, deployed to GitHub Pages on every push to main
45Character frames, posed from a rig, with six pooled particle emitters

The things that hold the frame rate are unglamorous: one culled tilemap layer instead of thousands of sprites, pooled emitters, ambient motes and torch sparks throttled and round-robined over only the torches on screen, and parallax as three tiling quads rather than large images. Next up: gamepad and touch input (the controller is already input-agnostic), a ghost replay per level since best times are stored anyway, and hand-drawn sprites over the generated ones — which the fixed texture keys were designed to allow.

Key skills

Game architectureCharacter controllersProcedural artLevel designToolingPerformanceWeb AudioDebugging

Tech stack

JavaScriptPhaser 3ViteArcade PhysicsCanvas 2DWeb Audio APIGitHub Pages
Solo build · 3D browser game · September 2026

Neon Snake

Snake, rendered in real 3D and built entirely from code: the arena is a shader, the snake is instanced geometry, the music is synthesised while you play. 6,276 lines of TypeScript and CSS across 46 files, 380 kB gzipped, deployed automatically to GitHub Pages.

0Asset files — every texture, sound and icon is generated at runtime
~198 fpsMeasured at 1000 × 620, about 3× the 60 fps target
6,276Lines of TypeScript, TSX and CSS across 46 files
380 kBGzipped bundle, no game engine
Gameplay: the glowing snake on a neon grid with score, level and speed readouts
The arena floor is a single GLSL shader — grid, glow around the head, shock rings on every pickup.

How it holds its frame rate

Built by hand

Game over panel: system failure, score, high score and the top five runs
Game over — the device's top five runs, each with level and length.
Neon Snake on a phone in portrait
Portrait on a phone — the camera reframes itself, no separate mobile layout.

Gameplay systems

Bugs testing caught

Shipping it

Key skills

Real-time graphicsGLSL shadersGame architecturePerformance profilingWeb AudioDebuggingCI/CD

Tech stack

React 19TypeScriptThree.jsReact Three FiberZustandFramer MotionGLSLWeb Audio APIVite 7GitHub Actions
Solo build · 3D browser game · 2026

Dhakar Rasta

ঢাকার রাস্তা — one accident, a lifetime of tears. A 3D browser game about surviving Dhaka traffic, with road-safety awareness built into the gameplay. It is not a racing game: the goal is to drive as far as you can without a serious accident while the city does everything it can to stop you.

0External models, textures or audio files — everything is procedural
~150Draw calls for a full street of traffic, buildings and people
~170 kBGzipped JavaScript, plus the bundled Bangla font
~5,900Lines of TypeScript across 62 modules
The 23-second launch video, rendered frame by frame from the real game engine.

The idea

Anyone who has lived in Dhaka knows the road is less a system than a negotiation. I wanted a game that captures that feeling — funny and chaotic, with a serious message underneath: every hazard is something people really do, and every crash is avoidable if you pay attention. The design rule I held myself to was that every dangerous situation must be difficult but fair.

What it throws at you

Dhakar Rasta: a wrong-way rickshaw warning on a market street
Wrong-way rickshaws aim for you. Dodge, get paid.
Dhakar Rasta: approaching a foot-overbridge and zebra crossing
A foot-overbridge, a zebra crossing, and people who use neither.

How it stays fair

Built to be light

Bangla, all the way down

Dhakar Rasta: a crash brings a traffic officer offering to take a fine or make an arrangement
Crash? Pay the fine, or make an arrangement.

The launch video

A 23-second launch video made from the real game engine: each shot is scripted and rendered frame by frame, with Bangla kinetic typography, rickshaw-art colour wipes, and an original score in the D Bhairav scale (dhol, tabla, harmonium) with every sound effect tuned to the same key.

What's next

Key skills

Game architectureProcedural generationAI behaviourPerformanceWeb AudioLocalisation (Bangla)Automated testing

Tech stack

TypeScriptThree.jsViteWeb Audio APINoto Sans BengaliVercel
Solo build · Interactive 3D web app · 2026

Learn Salah

Don't just read how to pray. See it. Learn it. Practise it. Learn Salah teaches the Islamic prayer through a 3D figure instead of text alone: as you scroll through a lesson the figure moves into each position — takbir, bowing, prostration, sitting — while the camera, highlights, instructions, Arabic text, transliteration and meaning stay in sync beside it.

03D model files — the figure is generated entirely in code
5Daily prayers, taught rak'ah by rak'ah
4Sunni schools of law compared side by side
3Languages: English, বাংলা and العربية, with full right-to-left layout

Status: the religious content is a draft awaiting scholar review, and audio recitations haven't been added yet. The site says so itself.

Learn Salah home screen: the standing figure beside the headline One movement at a time
The home screen: a figure in the mosque scene, a step-by-step preview card and four ways in — Learn, Practice, Recitations, Quick Reference.

The 3D engine

The learning experience

Learn Salah lesson step 10: Jalsa, sitting between the two prostrations
A lesson step: the figure sits in jalsa while the instructions, focus areas and recitation stay in sync.
Learn Salah recitation library with Al-Fatihah in Arabic, transliteration and translation
The recitation library — pick any dua or surah and the figure moves to the matching position.

Content and accuracy

Learn Salah quick reference for Fajr and Dhuhr, rak'ah by rak'ah
Quick reference: each prayer rak'ah by rak'ah, with aloud or silent recitation and sources.
Learn Salah sources page listing Qur'an and hadith references with a draft notice
Every statement cites a source, and the page says plainly that the content is a draft awaiting scholar review.

Accessibility and reach

Key skills

Inverse kinematicsProcedural 3DScroll-driven animationInternationalisation & RTLAccessibilityContent modelling

Tech stack

React 19TypeScriptViteThree.jsReact Three FiberDreiTailwind CSS 4MotionZustandVercelGitHub Pages
Solo build · Browser game · 2026

Lava Lift

Save them before it's too late. A volcano is erupting and the lava keeps rising. In Lava Lift you fly a rescue helicopter, pick up stranded survivors and carry them to a safe camp on a mountain top before the lava reaches them. It runs in the browser on phones and desktops.

0Image or audio files — all art, sound and music are generated in code
6Physics bodies per survivor, joined by constraints into a ragdoll
5Zones in one large level, from town to mountain camp
3Ways to fly: touch joystick and lift lever, mouse, or keyboard
Lava Lift title screen with a helicopter lifting survivors off a rooftop
The title screen doubles as a live scene: the helicopter, the chain and the burning town are all drawn in code.

The core idea: a physical human chain

Rescued survivors don't just disappear into the helicopter. They hang below it in a chain, each one holding the ankles of the person above. Every survivor is a six-part ragdoll joined by physics constraints, so the chain swings, stretches and reacts to every turn, stop and gust of wind. The more people you carry, the heavier and harder the helicopter is to fly — and if you fly too roughly, the chain snaps.

Close-up of two ragdoll survivors hanging from the helicopter, one holding the other
Each survivor holds the ankles of the one above, and the whole chain swings with the helicopter.
A chain of five survivors lowered into the mountain safe-zone camp with tents and an ambulance
The mountain camp: lower the chain gently and the survivors let go one by one.

What it throws at you

Lava Lift gameplay with the HUD: survivors saved, chain count, stress, lava level, fuel and hull
In flight: chain stress, lava level, fuel and hull all on screen, with a pointer to the safe zone.

How it's built

The helicopter carrying survivors low over a sea of rising lava
Fly low over the lava and the survivors at the bottom of the chain are the first to feel it.

Key skills

Physics simulationRagdolls & constraintsProcedural artProcedural audioGame feelPerformance tuning

Tech stack

JavaScriptHTML5 CanvasMatter.jsWeb Audio APIViteVercel
Personal challenge · C++ & Java · complete

60 Projects Challenge

Thirty programs in three escalating tiers, each written twice — once in C++ and once in Java — for sixty projects in all. The goal was to make programming fundamentals second nature by expressing the same idea in two languages with different rules.

60 / 60Projects finished
30Programs, each built in both languages
3Tiers: fundamentals, OOP, data structures
29.8×Fewer comparisons for merge sort vs bubble at N = 2000

Each pair below is one program in both languages; the numbers are its C++ and Java entries in the repo.

FundamentalsProjects 01–20

Input and output, conditions, loops, functions, files — the basics, written twice in two languages.

  1. 01 · 02
    CalculatorFour arithmetic operations, menu-driven, with a division-by-zero guard. The Java build uses printf formatting and Scanner input.
  2. 03 · 04
    Number Guessing GameGuess a random number from 1 to 100, with too-high / too-low feedback and an attempt counter.
  3. 05 · 06
    Temperature ConverterCelsius, Fahrenheit and Kelvin, converting in any direction.
  4. 07 · 08
    Unit ConverterLength, weight and volume across metric and imperial.
  5. 09 · 10
    Multiplication Table GeneratorFormatted tables for any number and range.
  6. 11 · 12
    String ReverserReverses any string, whole or word by word.
  7. 13 · 14
    Palindrome CheckerIgnores case, spaces and punctuation, so whole sentences work.
  8. 15 · 16
    File ReaderOpens a text file, prints it and counts lines and words — plus characters in the Java build.
  9. 17 · 18
    File WriterWrites multi-line text with overwrite, append and view modes.
  10. 19 · 20
    Grade CalculatorLetter grades, credit-weighted GPA and a pass/fail summary table.

Object-orientedProjects 21–40

Ten systems, each one built around inheritance, abstraction and polymorphism rather than just using them.

  1. 21 · 22
    Bank Account SystemAn abstract Account base; three account types set their own withdrawal rules, interest and fees.
  2. 23 · 24
    Library SystemFour item types with their own loan periods and fine rates; reference books refuse to be borrowed.
  3. 25 · 26
    Student Management SystemA three-level chain — Person → Student → Under/Postgraduate — each level with its own pass mark and unit cap.
  4. 27 · 28
    Employee Management SystemFour pay formulas; bonus, progressive tax and super written once in the base class.
  5. 29 · 30
    Vehicle Rental SystemA mixed fleet sharing one pricing pipeline, built on a rate only the subclass supplies.
  6. 31 · 32
    Hotel Reservation SystemFour room grades: suites include breakfast, family rooms waive the extra-guest fee.
  7. 33 · 34
    Inventory Management SystemFour categories with their own markup; perishables cap intake quantity.
  8. 35 · 36
    Course Registration SystemEnrolment refused on four grounds — full, missing prerequisite, timetable clash, credit limit. Java uses an interface with default methods.
  9. 37 · 38
    Hospital Management SystemA four-level hierarchy with a triage queue ordered by urgency — an overloaded operator< in C++, Comparable in Java.
  10. 39 · 40
    Expense TrackerIncome, expenses and savings transfers share a base class but differ on sign and budget impact.

Data structuresProjects 41–60

Ten structures and algorithms implemented from scratch, then measured against the language's own library version.

  1. 41 · 42
    Dynamic Arraystd::vector from scratch on a raw heap buffer — doubling growth, amortised O(1) append. The Java build does the same on an Object[], which is what ArrayList does underneath.
  2. 43 · 44
    Singly Linked ListRaw nodes and pointers; every cost in the table follows from having no way back.
  3. 45 · 46
    Doubly Linked ListThe singly list plus one pointer per node — which fixes its one weakness.
  4. 47 · 48
    StackBuilt twice, array-backed and node-backed, behind one interface for a direct comparison.
  5. 49 · 50
    QueueBuilt twice: a fixed-capacity circular buffer and unbounded linked nodes.
  6. 51 · 52
    Binary Searchlog₂(N) search, the midpoint overflow bug, and what happens on unsorted input. Java uses >>> for an overflow-safe midpoint.
  7. 53 · 54
    Bubble SortFour variants — naive, shrinking range, early exit, cocktail shaker — measured against each other, plus a stability demonstration in Java.
  8. 55 · 56
    Merge SortDivide and conquer with inversion counting: 29.8× fewer comparisons than bubble sort at N = 2000.
  9. 57 · 58
    Binary Search TreeAll three delete cases and four traversals, plus the degenerate case — height 100 down to 7 after rebalancing. Cross-checked against TreeMap.
  10. 59 · 60
    Min HeapAn array-backed complete tree; Floyd's O(N) build measured against N inserts, cross-checked against PriorityQueue.

What it built

Object-oriented designData structuresAlgorithm analysisComplexityFile I/OTwo-language fluency

Languages

C++Java