Hand-coded neocities in under 100 KB

The site you are reading weighs less than 100 KB total. One HTML file. One CSS file. One JS file. Two Google fonts. No build step. No npm install. No webpack, no vite, no react, no tailwind. I wrote the CSS by hand and the JS is forty lines.

Here's how I got here and why I think you should try it too.

Why no framework

Every framework I have used in the last ten years has at some point asked me to update a dependency, then asked me again, and then asked me to fix a security advisory, and then asked me to migrate because the new version dropped a feature I used.

I have a personal site that I want to keep working in 2031. The only reliable way to do that is to write it in the language the browser already understands.

What I used

• HTML5 — semantic tags, no div soup
• CSS3 — custom properties, grid, flexbox, no preprocessor
• Vanilla JS — a single file, no transpiler, no modules
• Google Fonts: Press Start 2P and VT323 (loaded from Google's CDN with font-display: swap)

Layout

The whole layout is a 2-column CSS grid: a sidebar on the left, a main content area on the right. On mobile, it collapses to a single column. No media queries beyond one breakpoint.

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
}

The CRT effect

The "vintage monitor" look is three things:

1. A repeating-linear-gradient overlay for the scanlines
2. A radial-gradient vignette to darken the corners
3. A box-shadow with cyan to fake the chromatic aberration

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}

The interactivity

All the "wow" effects on this site — typing in the terminal prompt, mood rotation, easter egg, skill bar animation — are under 50 lines of JS. The most complex piece is a CSS keyframe animation triggered by adding a class.

Tradeoffs

I am not going to win any awards. The site doesn't have a CMS. To write a new blog post I have to copy a template, edit the HTML, and re-upload. That is a feature, not a bug. It keeps me from writing fourteen half-finished posts.

The other tradeoff: I can't easily re-skin the whole site in one go. Each section has its own CSS. This is fine for a personal site. It would be a disaster at scale.

How to start

1. Make a neocities.org account. Free.
2. Open the browser's DevTools. Inspect any site you like the look of.
3. Steal the color palette. Steal the typography. Steal the layout.
4. Write three pages. index.html, about.html, blog.html.
5. Stop.

— Hendra, 2026-06-12