update left container in hero

src/components/hero/hero.tsx

@@ -1,23 +1,22 @@
-import styles from "@/static/hero/hero.module.css"
+import { sociallinks } from "@/shared/config/social-links/links";
+import styles from "@/static/hero/hero.module.css";
 
 const Hero = () => {
-  return(
+  return (
     <section className={styles.hero}>
       <div className="cont-header">
         <div className={styles.left}>
-          <div className={styles.info}>
+          <h1>left</h1>
-            <p className={styles.title}>веб-разработчик</p>
-            <h1 className={styles.username}>egorov nikita</h1>
-            <p className={styles.description}>Создаю современные веб-интерфейсы с фокусом на дизайн, производительность и удобство пользователя. Люблю превращать идеи в полноценные цифровые продукты.</p>
-          </div>
         </div>
 
         <div className={styles.right}>
-          <h1>right</h1>
+          <div className={styles.visual}>
+            <span>01</span>
+          </div>
         </div>
       </div>
     </section>
-  )
+  );
 };
 
 export default Hero;

src/shared/config/navigation/navigation.ts

@@ -2,11 +2,11 @@ import type { NavigationItem } from "./types";
 
 export const navigation: NavigationItem[] = [
   {
-    label: "About me",
+    label: "Обо мне",
     href: "#about",
   },
   {
-    label: "Projects",
+    label: "Проекты",
     href: "#projects",
   },
 ];

src/shared/config/social-links/links.ts

@@ -0,0 +1,12 @@
+import type { SocialLinkItem } from "./types";
+
+export const sociallinks: SocialLinkItem[] = [
+  {
+    label: "Telegram",
+    href: "https://t.me/@autli",
+  },
+  {
+    label: "Github",
+    href: "https://github.com/autli5",
+  },
+];

src/shared/config/social-links/types.ts

@@ -0,0 +1,4 @@
+export type SocialLinkItem = {
+  label: string;
+  href: string;
+};

src/static/globals.css

