fix(html): Littel html css fix

templates/author.html

@@ -159,37 +159,93 @@
                     <div class="card-body">
                         <h3>Навыки</h3>
                         <div class="chips">
-                            <span class="chip">Linux</span>
-                            <span class="chip">Docker / Compose</span>
-                            <span class="chip">Ansible</span>
-                            <span class="chip">Terraform</span>
-                            <span class="chip">Git</span>
-                            <span class="chip">GitHub Actions</span>
-                            <span class="chip">Bash</span>
-                            <span class="chip">Python</span>
-                            <span class="chip">Kubernetes</span>
-                            <span class="chip">Argo CD</span>
-                            <span class="chip">Vim</span>
-                            <span class="chip">сеть и безопасность</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/linux.svg') }}" alt="" width="14" height="14">Linux</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/docker.svg') }}" alt="" width="14" height="14">Docker / Compose</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/ansible.svg') }}" alt="" width="14" height="14">Ansible</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/terraform.svg') }}" alt="" width="14" height="14">Terraform</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/git.svg') }}" alt="" width="14" height="14">Git</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/githubactions.svg') }}" alt="" width="14" height="14">GitHub Actions</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/bash.svg') }}" alt="" width="14" height="14">Bash</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/python.svg') }}" alt="" width="14" height="14">Python</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/kubernetes.svg') }}" alt="" width="14" height="14">Kubernetes</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/argo.svg') }}" alt="" width="14" height="14">Argo CD</span>
+                            <span class="chip"><img class="chip-icon" src="{{ url_for('static', filename='images/icons/vim.svg') }}" alt="" width="14" height="14">Vim</span>
+                            <span class="chip"><svg class="chip-icon chip-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>сеть и безопасность</span>
                         </div>
                     </div>
                 </article>
 
-                <article class="card card-wide" data-reveal>
+                <article class="card card-wide card-flyout" data-reveal tabindex="0">
                     <div class="card-icon">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
                     </div>
                     <div class="card-body">
                         <h3>Проекты</h3>
                         <ul class="list">
-                            <li><strong>Terraform</strong> — инфраструктура как код:
-                                <a class="inline-link" href="https://github.com/BlackCorbeau/final_assessment" target="_blank" rel="noopener">final_assessment</a></li>
-                            <li><strong>Argo CD</strong> — GitOps-доставка в Kubernetes:
-                                <a class="inline-link" href="https://github.com/BlackCorbeau/lab4" target="_blank" rel="noopener">lab4</a></li>
-                            <li><strong>Ansible + Docker</strong> — конфигурация серверов и контейнеризация:
-                                <a class="inline-link" href="https://git.rustprogersteam.ru/Black_Raven/MyResume" target="_blank" rel="noopener">MyResume</a></li>
+                            <li>Отказоустойчивый веб-хостинг в VK Cloud</li>
+                            <li>Мониторинг веб-инфраструктуры в VK Cloud</li>
+                            <li>CI/CD и GitOps для Kubernetes</li>
                         </ul>
                     </div>
