Human Center · HCSREL

We learn to code
by building together.

A small team, one shared repo, and real products. No classrooms, no theory dumps — just workshops where every pull request teaches you something.

Meet the team See the canvas
Live · team-site-bje.pages.dev
Particle network: teammates as glowing nodes, collaboration as the lines between them.

HTML Canvas · js/canvas-network.js · move your pointer

About us

Code is the language we learn in

Human Center is a hands-on workshop crew. Every project we ship — dashboards, bots, websites — is a shared exercise in building software together: one of us opens a PR, the rest review it, and everyone walks away knowing more than they did an hour ago.

  • Weekly collaborative build sessions
  • Real products on the web, not toy projects
  • Everyone reviews, everyone ships

In the office

Building together, at the desk

Lerwen Liu and Teeramate Nuanplub — the two portraits already in this repo — working a sustainability dashboard and a whiteboard session. Add your photo in images/ and we can put you in the next take.

Lerwen Liu and Teeramate Nuanplub reviewing a green dashboard on a laptop
Desk — reviewing the dashboard
Lerwen Liu at a glass whiteboard with Teeramate Nuanplub holding a laptop
Board — mapping the next build

How this canvas works

A bitmap you redraw every frame

The About panel is not a video or an image. It is an HTML <canvas> — a 2D drawing surface. The script paints dots and lines 60 times a second.

  1. 01

    Get a 2D context

    canvas.getContext("2d") is the paint API. CSS sizes the box; we set canvas.width / height to CSS size × devicePixelRatio so it stays sharp on retina screens.

  2. 02

    Particles are just data

    Each node is {x, y, vx, vy}. Every frame we add velocity, bounce off the edges, and ease toward the pointer (magnetism). Then we draw a radial-gradient glow and a solid core.

  3. 03

    Link what is close

    If two particles are nearer than a radius, we stroke a line. Opacity fades with distance so the graph reads as a network, not a scribble. Pause the loop when the canvas is off-screen.

The team

People building together

Add a card in js/team-data.js, open a pull request, and a teammate merges it to main. That ships on team-site-bje.pages.dev. How-to: CONTRIBUTING.md.

Contact

Want to join the workshop?

We're always glad for another pair of hands and a curious mind.