feat: Added mobile adaptation

frontend/app/[locale]/about/page.module.css

@@ -115,4 +115,4 @@
   .sidebar {
     max-width: 100%;
   }
-}
+}

frontend/app/[locale]/about/page.tsx

@@ -62,28 +62,12 @@ export default function ResumePage() {
 
         <aside className={styles.sidebar}>
           <div className={styles.statsImages}>
-            {/* These images might look better on dark theme with a subtle filter or background */}
-            <Image src="https://www.codewars.com/users/DiametrFQ/badges/small" width={300} height={54} alt='Codewars stats' />
-            <Image src="https://streak-stats.demolab.com?user=DiametrFQ&theme=github-dark-blue&border_radius=6&card_width=300&type=png" width={300} height={150} alt="GitHub Streak" />
-            <Image src="https://github-readme-stats.vercel.app/api/top-langs/?username=DiametrFQ&layout=donut-vertical&theme=tokyonight" width={300} height={450} alt="GitHub Lengs" />
+            <Image src="https://www.codewars.com/users/DiametrFQ/badges/small" width={300} height={54} alt='Codewars stats' unoptimized/>
+            <Image src="https://streak-stats.demolab.com?user=DiametrFQ&theme=github-dark-blue&border_radius=6&card_width=300&type=png" width={300} height={150} alt="GitHub Streak" unoptimized/>
+            <Image src="https://github-readme-stats.vercel.app/api/top-langs/?username=DiametrFQ&layout=donut-vertical&theme=tokyonight" width={300} height={450} alt="GitHub Lengs" unoptimized />
           </div>
         </aside>
       </div>
-
-      <div className={styles.connect}>
-        📫 Connect with me:<br />
-        <div className={styles.socialLinks}>
-          <a href="https://t.me/diametrfq" target="_blank" rel="noopener noreferrer">
-            <Image className={styles.socialIcon} src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg" alt="Telegram link" width={40} height={40}/>
-          </a>
-          <a href="https://linkedin.com/in/diametrfq" target="_blank" rel="noopener noreferrer">
-            <Image className={styles.socialIcon} src="https://static-00.iconduck.com/assets.00/linkedin-icon-1024x1024-net2o24e.png" alt="LinkedIn link" width={40} height={40}/>
-          </a>
-          <a href="mailto:hohlov.03@inbox.ru" target="_blank" rel="noopener noreferrer">
-            <Image className={styles.socialIcon} src="https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454731_1280.png" alt="email link" width={40} height={40}/>
-          </a>
-        </div>
-      </div>
     </div>
   );
 }

frontend/app/[locale]/contact/page.tsx

@@ -6,36 +6,42 @@ import styles from './page.module.css';
 
 const contacts = [
   {
-    name: 'Telegram',
+    name: 'telegram',
     handle: '@diametrfq',
     url: 'https://t.me/diametrfq',
     iconUrl: '/logo/telegram.svg',
   },
   {
-    name: 'LinkedIn',
+    name: 'linkedin',
     handle: 'Dmitry Khokhlov',
     url: 'https://www.linkedin.com/in/diametrfq',
     iconUrl: '/logo/linkedin.svg',
   },
   {
-    name: 'GitHub',
+    name: 'github',
     handle: 'DiametrFQ',
     url: 'https://github.com/DiametrFQ',
-    iconUrl: 'https://cdn.worldvectorlogo.com/logos/github-icon-1.svg',
+    iconUrl: '/logo/github.png',
     themeBehavior: 'invertOnDark',
   },
   {
-    name: 'Email',
+    name: 'email',
     handle: 'hohlov.03@inbox.ru',
     url: 'mailto:hohlov.03@inbox.ru',
     iconUrl: '/logo/email.png',
   },
   {
-    name: 'Steam',
+    name: 'steam',
     handle: 'diametrfq',
     url: 'https://steamcommunity.com/id/diametrfq/',
     iconUrl: '/logo/steam.png',
   },
+    {
+    name: 'workEmail',
+    handle: 'diameterfq@gmail.com',
+    url: 'mailto:diameterfq@gmail.com',
+    iconUrl: '/logo/gmail.svg',
+  },
 ];
 
 export default function Contact() {
@@ -64,7 +70,7 @@ export default function Contact() {
               />
             </div>
             <div className={styles.cardContent}>
-              <h2 className={styles.cardTitle}>{contact.name}</h2>
+              <h2 className={styles.cardTitle}>{t('logoNames.'+contact.name)}</h2>
               <p className={styles.cardHandle}>{contact.handle}</p>
             </div>
           </a>

frontend/app/[locale]/telegram/components/PostList.tsx

@@ -37,7 +37,8 @@ const PostList: React.FC<{ posts: Post[] }> = ({ posts }) => {
     <div className={styles['post-list']}>
       {posts.map((post, index) => (
         <PostItem key={index} post={post} />
-      ))}\n    </div>
+      ))}
+    </div>
   );
 };
 

frontend/app/_components/Header/Header.tsx

@@ -1,14 +1,23 @@
-import Link from 'next/link.js';
+import Link from 'next/link';
 import styles from './header.module.css';
 import { ThemeSwitcher } from './_comonents/ThemeSwitcher/ThemeSwitcher';
 import { LanguageSwitcher } from './_comonents/LanguageSwitcher/LanguageSwitcher';
