content(site-portfolio): rewrite for readability and flow

This commit is contained in:
root committed 2026-09-28 20:37:13 +02:00
1 parent 052b5c4829
commit 0f8277dd0a
4 files changed
+60 -60

No files matched your search

+15 -15
View File
@@ -453,10 +453,13 @@
</aside>
<h3>Главная стала первым экспериментом</h3>
<p class="section__prose">
Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
Раз конструктор не давал нужной гибкости, я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
</p>
<h2 id="solution">Рабочий процесс без готовых макетов</h2>
<p class="section__prose">
С этого момента у меня появился новый напарник по разработке: сама модель. Дальше предстояло понять, как с ней работать, что доверить ей, а что решать самому.
</p>
<h3>Структура от меня, код от модели</h3>
<p class="section__prose">
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
@@ -479,16 +482,18 @@
В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
</p>
<h3>Дизайн-система для всего сайта</h3>
<h3>Дизайн-система и ветки для экспериментов</h3>
<p class="section__prose">
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент, а не обходить вручную каждую страницу и обновлять экземпляр за экземпляром.
</p>
<h3>Ветки Git для разных направлений</h3>
<p class="section__prose">
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
Ветки Git давали похожую свободу на уровне всего проекта: можно было пробовать разные направления развития сайта, не смешивая их в одну линию. Я описывал агенту, что хочу получить, проверял результат и либо шёл дальше, либо просил переделать.
</p>
<h2 id="agents">Переход к агентной разработке</h2>
<p class="section__prose">
Дизайн-система и ветки решали задачи внутри проекта. Но настоящий сдвиг в процессе начался, когда изменился сам инструмент разработки.
</p>
<h3>Cursor: от помощника к агенту</h3>
<p class="section__prose">
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE.
@@ -506,23 +511,18 @@
<h2 id="workflow">CI/CD: от локального preview к production</h2>
<p class="section__prose">
Я связал локальную разработку с репозиторием и публикацией сайта через три инструмента: Hermes Agent, Gitea и Coolify.
Агент пишет код, но сайт ещё нужно где-то хранить и публиковать. Я связал локальную разработку с репозиторием и деплоем через три инструмента: Hermes Agent, Gitea и Coolify.
</p>
<h3>Coolify на VPS</h3>
<p class="section__prose">
Чтобы публиковать сайт, я купил VPS и установил Coolify. Это платформа для развёртывания веб-приложений. Мой сайт работает там как веб-приложение.
</p>
<h3>Gitea хранит версии проекта</h3>
<p class="section__prose">
Для версионирования я завёл репозиторий сайта в Gitea. Там хранится история изменений проекта.
Чтобы публиковать сайт, я купил VPS и установил на него Coolify: платформу для развёртывания веб-приложений. Мой сайт устроен как обычное веб-приложение, поэтому запускается там по тому же принципу. Для версионирования я завёл отдельный репозиторий в Gitea, где хранится вся история изменений проекта.
</p>
<h3>Локальный preview рядом с Hermes Agent</h3>
<p class="section__prose">
правки которые вносит агент
Сам Hermes Agent и рабочая копия сайта находятся на отдельном VPS, где запущен локальный сервер с предпросмотром. Разработку я веду с ноутбука и с телефона: ноутбук подключён к той же виртуальной сети, что и VPS агента, поэтому я открываю локальную версию сайта в браузере и сразу вижу, что получилось.
</p>
<h3>Из main в production</h3>
<p class="section__prose">
агент делает комит и пуш. Coolify мониторит ветку main, поэтому деплой происходит по тригеру - пуш с main
Когда правки меня устраивают, агент делает коммит и пушит их в основную ветку <code>main</code>. Coolify следит за этой веткой, и пуш в неё запускает деплой: новая версия сайта становится доступна пользователям.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
@@ -533,7 +533,7 @@
<h2 id="result">Рабочая версия готова</h2>
<p class="section__prose">
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
В итоге вся цепочка, от идеи до продакшена, работает через агента: постановка задачи, код, проверка на локальном сервере, коммит и автоматический деплой. Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
</p>
</div>
</main>
+15 -15
View File
@@ -453,10 +453,13 @@
</aside>
<h3>The homepage became my first experiment</h3>
<p class="section__prose">
I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
Since the builder would not give me that flexibility, I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
</p>
<h2 id="solution">A workflow without finished mockups</h2>
<p class="section__prose">
From this point I had a new partner in development: the model itself. The next step was figuring out how to work with it, what to hand off and what to keep deciding myself.
</p>
<h3>I set the structure; the model wrote code</h3>
<p class="section__prose">
When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
@@ -479,16 +482,18 @@
In Figma and Lunacy, I prepared individual assets: screenshots of apps and websites for case studies, graphics, an avatar, and vector icons.
</p>
<h3>A design system for the whole site</h3>
<h3>A design system and branches for experimenting</h3>
<p class="section__prose">
I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place, instead of visiting every page by hand and changing each instance separately.
</p>
<h3>Git branches for trying different directions</h3>
<p class="section__prose">
Version control and Git branches let me test different directions for the site. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
Git branches gave me similar freedom at the project level: I could try different directions for the site without mixing them into one line of development. I described what I wanted to the agent, reviewed the result, and either moved on or asked it to try again.
</p>
<h2 id="agents">Moving to agent-driven development</h2>
<p class="section__prose">
A design system and branches solved problems inside the project. But the real shift in my process started when the development tool itself changed.
</p>
<h3>Cursor: from code assistant to agent</h3>
<p class="section__prose">
A few weeks after I started working on the site, Cursor added an agent window. I switched fully to the agent and did not return to the classic IDE workflow.
@@ -506,23 +511,18 @@
<h2 id="workflow">CI/CD: from local preview to production</h2>
<p class="section__prose">
I connected local development, version control, and publishing through three tools: Hermes Agent, Gitea, and Coolify.
The agent writes the code, but the site still needs somewhere to live and ship from. I connected local development, version control, and publishing through three tools: Hermes Agent, Gitea, and Coolify.
</p>
<h3>Coolify on a VPS</h3>
<p class="section__prose">
To publish the site, I rented a VPS and installed Coolify. It is a platform for deploying web applications. My portfolio runs there as a web app.
</p>
<h3>Gitea keeps the project history</h3>
<p class="section__prose">
I created a Gitea repository to version the site and keep its change history.
To publish the site, I rented a VPS and installed Coolify on it, a platform for deploying web applications. My portfolio is built like any other web app, so it runs there the same way. For version control, I set up a separate Gitea repository that holds the full history of the project.
</p>
<h3>Local preview alongside Hermes Agent</h3>
<p class="section__prose">
Changes made by the agent
Hermes Agent and the working copy of the site live on a separate VPS with a local preview server running. I do my work from a laptop and a phone: the laptop sits on the same virtual network as the agent's VPS, so I can open the local version of the site in a browser and see the result right away.
</p>
<h3>From main to production</h3>
<p class="section__prose">
The agent commits and pushes. Coolify monitors the <code>main</code> branch, so a push to <code>main</code> triggers deployment.
When I am happy with the changes, the agent commits and pushes them to the <code>main</code> branch. Coolify watches that branch, and a push to it triggers a deployment: the new version of the site becomes available to visitors.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
@@ -533,7 +533,7 @@
<h2 id="result">The working version is ready</h2>
<p class="section__prose">
The site is fully functional. Next, I plan to work on its content and promotion.
The whole chain, from idea to production, now runs through the agent: setting the task, writing code, checking it on the local server, committing, and an automatic deploy. The site is fully functional. Next, I plan to work on its content and promotion.
</p>
</div>
</main>
+15 -15
View File
@@ -140,10 +140,13 @@
</aside>
<h3>The homepage became my first experiment</h3>
<p class="section__prose">
I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
Since the builder would not give me that flexibility, I started looking for another approach. First, I generated a homepage in several LLM-powered services. After a few iterations, I found a version I liked, saved the project, and continued in Cursor, an IDE I was learning at the time.
</p>
<h2 id="solution">A workflow without finished mockups</h2>
<p class="section__prose">
From this point I had a new partner in development: the model itself. The next step was figuring out how to work with it, what to hand off and what to keep deciding myself.
</p>
<h3>I set the structure; the model wrote code</h3>
<p class="section__prose">
When I started working in Cursor, it only had a code assistant. I wrote prompts, the model generated files and code, and I reviewed and approved the result. I planned the page structure myself.
@@ -166,16 +169,18 @@
In Figma and Lunacy, I prepared individual assets: screenshots of apps and websites for case studies, graphics, an avatar, and vector icons.
</p>
<h3>A design system for the whole site</h3>
<h3>A design system and branches for experimenting</h3>
<p class="section__prose">
I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place. Without it, I would have had to visit each page and change every instance by hand.
I started building a design system and shared components early on. That kept the pages consistent and made it easier to update an element in one place, instead of visiting every page by hand and changing each instance separately.
</p>
<h3>Git branches for trying different directions</h3>
<p class="section__prose">
Version control and Git branches let me test different directions for the site. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
Git branches gave me similar freedom at the project level: I could try different directions for the site without mixing them into one line of development. I described what I wanted to the agent, reviewed the result, and either moved on or asked it to try again.
</p>
<h2 id="agents">Moving to agent-driven development</h2>
<p class="section__prose">
A design system and branches solved problems inside the project. But the real shift in my process started when the development tool itself changed.
</p>
<h3>Cursor: from code assistant to agent</h3>
<p class="section__prose">
A few weeks after I started working on the site, Cursor added an agent window. I switched fully to the agent and did not return to the classic IDE workflow.
@@ -193,23 +198,18 @@
<h2 id="workflow">CI/CD: from local preview to production</h2>
<p class="section__prose">
I connected local development, version control, and publishing through three tools: Hermes Agent, Gitea, and Coolify.
The agent writes the code, but the site still needs somewhere to live and ship from. I connected local development, version control, and publishing through three tools: Hermes Agent, Gitea, and Coolify.
</p>
<h3>Coolify on a VPS</h3>
<p class="section__prose">
To publish the site, I rented a VPS and installed Coolify. It is a platform for deploying web applications. My portfolio runs there as a web app.
</p>
<h3>Gitea keeps the project history</h3>
<p class="section__prose">
I created a Gitea repository to version the site and keep its change history.
To publish the site, I rented a VPS and installed Coolify on it, a platform for deploying web applications. My portfolio is built like any other web app, so it runs there the same way. For version control, I set up a separate Gitea repository that holds the full history of the project.
</p>
<h3>Local preview alongside Hermes Agent</h3>
<p class="section__prose">
Changes made by the agent
Hermes Agent and the working copy of the site live on a separate VPS with a local preview server running. I do my work from a laptop and a phone: the laptop sits on the same virtual network as the agent's VPS, so I can open the local version of the site in a browser and see the result right away.
</p>
<h3>From main to production</h3>
<p class="section__prose">
The agent commits and pushes. Coolify monitors the <code>main</code> branch, so a push to <code>main</code> triggers deployment.
When I am happy with the changes, the agent commits and pushes them to the <code>main</code> branch. Coolify watches that branch, and a push to it triggers a deployment: the new version of the site becomes available to visitors.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
@@ -220,7 +220,7 @@
<h2 id="result">The working version is ready</h2>
<p class="section__prose">
The site is fully functional. Next, I plan to work on its content and promotion.
The whole chain, from idea to production, now runs through the agent: setting the task, writing code, checking it on the local server, committing, and an automatic deploy. The site is fully functional. Next, I plan to work on its content and promotion.
</p>
</div>
</main>
+15 -15
View File
@@ -140,10 +140,13 @@
</aside>
<h3>Главная стала первым экспериментом</h3>
<p class="section__prose">
Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
Раз конструктор не давал нужной гибкости, я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
</p>
<h2 id="solution">Рабочий процесс без готовых макетов</h2>
<p class="section__prose">
С этого момента у меня появился новый напарник по разработке: сама модель. Дальше предстояло понять, как с ней работать, что доверить ей, а что решать самому.
</p>
<h3>Структура от меня, код от модели</h3>
<p class="section__prose">
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
@@ -166,16 +169,18 @@
В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
</p>
<h3>Дизайн-система для всего сайта</h3>
<h3>Дизайн-система и ветки для экспериментов</h3>
<p class="section__prose">
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент, а не обходить вручную каждую страницу и обновлять экземпляр за экземпляром.
</p>
<h3>Ветки Git для разных направлений</h3>
<p class="section__prose">
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
Ветки Git давали похожую свободу на уровне всего проекта: можно было пробовать разные направления развития сайта, не смешивая их в одну линию. Я описывал агенту, что хочу получить, проверял результат и либо шёл дальше, либо просил переделать.
</p>
<h2 id="agents">Переход к агентной разработке</h2>
<p class="section__prose">
Дизайн-система и ветки решали задачи внутри проекта. Но настоящий сдвиг в процессе начался, когда изменился сам инструмент разработки.
</p>
<h3>Cursor: от помощника к агенту</h3>
<p class="section__prose">
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE.
@@ -193,23 +198,18 @@
<h2 id="workflow">CI/CD: от локального preview к production</h2>
<p class="section__prose">
Я связал локальную разработку с репозиторием и публикацией сайта через три инструмента: Hermes Agent, Gitea и Coolify.
Агент пишет код, но сайт ещё нужно где-то хранить и публиковать. Я связал локальную разработку с репозиторием и деплоем через три инструмента: Hermes Agent, Gitea и Coolify.
</p>
<h3>Coolify на VPS</h3>
<p class="section__prose">
Чтобы публиковать сайт, я купил VPS и установил Coolify. Это платформа для развёртывания веб-приложений. Мой сайт работает там как веб-приложение.
</p>
<h3>Gitea хранит версии проекта</h3>
<p class="section__prose">
Для версионирования я завёл репозиторий сайта в Gitea. Там хранится история изменений проекта.
Чтобы публиковать сайт, я купил VPS и установил на него Coolify: платформу для развёртывания веб-приложений. Мой сайт устроен как обычное веб-приложение, поэтому запускается там по тому же принципу. Для версионирования я завёл отдельный репозиторий в Gitea, где хранится вся история изменений проекта.
</p>
<h3>Локальный preview рядом с Hermes Agent</h3>
<p class="section__prose">
правки которые вносит агент
Сам Hermes Agent и рабочая копия сайта находятся на отдельном VPS, где запущен локальный сервер с предпросмотром. Разработку я веду с ноутбука и с телефона: ноутбук подключён к той же виртуальной сети, что и VPS агента, поэтому я открываю локальную версию сайта в браузере и сразу вижу, что получилось.
</p>
<h3>Из main в production</h3>
<p class="section__prose">
агент делает комит и пуш. Coolify мониторит ветку main, поэтому деплой происходит по тригеру - пуш с main
Когда правки меня устраивают, агент делает коммит и пушит их в основную ветку <code>main</code>. Coolify следит за этой веткой, и пуш в неё запускает деплой: новая версия сайта становится доступна пользователям.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
@@ -220,7 +220,7 @@
<h2 id="result">Рабочая версия готова</h2>
<p class="section__prose">
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
В итоге вся цепочка, от идеи до продакшена, работает через агента: постановка задачи, код, проверка на локальном сервере, коммит и автоматический деплой. Сайт полностью работает. Дальше планирую заняться контентом и продвижением.
</p>
</div>
</main>