The site you're reading is itself the first project. It's a Next.js site where my Obsidian vault is the CMS: create a folder with a main.md and it becomes a page in the sidebar; drop a note into that folder and it becomes a post with its own URL. Hitting save in Obsidian auto-commits to GitHub, Vercel rebuilds, and the change is live in about a minute.
How a note becomes a pageЯк нотатка стає сторінкою
A few decisions I'm happy with:
No database. Content is markdown in git: versioned, portable, free.
Fully static. Every page is pre-rendered at build time, so it's fast and there's nothing to hack at runtime. Fitting, for a future security person.
Pluggable page styles. Each section declares a type (posts, music, people, projects) and the code maps it to a layout; this page is the projects type.
Obsidian syntax works. Wiki links, image embeds with widths, even Apple Music links that turn into players.
A README with screenshots, an MIT licence, and a CI check that runs the type check and the tests on every push.
Design
One material for everything that floats
The sidebar, the contents sheet, the series list and the link previews now share the breadcrumb bar's blurred surface and hairline. The sidebar itself floats off the edge of the window.
Feature
Read aloud
Every note has a Listen button. The player has a seek bar and follows the language switch.
Content
Reels and TikToks on the shelf
Instagram reels and TikTok videos can sit on the shelf next to books, films and YouTube.
Feature
A "New" chip
Notes dated since your last visit carry a small New chip, so coming back shows what changed.
Launch
First commit
The vault became a website.
Сайт, який ти зараз читаєш, і є першим проєктом. Це сайт на Next.js, де моє сховище Obsidian і є CMS: створюєш папку з main.md — і вона стає сторінкою в бічній панелі; кидаєш нотатку в цю папку — і вона стає дописом із власною адресою. Натискаю «зберегти» в Obsidian, зміни автоматично комітяться в GitHub, Vercel перезбирає сайт, і приблизно за хвилину все вже онлайн.
How a note becomes a pageЯк нотатка стає сторінкою
Кілька рішень, якими я задоволений:
Жодної бази даних. Контент — це markdown у git: версійований, портативний, безкоштовний.
Повністю статичний. Кожна сторінка згенерована наперед під час збірки, тож усе швидко і немає чого зламати в рантаймі. Доречно для майбутнього безпечника.
Змінні стилі сторінок. Кожен розділ оголошує свій type (posts, music, people, projects), а код зіставляє його з макетом — ця сторінка має тип projects.
Синтаксис Obsidian працює. Вікі-посилання, вбудовані зображення із заданою шириною і навіть посилання на Apple Music, які перетворюються на плеєр.
Стек: Next.js 15, Tailwind CSS v4, Obsidian + плагін Git, GitHub, Vercel. Дизайн значною мірою натхненний brianlovin.com.
README зі скриншотами, ліцензія MIT і CI, що на кожен пуш перевіряє типи й запускає тести.
Дизайн
Один матеріал для всього, що плаває
Бічна панель, аркуш змісту, список серії та попередні перегляди посилань тепер мають ту саму розмиту поверхню й тонку лінію, що й панель навігації. Сама бічна панель відійшла від краю вікна.
Функція
Читання вголос
У кожної нотатки є кнопка «Слухати». Плеєр має смугу перемотування і перемикається разом із мовою.
Контент
Reels і TikTok на полиці
Instagram Reels і відео з TikTok тепер можуть стояти на полиці поруч із книжками, фільмами та YouTube.
Функція
Позначка «Нове»
Нотатки, датовані після твого останнього візиту, мають маленьку позначку «Нове» — одразу видно, що змінилося.