Alm

Личное пространство в интернете я хотел давно. Смотрел на чужие личные сайты, всегда находил это чем-то прикольным, и желание изредка всплывало — но дальше желания не шло. Домен aminov.sh я купил полгода назад и полгода держал вхолостую.

Сподвигло в итоге то, насколько это стало просто. Подписка за двадцать долларов, Claude Code — и оно делает то, что ты просишь. Неделя вместо месяца с лишним, который ушёл бы на «сначала разобраться». Ещё подтолкнул подкаст DHH у Лекса Фридмана: мы живём во время, когда технология не перестаёт развиваться и позволяет пользоваться компьютером настолько нативно, насколько это сейчас вообще возможно.

Это не первая итерация. Прошлые попытки умирали не на коде, а на вопросе «чем это набивать».

Первая была светлой, с градиентом во весь экран и двумя разделами, которым я так и не придумал содержимого.

Вторая была ровно противоположностью тому, к чему я в итоге пришёл: чёрный экран и стена из шестидесяти тысяч частиц на WebGL, которая шевелится сама и отзывается на прокрутку. Красиво секунд десять, а потом замечаешь, что за ней ничего нет — ни одного раздела, который я стал бы заполнять.

Против чего он

Меня бесит современный интернет — не крупные сайты, у них всё понятно и сделано для людей, а мелкие. Любая утилита, которая нужна раз в месяц. Сначала на пол-экрана вылезает «мы используем куки, подтвердите», и подтверждать я ничего не хочу, я хочу всё отклонить. Потом реклама. Потом регистрация через гугл-аккаунт: казалось бы, два клика, но зачем. Меня везде отслеживают и сводят мои данные воедино, чтобы я мог удалить фон с картинки.

Сайт для этого должен быть полем, куда кидаешь картинку, и картинкой без фона в ответ. Всё.

Та же история с блогерами. «Перейдите в мой телеграм-канал, купите подписку на Boosty, подпишитесь тут и там». Канал мне нужен ровно тогда, когда он нужен, а не постоянно в списке; чтобы посмотреть и выйти, надо подписаться, и мессенджер, где я хотел держать личные чаты, превращается в помойку. Слишком много внимания требуется от меня, и слишком навязчиво.

Мой сайт ненавязчив. Ты можешь на него зайти, можешь не зайти. Он нигде у тебя не сохраняется — чтобы вернуться, надо самому положить закладку, и это твоё решение, а не моё. Он ничего не просит, ничего не считает и никогда тебя не побеспокоит. Если это звучит как манифест — ну, в какой-то мере да.

Отсюда и всё остальное: ни аналитики, ни комментариев, ни входа, ни единого всплывающего окна. Писать на сайт некуда, потому что записывать негде: содержимое это файлы в репозитории, сборка — папка со статикой.

Четыре раздела

Главная — приветствие. Человек попал куда-то, и за десять секунд должен понять, кто я и зачем всё это.

Блог — то, ради чего вообще заводят телеграм-канал, только на своей земле. Markdown, файл на язык, публикация это git push.

Проекты — витрина. Карточка ведёт не на отдельную страницу проекта, а в блог: если я что-то сделал, о нём почти наверняка есть запись, а вторая страница про то же самое разъедется с первой на второй правке.

Любимое — фильмы, музыка, игры. Оно в первую очередь для меня: не хочется забыть, что я это слушал и смотрел и что оно было важным. А кому интересны чужие вкусы — открыл и посмотрел. Вкладки «всего» там нет: у постера 2:3 и конверта 1:1 разная форма, и вместе они складываются в кашу.

Как он выглядит

Дизайном я занимался непрофессионально, но занимался: шапки, обложки, макеты. Мне нравится лаконичное, без лишних элементов. Здесь сошлись две вещи — швейцарская типографика с постера, который мне однажды попался, и Metro UI, то есть Windows 8 и Windows Phone. У меня даже была идея купить себе Windows Phone как артефакт эпохи: неактуальный, но красивый. Я не копировал, а взял оттуда визуальный язык и сделал свою версию.

