PageSourceSearch

https://benlirio.com/

html benlirio.com collected 2026-10-09 22:07:08 UTC 33,407 bytes, 174 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>Ben Lirio</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
7  <meta name="description" content="A shelf for the things I make. Small interactive toys, mostly.">
8  <meta property="og:title" content="Ben Lirio">
9  <meta property="og:description" content="A shelf for the things I make. Small interactive toys, mostly.">
10  <meta property="og:type" content="website">
11  <meta property="og:url" content="https://benlirio.com/">
12  <meta property="og:image" content="https://benlirio.com/icon-512.png">
13  <link rel="canonical" href="https://benlirio.com/">
14  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
15  <link rel="icon" href="/icon-512.png" type="image/png" sizes="512x512">
16  <link rel="apple-touch-icon" href="/icon-512.png">
17  <link rel="alternate" type="application/atom+xml" title="Ben Lirio – writing" href="/feed.xml">
18  <link rel="stylesheet" href="/style.css">
19  
19<script>addEventListener('DOMContentLoaded',function(){for(var a of document.querySelectorAll('a[data-e]')){var e=Array.from(a.dataset.e).reverse().join('');a.href='mailto:'+e;var s=a.querySelector('.rev');if(s){s.textContent=e;s.classList.remove('rev');}}});</script>
19
20</head>
21<body class="phone-body">
22<div class="stage">
23<div class="phone" id="phone" data-color="space-gray">
24  <button class="side-btn btn-sleep" id="sleepbtn" type="button" aria-label="Sleep/Wake"></button>
25  <button class="side-btn btn-vol btn-vol-up" type="button" data-volume="1" aria-label="Volume up"></button>
26  <button class="side-btn btn-vol btn-vol-down" type="button" data-volume="-1" aria-label="Volume down"></button>
27  <div class="bezel-top"><span class="camera"></span></div>
28  <div class="screen" id="screen">
29    <div class="statusbar" aria-hidden="true">
30      <span class="signal"><span>iPod</span><i class="wifi"></i></span>
31      <span class="clock" data-clock="status">9:41 AM</span>
32      <span class="battery"><span></span></span>
33    </div>
34    <div class="volume-hud" id="volume-hud" aria-hidden="true"><span class="volume-bars" id="volume-bars"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
35    <div class="blank" id="blank" hidden></div>
36
37    <div class="home" id="home">
38      <div class="pages" id="pages" tabindex="0" aria-label="Home screen">
39        <section class="page"><h2 class="page-title">With AI</h2><ul class="grid"><li><a class="app-icon" href="https://benlirio.com/space-ship-client/" data-demo="AI Spaceship Generator" data-slug="ai-spaceship-generator" data-src="https://benlirio.com/space-ship-client/"><span class="icon icon-home"><img src="/icons/space-ship-generator.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">AI Spaceship Generator</span></a></li><li><a class="app-icon" href="https://benlirio.com/the-one-prompt/" data-demo="AI Conway's Game of Life" data-slug="ai-conways-game-of-life" data-src="https://benlirio.com/the-one-prompt/"><span class="icon icon-home"><img src="/icons/ai-conways-game-of-life.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">AI Conway's Game of Life</span></a></li><li><a class="app-icon" href="https://word-guess.com" data-demo="Word Guess" data-slug="word-guess" data-src="https://word-guess.com"><span class="icon icon-home"><img src="/icons/word-guess.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Word Guess</span></a></li><li><a class="app-icon" href="https://word-battle.com" data-demo="Word Battle" data-slug="word-battle" data-src="https://word-battle.com"><span class="icon icon-home"><img src="/icons/word-battle.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Word Battle</span></a></li></ul></section>
40        <section class="page"><h2 class="page-title">By hand</h2><ul class="grid"><li><a class="app-icon" href="/gpt-in-education/" data-demo="GPT in Education" data-slug="gpt-in-education" data-src="/gpt-in-education/"><span class="icon icon-home"><img src="/icons/gpt-in-education.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">GPT in Education</span></a></li><li><a class="app-icon" href="/jos-stam-real-time-fluid-dynamics-for-games/" data-demo="Fluid Simulation" data-slug="fluid-simulation" data-src="/jos-stam-real-time-fluid-dynamics-for-games/"><span class="icon icon-home"><img src="/icons/jos-stam-real-time-fluid-dynamics-for-games.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Fluid Simulation</span></a></li><li><a class="app-icon" href="/conways-game-of-life-3d-v1/" data-demo="Conway's Game of Life 3D" data-slug="conways-game-of-life-3d" data-src="/conways-game-of-life-3d-v1/"><span class="icon icon-home"><img src="/icons/conways-game-of-life-3d-v1.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Conway's Game of Life 3D</span></a></li><li><a class="app-icon" href="/conways-game-of-life/" data-demo="Conway's Game of Life" data-slug="conways-game-of-life" data-src="/conways-game-of-life/"><span class="icon icon-home"><img src="/icons/conways-game-of-life.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Conway's Game of Life</span></a></li><li><a class="app-icon" href="/advent-of-code-day-18-boiling-boulders/" data-demo="Boiling Boulders" data-slug="boiling-boulders" data-src="/advent-of-code-day-18-boiling-boulders/"><span class="icon icon-home"><img src="/icons/advent-of-code-day-18-boiling-boulders.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Boiling Boulders</span></a></li><li><a class="app-icon" href="/bloch-sphere/" data-demo="Bloch Sphere" data-slug="bloch-sphere" data-src="/bloch-sphere/"><span class="icon icon-home"><img src="/icons/bloch-sphere.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Bloch Sphere</span></a></li><li><a class="app-icon" href="/laplacian-graph-drawing/" data-demo="Laplacian Graph Drawing" data-slug="laplacian-graph-drawing" data-src="/laplacian-graph-drawing/"><span class="icon icon-home"><img src="/icons/laplacian-graph-drawing.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Laplacian Graph Drawing</span></a></li><li><a class="app-icon" href="/regolith-reservoir/" data-demo="Regolith Reservoir" data-slug="regolith-reservoir" data-src="/regolith-reservoir/"><span class="icon icon-home"><img src="/icons/regolith-reservoir.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Regolith Reservoir</span></a></li><li><a class="app-icon" href="/convex-hull/" data-demo="Convex Hull" data-slug="convex-hull" data-src="/convex-hull/"><span class="icon icon-home"><img src="/icons/convex-hull.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Convex Hull</span></a></li><li><a class="app-icon" href="/batcher-odd-even-merge-sort/" data-demo="Batcher Odd-Even Merge Sort" data-slug="batcher-odd-even-merge-sort" data-src="/batcher-odd-even-merge-sort/"><span class="icon icon-home"><img src="/icons/batcher-odd-even-merge-sort.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Batcher Odd-Even Merge Sort</span></a></li><li><a class="app-icon" href="/sort-8/" data-demo="Sort 8" data-slug="sort-8" data-src="/sort-8/"><span class="icon icon-home"><img src="/icons/sort-8.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Sort 8</span></a></li><li><a class="app-icon" href="/permutations-of-cube/" data-demo="Permutations of Cube" data-slug="permutations-of-cube" data-src="/permutations-of-cube/"><span class="icon icon-home"><img src="/icons/permutations-of-cube.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Permutations of Cube</span></a></li><li><a class="app-icon" href="https://youtu.be/5fEtv2SdH8E" data-demo="Leveled Homomorphic Encryption" data-slug="leveled-homomorphic-encryption" data-src="https://www.youtube.com/embed/5fEtv2SdH8E"><span class="icon icon-home"><img src="/icons/leveled-homomorphic-encryption.png" alt="" loading="lazy" width="512" height="512"></span><span class="app-label">Leveled Homomorphic Encryption</span></a></li></ul></section>
41      </div>
42      <div class="dots" id="dots" aria-hidden="true"><span class="dot on"></span><span class="dot"></span></div>
43      <div class="dock"><ul class="grid"><li><a class="app-icon" href="#about" data-app="about" title="About" aria-label="About"><span class="icon icon-home icon-sys icon-about"></span><span class="app-label">About</span></a></li><li><a class="app-icon" href="#projects" data-app="projects" title="Projects" aria-label="Projects"><span class="icon icon-home icon-sys icon-projects"></span><span class="app-label">Projects</span></a></li><li><a class="app-icon" href="#writing" data-app="writing" title="Writing" aria-label="Writing"><span class="icon icon-home icon-sys icon-writing"></span><span class="app-label">Writing</span></a></li><li><a class="app-icon" href="#contact" data-e="moc.liamg@oiriljneb" title="Mail" aria-label="Mail"><span class="icon icon-home icon-sys icon-mail"></span><span class="app-label">Mail</span></a></li></ul></div>
44    </div>
45
46    <section class="app app-about" id="app-about" data-app="about" data-bar="light" aria-hidden="true" hidden>
47      <header class="navbar ">
48  <div class="navbar-inner">
49    <span class="nav-spacer"></span>
50    <h1 class="nav-title">About</h1>
51    <span class="nav-spacer"></span>
52  </div>
53</header>
54      <div class="scroll">
55        <div class="intro"><p>I like making things, and this is where I keep them. Most of them are small interactive toys: a sorting network, a fluid sim, a game of life or two. Some work. Some barely do. They are all here anyway. If any of it is interesting to you, email me. I would genuinely like to hear about it.</p></div>
56        <ul class="list">
57          <li class="row row-plain"><a class="row-link" href="#contact" data-e="moc.liamg@oiriljneb"><span class="rev">moc.liamg@oiriljneb</span></a></li>
58          <li class="row row-plain"><a class="row-link" href="https://github.com/BenLirio">GitHub</a></li>
59          <li class="row row-plain"><a class="row-link" href="/feed.xml">RSS feed</a></li>
60        </ul>
61      </div>
62    </section>
63
64    <section class="app app-projects" id="app-projects" data-app="projects" data-bar="light" aria-hidden="true" hidden>
65      <header class="navbar ">
66  <div class="navbar-inner">
67    <span class="nav-spacer"></span>
68    <h1 class="nav-title">Projects</h1>
69    <span class="nav-spacer"></span>
70  </div>
71</header>
72      <div class="scroll">
73
74      <div class="era era-flat">
75        <h2 class="list-header">With AI</h2>
76        <ul class="list">
77<li class="row"><span class="icon icon-small"><img src="/icon-512.png" alt="" loading="lazy" width="512" height="512"></span><span class="cell-text"><span class="cell-title">This website</span><span class="cell-sub"><span class="date">Fall 2026</span><span class="sep"> · </span><a href="https://github.com/BenLirio/benlirio.github.io">source</a><br><span class="blurb">The page you are looking at. iOS 9 on purpose.</span></span></span><span class="cell-detail">ongoing</span></li>
78<li class="row"><a class="icon-link" href="https://benlirio.com/space-ship-client/" data-demo="AI Spaceship Generator" data-slug="ai-spaceship-generator" data-src="https://benlirio.com/space-ship-client/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/space-ship-generator.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">AI Spaceship Generator</span><span class="cell-sub"><span class="date">Fall 2025</span><span class="sep"> · </span><a href="https://benlirio.com/space-ship-client/" data-demo="AI Spaceship Generator" data-slug="ai-spaceship-generator" data-src="https://benlirio.com/space-ship-client/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/space-ship-generator">source</a></span></span><span class="cell-detail">mostly works</span></li>
79<li class="row"><a class="icon-link" href="https://benlirio.com/the-one-prompt/" data-demo="AI Conway's Game of Life" data-slug="ai-conways-game-of-life" data-src="https://benlirio.com/the-one-prompt/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/ai-conways-game-of-life.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">AI Conway's Game of Life</span><span class="cell-sub"><span class="date">Summer 2025</span><span class="sep"> · </span><a href="https://benlirio.com/the-one-prompt/" data-demo="AI Conway's Game of Life" data-slug="ai-conways-game-of-life" data-src="https://benlirio.com/the-one-prompt/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/the-one-prompt">source</a></span></span><span class="cell-detail">mostly works</span></li>
80<li class="row"><a class="icon-link" href="https://word-guess.com" data-demo="Word Guess" data-slug="word-guess" data-src="https://word-guess.com" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/word-guess.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Word Guess</span><span class="cell-sub"><span class="date">Spring 2025</span><span class="sep"> · </span><a href="https://word-guess.com" data-demo="Word Guess" data-slug="word-guess" data-src="https://word-guess.com">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/word-guess-server">server</a><span class="sep"> · </span><a href="https://github.com/BenLirio/word-guess-client">client</a></span></span><span class="cell-detail">works</span></li>
81<li class="row"><a class="icon-link" href="https://word-battle.com" data-demo="Word Battle" data-slug="word-battle" data-src="https://word-battle.com" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/word-battle.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Word Battle</span><span class="cell-sub"><span class="date">Winter 2025</span><span class="sep"> · </span><a href="https://word-battle.com" data-demo="Word Battle" data-slug="word-battle" data-src="https://word-battle.com">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/word-battle-server">server</a><span class="sep"> · </span><a href="https://github.com/BenLirio/word-battle">client</a></span></span><span class="cell-detail">works</span></li>
82        </ul>
83      </div>
84
85      <div class="era era-glossy retro">
86        <p class="era-note">Everything below this line was made before AI could make it for me. An AI would do most of these almost instantly now, so they are technically uninteresting at this point. They are still cool artifacts, and they took real effort, so they stay.</p>
87        <h2 class="group-header">By hand</h2>
88        <ul class="group">
89<li class="row"><a class="icon-link" href="/gpt-in-education/" data-demo="GPT in Education" data-slug="gpt-in-education" data-src="/gpt-in-education/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/gpt-in-education.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">GPT in Education</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="/gpt-in-education/" data-demo="GPT in Education" data-slug="gpt-in-education" data-src="/gpt-in-education/">read</a><span class="sep"> · </span><a href="https://github.com/BenLirio/gpt-in-education">source</a></span></span><span class="cell-detail">done</span></li>
90<li class="row"><a class="icon-link" href="/jos-stam-real-time-fluid-dynamics-for-games/" data-demo="Fluid Simulation" data-slug="fluid-simulation" data-src="/jos-stam-real-time-fluid-dynamics-for-games/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/jos-stam-real-time-fluid-dynamics-for-games.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Fluid Simulation</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="/jos-stam-real-time-fluid-dynamics-for-games/" data-demo="Fluid Simulation" data-slug="fluid-simulation" data-src="/jos-stam-real-time-fluid-dynamics-for-games/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/jos-stam-real-time-fluid-dynamics-for-games">source</a></span></span><span class="cell-detail">rough</span></li>
91<li class="row"><a class="icon-link" href="/conways-game-of-life-3d-v1/" data-demo="Conway's Game of Life 3D" data-slug="conways-game-of-life-3d" data-src="/conways-game-of-life-3d-v1/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/conways-game-of-life-3d-v1.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Conway's Game of Life 3D</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="/conways-game-of-life-3d-v1/" data-demo="Conway's Game of Life 3D" data-slug="conways-game-of-life-3d" data-src="/conways-game-of-life-3d-v1/">demo</a><span class="sep"> · </span><a href="https://github
91.com/BenLirio/conways-game-of-life-3d">source</a></span></span><span class="cell-detail">barely works</span></li>
92<li class="row"><a class="icon-link" href="/conways-game-of-life/" data-demo="Conway's Game of Life" data-slug="conways-game-of-life" data-src="/conways-game-of-life/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/conways-game-of-life.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Conway's Game of Life</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="/conways-game-of-life/" data-demo="Conway's Game of Life" data-slug="conways-game-of-life" data-src="/conways-game-of-life/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/conways-game-of-life">source</a></span></span><span class="cell-detail">mostly works</span></li>
93<li class="row"><a class="icon-link" href="/advent-of-code-day-18-boiling-boulders/" data-demo="Boiling Boulders" data-slug="boiling-boulders" data-src="/advent-of-code-day-18-boiling-boulders/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/advent-of-code-day-18-boiling-boulders.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Boiling Boulders</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="/advent-of-code-day-18-boiling-boulders/" data-demo="Boiling Boulders" data-slug="boiling-boulders" data-src="/advent-of-code-day-18-boiling-boulders/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/advent-of-code-day-18-boiling-boulders">source</a><br><span class="blurb">Advent of Code 2022, day 18.</span></span></span><span class="cell-detail">works</span></li>
94<li class="row"><a class="icon-link" href="/bloch-sphere/" data-demo="Bloch Sphere" data-slug="bloch-sphere" data-src="/bloch-sphere/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/bloch-sphere.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Bloch Sphere</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="/bloch-sphere/" data-demo="Bloch Sphere" data-slug="bloch-sphere" data-src="/bloch-sphere/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/bloch-sphere">source</a><br><span class="blurb">Plot a qubit state on the Bloch sphere.</span></span></span><span class="cell-detail">rough</span></li>
95<li class="row row-plain"><span class="icon icon-small icon-generic" style="--icon-color:#6e8cc9"><span>V</span></span><span class="cell-text"><span class="cell-title">Viz</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="https://github.com/BenLirio/viz">source</a><br><span class="blurb">Data to image or gif.</span></span></span><span class="cell-detail">rough</span></li>
96<li class="row"><a class="icon-link" href="/laplacian-graph-drawing/" data-demo="Laplacian Graph Drawing" data-slug="laplacian-graph-drawing" data-src="/laplacian-graph-drawing/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/laplacian-graph-drawing.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Laplacian Graph Drawing</span><span class="cell-sub"><span class="date">Spring 2023</span><span class="sep"> · </span><a href="/laplacian-graph-drawing/" data-demo="Laplacian Graph Drawing" data-slug="laplacian-graph-drawing" data-src="/laplacian-graph-drawing/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/laplacian-graph-drawing">source</a></span></span><span class="cell-detail">barely works</span></li>
97<li class="row"><a class="icon-link" href="/regolith-reservoir/" data-demo="Regolith Reservoir" data-slug="regolith-reservoir" data-src="/regolith-reservoir/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/regolith-reservoir.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Regolith Reservoir</span><span class="cell-sub"><span class="date">Fall 2022</span><span class="sep"> · </span><a href="/regolith-reservoir/" data-demo="Regolith Reservoir" data-slug="regolith-reservoir" data-src="/regolith-reservoir/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/aoc-d14-2022">source</a><br><span class="blurb">Advent of Code 2022, day 14.</span></span></span><span class="cell-detail">rough</span></li>
98<li class="row"><a class="icon-link" href="/convex-hull/" data-demo="Convex Hull" data-slug="convex-hull" data-src="/convex-hull/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/convex-hull.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Convex Hull</span><span class="cell-sub"><span class="date">Fall 2022</span><span class="sep"> · </span><a href="/convex-hull/" data-demo="Convex Hull" data-slug="convex-hull" data-src="/convex-hull/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/convex-hull">source</a></span></span><span class="cell-detail">mostly works</span></li>
99<li class="row"><a class="icon-link" href="/batcher-odd-even-merge-sort/" data-demo="Batcher Odd-Even Merge Sort" data-slug="batcher-odd-even-merge-sort" data-src="/batcher-odd-even-merge-sort/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/batcher-odd-even-merge-sort.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Batcher Odd-Even Merge Sort</span><span class="cell-sub"><span class="date">Fall 2022</span><span class="sep"> · </span><a href="/batcher-odd-even-merge-sort/" data-demo="Batcher Odd-Even Merge Sort" data-slug="batcher-odd-even-merge-sort" data-src="/batcher-odd-even-merge-sort/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/batcher-odd-even-merge-sort">source</a></span></span><span class="cell-detail">rough</span></li>
100<li class="row"><a class="icon-link" href="/sort-8/" data-demo="Sort 8" data-slug="sort-8" data-src="/sort-8/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/sort-8.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Sort 8</span><span class="cell-sub"><span class="date">Fall 2022</span><span class="sep"> · </span><a href="/sort-8/" data-demo="Sort 8" data-slug="sort-8" data-src="/sort-8/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/sort-8">source</a></span></span><span class="cell-detail">barely works</span></li>
101<li class="row"><a class="icon-link" href="/permutations-of-cube/" data-demo="Permutations of Cube" data-slug="permutations-of-cube" data-src="/permutations-of-cube/" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/permutations-of-cube.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Permutations of Cube</span><span class="cell-sub"><span class="date">Spring 2022</span><span class="sep"> · </span><a href="/permutations-of-cube/" data-demo="Permutations of Cube" data-slug="permutations-of-cube" data-src="/permutations-of-cube/">demo</a><span class="sep"> · </span><a href="https://github.com/BenLirio/permutations-of-cube">source</a></span></span><span class="cell-detail">rough</span></li>
102<li class="row"><a class="icon-link" href="https://youtu.be/5fEtv2SdH8E" data-demo="Leveled Homomorphic Encryption" data-slug="leveled-homomorphic-encryption" data-src="https://www.youtube.com/embed/5fEtv2SdH8E" tabindex="-1" aria-hidden="true"><span class="icon icon-small"><img src="/icons/leveled-homomorphic-encryption.png" alt="" loading="lazy" width="512" height="512"></span></a><span class="cell-text"><span class="cell-title">Leveled Homomorphic Encryption</span><span class="cell-sub"><span class="date">Spring 2022</span><span class="sep"> · </span><a href="https://youtu.be/5fEtv2SdH8E" data-demo="Leveled Homomorphic Encryption" data-slug="leveled-homomorphic-encryption" data-src="https://www.youtube.com/embed/5fEtv2SdH8E">video</a><span class="sep"> · </span><a href="https://github.com/BenLirio/CS579/tree/master/final">source</a></span></span><span class="cell-detail">mostly works</span></li>
103<li class="row row-plain"><span class="icon icon-small icon-generic" style="--icon-color:#5da06a"><span>R</span></span><span class="cell-text"><span class="cell-title">RSA on a CUDA GPU</span><span class="cell-sub"><span class="date">Spring 2022</span><span class="sep"> · </span><a href="https://github.com/BenLirio/rsa">source</a></span></span><span class="cell-detail">barely works</span></li>
104        </ul>
105      </div>
106      </div>
107    </section>
108
109    <section class="app app-writing" id="app-writing" data-app="writing" data-bar="light" aria-hidden="true" hidden>
110      <header class="navbar notes-bar">
111  <div class="navbar-inner">
112    <a class="nav-btn nav-back" href="#writing" id="writing-back" hidden>Writing</a>
113    <h1 class="nav-title" id="writing-title">Writing</h1>
114    <span class="nav-spacer"></span>
115  </div>
116</header>
117      <div class="scroll view" id="writing-list">
118        <ul class="list post-list">
119          <li class="row row-plain"><a class="cell-text" href="/writing/why-this-site-looks-like-2012/" data-post="why-this-site-looks-like-2012"><span class="cell-title">Why this site looks like 2012</span><span class="cell-sub">September 4, 2026</span></a><span class="chevron"></span></li>
120        </ul>
121      </div>
122      <article class="scroll post view" id="post-why-this-site-looks-like-2012" data-title="Why this site looks like 2012" hidden>
123        <h1>Why this site looks like 2012</h1>
124        <p class="post-date"><time datetime="2026-09-04">September 4, 2026</time></p>
125<p>For a few years this site was a table. Date, a one-to-five rating of whether the thing worked, a name, a demo link, a GitHub link. Verdana on gray. I never minded it much. It was honest.</p>
126<p>What I did mind, when I finally sat down to redo it, was the risk of it turning into a resume. Every template I looked at wanted a skills grid, an experience section, a bio in the third person, a button that says &quot;let's work together.&quot; I would rather keep the gray table than send someone that.</p>
127<p>The other thing I kept bumping into was how clean everything is now. White page, Inter, a lot of whitespace, one accent color. It looks good. It also looks like everyone, and n
127one of it feels like arriving anywhere. The one personal site I actually liked, <a href="http://tom7.org/">tom7.org</a>, feels like a portal into an old UI. His old UI is 1998, though, and I was born in 1999. It is not my nostalgia.</p>
128<p>Mine is the first iPhone. I was eight when it came out and thirteen when iOS 6 shipped, and then in 2013 iOS 7 flattened everything. So that is what this site is: an iPhone 5 running iOS 6. A lock screen you slide to unlock, a home screen you swipe through, a dock, apps that zoom open. On a desktop you get the whole phone. On an actual phone the screen is just the screen.</p>
129<p>It turned out to fit the content better than I expected. Most of what I make are small interactive toys, and a home screen of glossy icons you can tap is exactly what they are. The old table survives as the Projects app, a grouped list with a status word instead of the star rating. The demos run inside the phone.</p>
130<h3>The line</h3>
131<p>The home screen has two pages. The first is things made with AI. The second is things made by hand, roughly before 2023. The Projects app draws the same line, with a sentence about it where the two sections meet.</p>
132<p>I drew it because the projects on either side are different kinds of objects now. An AI could produce most of the pre-2023 ones almost instantly. That makes them technically uninteresting today, but they are still cool artifacts, and they took real effort at the time, so they stay. The Projects app performs the split a little: the &quot;with AI&quot; section is flat, iOS 7 style, and the &quot;by hand&quot; section is glossy iOS 6. Skeuomorphism was laborious. Flat was fast. That is not a bad picture of what changed.</p>
133<h3>How it is built</h3>
134<p>No framework. One JSON file for the projects, markdown files for posts, and a build script that uses nothing outside Node's standard library, so it should still run untouched in a few years. The phone is one hand-written stylesheet and one script with no dependencies. The icons are screenshots of the live demos, cropped by a small script that drives Chrome. An AI maintains most of it, including this first draft, from notes I wrote. That seemed like the right way to build a site that has a line drawn at 2023 in it.</p>
135      </article>
136    </section>
137
138    <section class="app app-frame" id="app-frame" data-app="frame" data-bar="light" aria-hidden="true" hidden>
139      <header class="navbar ">
140  <div class="navbar-inner">
141    <span class="nav-spacer"></span>
142    <h1 class="nav-title" id="frame-title"></h1>
143    <a class="nav-btn" href="#" id="frame-open" target="_blank" rel="noopener">Open</a>
144  </div>
145</header>
146      <iframe id="frame" src="about:blank" title="Demo" allow="fullscreen"></iframe>
147    </section>
148
149    <div class="lock" id="lock" tabindex="0" aria-label="Lock screen. Press Enter to unlock.">
150      <div class="lock-body" id="lock-body">
151        <div class="lock-time"><div class="lock-clock" data-clock="lock">9:41</div><div class="lock-date" data-date>Friday, September 4</div></div>
152        <ul class="lock-notes">
153          <li class="lock-note">
154            <span class="icon icon-sys icon-about"></span>
155            <div class="lock-note-body">
156              <div class="lock-note-head"><span>Ben Lirio</span><time>now</time></div>
157              <p>I like making things, and this is where I keep them. Most of them are small interactive toys: a sorting network, a fluid sim, a game of life or two. Some work. Some barely do. They are all here anyway. If any of it is interesting to you, email me. I would genuinely like to hear about it.</p>
158              <p class="lock-note-email"><a class="" href="#contact" data-e="moc.liamg@oiriljneb"><span class="rev">moc.liamg@oiriljneb</span></a></p>
159            </div>
160          </li>
161        </ul>
162        <div class="unlock" id="unlock"><span class="unlock-chevron"></span><span class="unlock-text" id="unlock-text">slide to unlock</span></div>
163        <span class="lock-camera" aria-hidden="true"></span>
164      </div>
165    </div>
166  </div>
167  <div class="bezel-bottom"><button class="home-btn" id="homebtn" type="button" aria-label="Home"><span></span></button></div>
168</div>
169<p class="stage-foot"><a class="" href="#contact" data-e="moc.liamg@oiriljneb"><span class="rev">moc.liamg@oiriljneb</span></a> · <a href="https://github.com/BenLirio">github</a> · <a href="/writing/">writing</a> · <a href="/feed.xml">rss</a></p>
170</div>
171<noscript><style>.lock, .stage-foot, .blank, .volume-hud { display: none; } .home { position: static; } .app[hidden] { display: flex !important; position: static; } .screen { height: auto; }</style><p style="color:#ccc;text-align:center;font-size:14px">This page is a small iPod touch that needs JavaScript. Without it: <a href="/writing/" style="color:#fff">writing</a>, and the projects are listed below.</p></noscript>
172<script src="/phone.js" defer></script>
172
173</body>
174</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.