hey, I'm

Yasir Raza

Software Engineer · Karachi

I build AI-integrated products, break a few things, fix them, and ship. Still figuring it out — just a bit faster than yesterday. Let's build something together.

Full-StackAI-Integrated UIDesign SystemsPrompt Engineering
40%faster feature UI (atomic design system)
0component changes to fully rebrand a product
10+responsive pages shipped for US clients
∞LLM tokens wrangled, allegedly
Next.js App RouterAI-Integrated UIPrompt EngineeringTypeScriptTailwindCSSDesign SystemsGenerative UIMonoreposLLM APIsStreamingThree.js / R3FComputer VisionData Viz

Receipts — experience

Places where I've built stuff.

AI Software Engineer — Codet.ai

Aug 2025 — Now

Full-time. Building an AI website builder that writes production Next.js so you don't have to.

  • Shipped an AI-assisted visual website builder (think Shopify/Framer, but it writes the Next.js for you) — natural-language prompts and DSL imports in, production-ready sites out.
  • Wired LLM API calls straight into the generation pipeline and built live prompt-engineering systems that power real user-facing output at scale.
  • Built real-time AI UIs — streaming output, structured JSON parsing, graceful error states — plus an Apple-keynote-style typography animation engine for wait screens because vibes matter.
  • Designed a 3-tier atomic design system (Atoms/Molecules/Organisms) in App Router + TS, cutting new feature UI time by 40%.
  • Engineered a runtime theme-injection architecture: full UI/UX rebrand with zero component-level changes — theming went from days to seconds.
  • Owned monorepo/multirepo boundaries, Bitbucket CI/CD, OAuth 2.0 onboarding, and ESLint/Prettier/Husky so nobody ships slop.
Next.jsLLM APIsPrompt EngineeringTypeScriptDesign Systems

Front-End Developer — BlockApex

Aug 2024 — Sep 2024

Internship. Blockchain clients, tight deadlines, no crying.

  • Delivered 10+ responsive websites with TailwindCSS for US-based blockchain clients.
  • Shipped roughly a week early with reusable, well-documented code.
ReactTailwindCSSResponsive

Front-End Developer — CARE Organisation

Jun 2023

Freelance. Community work, good-deed unlocked.

  • Teamed up with Habib University & DOW students on a fully responsive community website (Next.js + TailwindCSS).
  • Improved donor trust and online engagement.
Next.jsTailwindCSSSocial impact
01

Selected builds — on the clock

What I've built, in plain English.

Mostly pieces of an AI website builder with real users on it. Here is what each one actually does — and the part that was genuinely hard — without the jargon.

01 · Flagship build

AI Website Builder

You describe the website you want. It writes the real code.

Not a template picker. It produces an actual Next.js codebase you could open in an editor and keep building on. The catch is that an AI's answer is really just a confident guess, so everything after it exists to check that guess before a user ever sees the result.

AI is the productNext.jsLLM APIsCodegenStreaming2025
02 · Code generation

Design Spec → Working App

Hand it a structured description of a site and it builds the app.

It turns a plain description — pages, sections, content — into properly typed code. The rule I held it to: generated code has to pass exactly the same checks as code a human wrote. If it doesn't compile, it never ships. Those guardrails turned out to be the whole product.

code that compilesTypeScriptMonoreposCI/CD2025
03 · Real-time UI

Streaming AI Answers

Showing an answer as it types, without ever showing something broken.

An AI sends its reply a few characters at a time, so for most of that time the data is half-finished and unreadable. This reads the half-finished version, shows only the parts that are definitely complete, and waits on the rest — so the page fills in smoothly instead of flashing errors or going blank when a connection drops.

never a broken stateReact 19StreamingTypeScript2025
04 · Motion / UI

Typography Engine

Waiting screens that read like a keynote instead of spinning at you.

While the AI is thinking, you get big, well-timed words telling you what's happening instead of a loading spinner. It sounds purely cosmetic — but it measurably kept people on a screen they used to abandon.

engagement upMotionReactTypeScript2025
02

Labs — built off the clock

Three things I built because I was bored.

No client, no deadline, no tickets. A city, a galaxy, and a piece of cloth — all three are real engines, so the cards below run their actual maths in your browser rather than showing you a screenshot.

Every figure on these cards is computed live and labelled with the tier it earns — MEASURED, ESTIMATED, MODEL or LIVE. Nothing is a stock photo and nothing is hard-coded.

01 · Living interface2026

kesakarachi

