This website updates automatically from my notes app. I write a note in the public folder on my iPhone and it will update. I missed the personal, handmade websites I made as a child. This is my attempt at building something I own:

Principles

I started with a few basic principles:

1. The goal is to share your work. Build this website for yourself. But invite others into your thinking. It is not a home, it is a gallery.
2. Self maintaining sites are simple. HTML and text will endure time. Today’s trendy framework won’t. Old standards stay familiar for future changes.
3. Focus is shipping fast Build this in 24 hours or you have designed something too complex. The content is what matters, not the layout. An empty museum is worthless.

Design

I designed with these constraints in mind. Constraints are your style:

1. Typography: One font. This means it must be timeless, legible, accessible. One size. Embrace hierarchy through proper spacing and color.
2. Colors: Limit to 4 colors. I disagree with Dark mode, having modes for software is bad design. I opted for Flexoki, inspired by inks. The choice of blues are inspired by html blue.
3. Speed: Speed is part of design. Everything should load instantly. Even in poor connection.
4. 5% rule: stick to the basics, but the last 5% is yours. Avoid CSS novelty. No scroll hijacking. No animations. No javascript should be required.
5. Layout: Aim for 1 page. Avoid sprawl and menus. Organize content simply with as few constraints as possible.

These were the initial designs. Mockups are ways to prompt questions. The source of truth is the final product.

![[IMG-Website-2025-08-13.png]]

Tech

I took a Walking|walk to think about the tech stack. To ship this in 24 hours, I had to consider many tradeoffs and I came up with these ideas:

Ownership

1. Owned Files: I do not want my images to live in some cloud. I want them to be owned by myself, living in a folder. No images or fonts from a CDN means a tradeoff against speed.
   • I chose Cloudflare to be closer to the user for speed. For my code, I chose Github to upload my notes and my code in separate repos. If necessary, I can easily switch to another Git or Deployment provider.
2. No code: If I want to publish something, I’m not touching code or a command line. However, I do not want to use the common solution of a CMS. I find them to be bloated and unnecessary for one person:
   • I chose Markdown for simple text files. I can just write in whatever notes app I want and it should just work. Almost all platforms (Apple notes, Google Docs, Notion) export via Markdown now or use them natively (Obsidian).
3. Just folders: I want anything I write to be published online immediately. I don’t want to change how I use my notes app too much.
   1. All notes in my Public folder are synced online. I opted to just use a simple script to upload everything I write. This makes it easy (I don’t have to build a Publish flow), I just move them in and out this folder whenever I want.

Longevity

1. Built to Last: I want my code to live forever. I opted for HTML and CSS for speed and longevity. However, this is making a tradeoff against ease of publishing.
   • I found Quartz, the best solution I found for handling a large set of Markdown files into HTML. ¹ It is a very powerful tool and open source.
2. Adapt to Me: I hate filling out metadata and frontmatter. The user should not conform to the system. The system should conform to the user. YAML is for bots.
   • Instead, meta data should be autofilled. the title would be inferred from the file name. My url would just be the title. date can be extracted from the file data. Description from the first few sentences.
3. Less is More: I avoid Javascript as much as I can. I try to avoid linkrot by embedding the quote or image in my notes.
   • This means I have no analytics. Don’t care. Follow my socials instead.
   • There are some javascript-driven interactive elements like page previews in the spirit of Hypertext or Site-wide Search, but they are not necessary.

Sharing

1. Go where they are: The reality of the web today is that people browse on other walled platforms. While I own my content on this website, no one really checks blogs.
   • Therefore, I implement Publish on your own site, Syndicate Everywhere. This means I own them but I also x-post them across social media silos (X, Substack, LinkedIn, etc). Not all of these platforms have APIs, but this is the technical tradeoff of prioritizing visibility. This means I have a backup of my writing, projects, photos, and short posts locally and on my website.
2. Mobile First: The other reality is most people browse by phone (and often discover via an in-app browser like Instagram or X instead of Chrome or Safari).
   1. I built the website mobile first. I designed the mockups in Figma and I used the a Phone screen size (in slow internet speeds) in development. I skipped all transition effects. I designed for embedded navigation for the in-app browsers.
3. Thumbnails.
   1. This makes the link turn into an image when sent on iMessage, Slack, or X. The OG Image Thumbnail are generated dynamically with notes title via Satori, an open source tool.

![[IMG-Website-2025-08-13-1.png]]

References

• Wikipedia
• Web Design as Architecture
• Inventing on Principle by Bret Victor
• Hypertext by Ted Nelson
• File over app — Steph Ango
• MIT Admissions Blog
• reading.supply
• Web Design Principles
• brutalistwebsites.com
• Flexoki — Steph Ango
• Indie Web: POSSE
• Quartz
• Satori

Footnotes

1. Arguably, Quartz could become unsupported eventually, but I haven’t found a better solution yet. My files stay with me, but I would need to build another website. WIP for another weekend ↩