about me#

I'm anjani. I work on small web apps, collect notes and spend a lot of time getting the details right.

I care about how a page feels to use. The type, the spacing, whether a menu behaves properly on a phone. An effect can look good and still get in the way. I want the useful parts and the visual parts to work together.

what I'm working on#

what I notice#

how I work#

graph TD
  A[Something I need] --> B[Try a version]
  B --> C[Use it and look closely]
  C --> D[Change what feels wrong]
  D --> B

a little room to experiment#

a visual notebook#

Sample illustration from the site's component library. Click to enlarge.

Sample A: cool colours.

Sample B: warm colours.

Sample Markdown image, also with zoom.

a small idea, in code#

This is an illustrative snippet for the copy button and syntax highlighting. It isn't code from one of my projects.

function Note({ children }: { children: React.ReactNode }) {
  return <aside className="note">{children}</aside>;
}

.note {
  padding: 1rem;
  border: 1px solid currentColor;
  line-height: 1.7;
}

<aside class="note">Keep the useful part visible.</aside>

mdxjs.comMDXThe format behind these notes: Markdown with room for components.

the same idea, as a diagram#

The first diagram uses a Markdown fence; this one uses the custom diagram component directly.

graph LR; A[An idea] --> B[A sketch]; B --> C[A clearer version]

space for an explanation#

Sample maths formatting: if a point $P$ has barycentric coordinates $\alpha,\beta,\gamma$ in a non-degenerate triangle $ABC$, then

All three weights are positive exactly when $P$ is strictly inside the triangle. A zero weight puts it on an edge or vertex when the other weights are non-negative.¹

moving pictures#

Open the sample on YouTube

sound, two ways#

The Spotify selection is a neutral player placeholder, not my listening history or a favourite. The third-party player loads only when selected.

a post-shaped space#

Sample X embed from the existing component showcase. It is not my account or a post by me. The live post loads only when selected.

a tiny interaction#

A sample interactive component. This number isn't a personal statistic.