kesakarachi.vercel.app

What is Karachi doing right now?

One screen for my city: live weather and modelled air quality drawn over the map, a deterministic city state computed from them, and a simulation engine for asking what if. The whole UI re-tints with Karachi's light, dawn to night, and the basemap repaints with it.

  • Built on one rule — never pretend. Every number is labelled LIVE/MODEL, STATIC REFERENCE or SIMULATION, because there are no free live feeds for Karachi's traffic, floods or power.
  • Traffic simulation is painted onto the real road geometry from the vector tiles, per corridor. Every upstream call has a timeout, a cache window and a fallback — kill the weather route and everything else keeps working.
No API keys, no backendNext.jsMapLibreRoute HandlersOpen-Meteo
02 · 3D / recommender2026

VIRTUALKHEL

virtualkhel.vercel.app

The universe of games, connected.

231 games rendered as a neon night city you can fly through — each game a lit tower in its genre district, linked by cables. Pick three favourites and the Taste Reactor ranks every other game, and tells you why.

  • The similarity engine is deterministic and explainable — weighted Jaccard over curated feature sets. No LLM, no database, no paid service, and every recommendation carries its strongest shared attributes.
  • All nodes, stars and nebulae are batched point sprites in 3 draw calls; the loop mutates typed arrays so React never re-renders per frame. No WebGL still gets a full keyboard-operable index.
231 games · 0 LLMsThree.jsReact Three FiberGSAPTypeScript
03 · Computer vision2026

kapra

kapra · vercel deploy

A garment forensics instrument.

Photograph a piece of cloth and kapra reconstructs its genome — weave, colour, texture, weight, finish — then tells you exactly how far each reading can be trusted. The two businesses I run are clothing brands, so this one was inevitable.

  • Not an AI wrapper: zero model weights. A 2D Fourier transform measures the weave, k-means in CIELAB measures the dye, Local Binary Patterns measure the texture. It runs offline on NumPy and OpenCV.
  • Every claim wears a tier — MEASURED, ESTIMATED or INFERRED — and the schema refuses to serialise one without its evidence, so an unsupported claim physically cannot reach the page.
Zero model weightsPythonOpenCVFastAPINext.jsTurborepo

The toolkit — skills & schooling

Stack & stuff I usually work on.

01 · Languages

TypeScriptJavaScriptPythonC / C++

02 · Frontend

Next.js (App Router)ReactTailwindCSSBootstrapHTML / CSS

03 · Backend

NodeExpressFlaskFastAPI

04 · Graphics & CV

Three.jsReact Three FiberMapLibreOpenCV / NumPy

05 · Databases

PostgreSQLMySQLOracleMongoDB

06 · AI

LLM APIsPrompt EngineeringGenerative UIML

07 · Tooling

MonoreposBitbucket CI/CDESLint / Prettier / HuskyOAuth 2.0

Education

FAST NUCES

BS Computer Science

2021 — 2025

The City School, PAF Chapter

A Levels

2019 — 2021

The City School, PAF Chapter

O Levels

2016 — 2019

The vibe — about

YRKarachi, Pakistan

I'm a software engineer who likes building things where the AI is the actual product — and gets a little sad when it's just a chatbot in the corner.

These days that means turning prompts into real Next.js apps — streaming UIs, design systems, the occasional theming rabbit hole. I care about the latency curve and the kerning in roughly equal amounts, which is probably a problem. Mostly I just like shipping things that work.

App Router or bustTypeScript, obviouslykerning enjoyerships fast, sleeps laterAI ≠ a chatbot in the corner

“Controlled chaos — looks like I'm winging it, every offset is on purpose.”

Off the clock — the fun stuff

Everything between deploys.

When I'm not shipping: a camera and the road up north. Hunza, the Karakoram, old Karachi. Not on my résumé, but very much the point.

Where the rivers meet
01 / 06

Where the rivers meet

Hunza Valley, GB

Impossible blue
02 / 06

Impossible blue

Attabad Lake, Hunza

The killer mountain, being gentle
03 / 06

The killer mountain, being gentle

Fairy Meadows

Cathedral of stone
04 / 06

Cathedral of stone

Passu Cones, Gojal

The highway to the sky
05 / 06

The highway to the sky

Karakoram

Three centuries, still standing
06 / 06

Three centuries, still standing

Badshahi Mosque, Lahore

04 — Contact

Let's build
something loud.

Got a project, a weird problem, or a strong opinion about the AI slop? Slide in — I reply faster than most CI pipelines.