A complete meal ordering platform built with React (UI), Redux (global state), and Firebase Firestore (data). Dynamic menu from Firestore, cart with optimistic updates, and a checkout flow with batched writes + retries. Redux slices isolate cart/menu logic; memoized selectors keep renders snappy. CSS Modules + SASS keep styles scoped and predictable. Lighthouse stays in the 90s thanks to code‑splitting and image optimization. If I rewrote it in Next.js now, I’d keep Redux for cart ergonomics and use Server Actions for checkout.

Yum Hub is a static landing page that tells the product story clearly: how it works, meal selections, testimonials, and pricing tiers. Built with semantic HTML5 and Sass/SCSS, the page uses a small set of layout primitives (grid/flex) and spacing/color tokens to stay consistent. JavaScript was minimal and deferred to prioritize FCP. Takeaway: simple structure, disciplined styling, and lightweight assets beat cleverness when the goal is clarity and speed.

My portfolio started as a junior build — semantic HTML, SASS, vanilla JavaScript, AOS for motion, and Swiper for carousels — and I’ve refactored it as my standards evolved. I trimmed animation durations, reduced image payloads, and tightened CSS architecture (BEM‑ish with tokens). Netlify Forms handles contact without a backend. If I migrated it now, I’d use Next.js App Router + MDX and centralize design tokens. Main lesson: keep the surface delightful, but the internals boring and reliable.

Instead of ‘AI will change everything’, I looked at what actually changed in day‑to‑day behavior. • People expect natural language everywhere: search, filters, even support. I saw this in onboarding analytics — when we added a plain‑English product search, zero‑result queries dropped noticeably. • Tolerance for loading dropped: micro‑lags that were fine pre‑2022 now feel broken. I treat 200–400ms feedback as the new ‘polite’ range. • Trust signals matter more: inline explanations (‘why this result?’) and visible privacy choices keep users from bouncing. Lesson: HCI today is about expectation management — fast, explainable, and forgiving products win.

I rebuilt a SaaS dashboard prototype in Next.js 14 and compared it with a previous Pages Router setup. What changed: • Server Components reduced client JS a lot (billing history table: ~90kb → ~20kb). • Route Handlers replaced my ad‑hoc API folder — fewer moving parts, easier auth layering. • Server Actions simplified form posts: no juggling mutations for simple CRUD. Best fit: multi‑tenant dashboards where performance and data flow predictability matter. Caution: highly interactive UIs still need careful hydration strategy. Net: Next.js lets SaaS teams spend more time on product logic and less on wiring.

I upgraded a medium‑sized React codebase to TypeScript 5 and kept track of what mattered beyond the release notes. • Const type parameters: removed a bunch of overloads in utilities — generics finally read like plain English. • satisfies: validate config objects at compile time without losing literal types — perfect for feature flags and API client maps. • Faster project builds: not ‘50% faster’ everywhere, but cold builds and project references felt snappier on CI. If you’re on TS 4.x and using heavy generics, TS5 pays for itself — mostly by letting you delete clever code.

I treat GPT‑4o like a fast pair programmer for the boring bits: test scaffolds, docstrings, fixture data, and quick refactor suggestions. Guardrails I use: no secrets in prompts, never skip type checks, and no merges without tests. Architecture, naming, and UX stay human‑owned because that’s where context and taste matter. Result: fewer low‑value minutes spent, more time on the shape and quality of the product.

This was a pure front‑end exercise: build the classic PIG dice game with semantic HTML, SASS, and vanilla JavaScript. I focused on three things: (1) readable state transitions (idle → rolling → locked), (2) tight DOM updates to avoid layout thrash, and (3) tiny interactions that make it feel ‘alive’ (roll animation, subtle shake on busts). The game uses a simple state machine and ARIA live regions so screen readers announce score changes. Why it matters: small projects are where you practice restraint. Clear state + clear DOM updates = predictable UI, which scales to larger apps.