diff --git a/src/app/globals.css b/src/app/globals.css deleted file mode 100644 index a2dc41e..0000000 --- a/src/app/globals.css +++ /dev/null @@ -1,26 +0,0 @@ -@import "tailwindcss"; - -:root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e73a2e6..21f4601 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,6 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; +import "@/static/globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx index 7e14e2f..59ac89c 100644 --- a/src/components/hero/hero.tsx +++ b/src/components/hero/hero.tsx @@ -5,8 +5,13 @@ const Hero = () => {
-

left

+
+

веб-разработчик

+

egorov nikita

+

Создаю современные веб-интерфейсы с фокусом на дизайн, производительность и удобство пользователя. Люблю превращать идеи в полноценные цифровые продукты.

+
+

right

diff --git a/src/static/globals.css b/src/static/globals.css index bd49048..36a28dc 100644 --- a/src/static/globals.css +++ b/src/static/globals.css @@ -1,3 +1,9 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype"); @@ -15,23 +21,47 @@ } :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, body { font-family: var(--font-main); + background-color: var(--color-bg); + color: var(--color-text); + font-size: var(--fz-normal); } - h1, a { - color: #fff; + color: #fff; } .cont-header { - width: 100%; - margin: 0 auto; - padding: 0 var(--container-padding, 40px); - display: flex; - justify-content: space-between; - align-items: center; -} + width: 100%; + margin: 0 auto; + padding: 0 var(--container-padding); + + display: flex; + justify-content: space-between; + align-items: center; +} \ No newline at end of file diff --git a/src/static/header/header.module.css b/src/static/header/header.module.css index 54e6ad1..1b34b51 100644 --- a/src/static/header/header.module.css +++ b/src/static/header/header.module.css @@ -1,256 +1,56 @@ -.header { - top: 0; - left: 0; - width: 100%; - height: 90px; - display: flex; - align-items: center; - z-index: 9999; - background: var(--background); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border-bottom: 1px solid var(--border); +.hero { + min-height: calc(100vh - 90px); } -/* LEFT */ - -.left a { - text-decoration: none; +.hero :global(.cont-header) { + min-height: calc(100vh - 90px); + padding: 0; + align-items: stretch; } -.left h1 { - color: var(--text-primary); - font-size: 28px; - font-weight: 700; - margin: 0; -} - -/* RIGHT */ - +.left, .right { - display: flex; - align-items: center; - gap: 20px; + width: 49%; + padding: var(--container-padding); } -/* Десктопное меню */ - -.desktop-nav ul { - list-style: none; - display: flex; - align-items: center; - gap: clamp(20px, 2.5vw, 40px); - margin: 0; - padding: 0; -} - -.desktop-nav li { - list-style: none; -} - -.desktop-nav li a { - text-decoration: none; - font-weight: 500; - font-size: 18px; - padding: 8px 12px; - border-radius: 6px; - transition: all 0.3s ease; - color: var(--text-primary); -} - -.desktop-nav li a:hover { - transform: translateY(-2px); -} - -/* Переключатель языка */ - -.language-toggle { - color: var(--text-primary); - text-decoration: none; - font-weight: 500; - transition: all 0.3s ease; -} - -.language-toggle:hover { - transform: translateY(-2px); -} - -/* Theme Toggle */ - -.theme-toggle { - width: 42px; - height: 42px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - background: rgba(255, 255, 255, 0.05); - border: 1px solid var(--border); - color: var(--text-primary); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - transition: all 0.3s ease; - cursor: pointer; -} - -.theme-toggle:hover { - background: rgba(255, 255, 255, 0.12); - border-color: rgba(255, 255, 255, 0.3); -} - -.theme-icon { - font-size: 20px; - transition: transform 0.4s ease; -} - -.theme-toggle:hover .theme-icon { - transform: rotate(30deg); -} - -/* Гамбургер */ - -.hamburger { - display: none; - flex-direction: column; - justify-content: space-between; - width: 28px; - height: 22px; - background: transparent; - border: none; - cursor: pointer; - padding: 0; -} - -.hamburger span { - height: 2.5px; - width: 100%; - background: var(--text-primary); - transition: all 0.35s ease; - border-radius: 2px; -} - -.hamburger.active span:nth-child(1) { - transform: rotate(45deg) translate(5px, 5px); -} - -.hamburger.active span:nth-child(2) { - opacity: 0; -} - -.hamburger.active span:nth-child(3) { - transform: rotate(-45deg) translate(6px, -6px); -} - -/* Мобильное меню */ - -.mobile-menu { - position: fixed; - top: 90px; - right: -100%; - width: 280px; - height: calc(100vh - 90px); - background: var(--background); - box-shadow: -5px 0 25px rgba(0, 0, 0, 0.25); - transition: right 0.45s cubic-bezier(0.32, 0.72, 0, 1); - z-index: 9998; - padding: 50px 30px; -} - -.mobile-menu.active { - right: 0; -} - -.mobile-menu ul { - display: flex; - flex-direction: column; - gap: 28px; - align-items: flex-start; - margin: 0; - padding: 0; -} - -.mobile-menu li { - list-style: none; - line-height: 3; -} - -.mobile-menu li a { - color: var(--text-primary); - text-decoration: none; - font-size: 1.45rem; - font-weight: 500; -} - -/* ==================== RESPONSIVE ==================== */ - -@media (max-width: 1024px) { - .left h1 { - font-size: 22px; - } - - .desktop-nav ul { - gap: 14px; - } - - .desktop-nav li a { - padding: 6px 10px; - font-size: 14px; - } -} - -@media (max-width: 768px) { - .hamburger { +.left { display: flex; - } - - .desktop-nav { - display: none; - } - - .cont-header { - padding: 0 20px; - } - - .right { - gap: 12px; - } - - .left h1 { - font-size: 20px; - } - - .mobile-menu { - width: 100%; - right: -100%; - padding: 40px 24px; - } - - .mobile-menu li a { - font-size: 1.25rem; - } - - .mobile-menu ul { - gap: 20px; - } + align-items: center; } -@media (max-width: 480px) { - .header { - height: 70px; - } +.info { + width: 100%; +} - .mobile-menu { - top: 70px; - height: calc(100vh - 70px); - padding: 30px 20px; - } +.info .title { + margin-bottom: 16px; - .theme-toggle { - width: 36px; - height: 36px; - } - - .theme-icon { font-size: 16px; - } + font-weight: 400; + color: #888; + + 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: 720px; + + margin-top: 24px; + + font-size: clamp(16px, 1.25vw, 22px); + font-weight: 400; + line-height: 1.55; + letter-spacing: -0.01em; + + color: #999; } \ No newline at end of file diff --git a/src/static/hero/hero.module.css b/src/static/hero/hero.module.css index 437a473..5572084 100644 --- a/src/static/hero/hero.module.css +++ b/src/static/hero/hero.module.css @@ -1,11 +1,57 @@ .hero { - background-color: aquamarine; - height: calc(100vh - 90px); + min-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); } \ No newline at end of file diff --git a/src/widgets/header/ui/Header.tsx b/src/widgets/header/ui/Header.tsx index 2e04c9e..294c686 100644 --- a/src/widgets/header/ui/Header.tsx +++ b/src/widgets/header/ui/Header.tsx @@ -25,25 +25,6 @@ const Header = () => { - {/* Переключатель языка */} - - EN - - - {/* Переключатель темы */} - - {/* Гамбургер */}