Merge remote-tracking branch 'origin/dev' into deploy/site-portfolio-main
This commit is contained in:
root committed
commit
cd118c534f
17 files changed
+687
-359
No files matched your search
@@ -609,10 +609,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="../site-with-ai-ide/"
|
||||
href="../site-portfolio/"
|
||||
aria-label="Этот сайт — открыть кейс"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
@@ -855,10 +855,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="../site-with-ai-ide/"
|
||||
href="../site-portfolio/"
|
||||
aria-label="Этот сайт — открыть кейс"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
+118
-36
@@ -5,9 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Кейс: Этот сайт — разработка с использованием AI IDE."
|
||||
content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent."
|
||||
/>
|
||||
<title>Этот сайт — Разработка с AI IDE — кейс</title>
|
||||
<title>Как я создаю сайт-портфолио с LLM-агентами</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
@@ -99,10 +99,10 @@
|
||||
<link rel="modulepreload" href="/js/main.js" />
|
||||
<link rel="modulepreload" href="/js/modules/ui/page-mesh-shader.js" />
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
<link rel="canonical" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<link rel="canonical" href="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-portfolio/" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<meta name="author" content="Николай Мамадаев" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="theme-color" content="#0f1115" />
|
||||
@@ -112,20 +112,20 @@
|
||||
<meta property="og:site_name" content="Николай Мамадаев — продуктовый дизайнер" />
|
||||
<meta property="og:locale" content="ru_RU" />
|
||||
<meta property="og:locale:alternate" content="en_US" />
|
||||
<meta property="og:title" content="Этот сайт — Разработка с AI IDE — кейс" />
|
||||
<meta property="og:description" content="Кейс: Этот сайт — разработка с использованием AI IDE." />
|
||||
<meta property="og:url" content="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<meta property="og:title" content="Как я создаю сайт-портфолио с LLM-агентами" />
|
||||
<meta property="og:description" content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent." />
|
||||
<meta property="og:url" content="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:image:alt" content="Этот сайт — Разработка с AI IDE — кейс" />
|
||||
<meta property="og:image:alt" content="Как я создаю сайт-портфолио с LLM-агентами" />
|
||||
|
||||
<!-- Twitter / X -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Этот сайт — Разработка с AI IDE — кейс" />
|
||||
<meta name="twitter:description" content="Кейс: Этот сайт — разработка с использованием AI IDE." />
|
||||
<meta name="twitter:title" content="Как я создаю сайт-портфолио с LLM-агентами" />
|
||||
<meta name="twitter:description" content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent." />
|
||||
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||||
<meta name="twitter:image:alt" content="Этот сайт — Разработка с AI IDE — кейс" />
|
||||
<meta name="twitter:image:alt" content="Как я создаю сайт-портфолио с LLM-агентами" />
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -167,10 +167,10 @@
|
||||
},
|
||||
{
|
||||
"@type": "CreativeWork",
|
||||
"@id": "https://mamadaevv.site/cases/site-with-ai-ide/#page",
|
||||
"url": "https://mamadaevv.site/cases/site-with-ai-ide/",
|
||||
"name": "Этот сайт — Разработка с AI IDE — кейс",
|
||||
"description": "Кейс: Этот сайт — разработка с использованием AI IDE.",
|
||||
"@id": "https://mamadaevv.site/cases/site-portfolio/#page",
|
||||
"url": "https://mamadaevv.site/cases/site-portfolio/",
|
||||
"name": "Как я создаю сайт-портфолио с LLM-агентами",
|
||||
"description": "Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent.",
|
||||
"isPartOf": {
|
||||
"@id": "https://mamadaevv.site/#website"
|
||||
},
|
||||
@@ -181,12 +181,12 @@
|
||||
"creator": {
|
||||
"@id": "https://mamadaevv.site/#person"
|
||||
},
|
||||
"datePublished": "2026-09-24",
|
||||
"datePublished": "2026-09-28",
|
||||
"about": "UX/UI-дизайн и проектирование интерфейсов"
|
||||
},
|
||||
{
|
||||
"@type": "BreadcrumbList",
|
||||
"@id": "https://mamadaevv.site/cases/site-with-ai-ide/#breadcrumbs",
|
||||
"@id": "https://mamadaevv.site/cases/site-portfolio/#breadcrumbs",
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
@@ -203,8 +203,8 @@
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 3,
|
||||
"name": "Этот сайт — Разработка с AI IDE — кейс",
|
||||
"item": "https://mamadaevv.site/cases/site-with-ai-ide/"
|
||||
"name": "Как я создаю сайт-портфолио с LLM-агентами",
|
||||
"item": "https://mamadaevv.site/cases/site-portfolio/"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -223,6 +223,28 @@
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.case-article .case-brief {
|
||||
list-style: none;
|
||||
margin: 1.5rem 0 0;
|
||||
padding: 1rem 1.1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
gap: 0.85rem 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.case-article .case-brief li {
|
||||
margin: 0;
|
||||
}
|
||||
.case-article .case-brief span {
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.case-article h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
@@ -289,7 +311,7 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-with-ai-ide">
|
||||
<body data-current-case="site-portfolio">
|
||||
<svg class="liquid-glass-defs" aria-hidden="true" width="0" height="0" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none">
|
||||
<filter id="liquid-glass-displacement" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
|
||||
<feImage href="../../assets/liquid-glass/displacement.png" xlink:href="../../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMap"/>
|
||||
@@ -399,32 +421,92 @@
|
||||
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Разработка · AI IDE</p>
|
||||
<h1 class="case-page__h1">Этот сайт</h1>
|
||||
<p class="case-page__sub">Разработка сайта с использованием AI IDE</p>
|
||||
<p class="hero__eyebrow">Личный опыт · LLM и веб-разработка</p>
|
||||
<h1 class="case-page__h1">Как я создаю сайт-портфолио с LLM</h1>
|
||||
<p class="case-page__sub">От ограничений конструкторов до работы с Cursor и Hermes Agent</p>
|
||||
|
||||
<p class="section__prose">
|
||||
<!-- Здесь будет введение -->
|
||||
Мне нужен был актуальный сайт с работами и резюме. Здесь я рассказываю, как создавал его с помощью LLM, пробовал разные инструменты и менял собственный процесс.
|
||||
</p>
|
||||
|
||||
<h2 id="context">Контекст</h2>
|
||||
<ul class="case-brief">
|
||||
<li><span>Формат</span>Личный проект</li>
|
||||
<li><span>Моя роль</span>Задаю направление, структуру и принимаю результат</li>
|
||||
<li><span>Инструменты</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
|
||||
<li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
<h2 id="solution">Рабочий процесс без готовых макетов</h2>
|
||||
<h3>Структура от меня, код от модели</h3>
|
||||
<p class="section__prose">
|
||||
<!-- Что было сделано -->
|
||||
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
|
||||
</p>
|
||||
|
||||
<h2 id="result">Результат</h2>
|
||||
<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>
|
||||
<p class="section__prose">
|
||||
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
|
||||
</p>
|
||||
<h3>Ветки Git для разных направлений</h3>
|
||||
<p class="section__prose">
|
||||
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
|
||||
</p>
|
||||
|
||||
<h2 id="agents">Переход к агентной разработке</h2>
|
||||
<h3>Cursor: от помощника к агенту</h3>
|
||||
<p class="section__prose">
|
||||
Через несколько недель после того, как я начал работу над сайтом, в 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>
|
||||
<p class="section__prose">
|
||||
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
@@ -463,10 +545,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="../site-with-ai-ide/"
|
||||
href="../site-portfolio/"
|
||||
aria-label="Этот сайт — открыть кейс"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
@@ -610,10 +610,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="../site-with-ai-ide/"
|
||||
href="../site-portfolio/"
|
||||
aria-label="This website — Open a Case"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
@@ -859,10 +859,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="../site-with-ai-ide/"
|
||||
href="../site-portfolio/"
|
||||
aria-label="This website — Open a Case"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
+118
-36
@@ -5,9 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Case Study: This website was developed using an AI IDE."
|
||||
content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent."
|
||||
/>
|
||||
<title>This Website — Developed with AI IDE — Case Study</title>
|
||||
<title>Building My Portfolio Website with LLM Agents</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
@@ -99,10 +99,10 @@
|
||||
<link rel="modulepreload" href="/js/main.js" />
|
||||
<link rel="modulepreload" href="/js/modules/ui/page-mesh-shader.js" />
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
<link rel="canonical" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
|
||||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<link rel="canonical" href="https://mamadaevv.site/en/cases/site-portfolio/" />
|
||||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-portfolio/" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<meta name="author" content="Nikolai Mamadaev" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="theme-color" content="#0f1115" />
|
||||
@@ -112,20 +112,20 @@
|
||||
<meta property="og:site_name" content="Nikolai Mamadaev — Product Designer" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:locale:alternate" content="ru_RU" />
|
||||
<meta property="og:title" content="This Website — Developed with AI IDE — Case Study" />
|
||||
<meta property="og:description" content="Case Study: This website was developed using an AI IDE." />
|
||||
<meta property="og:url" content="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
|
||||
<meta property="og:title" content="Building My Portfolio Website with LLM Agents" />
|
||||
<meta property="og:description" content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent." />
|
||||
<meta property="og:url" content="https://mamadaevv.site/en/cases/site-portfolio/" />
|
||||
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:image:alt" content="This Website — Developed with AI IDE — Case Study" />
|
||||
<meta property="og:image:alt" content="Building My Portfolio Website with LLM Agents" />
|
||||
|
||||
<!-- Twitter / X -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="This Website — Developed with AI IDE — Case Study" />
|
||||
<meta name="twitter:description" content="Case Study: This website was developed using an AI IDE." />
|
||||
<meta name="twitter:title" content="Building My Portfolio Website with LLM Agents" />
|
||||
<meta name="twitter:description" content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent." />
|
||||
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||||
<meta name="twitter:image:alt" content="This Website — Developed with AI IDE — Case Study" />
|
||||
<meta name="twitter:image:alt" content="Building My Portfolio Website with LLM Agents" />
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -167,10 +167,10 @@
|
||||
},
|
||||
{
|
||||
"@type": "CreativeWork",
|
||||
"@id": "https://mamadaevv.site/en/cases/site-with-ai-ide/#page",
|
||||
"url": "https://mamadaevv.site/en/cases/site-with-ai-ide/",
|
||||
"name": "This Website — Developed with AI IDE — Case Study",
|
||||
"description": "Case Study: This website was developed using an AI IDE.",
|
||||
"@id": "https://mamadaevv.site/en/cases/site-portfolio/#page",
|
||||
"url": "https://mamadaevv.site/en/cases/site-portfolio/",
|
||||
"name": "Building My Portfolio Website with LLM Agents",
|
||||
"description": "My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent.",
|
||||
"isPartOf": {
|
||||
"@id": "https://mamadaevv.site/#website"
|
||||
},
|
||||
@@ -181,12 +181,12 @@
|
||||
"creator": {
|
||||
"@id": "https://mamadaevv.site/#person"
|
||||
},
|
||||
"datePublished": "2026-09-24",
|
||||
"datePublished": "2026-09-28",
|
||||
"about": "UX/UI design and interface design"
|
||||
},
|
||||
{
|
||||
"@type": "BreadcrumbList",
|
||||
"@id": "https://mamadaevv.site/en/cases/site-with-ai-ide/#breadcrumbs",
|
||||
"@id": "https://mamadaevv.site/en/cases/site-portfolio/#breadcrumbs",
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
@@ -203,8 +203,8 @@
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 3,
|
||||
"name": "This Website — Developed with AI IDE — Case Study",
|
||||
"item": "https://mamadaevv.site/cases/site-with-ai-ide/"
|
||||
"name": "Building My Portfolio Website with LLM Agents",
|
||||
"item": "https://mamadaevv.site/cases/site-portfolio/"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -223,6 +223,28 @@
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.case-article .case-brief {
|
||||
list-style: none;
|
||||
margin: 1.5rem 0 0;
|
||||
padding: 1rem 1.1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
gap: 0.85rem 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.case-article .case-brief li {
|
||||
margin: 0;
|
||||
}
|
||||
.case-article .case-brief span {
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.case-article h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
@@ -289,7 +311,7 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-with-ai-ide">
|
||||
<body data-current-case="site-portfolio">
|
||||
<svg class="liquid-glass-defs" aria-hidden="true" width="0" height="0" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none">
|
||||
<filter id="liquid-glass-displacement" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
|
||||
<feImage href="../../../assets/liquid-glass/displacement.png" xlink:href="../../../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMap"/>
|
||||
@@ -399,32 +421,92 @@
|
||||
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Development · AI IDE</p>
|
||||
<h1 class="case-page__h1">This website</h1>
|
||||
<p class="case-page__sub">Website Development Using AI IDE</p>
|
||||
<p class="hero__eyebrow">Personal experience · LLM and web development</p>
|
||||
<h1 class="case-page__h1">Building My Portfolio Website with LLMs</h1>
|
||||
<p class="case-page__sub">From no-code limitations to working with Cursor and Hermes Agent</p>
|
||||
|
||||
<p class="section__prose">
|
||||
<!-- Здесь будет введение -->
|
||||
I needed an up-to-date website for my work and résumé. This case follows my experience working with LLMs on the site: how I explored different tools and changed my process.
|
||||
</p>
|
||||
|
||||
<h2 id="context">Context</h2>
|
||||
<ul class="case-brief">
|
||||
<li><span>Format</span>Personal project</li>
|
||||
<li><span>My role</span>Set the direction and structure, review the result</li>
|
||||
<li><span>Tools</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
|
||||
<li><span>Status</span>Site works; content and promotion are next</li>
|
||||
</ul>
|
||||
|
||||
<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">Task</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.
|
||||
</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">Solution</h2>
|
||||
<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>
|
||||
<p class="section__prose">
|
||||
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>
|
||||
|
||||
<h2 id="result">Result</h2>
|
||||
<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 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">
|
||||
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>
|
||||
<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 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">Moving to agent-driven development</h2>
|
||||
<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.
|
||||
</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 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 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>
|
||||
</div>
|
||||
</main>
|
||||
@@ -463,10 +545,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="../site-with-ai-ide/"
|
||||
href="../site-portfolio/"
|
||||
aria-label="This website — Open a Case"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
@@ -864,7 +864,7 @@
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="cases/site-with-ai-ide/"
|
||||
href="cases/site-portfolio/"
|
||||
aria-label="This site — open case"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
+1
-1
@@ -871,7 +871,7 @@
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="cases/site-with-ai-ide/"
|
||||
href="cases/site-portfolio/"
|
||||
aria-label="Этот сайт — открыть кейс"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
+5
-5
@@ -72,11 +72,11 @@
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/orc-automation-panel/" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://mamadaevv.site/cases/site-with-ai-ide/</loc>
|
||||
<lastmod>2026-09-24</lastmod>
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<xhtml:link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-with-ai-ide/" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-with-ai-ide/" />
|
||||
<loc>https://mamadaevv.site/cases/site-portfolio/</loc>
|
||||
<lastmod>2026-09-28</lastmod>
|
||||
<xhtml:link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<xhtml:link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/site-portfolio/" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/site-portfolio/" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://mamadaevv.site/cases/task-distribution-concept/</loc>
|
||||
|
||||
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark" data-radius="medium" data-font="merriweather">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="My experience building a portfolio website with LLMs and agents, from no-code platforms to Cursor and Hermes Agent."
|
||||
/>
|
||||
<title>Building My Portfolio Website with LLM Agents</title>
|
||||
{{> head-links}}
|
||||
{{> head-plyr}}
|
||||
<style>
|
||||
.case-article {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.case-article .case-brief {
|
||||
list-style: none;
|
||||
margin: 1.5rem 0 0;
|
||||
padding: 1rem 1.1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
gap: 0.85rem 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.case-article .case-brief li {
|
||||
margin: 0;
|
||||
}
|
||||
.case-article .case-brief span {
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.case-article h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article h3 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article .section__prose {
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article a:not(.btn) {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f === "merriweather" || f === "mono" || f === "geologica") {
|
||||
d.dataset.font = f;
|
||||
} else {
|
||||
d.dataset.font = "merriweather";
|
||||
}
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-portfolio">
|
||||
{{> header-case}}
|
||||
{{> fab-stack}}
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Personal experience · LLM and web development</p>
|
||||
<h1 class="case-page__h1">Building My Portfolio Website with LLMs</h1>
|
||||
<p class="case-page__sub">From no-code limitations to working with Cursor and Hermes Agent</p>
|
||||
|
||||
<p class="section__prose">
|
||||
I needed an up-to-date website for my work and résumé. This case follows my experience working with LLMs on the site: how I explored different tools and changed my process.
|
||||
</p>
|
||||
|
||||
<ul class="case-brief">
|
||||
<li><span>Format</span>Personal project</li>
|
||||
<li><span>My role</span>Set the direction and structure, review the result</li>
|
||||
<li><span>Tools</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
|
||||
<li><span>Status</span>Site works; content and promotion are next</li>
|
||||
</ul>
|
||||
|
||||
<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">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.
|
||||
</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">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>
|
||||
<p class="section__prose">
|
||||
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>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 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">
|
||||
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>
|
||||
<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 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">Moving to agent-driven development</h2>
|
||||
<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.
|
||||
</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 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 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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{> mini-projects-related}}
|
||||
{{> contact-section}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
var s=document.body.dataset.currentCase;
|
||||
if(!s)return;
|
||||
document.querySelectorAll('[data-related-slug="'+s+'"]').forEach(function(el){el.hidden=true;});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Личный опыт работы с LLM и агентами на примере сайта-портфолио: от no-code-конструкторов до разработки в Cursor и Hermes Agent."
|
||||
/>
|
||||
<title>Как я создаю сайт-портфолио с LLM-агентами</title>
|
||||
{{> head-links}}
|
||||
{{> head-plyr}}
|
||||
<style>
|
||||
.case-article {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.case-article .case-brief {
|
||||
list-style: none;
|
||||
margin: 1.5rem 0 0;
|
||||
padding: 1rem 1.1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
gap: 0.85rem 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.case-article .case-brief li {
|
||||
margin: 0;
|
||||
}
|
||||
.case-article .case-brief span {
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.case-article h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article h3 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article .section__prose {
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article a:not(.btn) {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f === "merriweather" || f === "mono" || f === "geologica") {
|
||||
d.dataset.font = f;
|
||||
} else {
|
||||
d.dataset.font = "merriweather";
|
||||
}
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-portfolio">
|
||||
{{> header-case}}
|
||||
{{> fab-stack}}
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Личный опыт · LLM и веб-разработка</p>
|
||||
<h1 class="case-page__h1">Как я создаю сайт-портфолио с LLM</h1>
|
||||
<p class="case-page__sub">От ограничений конструкторов до работы с Cursor и Hermes Agent</p>
|
||||
|
||||
<p class="section__prose">
|
||||
Мне нужен был актуальный сайт с работами и резюме. Здесь я рассказываю, как создавал его с помощью LLM, пробовал разные инструменты и менял собственный процесс.
|
||||
</p>
|
||||
|
||||
<ul class="case-brief">
|
||||
<li><span>Формат</span>Личный проект</li>
|
||||
<li><span>Моя роль</span>Задаю направление, структуру и принимаю результат</li>
|
||||
<li><span>Инструменты</span>Cursor, Hermes Agent, HTML/CSS, Figma, Lunacy</li>
|
||||
<li><span>Статус</span>Сайт работает; контент и продвижение впереди</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="context">Актуальный сайт-портфолио</h2>
|
||||
<p class="section__prose">
|
||||
Актуального сайта с моими работами и резюме у меня не было. Я умел верстать вручную на HTML и CSS, а ещё много работал с конструкторами вроде Weebly и Tilda. Поэтому первые версии начал собирать в конструкторе.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<p class="section__prose">
|
||||
Когда я только начал работать в Cursor, там был лишь помощник по коду. Я писал запросы, модель создавала файлы и код. Я проверял результат и подтверждал его. Структуру страниц продумывал сам.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Дизайн появлялся постепенно и продолжает меняться. Я описывал модели стиль сайта и нужные элементы, искал референсы с готовыми блоками кода и соединял их со своими решениями.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<p class="section__prose">
|
||||
Практически с самого начала я закладывал дизайн-систему и общие компоненты. Так страницы выглядели согласованно, а изменения было проще вносить сразу в нужный элемент. Без этого пришлось бы вручную обходить страницы и обновлять каждый экземпляр отдельно.
|
||||
</p>
|
||||
<h3>Ветки Git для разных направлений</h3>
|
||||
<p class="section__prose">
|
||||
Версионирование и ветки Git позволяли мне пробовать разные направления развития сайта. Я описывал, что хочу получить, проверял работу агента и либо шёл дальше, либо просил переделать.
|
||||
</p>
|
||||
|
||||
<h2 id="agents">Переход к агентной разработке</h2>
|
||||
<h3>Cursor: от помощника к агенту</h3>
|
||||
<p class="section__prose">
|
||||
Через несколько недель после того, как я начал работу над сайтом, в 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>
|
||||
<p class="section__prose">
|
||||
Сейчас сайт полностью работает. Дальше планирую заняться контентом и продвижением.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{> mini-projects-related}}
|
||||
{{> contact-section}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
var s=document.body.dataset.currentCase;
|
||||
if(!s)return;
|
||||
document.querySelectorAll('[data-related-slug="'+s+'"]').forEach(function(el){el.hidden=true;});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,133 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Case Study: This website was developed using an AI IDE."
|
||||
/>
|
||||
<title>This Website — Developed with AI IDE — Case Study</title>
|
||||
{{> head-links}}
|
||||
{{> head-plyr}}
|
||||
<style>
|
||||
.case-article {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.case-article h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article h3 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article .section__prose {
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article a:not(.btn) {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f === "merriweather" || f === "mono" || f === "geologica") {
|
||||
d.dataset.font = f;
|
||||
} else {
|
||||
d.dataset.font = "merriweather";
|
||||
}
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-with-ai-ide">
|
||||
{{> header-case}}
|
||||
{{> fab-stack}}
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Development · AI IDE</p>
|
||||
<h1 class="case-page__h1">This website</h1>
|
||||
<p class="case-page__sub">Website Development Using AI IDE</p>
|
||||
|
||||
<p class="section__prose">
|
||||
<!-- Здесь будет введение -->
|
||||
</p>
|
||||
|
||||
<h2 id="context">Context</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Контекст проекта -->
|
||||
</p>
|
||||
|
||||
<h2 id="task">Task</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Описание задачи -->
|
||||
</p>
|
||||
|
||||
<h2 id="solution">Solution</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Что было сделано -->
|
||||
</p>
|
||||
|
||||
<h2 id="result">Result</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Итоги -->
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{> mini-projects-related}}
|
||||
{{> contact-section}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
var s=document.body.dataset.currentCase;
|
||||
if(!s)return;
|
||||
document.querySelectorAll('[data-related-slug="'+s+'"]').forEach(function(el){el.hidden=true;});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,133 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Кейс: Этот сайт — разработка с использованием AI IDE."
|
||||
/>
|
||||
<title>Этот сайт — Разработка с AI IDE — кейс</title>
|
||||
{{> head-links}}
|
||||
{{> head-plyr}}
|
||||
<style>
|
||||
.case-article {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.case-article h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article h3 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article .section__prose {
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.case-article a:not(.btn) {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f === "merriweather" || f === "mono" || f === "geologica") {
|
||||
d.dataset.font = f;
|
||||
} else {
|
||||
d.dataset.font = "merriweather";
|
||||
}
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-with-ai-ide">
|
||||
{{> header-case}}
|
||||
{{> fab-stack}}
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
<p class="hero__eyebrow">Разработка · AI IDE</p>
|
||||
<h1 class="case-page__h1">Этот сайт</h1>
|
||||
<p class="case-page__sub">Разработка сайта с использованием AI IDE</p>
|
||||
|
||||
<p class="section__prose">
|
||||
<!-- Здесь будет введение -->
|
||||
</p>
|
||||
|
||||
<h2 id="context">Контекст</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Контекст проекта -->
|
||||
</p>
|
||||
|
||||
<h2 id="task">Задача</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Описание задачи -->
|
||||
</p>
|
||||
|
||||
<h2 id="solution">Решение</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Что было сделано -->
|
||||
</p>
|
||||
|
||||
<h2 id="result">Результат</h2>
|
||||
<p class="section__prose">
|
||||
<!-- Итоги -->
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{> mini-projects-related}}
|
||||
{{> contact-section}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
var s=document.body.dataset.currentCase;
|
||||
if(!s)return;
|
||||
document.querySelectorAll('[data-related-slug="'+s+'"]').forEach(function(el){el.hidden=true;});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -32,10 +32,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="{{casesPrefix}}site-with-ai-ide/"
|
||||
href="{{casesPrefix}}site-portfolio/"
|
||||
aria-label="This website — Open a Case"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
@@ -32,10 +32,10 @@
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-with-ai-ide">
|
||||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="site-portfolio">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="{{casesPrefix}}site-with-ai-ide/"
|
||||
href="{{casesPrefix}}site-portfolio/"
|
||||
aria-label="Этот сайт — открыть кейс"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="cases/site-with-ai-ide/"
|
||||
href="cases/site-portfolio/"
|
||||
aria-label="This site — open case"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2">
|
||||
<a
|
||||
class="mp-card mp-card--link mp-card--compact"
|
||||
href="cases/site-with-ai-ide/"
|
||||
href="cases/site-portfolio/"
|
||||
aria-label="Этот сайт — открыть кейс"
|
||||
>
|
||||
<div class="mp-card__body">
|
||||
|
||||
Reference in new issue
Block a user