@@ -1,9 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 @font-face {
   font-family: "Montserrat";
   src: url("/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
@@ -23,26 +17,6 @@
 :root {
   /* Font */
   --font-main: "Montserrat", sans-serif;
-
-  /* Colors */
-  --color-bg: #000;
-  --color-text: #fff;
-  --color-text-secondary: #999;
-  --color-text-muted: #666;
-  --color-border: #222;
-
-  /* Font sizes */
-  --fz-normal: 16px;
-  --fz-small: clamp(12px, 0.8vw, 14px);
-  --fz-description: clamp(16px, 1.25vw, 22px);
-  --fz-big: clamp(48px, 6vw, 96px);
-
-  /* Layout */
-  --container-padding: clamp(20px, 3vw, 40px);
-  --content-max-width: 720px;
-
-  /* Other */
-  --transition: 0.3s ease;
 }
 
 html,
@@ -59,8 +33,7 @@ h1, a {
 .cont-header {
   width: 100%;
   margin: 0 auto;
-    padding: 0 var(--container-padding);
+  padding: 0 var(--container-padding, 40px);
-
   display: flex;
   justify-content: space-between;
   align-items: center;

src/static/header/header.module.css

@@ -1,56 +1,342 @@
-.hero {
+.header {
-    min-height: calc(100vh - 90px);
+  position: relative;
-}
+  display: flex;
+  z-index: 1000;
 
-.hero :global(.cont-header) {
+  width: 100%;
-    min-height: calc(100vh - 90px);
+  height: 90px;
-    padding: 0;
+
-    align-items: stretch;
+  color: #fff;
-}
 
-.left,
-.right {
-    width: 49%;
   padding: var(--container-padding);
+
+  border-bottom: 1px solid #181818;
 }
 
+/* =========================
+   LOGO
+========================= */
+
 .left {
   display: flex;
   align-items: center;
 }
 
-.info {
+.logo {
+  display: inline-block;
+
+  color: #fff;
+
+  font-size: clamp(28px, 2vw, 38px);
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.06em;
+
+  text-decoration: none;
+
+  transition: opacity 0.25s ease;
+}
+
+.logo:hover {
+  opacity: 0.65;
+}
+
+
+/* =========================
+   RIGHT
+========================= */
+
+.right {
+  display: flex;
+  align-items: center;
+
+  gap: clamp(24px, 3vw, 55px);
+}
+
+
+/* =========================
+   DESKTOP NAV
+========================= */
+
+.desktopNav ul {
+  display: flex;
+  align-items: center;
+
+  gap: clamp(24px, 2.8vw, 55px);
+
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+}
+
+.desktopNav li {
+  margin: 0;
+  padding: 0;
+}
+
+.desktopNav a {
+  position: relative;
+
+  display: inline-block;
+
+  padding: 8px 0;
+
+  color: #777;
+
+  font-size: clamp(15px, 1vw, 20px);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+
+  text-decoration: none;
+
+  transition: color 0.25s ease;
+}
+
+.desktopNav a::after {
+  content: "";
+
+  position: absolute;
+  left: 0;
+  bottom: 2px;
+
+  width: 0;
+  height: 1px;
+
+  background: #fff;
+
+  transition: width 0.3s ease;
+}
+
+.desktopNav a:hover {
+  color: #fff;
+}
+
+.desktopNav a:hover::after {
   width: 100%;
 }
 
-.info .title {
-    margin-bottom: 16px;
 
-    font-size: 16px;
+/* =========================
-    font-weight: 400;
+   HAMBURGER
-    color: #888;
+========================= */
 
-    letter-spacing: 4px;
+.hamburger {
-    text-transform: uppercase;
+  display: none;
+
+  position: relative;
+
+  width: 34px;
+  height: 24px;
+
+  margin: 0;
+  padding: 0;
+
+  background: transparent;
+  border: 0;
+
+  cursor: pointer;
 }
 
-.info .username {
+.hamburger span {
-    font-size: var(--fz-big);
+  position: absolute;
-    line-height: 2;
+  left: 0;
-    color: #1a1a1a;
 
-    text-transform: uppercase;
+  width: 100%;
+  height: 2px;
+
+  border-radius: 10px;
+
+  background: #fff;
+
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
 }
 
-.info .description {
+.hamburger span:nth-child(1) {
-    max-width: 720px;
+  top: 0;
-
+}
-    margin-top: 24px;
+
-
+.hamburger span:nth-child(2) {
-    font-size: clamp(16px, 1.25vw, 22px);
+  top: 50%;
-    font-weight: 400;
+  transform: translateY(-50%);
-    line-height: 1.55;
+}
-    letter-spacing: -0.01em;
+
-
+.hamburger span:nth-child(3) {
-    color: #999;
+  bottom: 0;
+}
+
+
+/* =========================
+   MOBILE MENU
+========================= */
+
+.mobileMenu {
+  position: fixed;
+  top: 90px;
+  right: 0;
+
+  width: 100%;
+  height: calc(100vh - 90px);
+
+  padding: 60px var(--container-padding);
+
+  background: #000;
+
+  transform: translateX(100%);
+
+  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
+
+  overflow-y: auto;
+}
+
+.mobileMenu.active {
+  transform: translateX(0);
+}
+
+.mobileMenu ul {
+  display: flex;
+  flex-direction: column;
+
+  gap: 30px;
+
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+}
+
+.mobileMenu li {
+  margin: 0;
+  padding: 0;
+}
+
+.mobileMenu a {
+  display: inline-block;
+
+  color: #fff;
+
+  font-size: clamp(30px, 6vw, 52px);
+  line-height: 1;
+
+  font-weight: 600;
+  letter-spacing: -0.04em;
+
+  text-decoration: none;
+
+  transition: color 0.25s ease;
+}
+
+.mobileMenu a:hover {
+  color: #777;
+}
+
+
+/* =========================
+   LARGE SCREENS
+========================= */
+
+@media (min-width: 1600px) {
+  .header {
+    height: 110px;
+  }
+
+  .logo {
+    font-size: 42px;
+  }
+
+  .desktopNav a {
+    font-size: 20px;
+  }
+
+  .desktopNav ul {
+    gap: 50px;
+  }
+}
+
+
+/* =========================
+   TABLET
+========================= */
+
+@media (max-width: 1024px) {
+  .header {
+    height: 80px;
+  }
+
+  .logo {
+    font-size: 28px;
+  }
+
+  .desktopNav ul {
+    gap: 24px;
+  }
+
+  .desktopNav a {
+    font-size: 15px;
+  }
+}
+
+
+/* =========================
+   MOBILE
+========================= */
+
+@media (max-width: 768px) {
+  .header {
+    height: 70px;
+  }
+
+  .desktopNav {
+    display: none;
+  }
+
+  .hamburger {
+    display: block;
+  }
+
+  .mobileMenu {
+    top: 70px;
+    height: calc(100vh - 70px);
+  }
+
+  .right {
+    gap: 0;
+  }
+}
+
+
+/* =========================
+   SMALL MOBILE
+========================= */
+
+@media (max-width: 480px) {
+  .header {
+    height: 64px;
+  }
+
+  .logo {
+    font-size: 25px;
+  }
+
+  .hamburger {
+    width: 29px;
+    height: 21px;
+  }
+
+  .mobileMenu {
+    top: 64px;
+    height: calc(100vh - 64px);
+
+    padding-top: 45px;
+  }
+
+  .mobileMenu ul {
+    gap: 26px;
+  }
+
+  .mobileMenu a {
+    font-size: 32px;
+  }
 }

src/static/hero/hero.module.css

@@ -1,57 +1,10 @@
 .hero {
-    min-height: calc(100vh - 90px);
+    background-color: aquamarine;
+    height: calc(100vh - 90px);
 }
 
-.hero :global(.cont-header) {
-    min-height: calc(100vh - 90px);
-    padding: 0;
-    align-items: stretch;
-}
-
-.left,
 .right {
-    padding: var(--container-padding);
     width: 49%;
-}
+    height: 90vh;
-
+    background-color: red;
-.left {
-    display: flex;
-    align-items: center;
-
-}
-
-.info {
-    width: 100%;
-}
-
-.info .title {
-    margin-bottom: 16px;
-
-    font-size: var(--fz-small);
-    font-weight: 400;
-    color: var(--color-text-muted);
-
-    letter-spacing: 4px;
-    text-transform: uppercase;
-}
-
-.info .username {
-    font-size: var(--fz-big);
-    line-height: 2;
-    color: #1a1a1a;
-
-    text-transform: uppercase;
-}
-
-.info .description {
-    max-width: var(--content-max-width);
-
-    margin-top: 24px;
-
-    font-size: var(--fz-description);
-    font-weight: 400;
-    line-height: 1.55;
-    letter-spacing: -0.01em;
-
-    color: var(--color-text-secondary);
 }

src/widgets/header/ui/Header.tsx

@@ -5,32 +5,50 @@ const Header = () => {
   return (
     <header className={styles.header}>
       <div className="cont-header">
-        {/* LEFT */}
         <div className={styles.left}>
-          <a href="/">
+          <a href="/" className={styles.logo}>
-            <h1>Autli</h1>
+            Autli
           </a>
         </div>
 
-        {/* RIGHT */}
         <div className={styles.right}>
-          {/* Десктопное меню */}
+          <nav className={styles.desktopNav} aria-label="Основная навигация">
-          <nav className={styles["desktop-nav"]}>
             <ul>
               {navigation.map((item) => (
                 <li key={item.href}>
-                  <a href={item.href}>{item.label}</a>
+                  <a href={item.href}>
+                    {item.label}
+                  </a>
                 </li>
               ))}
             </ul>
           </nav>
 
+          {/* Переключатель языка */}
+          <a
+            href="/en/"
+            className={styles["language-toggle"]}
+            aria-label="Переключить язык"
+          >
+            EN
+          </a>
+
+          {/* Переключатель темы */}
+          <button
+            className={styles["theme-toggle"]}
+            id="theme-toggle"
+            type="button"
+            aria-label="Переключить тему"
+          >
+            <span className={styles["theme-icon"]}>☾</span>
+          </button>
+
           {/* Гамбургер */}
           <button
             className={styles.hamburger}
-            id="hamburger"
             type="button"
             aria-label="Открыть меню"
+            aria-expanded="false"
           >
             <span />
             <span />
@@ -39,12 +57,13 @@ const Header = () => {
         </div>
       </div>
 
-      {/* Мобильное меню */}
+      <nav className={styles.mobileMenu} aria-label="Мобильная навигация">
-      <nav className={styles["mobile-menu"]}>
         <ul>
           {navigation.map((item) => (
             <li key={item.href}>
-              <a href={item.href}>{item.label}</a>
+              <a href={item.href}>
+                {item.label}
+              </a>
             </li>
           ))}
         </ul>