Тот самый плакат — Quim Marin.

Получилось четыре кегля, два цвета и полутон. Крупный, средний, мелкий и ещё одна ступень для подписей под кадрами — она садится раньше остальных, потому что на телефоне подпись в семнадцать пикселей занимала три строки и ряды витрины разъезжались по высоте. Чёрный фон, белый текст, полутон только там, где одно подчинено другому: автор под названием карточки. Шрифт Inter — база, которая везде, и в этом её достоинство.

Иконок на сайте нет ни одной. Только слова и кегль.

Из этого же следует, что активное показывается кеглем, а не цветом. Красок две, полутон занят подчинённостью, подсветить нечем — поэтому текущий пункт просто на ступень крупнее. Один приём и в шапке, и во вкладках.

Светлая тема была, и я её убрал: не понравилась.

Шапка, на которую ушло больше всего

Казалось бы, маленький компонент. Времени на него ушло больше, чем на все страницы вместе.

На компьютере пункты набраны мелким, и тот, что под курсором, плавно вырастает. Звучит просто, но размер двигает раскладку: пункт вырос, сдвинул соседа, сосед уехал из-под курсора, состояние снялось, всё поехало обратно. Шапка дрожала, пока курсор стоял на волосок от буквы. Пришлось перестать спрашивать браузер, над чем курсор, и считать это самому.

На телефоне разделы просто не помещаются. Переносить их на вторую строку я не хотел — тогда навигация занимает четверть экрана и перестаёт читаться как ряд, — поэтому ряд едет вбок, как панорама в Windows Phone. Ради этого на узком экране он крупнее, а не мельче: мелким шрифтом четыре слова почти влезали, и крутить было нечего.

Ряд ещё и доворачивает себя сам: текущий раздел встаёт не у края, а шагом внутрь, так что хвост предыдущего виден и уходит в темноту. Порядок разделов — это карта, и по ней должно быть видно, где ты стоишь относительно соседей.

А у края стоит пружина: резкий свайп упирается как в стену, и короткий отскок делает остановку живой. На ней же нашлась самая тупая ошибка во всём проекте. Браузер округлял два числа в разные стороны, и ряд, доехав до конца, считал, что до края остался пиксель, — справа не работало вообще ничего. На соседнем разделе числа сходились, и я полдня был уверен, что дело в разделе.

И свайп между страницами. С телефона сайтом пользоваться приятнее, чем с компьютера, и это тоже вышло не само.

Почему это шаблон

Я не хотел делать сайт, который годится только мне. Поэтому вышло два репозитория: шаблон лежит открыто, а мой сайт — отдельная репа с моим содержимым. Всё, что делает установку твоей, собрано в одном файле: имя, адрес, языки, разделы, виды «любимого».

Второе, и для меня оно важнее: клонируешь — и получаешь работающий сайт. Девять постов, восемь проектов, по восемь карточек на каждый вид. Не пустой каркас, а заполненный.

Это из больного. В работе постоянно вылезает одно и то же: есть продовая база и есть локальная, которая делается сидами, и на сиды все кладут — они не проверяются и со временем превращаются в кашу. Половина ошибок при разработке из того, что каких-то данных просто нет. Я хотел, чтобы демо-содержимое показывало весь сайт целиком, и чтобы на восьми карточках было видно то, чего на двух не увидишь: прокрутку, ряды, переносы. Названия там нарочно никакие — «Проект 3», «Фильм 7»: имя настоящего места или человека начинает притворяться содержанием, и его правят вместо того, чтобы заменить своим.

В итоге

Сайт я сделал для себя и результатом доволен. Гештальт закрыт: домен перестал лежать вхолостую, есть место, которое выглядит так, как я хочу, и осталось только его наполнять — не спрашивая ни у кого разрешения и ни от кого не завися.

Может, через год у меня поменяется видение и я сделаю что-нибудь более навороченное. Пока что мне нравится ровно так.