Редизайн под новую Matrix-стилистику + RU/EN переключатель языка

Новая шапка (sticky, blur, мигающий курсор), нумерованные секции резюме
с полным опытом работы и новым разделом «Образование», карточки
проектов в стиле drwxr-xr-x, более яркий дождь на фоне. Добавлен
i18n-модуль (frontend/js/i18n.js) с переключателем EN/RU: резюме и
проекты полностью переведены, в игре переведены статичные подписи
интерфейса лобби и боя (данные от сервера остаются на русском).

frontend/js/projects.js

@@ -1,39 +1,84 @@
-const projects = [
-  {
-    name: 'home_automatization',
-    title: 'Home Automation Platform',
-    description:
-      'Микросервисная платформа умного дома на Go и Laravel. Первая зона — гроубокс (полив, свет, климат), дальше — весь дом.',
-    tags: ['Go', 'Laravel', 'Docker', 'RabbitMQ', 'ClickHouse', 'gRPC', 'MQTT'],
-    url: 'https://git.cactoz.su/cacto/home_automatization',
-  },
-  {
-    name: 'cactoz.su',
-    title: 'cactoz.su — этот сайт',
-    description:
-      'Личный сайт-визитка: резюме, проекты и мультиплеерный клон BattleCity. Тема — Матрица.',
-    tags: ['HTML/CSS/JS', 'C++', 'uWebSockets', 'Quintus.js', 'nginx', 'Docker'],
-    url: 'https://git.cactoz.su/cacto/cactoz.su',
-  },
-];
+import { getLang, initLangToggle } from './i18n.js';
 
-const list = document.getElementById('project-list');
+const DATA = {
+  ru: {
+    heading: 'ls projects/',
+    subheading: 'Пара вещей, которые я собрал сам, от идеи до продакшена.',
+    projects: [
+      {
+        name: 'home_automatization',
+        title: 'Home Automation Platform',
+        description:
+          'Микросервисная платформа умного дома на Go и Laravel. Первая зона — гроубокс (полив, свет, климат), дальше — весь дом.',
+        tags: ['Go', 'Laravel', 'Docker', 'RabbitMQ', 'ClickHouse', 'gRPC', 'MQTT'],
+        url: 'https://git.cactoz.su/cacto/home_automatization',
+        linkLabel: 'открыть',
+      },
+      {
+        name: 'cactoz.su',
+        title: 'cactoz.su — этот сайт',
+        description:
+          'Личный сайт-визитка: резюме, проекты и мультиплеерный клон BattleCity. Тема — Матрица.',
+        tags: ['HTML/CSS/JS', 'C++', 'uWebSockets', 'Quintus.js', 'nginx', 'Docker'],
+        url: 'https://git.cactoz.su/cacto/cactoz.su',
+        linkLabel: 'открыть',
+      },
+    ],
+  },
+  en: {
+    heading: 'ls projects/',
+    subheading: 'A couple of things I built myself, start to finish.',
+    projects: [
+      {
+        name: 'home_automatization',
+        title: 'Home Automation Platform',
+        description:
+          'A microservice smart-home platform on Go and Laravel. First zone is a grow box (watering, lighting, climate), the whole house comes next.',
+        tags: ['Go', 'Laravel', 'Docker', 'RabbitMQ', 'ClickHouse', 'gRPC', 'MQTT'],
+        url: 'https://git.cactoz.su/cacto/home_automatization',
+        linkLabel: 'open',
+      },
+      {
+        name: 'cactoz.su',
+        title: 'cactoz.su — this site',
+        description:
+          'A personal portfolio site: résumé, projects and a multiplayer BattleCity clone. Matrix theme throughout.',
+        tags: ['HTML/CSS/JS', 'C++', 'uWebSockets', 'Quintus.js', 'nginx', 'Docker'],
+        url: 'https://git.cactoz.su/cacto/cactoz.su',
+        linkLabel: 'open',
+      },
+    ],
+  },
+};
 
-if (list) {
-  list.innerHTML = projects
+function render() {
+  const t = DATA[getLang()];
+  document.title = `${t.heading} — cacto`;
+
+  const heading = document.getElementById('projects-heading');
+  const subheading = document.getElementById('projects-subheading');
+  if (heading) heading.textContent = t.heading;
+  if (subheading) subheading.textContent = t.subheading;
+
+  const list = document.getElementById('project-list');
+  if (!list) return;
+  list.innerHTML = t.projects
     .map(
       (p) => `
     <li class="project-card">
-      <div class="project-card__bar"><span></span>${p.name}/README.md</div>
+      <div class="project-card__bar"><span></span><span class="project-card__perms">drwxr-xr-x</span> ${p.name}</div>
       <div class="project-card__body">
         <h3 class="project-card__title">${p.title}</h3>
         <p class="project-card__desc">${p.description}</p>
         <ul class="tag-list">
-          ${p.tags.map((t) => `<li class="tag">${t}</li>`).join('')}
+          ${p.tags.map((tag) => `<li class="tag">${tag}</li>`).join('')}
         </ul>
-        <a class="project-card__link" href="${p.url}" target="_blank" rel="noopener">${p.url.replace('https://', '')}</a>
+        <a class="project-card__link" href="${p.url}" target="_blank" rel="noopener">${p.linkLabel}: ${p.url.replace('https://', '')}</a>
       </div>
     </li>`
     )
     .join('');
 }
+
+render();
+initLangToggle(render);