+import { BurgerSidebarTrigger } from '../Sidebar/components/ToggleSidebarButton';
 
 const Header = () => {
   return (
     <header className={styles.header}>
-      <Link href="/">
+      {/* Блок №1: для мобильного триггера */}
+      <div className={styles.mobileTriggerContainer}>
+        <BurgerSidebarTrigger />
+      </div>
+
+      {/* Блок №2: для логотипа */}
+      <Link href="/" className={styles.logoLink}>
         <span className={styles.logo}>DiametrFQ</span>
       </Link>
+
+      {/* Блок №3: для опций */}
       <div className={styles.options}>
         <LanguageSwitcher />
         <ThemeSwitcher />

frontend/app/_components/Header/header.module.css

@@ -1,42 +1,64 @@
+/* --- Мобильная версия (по умолчанию) --- */
 .header {
-  background-color: var(--background);
+  display: grid;
+  /* Создаем 3 колонки: левая и правая занимают равное место, центральная - по контенту */
+  grid-template-columns: 1fr auto 1fr; 
+  align-items: center;
   padding: 10px 20px;
-  display: flex;
+  background-color: var(--background);
   color: var(--foreground);
-  display: flex;
-  justify-content: space-between;
 }
 
-.logo {
-  font-size: 2rem;
-  font-weight: bold;
-  letter-spacing: 2px;
-  height: 100%;
-  display: flex;
-  align-items: center;
+/* Контейнер для бургера слева */
+.mobileTriggerContainer {
+  justify-self: start; /* Прижимаем к левому краю своей колонки */
 }
 
-@media (max-width: 420px) {
-  .logo {
-    font-size: 18px;
-  }
+/* Ссылка с логотипом по центру */
+.logoLink {
+  justify-self: center; /* Центрируем в своей колонке */
+  text-decoration: none;
+  color: inherit;
 }
 
-.menuButton {
-  border-radius: 16px;
-  border: none;
-  font-size: 2rem;
-  color: white;
-  background-color: none;
-  cursor: pointer;
-  background-color: var(--background);
-  transition: margin 700ms;
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  letter-spacing: 2px;
 }
 
+/* Контейнер с опциями справа */
 .options {
+  justify-self: end; /* Прижимаем к правому краю своей колонки */
   display: flex;
-  flex-direction: row;
   gap: 5px;
-  justify-content: center;
-  align-items: center;
+}
+
+
+/* --- Десктопная версия (для экранов шире 768px) --- */
+@media (min-width: 769px) {
+  .header {
+    /* Меняем структуру сетки! Теперь у нас 2 колонки */
+    grid-template-columns: auto 1fr;
+    gap: 1.5rem; /* Добавим отступ между лого и опциями */
+  }
+
+  /* Скрываем мобильный бургер, он не нужен на десктопе */
+  .mobileTriggerContainer {
+    display: none;
+  }
+
+  /* Теперь логотип становится первым элементом в новой сетке */
+  .logoLink {
+    justify-self: start; /* Прижимаем его к левому краю */
+  }
+
+  .logo {
+      font-size: 2rem; /* Возвращаем полный размер логотипа */
+  }
+
+  /* Опции остаются прижатыми вправо */
+  .options {
+    justify-self: end;
+  }
 }

frontend/app/_components/NowPlaying/NowPlaying.module.css

@@ -1,4 +1,3 @@
-/* Внешний контейнер. Просто держит все в углу. */
 .widgetContainer {
   position: fixed;
   bottom: 2rem;
@@ -8,7 +7,6 @@
   align-items: center;
 }
 
-/* Этот блок будет анимироваться */
 .widgetAnimator {
   display: flex;
   border-radius: 16px;
@@ -20,37 +18,29 @@
 }
 
 .widgetAnimator.hidden {
-  /* Мы не просто скрываем его, а сдвигаем, чтобы кнопка осталась на месте */
-  transform: translateX(calc(100% - 48px)); /* 48px - ширина кнопки */
+  transform: translateX(calc(100% - 48px));
 }
 
-/* Контент внутри. Добавляем отступ справа, чтобы освободить место для кнопки */
 .widgetContent {
   display: flex;
   align-items: center;
   padding: 8px;
-  /* Важно: добавляем отступ справа, равный ширине кнопки, чтобы текст не заезжал под нее */
-  padding-right: 56px; /* 48px (ширина кнопки) + 8px (зазор) */
+  padding-right: 56px;
   min-height: 72px;
 }
 
-/* --- КЛЮЧЕВЫЕ ИЗМЕНЕНИЯ ЗДЕСЬ --- */
 .toggleButton {
-  /* Возвращаем позиционирование, чтобы z-index работал */
   position: relative; 
-  /* Поднимаем кнопку над контентом */
   z-index: 2; 
 
-  /* Сдвигаем кнопку влево на ее собственную ширину, чтобы она наложилась на .widgetAnimator */
   margin-left: -48px;
 
-  /* Остальные стили для внешнего вида */
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 72px;
-  background-color: rgba(0,0,0,0.2); /* Делаем чуть темнее для контраста */
+  background-color: rgba(0,0,0,0.2);
   border: none;
   color: white;
   cursor: pointer;
@@ -75,14 +65,11 @@
   transform: rotate(180deg);
 }
 
-
-/* --- Остальные стили без изменений --- */
 .notPlaying {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 500;
-  /* Убедимся, что и этот блок имеет отступ */
   padding-right: 56px; 
 }
 
@@ -133,4 +120,25 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+@media (max-width: 768px) {
+  .widgetContainer {
+    bottom: 1rem;
+    right: 1rem;
+  }
+
+  .widgetContent {
+    min-height: 64px;
+    padding-right: 48px;
+  }
+
+  .albumArt {
+    width: 48px;
+    height: 48px;
+  }
+
+  .toggleButton {
+     height: 64px;
+  }
 }