content(site-portfolio): refine headings and callouts

This commit is contained in:
root committed 2026-09-28 15:25:47 +02:00
1 parent 02f05c0598
commit adf0f4b052
4 files changed
+138 -50

No files matched your search

+33 -11
View File
@@ -436,21 +436,28 @@
<li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
</ul>
<h2 id="context">Мне понадобился новый сайт</h2>
<h2 id="context">Актуальный сайт-портфолио</h2>
<p class="section__prose">
Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
</p>
<h2 id="task">Конструктор начал мешать</h2>
<h2 id="task">Пределы конструктора</h2>
<p class="section__prose">
Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
<div class="case-callout__content">
<p>Даже платные тарифы не позволяли быстро менять структуру и дизайн всего сайта.</p>
</div>
</aside>
<h3>Главная стала первым экспериментом</h3>
<p class="section__prose">
Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
</p>
<h2 id="solution">Как складывался процесс</h2>
<h3>Сначала модель помогала писать код</h3>
<h2 id="solution">Рабочий процесс без готовых макетов</h2>
<h3>Структура от меня, код от модели</h3>
<p class="section__prose">
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
</p>
@@ -458,31 +465,46 @@
Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
</p>
<h3>Макеты не были обязательным этапом</h3>
<h3>Сразу проверял в браузере</h3>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>Макеты я не готовил. Идеи проверял на работающем сайте.</p>
</div>
</aside>
<p class="section__prose">
Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
Я открывал сайт на ноутбуке, десктопе, планшете и телефоне, смотрел, как он ведёт себя, и решал, что доработать. В конструкторе тоже можно смотреть сайт на разных устройствах, но путь от идеи до правки занимал больше шагов.
</p>
<p class="section__prose">
В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
</p>
<h3>Компоненты помогали держать сайт цельным</h3>
<h3>Дизайн-система для всего сайта</h3>
<p class="section__prose">
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
</p>
<h3>Ветки Git для разных направлений</h3>
<p class="section__prose">
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
</p>
<h2 id="agents">От помощника к агенту</h2>
<h2 id="agents">Переход к агентной разработке</h2>
<h3>Cursor: от помощника к агенту</h3>
<p class="section__prose">
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
<div class="case-callout__content">
<p>Я стал меньше заниматься кодом и больше времени уделять творческим задачам. Моя роль стала ближе к арт-директору или лиду.</p>
</div>
</aside>
<h3>Hermes Agent: гибкость и стоимость</h3>
<p class="section__prose">
Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
</p>
<h2 id="result">Сайт работает</h2>
<h2 id="result">Рабочая версия готова</h2>
<p class="section__prose">
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
</p>
+36 -14
View File
@@ -436,21 +436,28 @@
<li><span>Status</span>Site works; content and promotion are next</li>
</ul>
<h2 id="context">Why I needed a new site</h2>
<h2 id="context">A portfolio site I needed</h2>
<p class="section__prose">
I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
</p>
<h2 id="task">The builder got in the way</h2>
<h2 id="task">Where the builder fell short</h2>
<p class="section__prose">
I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
<div class="case-callout__content">
<p>Even paid plans did not make site-wide structure and design changes quick.</p>
</div>
</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.
</p>
<h2 id="solution">How the process took shape</h2>
<h3>At first, the model helped me write code</h3>
<h2 id="solution">A workflow without finished mockups</h2>
<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.
</p>
@@ -458,31 +465,46 @@
The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
</p>
<h3>Mockups were not a required step</h3>
<h3>I checked the site in the browser</h3>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>I skipped mockups and tested ideas on the working site.</p>
</div>
</aside>
<p class="section__prose">
I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
I opened the site on a laptop, desktop, tablet, and phone, watched how it behaved, and decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
</p>
<p class="section__prose">
I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
In Figma and Lunacy, I prepared individual assets: screenshots of apps and websites for case studies, graphics, an avatar, and vector icons.
</p>
<h3>Components kept the site consistent</h3>
<h3>A design system for the whole site</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.
</p>
<h3>Git branches for trying different directions</h3>
<p class="section__prose">
Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
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.
</p>
<h2 id="agents">From code assistant to agent</h2>
<h2 id="agents">Moving to agent-driven development</h2>
<h3>Cursor: from code assistant to agent</h3>
<p class="section__prose">
A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
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.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
<div class="case-callout__content">
<p>I spent less time on code and more on creative work. My role became closer to art direction or project leadership.</p>
</div>
</aside>
<h3>Hermes Agent: flexibility and cost</h3>
<p class="section__prose">
Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
Later, I began exploring Hermes Agent. It was more flexible to configure and let me connect any LLM provider. There was no subscription for the tool itself, which made development cheaper. When my Cursor quota ran out, I had to wait until the next month. That got in the way of work.
</p>
<h2 id="result">The site is working</h2>
<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.
</p>
+36 -14
View File
@@ -123,21 +123,28 @@
<li><span>Status</span>Site works; content and promotion are next</li>
</ul>
<h2 id="context">Why I needed a new site</h2>
<h2 id="context">A portfolio site I needed</h2>
<p class="section__prose">
I did not have an up-to-date website with my work and résumé. I knew how to build pages by hand with HTML and CSS, and I had spent a lot of time with no-code platforms such as Weebly and Tilda. So I started with a website builder.
</p>
<h2 id="task">The builder got in the way</h2>
<h2 id="task">Where the builder fell short</h2>
<p class="section__prose">
I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome. Paid plans did not solve that problem, and each edit took more steps than I wanted.
I quickly ran into platform limits. Changing the site structure and experimenting with the design across multiple pages was cumbersome.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
<div class="case-callout__content">
<p>Even paid plans did not make site-wide structure and design changes quick.</p>
</div>
</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.
</p>
<h2 id="solution">How the process took shape</h2>
<h3>At first, the model helped me write code</h3>
<h2 id="solution">A workflow without finished mockups</h2>
<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.
</p>
@@ -145,31 +152,46 @@
The design came together gradually and is still evolving. I described the style and elements I wanted, looked for references with ready-made code blocks, and combined them with my own decisions.
</p>
<h3>Mockups were not a required step</h3>
<h3>I checked the site in the browser</h3>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>I skipped mockups and tested ideas on the working site.</p>
</div>
</aside>
<p class="section__prose">
I did not prepare page mockups in advance. I checked the site in the browser, across laptop, desktop, tablet, and phone, then decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
I opened the site on a laptop, desktop, tablet, and phone, watched how it behaved, and decided what to refine. Website builders offer previews at different sizes too, but getting from an idea to an edit took more steps.
</p>
<p class="section__prose">
I still used graphic editors, but for individual assets. In Figma and Lunacy, I prepared screenshots of apps and websites for case studies, adjusted graphics, and worked on my avatar and vector icons.
In Figma and Lunacy, I prepared individual assets: screenshots of apps and websites for case studies, graphics, an avatar, and vector icons.
</p>
<h3>Components kept the site consistent</h3>
<h3>A design system for the whole site</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.
</p>
<h3>Git branches for trying different directions</h3>
<p class="section__prose">
Version control and Git branches let me test different directions without mixing them into one line of development. I described what I wanted, reviewed the agent's work, and either moved on or asked it to try again.
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.
</p>
<h2 id="agents">From code assistant to agent</h2>
<h2 id="agents">Moving to agent-driven development</h2>
<h3>Cursor: from code assistant to agent</h3>
<p class="section__prose">
A few weeks into the project, Cursor introduced an agent window. I switched to it completely and did not return to the classic IDE workflow. I spent less time on code and more on creative decisions. My work started to feel more like art direction or leading the project.
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.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
<div class="case-callout__content">
<p>I spent less time on code and more on creative work. My role became closer to art direction or project leadership.</p>
</div>
</aside>
<h3>Hermes Agent: flexibility and cost</h3>
<p class="section__prose">
Later, I began exploring Hermes Agent. It was more flexible to configure, let me connect different LLM providers, and did not require its own subscription. It made development cheaper for me. With Cursor, once the monthly quota ran out, I had to wait for the next month, which got in the way of work.
Later, I began exploring Hermes Agent. It was more flexible to configure and let me connect any LLM provider. There was no subscription for the tool itself, which made development cheaper. When my Cursor quota ran out, I had to wait until the next month. That got in the way of work.
</p>
<h2 id="result">The site is working</h2>
<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.
</p>
+33 -11
View File
@@ -123,21 +123,28 @@
<li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
</ul>
<h2 id="context">Мне понадобился новый сайт</h2>
<h2 id="context">Актуальный сайт-портфолио</h2>
<p class="section__prose">
Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
</p>
<h2 id="task">Конструктор начал мешать</h2>
<h2 id="task">Пределы конструктора</h2>
<p class="section__prose">
Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно. Платные тарифы эту проблему не решали, а правки требовали больше действий, чем мне хотелось.
Я быстро упёрся в ограничения платформы. Менять структуру сайта и экспериментировать с дизайном разных страниц было неудобно.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
<div class="case-callout__content">
<p>Даже платные тарифы не позволяли быстро менять структуру и дизайн всего сайта.</p>
</div>
</aside>
<h3>Главная стала первым экспериментом</h3>
<p class="section__prose">
Я стал искать другой способ. Сначала попробовал сгенерировать главную в нескольких LLM-сервисах. После нескольких итераций нашёл вариант, который меня устроил, сохранил проект и продолжил в Cursor. Тогда я как раз осваивал эту IDE.
</p>
<h2 id="solution">Как складывался процесс</h2>
<h3>Сначала модель помогала писать код</h3>
<h2 id="solution">Рабочий процесс без готовых макетов</h2>
<h3>Структура от меня, код от модели</h3>
<p class="section__prose">
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
</p>
@@ -145,31 +152,46 @@
Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
</p>
<h3>Макеты не были обязательным этапом</h3>
<h3>Сразу проверял в браузере</h3>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>Макеты я не готовил. Идеи проверял на работающем сайте.</p>
</div>
</aside>
<p class="section__prose">
Я не готовил заранее макеты страниц. Сайт проверял прямо в браузере: смотрел, как он ведёт себя на ноутбуке, десктопе, планшете и телефоне, затем решал, что доработать. В конструкторе тоже можно смотреть разные размеры, но путь от идеи до правки занимал больше шагов.
Я открывал сайт на ноутбуке, десктопе, планшете и телефоне, смотрел, как он ведёт себя, и решал, что доработать. В конструкторе тоже можно смотреть сайт на разных устройствах, но путь от идеи до правки занимал больше шагов.
</p>
<p class="section__prose">
В Figma и Lunacy я готовил отдельные ассеты: скриншоты приложений и сайтов для кейсов, графику, аватар и векторные иконки.
</p>
<h3>Компоненты помогали держать сайт цельным</h3>
<h3>Дизайн-система для всего сайта</h3>
<p class="section__prose">
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
</p>
<h3>Ветки Git для разных направлений</h3>
<p class="section__prose">
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
</p>
<h2 id="agents">От помощника к агенту</h2>
<h2 id="agents">Переход к агентной разработке</h2>
<h3>Cursor: от помощника к агенту</h3>
<p class="section__prose">
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE. Я стал меньше заниматься кодом и больше времени уделять творческим задачам. В этой работе я всё чаще чувствовал себя арт-директором или лидом.
Через несколько недель после того, как я начал работу над сайтом, в Cursor появилось окно агента. С этого момента я вёл работу через агента и больше не возвращался к классической IDE.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
<div class="case-callout__content">
<p>Я стал меньше заниматься кодом и больше времени уделять творческим задачам. Моя роль стала ближе к арт-директору или лиду.</p>
</div>
</aside>
<h3>Hermes Agent: гибкость и стоимость</h3>
<p class="section__prose">
Позже я начал осваивать Hermes Agent. Его можно было гибче настраивать и подключать к любому провайдеру LLM. Подписки на сам инструмент не было, поэтому разработка обходилась дешевле. Когда лимит в Cursor заканчивался, приходилось ждать следующего месяца. Это заметно мешало работе.
</p>
<h2 id="result">Сайт работает</h2>
<h2 id="result">Рабочая версия готова</h2>
<p class="section__prose">
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
</p>