From 704b7ab2d27b29de9698a82c5ddee17637ccb11b Mon Sep 17 00:00:00 2001 From: Amirhossein Khalili Date: Sat, 5 Sep 2026 00:05:27 +0800 Subject: [PATCH] feat: align hero styling with portfolio design Refine hero controls, buttons, contact icons, and avatar treatment across light and dark themes. --- src/components/HeroSection.module.css | 178 ++++++++++++++++++-------- src/components/HeroSection.tsx | 44 +++++-- 2 files changed, 159 insertions(+), 63 deletions(-) diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css index bd60ea7..94d2ce7 100644 --- a/src/components/HeroSection.module.css +++ b/src/components/HeroSection.module.css @@ -6,11 +6,13 @@ } .topBar { - position: relative; + position: absolute; + inset: 0 0 auto; + z-index: 2; display: flex; - justify-content: space-between; align-items: center; - padding: 36px 60px 0 60px; + justify-content: space-between; + padding: 72px 60px 0; } .iconButton { @@ -19,32 +21,40 @@ justify-content: center; width: var(--size-icon-button); height: var(--size-icon-button); - border-radius: 50%; - background: rgba(255, 255, 255, 0.4); - backdrop-filter: blur(10px); - border: 1px solid var(--border-default); + padding: 0; + border: 0; + background: transparent; + color: var(--color-blue-700); cursor: pointer; - transition: all 0.2s ease; - color: var(--text-primary); + transition: color 0.2s ease, transform 0.2s ease; } .iconButton:hover { - background: rgba(255, 255, 255, 0.7); - transform: scale(1.05); + color: var(--color-blue-500); + transform: translateY(-1px); +} + +.iconButton:focus-visible { + border-radius: var(--radius-sm); + outline: 3px solid var(--focus-ring); + outline-offset: 4px; } [data-theme="dark"] .iconButton { - background: rgba(9, 28, 63, 0.6); - border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .iconButton:hover { - background: rgba(16, 63, 127, 0.8); + color: var(--accent-default); } -.controlIcon { - color: var(--text-primary); +.controlIcon, +.themeIcon { + color: currentColor; +} + +.themeIcon { + fill: currentColor; } .heroContent { @@ -52,89 +62,139 @@ display: flex; flex-direction: column; align-items: center; + padding-top: 74px; text-align: center; - padding-top: 10px; } .avatarWrapper { - margin-bottom: 24px; + margin-bottom: 26px; } .avatarRingOuter { - padding: 4px; - border-radius: 50%; - border: 3px solid var(--color-blue-700); - background: transparent; display: inline-block; + padding: 6px; + border: 3px solid var(--color-blue-700); + border-radius: 50%; + background: transparent; box-shadow: 0 8px 24px var(--shadow-color); } [data-theme="dark"] .avatarRingOuter { - border-color: var(--color-blue-300); + border-color: var(--color-blue-white); } .avatarContainer { - width: 192px; - height: 192px; - border-radius: 50%; - overflow: hidden; position: relative; - border: 2px solid #ffffff; + width: 208px; + height: 208px; + overflow: hidden; + border: 0; + border-radius: 50%; } .avatarImg { - object-fit: cover; width: 100%; height: 100%; + object-fit: cover; } .heroTitle { + margin-bottom: 14px; + color: var(--text-primary); font-size: var(--font-size-display-hero); line-height: var(--line-height-display-hero); - color: var(--text-primary); - margin-bottom: 12px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + text-shadow: none; } .heroSubtitle { + margin-bottom: 40px; + color: var(--text-primary); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; - color: var(--text-primary); - margin-bottom: 32px; - opacity: 0.9; } .actionButtons { display: flex; align-items: center; - gap: 16px; - margin-bottom: 36px; + gap: 20px; + margin-bottom: 34px; } -.actionButtons a { - min-width: 110px; +.heroButton { + width: 176px; + height: 56px; + padding: 0 28px; + border-width: 3px; + font-size: var(--font-size-body-default); +} + +.heroButtonOutline { + border-color: var(--color-blue-600); + background: transparent; + color: var(--color-blue-700); + backdrop-filter: none; +} + +.heroButtonOutline:hover { + border-color: var(--color-blue-700); + background: rgba(255, 255, 255, 0.2); +} + +.heroButtonPrimary { + border-color: var(--color-blue-600); + background: var(--color-blue-600); + color: var(--color-blue-white); +} + +.heroButtonPrimary:hover { + border-color: var(--color-blue-700); + background: var(--color-blue-700); +} + +.heroButton:focus-visible { + outline: 3px solid var(--focus-ring); + outline-offset: 3px; +} + +[data-theme="dark"] .heroButtonOutline { + border-color: var(--color-blue-white); + background: transparent; + color: var(--text-primary); +} + +[data-theme="dark"] .heroButtonOutline:hover { + border-color: var(--color-blue-100); + background: rgba(130, 181, 255, 0.12); +} + +[data-theme="dark"] .heroButtonPrimary { + border-color: var(--color-blue-white); + background: var(--color-blue-100); + color: var(--color-blue-950); +} + +[data-theme="dark"] .heroButtonPrimary:hover { + border-color: var(--color-blue-white); + background: var(--color-blue-white); } .contactBar { display: inline-flex; align-items: center; - gap: 20px; - padding: 10px 24px; - border-radius: var(--radius-pill); - background: rgba(255, 255, 255, 0.4); - backdrop-filter: blur(12px); - border: 1px solid var(--border-default); + gap: 16px; + padding: 0; + border: 0; + background: transparent; + color: var(--color-blue-700); font-size: var(--font-size-body-small); - line-height: var(--line-height-body-small); font-weight: 500; - color: var(--text-primary); + line-height: var(--line-height-body-small); } [data-theme="dark"] .contactBar { - background: rgba(9, 28, 63, 0.6); - border-color: var(--border-default); + color: var(--text-primary); } .contactItem { @@ -146,15 +206,27 @@ } .contactItem:hover { - opacity: 0.8; + opacity: 0.75; +} + +.contactItem:focus-visible { + border-radius: 2px; + outline: 3px solid var(--focus-ring); + outline-offset: 4px; } .contactIcon { - color: var(--accent-default); + flex: 0 0 auto; + color: currentColor; +} + +.filledIcon { + fill: currentColor; } .contactDivider { width: 1px; - height: 16px; - background-color: var(--border-default); + height: 22px; + background: var(--color-blue-500); + opacity: 0.7; } diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx index e4bda1c..3ed0e79 100644 --- a/src/components/HeroSection.tsx +++ b/src/components/HeroSection.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Image from 'next/image'; -import { Moon, Sun, Languages, Mail, Phone, MapPin } from 'lucide-react'; +import { Moon, Sun, Languages, Phone } from 'lucide-react'; import { useTheme } from '@/context/ThemeContext'; import styles from './HeroSection.module.css'; @@ -20,9 +20,9 @@ export const HeroSection: React.FC = () => { title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`} > {theme === 'light' ? ( - + ) : ( - + )} @@ -31,7 +31,7 @@ export const HeroSection: React.FC = () => { aria-label="Switch Language" title="Farsi version coming soon" > - + @@ -64,13 +64,13 @@ export const HeroSection: React.FC = () => { {/* Action Buttons */} @@ -78,21 +78,45 @@ export const HeroSection: React.FC = () => { {/* Contact Info Strip */}