Your photo, five more ways

img.aryan 190 × 190

/* hover the photo, then read the styles */
.aryan {
  name: "Aryan Patel";
  role: "Full-Stack & DevOps";
  leads: "GFG RKGIT, 300+ members";
  stack: React, Workers, Postgres;
  base: Ghaziabad;
  status: shipping;
}

Your photo is treated like a page element. Hover it and the browser's box-model colours appear (blue content, green padding, orange margin) with a tooltip, and the styles beside it read as a CSS rule about you. Developers will smile; recruiters get your role and stack in one glance. On a phone, tap the photo.

ARYAN-PATEL · REV 4.7

Datasheet

Package	B.Tech CSE, RKGIT, final year
Core	React, JavaScript, Cloudflare Workers
I/O	FastAPI, PostgreSQL, Supabase, Firebase
Ships with	Docker, GitHub Actions CI/CD
Max load	300+ members on one platform
Rated	1st Techtrix '25 · 2nd Binary Hacks 3.0 · 3rd SRIJAN

You as a component: your photo is the die inside the chip, with pins and a part number, and the datasheet next to it lists what you can do and your ratings. Hover or focus the chip and the pins light up in the accent colour. It is a different idea from a badge, and it answers "what do you work with" at the same time.

The photo is pixelated at first, then gets sharper as install, build, test and deploy tick off one by one, ending in "deployed". It starts when it scrolls into view and has a "run again" button. It shows the exact skill you want hired for (shipping), and the motion makes people stop. With "reduce motion" on, it just shows the finished photo.

Aryan Patel,
still shipping.

The photo starts as a newspaper-style dot print and a round lens shows the real colours wherever your mouse or finger goes. The lens drifts on its own until someone touches it. It feels like an inspector's loupe on a drawing.