<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Design Of This Website | Kris Yotam</title>
<link rel="stylesheet" href="../../c/site.css">
<meta name="description" content="Meta page describing krisyotam.com, the self-documenting website’s implementation, experiments, and technical decisions using Markdown and static hosting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="mode-container">
<input type="radio" name="theme" id="theme-auto" checked>
<label for="theme-auto" class="auto" title="Auto theme"></label>
<input type="radio" name="theme" id="theme-light">
<label for="theme-light" class="light" title="Light theme"></label>
<input type="radio" name="theme" id="theme-dark">
<label for="theme-dark" class="dark" title="Dark theme"></label>
</div>
<div class="top-bar" role="navigation">
<a href="../../index.html" title="Main page"><img src="../../c/sigma.svg" alt="Main page"></a>
<a href="../../about.html" title="About"><img src="../../c/news.svg" alt="About"></a>
<a href="#" title="Code"><img src="../../c/code.svg" alt="Code"></a>
<a href="../../pics.html" title="Photography"><img src="../../c/camera.svg" alt="Photography"></a>
<a href="#" title="Pictures"><img src="../../c/picture.svg" alt="Pictures"></a>
<a href="../../vids.html" title="Videos"><img src="../../c/video.svg" alt="Videos"></a>
<a href="#" title="Donations"><img src="../../c/beer.svg" alt="Donations"></a>
<a href="#" title="Social"><img src="../../c/elephant.svg" alt="Social"></a>
</div>
<h1>Design Of This Website</h1>
<div class="keepws">
(<span class="bold">notes</span>
(date 2025-06-03)
(category <a href="../../notes.html">website</a>)
(status <span class="status-growing">growing</span>)
(confidence certain)
(importance 10)
(tags personal websites design))
</div>
<p class="preview">Meta page describing krisyotam.com, the self-documenting website’s implementation, experiments, and technical decisions using Markdown and static hosting.</p>
<div class="prose">
<p><strong>krisyotam.com</strong> is a hybrid static, dynamic site using next.js, and currently hosted on vercel. The goals of this site differ
slightly from other "blogs" and it is designed to be fast, practical, and aesthetically pleasing. So you won't tend to see large thumbnail images,
frequent pop-ups, or pestering notifications to join a email list.</p>
<h2>Development</h2>
<p>The majority of the code for this site is written in <a href="https://www.typescriptlang.org/">TypeScript</a>, with some components written in <a href="https://www.javascript.com/">JavaScript</a>. The site uses <a href="https://nextjs.org/">Next.js</a> for server-side rendering and static site generation, and is styled using <a href="https://tailwindcss.com/">Tailwind CSS</a>.</p>
<h3>Developers</h3>
<p>The site is primarily developed by <a href="https://github.com/krisyotam">Kris Yotam</a>, with some major contributions from <a href="https://github.com/allytaffet">Ally Taffet</a>, and <a href="https://github.com/lydialorien">Lydia Lorien</a>. The site is closed source, and currently invite only, but we may release the source code in the future.</p>
<h2>Design Principles</h2>
<p>This site is designed to follow the <a href="https://lawsofsimplicity.com/"><strong>Laws of simplicity</strong></a> by John Maeda, and is heavily inspired by the <a href="https://www.minimalistdesign.com/"><strong>Minimalist Design</strong></a> movement.</p>
<p><strong>Law 1</strong>: The simplest way to achieve simplicity is through thoughtful reduction.
<strong>Law 2</strong>: Organization makes a system of many appear fewer.
<strong>Law 3</strong>: Savings in time feel like simplicity.
<strong>Law 4</strong>: Knowledge makes everything simpler.
<strong>Law 5</strong>: Simplicity and complexity need each other.
<strong>Law 6</strong>: What lies in the periphery of simplicity is definitely not peripheral.
<strong>Law 7</strong>: More emotions are better than less.
<strong>Law 8</strong>: In simplicity we trust.
<strong>Law 9</strong>: Some things can never be made simple.
<strong>Law 10</strong>: Simplicity is about subtracting the obvious, and adding the meaningful.</p>
<p>The goals of this site can be presented as a elegant refactor of gwerns question "What does it take to present, for the long-term, complex, highly-referenced, link-intensive, long-form text online as effectively as possible, while conserving the reader's time & attention?" as such</p>
<p>The goal of this site is to explore and implement the best methods for presenting complex, long-form, highly-referenced, and link-intensive writing online—optimized for long-term preservation and designed to conserve the reader’s time and attention.</p>
<p>One of the largest challenges of this site, and a critical barrier to law 8 was the lack of rigor in deciding what is "meaningful" and what is "obvious". Take for example my page for the <a href="/mitzvah">Mitzvah</a>, and <a href="/rules-of-the-internet">Rules of the Internet</a>. Implementing these with their own respective root level pages vs. as a
much simpler mdx blog post was a difficult decision. For the mitzvah, I felt that the content was important enough to warrant its own page, but for something like "Rules of the Internet" their happen to be dozens of equally important sets of rules, laws, ect. that I can compile into lists to store for people to access.
Going forward it would be much simpler to have these implemented as a mdx blog post. This is where the decision to create Hierarchical Content pages comes from, and why I have <a href="/essays">Essays</a>, <a href="/blog">Blog Posts</a>, and <a href="/notes">Notes</a>.</p>
<h2>Typography</h2>
<h3>Blockquotes</h3>
<h4>Level 1</h4>
<blockquote>
This is a single blockquote. It should have a light background and a subtle border around all four sides. The font is slightly smaller than body text (0.95em) and the line-height is comfortable for reading longer passages.<br>
</blockquote>
<h4>Level 2</h4>
<blockquote>
This is level 1.<br>
<br>
> This is level 2 — notice the background gets darker and the border shifts. The font compounds down to roughly 0.90em at this depth. This is useful for quoting a source that itself contains a quotation.<br>
</blockquote>
<h4>Level 3</h4>
<blockquote>
First-level context or commentary goes here.<br>
<br>
> A second-level quote, perhaps from a book or article.<br>
><br>
> > A third-level quote — the deepest emphasis. The background is noticeably darker now. After this level, the cycle would repeat back to level 1 colors.<br>
</blockquote>
<h4>Consecutive blockquotes</h4>
<blockquote>
First blockquote in a series.<br>
</blockquote>
<blockquote>
Second blockquote, immediately following. These should have clear visual separation.<br>
</blockquote>
<blockquote>
Third consecutive blockquote.<br>
</blockquote>
<h4>Mixed content in blockquotes</h4>
<blockquote>
Blockquotes can contain <strong>bold text</strong>, <em>italic text</em>, and <a href="https://example.com">links</a>.<br>
<br>
They can also contain multiple paragraphs. This is the second paragraph inside the same blockquote.<br>
<br>
> And nested quotes can appear after regular paragraphs within a parent quote.<br>
><br>
> — An attribution line<br>
</blockquote>
<h3>Quote & Excerpt</h3>
<h4>Quote Component</h4>
<blockquote>
You have power over your mind — not outside events. Realize this, and you will find strength.<br>
<br>
-- Marcus Aurelius<br>
</blockquote>
<h4>Excerpt Component</h4>
<blockquote>
The happiness of your life depends upon the quality of your thoughts: therefore, guard accordingly, and take care that you entertain no notions unsuitable to virtue and reasonable nature.<br>
<br>
-- Marcus Aurelius Meditations, Book IV (180)<br>
</blockquote>
<h4>Quote vs Blockquote</h4>
<blockquote>
This is a standard markdown blockquote. It uses the <code>></code> syntax and is styled purely by CSS. No attribution built in.<br>
</blockquote>
<blockquote>
We suffer more often in imagination than in reality.<br>
<br>
-- Seneca<br>
</blockquote>
<h3>Collapse</h3>
<p>When collapsed this is just a minimal bar with a downward chevron on the right. Click it and the content appears inside a sideways-U frame: top bar, left strip, bottom bar — right side open.</p>
<blockquote>
This is a level-1 blockquote inside a collapse.<br>
<br>
> This is a level-2 nested blockquote. The darker background should still be visible and readable within the collapse frame.<br>
><br>
> > A third level of nesting — testing how deep quotes interact with the collapse container.<br>
</blockquote>
<table>
<tr><td>Streamer</td><td>Game</td><td>Peak Viewers</td></tr>
<tr><td>Pokimane</td><td>Just Chatting</td><td>40,000</td></tr>
<tr><td>Clix</td><td>Fortnite</td><td>120,000</td></tr>
<tr><td>Npesta</td><td>Geometry Dash</td><td>15,000</td></tr>
<tr><td>xQc</td><td>Variety</td><td>150,000</td></tr>
</table>
<p>Here is a paragraph with <strong>bold</strong>, <em>italic</em>, and <code>inline code</code> inside a collapse.</p>
<blockquote>
A blockquote for good measure.<br>
</blockquote>
<ul>
<li>First item with an em-dash bullet</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<ol>
<li>Ordered list item one</li>
<li>Ordered list item two</li>
<li>Ordered list item three</li>
</ol>
<blockquote>
A Quote component nested inside a Collapse — testing component-in-component rendering.<br>
<br>
-- Marcus Aurelius<br>
</blockquote>
<p>This collapse starts expanded via the <code>open</code> prop so you can see the sideways-U frame immediately without clicking.</p>
<h2>LLM Digestion</h2>
<blockquote>
What has been done, thought, written, or spoken is not culture; culture is only that fraction which is remembered.<br>
<br>
-- Gary Taylor<br>
</blockquote>
</div>
</body>
</html>