Well-rounded full-stack dev · Single file showcase

Hi, I’m Your Name — I build fast, delightful web experiences.

This entire portfolio lives in one HTML file. It demonstrates semantic HTML, responsive CSS (Grid & Flexbox), a Web Component, a canvas animation, theme toggling with localStorage, and a bit of progressive enhancement.

HTML5 · CSS3 · JS / TS-ready Single Page · No build step

View projects ↓ Get in touch ✉︎

Runtime overview client:browser

Web Platform HTML · CSS · JS APIs

UI Flexbox · Grid · Animations

Enhancements Canvas · Web Component

render(): frame loop

Canvas background is rendered in real time using requestAnimationFrame.

Tech Stack & Web Components

Custom elements (<tech-badge>) rendered with Shadow DOM.

Selected Projects

Filter client vs full-stack vs experimental projects.

Instant UI Playground

Client React · CSS Grid

A responsive UI system with live theme editing and layout presets. Built to showcase component composition, accessibility, and design tokens.

Focus: UX, accessibility, design systems View demo

Realtime Sprint Board

Full-stack Next.js · WebSockets · Postgres

Kanban-style board with optimistic updates, server-side rendering and live multi-user collaboration backed by WebSockets.

Focus: data modeling, DX, realtime Case study

Generative Canvas Lab

Experimental Canvas · Math · Animations

A collection of generative art sketches and physics toys using the Canvas API, requestAnimationFrame, and simple vector math.

Focus: drawing APIs, performance Explore sketches

Content Ops Dashboard

Full-stack React · REST · Auth

Internal dashboard for scheduling content, previewing drafts, and tracking metrics across multiple channels. Includes role-based access and audit trails.

Focus: product thinking, DX, auth Read more

Experience & Approach

Timeline + small code sample, inline.

2023 — Present · Frontend / Full-stack

Product-minded engineer

Building modern web apps with React, TypeScript, and Node, focusing on performance, DX, and user-centric design.

2021 — 2023 · Web foundations

From fundamentals to systems

Deep dive into the DOM, CSS layout, browser APIs, and accessibility. Gradually layered in frameworks and tooling.

Ongoing

Always learning

Experimenting with new specs (Web Components, Web Animations API, etc.) and keeping an eye on ergonomics and maintainability.

I like small, composable units of behavior with clear data flow. Here’s a tiny pattern I reach for often:

const createStore = (initial) => {
  let state = { ...initial };
  const listeners = new Set();

  return {
    get: () => state,
    set: (patch) => {
      state = { ...state, ...patch };
      listeners.forEach((fn) => fn(state));
    },
    subscribe: (fn) => {
      listeners.add(fn);
      return () => listeners.delete(fn);
    }
  };
};

const ui = createStore({ theme: "dark", filter: "all" });

Contact

HTML5 forms, validation, and minimal JS for UX.

This form runs entirely on the client and uses the Constraint Validation API for basic checks. In a production app I’d wire it to a serverless function or backend, with proper spam protection and rate limiting.

For now, submitting will just log the payload to console.log and show a toast.

HTML5 validation Progressive enhancement LocalStorage theme Canvas animation Custom element