+                    <span class="flyout-hint">наведите курсор — расскажу подробнее</span>
+
+                    <div class="flyout">
+                        <div class="flyout-inner">
+                            <div class="project">
+                                <h4 class="project-title">Отказоустойчивый веб-хостинг в VK Cloud <span class="project-year">2026</span></h4>
+                                <div class="project-stack">
+                                    <span class="stack-tag">Terraform</span>
+                                    <span class="stack-tag">Docker</span>
+                                    <span class="stack-tag">GitHub Actions</span>
+                                    <span class="stack-tag">PostgreSQL</span>
+                                    <span class="stack-tag">L7 Load Balancer</span>
+                                    <span class="stack-tag stack-role">личный проект</span>
+                                    <span class="stack-tag">GitHub</span>
+                                </div>
+                                <ul class="list project-points">
+                                    <li>Спроектировал облачную инфраструктуру: VPC с public/private-подсетями, 2 web-VM в приватном контуре, bastion и управляемую PostgreSQL; веб-доступ организовал через L7 Load Balancer.</li>
+                                    <li>Описал инфраструктуру в Terraform, настроил S3 backend для state и security groups: SSH ограничен моим IP, PostgreSQL доступна только из приватной подсети.</li>
+                                    <li>Настроил запуск Flask/Gunicorn в Docker и CI/CD в GitHub Actions с этапами plan → apply → destroy; параметры облака передаются через GitHub Secrets.</li>
+                                    <li>Проверил отказоустойчивость остановкой контейнера на одном web-сервере и нагрузочным тестом <code>ab -n 1000 -c 10</code>: 999 успешных запросов из 1000, 76.54 req/s.</li>
+                                </ul>
+                            </div>
+
+                            <div class="project">
+                                <h4 class="project-title">Мониторинг веб-инфраструктуры в VK Cloud <span class="project-year">2026</span></h4>
+                                <div class="project-stack">
+                                    <span class="stack-tag">Terraform</span>
+                                    <span class="stack-tag">Prometheus</span>
+                                    <span class="stack-tag">Grafana</span>
+                                    <span class="stack-tag">Alertmanager</span>
+                                    <span class="stack-tag">Node Exporter</span>
+                                    <span class="stack-tag">L7 Load Balancer</span>
+                                    <span class="stack-tag stack-role">личный проект</span>
+                                </div>
+                                <ul class="list project-points">
+                                    <li>Развернул через Terraform 2 web-VM в приватной подсети, bastion/monitoring-VM и L7 Load Balancer с HTTP health-check для контроля доступности сервисов.</li>
+                                    <li>Автоматизировал установку и запуск Prometheus, Grafana, Alertmanager и Node Exporter через user_data и systemd; Prometheus собирает метрики с monitoring- и web-узлов каждые 15 секунд.</li>
+                                    <li>Добавил правило алерта InstanceDown с условием недоступности узла более 5 минут и настроил сетевые правила для мониторинговых endpoints.</li>
+                                </ul>
+                            </div>
+
+                            <div class="project">
+                                <h4 class="project-title">CI/CD и GitOps для Kubernetes <span class="project-year">2026</span></h4>
+                                <div class="project-stack">
+                                    <span class="stack-tag">Terraform</span>
+                                    <span class="stack-tag">GitHub Actions</span>
+                                    <span class="stack-tag">Kubernetes</span>
+                                    <span class="stack-tag">Argo CD</span>
+                                    <span class="stack-tag">Kustomize</span>
+                                    <span class="stack-tag">GitHub</span>
+                                </div>
+                                <ul class="list project-points">
+                                    <li>Описал инфраструктуру VK Cloud и Kubernetes-ресурсы в Git: Deployment, Service, ConfigMap и Kustomize; приложение разворачивается в двух репликах.</li>
+                                    <li>Настроил GitHub Actions: validate и plan запускаются для изменений, артефакт tfplan передаётся в этап apply после успешного плана.</li>
+                                    <li>Интегрировал pipeline с GitOps-подходом: после Terraform Apply workflow получает IP балансировщика, обновляет ConfigMap и коммитит изменение обратно в Git для дальнейшей синхронизации в Kubernetes.</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
                 </article>
             </div>
         </section>

templates/main.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="srcoder.moe — личный сервер: Gitea, Matrix, Sharkey, Copyparty, Grafana и поиск 4get.">
+    <meta name="description" content="srcoder.moe — личный сервер: Gitea, Matrix, Sharkey, Copyparty, Grafana, FreshRSS и поиск 4get.">
     <title>srcoder.moe</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -53,7 +53,7 @@
             </div>
 
             <div class="hero-stats" data-reveal>
-                <div class="stat"><span class="stat-num" data-count="6">0</span><span class="stat-label">сервисов</span></div>
+                <div class="stat"><span class="stat-num" data-count="7">0</span><span class="stat-label">сервисов</span></div>
                 <div class="stat"><span class="stat-num" data-count="24">0</span><span class="stat-label">часа аптайма / 7 дней</span></div>
                 <div class="stat"><span class="stat-num" data-count="2025">0</span><span class="stat-label">год запуска</span></div>
             </div>
@@ -63,7 +63,7 @@
             <div class="section-head" data-reveal>
                 <span class="section-tag">// сервисы</span>
                 <h2 class="section-title">Что развёрнуто на сервере</h2>
-                <p class="section-desc">Шесть сервисов, закрывающих все базовые потребности — от кода до поиска.</p>
+                <p class="section-desc">Семь сервисов, закрывающих все базовые потребности — от кода до поиска.</p>
             </div>
 
             <div class="cards">
@@ -125,6 +125,18 @@
                     <span class="card-badge">мониторинг</span>
                 </article>
 
+                <article class="card" data-reveal>
+                    <img class="card-icon" src="{{ url_for('static', filename='images/freshrss.svg')}}" alt="" loading="lazy">
+                    <div class="card-body">
+                        <h3>FreshRSS</h3>
+                        <p>Самохостируемый RSS-агрегатор: собирает ленты блогов, новостных
+                           сайтов и подкастов в одну спокойную читалку — без рекламы,
+                           алгоритмов и слежки. Подписки и история чтения хранятся
+                           на моём сервере и синхронизируются с любого устройства.</p>
+                    </div>
+                    <span class="card-badge">RSS / подписки</span>
+                </article>
+
                 <article class="card card-featured" data-reveal>
                     <img class="card-icon" src="{{ url_for('static', filename='images/4get.png')}}" alt="" loading="lazy">
                     <div class="card-body">