amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(hero): improve hierarchy and responsive actions

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 21:59:01 +03:30
parent 05c304adf4
commit 224a36f3a2
2 changed files with 56 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/HeroSection.module.css
View File

@@ -19,7 +19,7 @@
z-index: 10; z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end;
padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0; padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0;
} }
@@ -31,11 +31,14 @@
width: var(--size-icon-button); width: var(--size-icon-button);
height: var(--size-icon-button); height: var(--size-icon-button);
padding: 0; padding: 0;
border: 0; border: 1px solid var(--border-default);
background: transparent; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
color: var(--color-blue-700); color: var(--color-blue-700);
cursor: pointer; cursor: pointer;
transition: transition:
background-color var(--motion-duration-fast) ease,
border-color var(--motion-duration-fast) ease,
color var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease,
transform var(--motion-duration-fast) var(--motion-ease-out); transform var(--motion-duration-fast) var(--motion-ease-out);
} }
@@ -71,7 +74,7 @@
margin: 0 auto; margin: 0 auto;
height: auto; height: auto;
min-height: 100%; min-height: 100%;
padding-top: clamp(4rem, 6.5vw, 6rem); padding-top: clamp(4rem, 6vw, 5.5rem);
padding-bottom: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
padding-left: 1.25rem; padding-left: 1.25rem;
padding-right: 1.25rem; padding-right: 1.25rem;
@@ -115,9 +118,22 @@
.heroTitle { .heroTitle {
margin-bottom: clamp(0.5rem, 1vw, 0.875rem); margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
color: var(--text-primary); color: var(--text-primary);
font-size: clamp(2rem, 3.6vw, 3.375rem); display: flex;
line-height: 1.15; flex-direction: column;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.02;
text-shadow: none; text-shadow: none;
text-wrap: balance;
}
.heroGreeting {
color: var(--text-secondary);
font-size: 0.42em;
line-height: 1.5;
}
.heroName {
display: block;
white-space: nowrap; white-space: nowrap;
} }
@@ -125,10 +141,11 @@
.heroSubtitle { .heroSubtitle {
margin-bottom: clamp(1.25rem, 2.8vw, 2.25rem); margin-bottom: clamp(1.25rem, 2.8vw, 2.25rem);
color: var(--text-primary); color: var(--text-primary);
font-size: clamp(0.6875rem, 1vw, 0.9375rem); max-width: 34rem;
font-weight: 700; color: var(--text-secondary);
letter-spacing: 0.18em; font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
text-transform: uppercase; font-weight: 480;
letter-spacing: 0;
} }
/* ── Action buttons ─────────────────────────────────────────── */ /* ── Action buttons ─────────────────────────────────────────── */
@@ -279,8 +296,8 @@
} }
.iconButton { .iconButton {
width: 2.5rem; width: 2.75rem;
height: 2.5rem; height: 2.75rem;
} }
.heroContent { .heroContent {
@@ -291,49 +308,36 @@
} }
.heroTitle { .heroTitle {
font-size: clamp(1.625rem, 7.8vw, 2.25rem); width: 100%;
white-space: normal; max-width: 21rem;
max-width: 17rem; font-size: clamp(1.875rem, 8vw, 2.25rem);
line-height: 1.15; line-height: 1.04;
} }
.heroSubtitle { .heroSubtitle {
white-space: normal; max-width: 18rem;
max-width: 15.625rem; font-size: 1rem;
font-size: 0.6875rem; line-height: 1.5;
letter-spacing: 0.12em;
} }
.actionButtons { .actionButtons {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, clamp(5rem, 9vw, 7.5rem));
width: 100%; width: fit-content;
max-width: 17.25rem; max-width: none;
gap: 0.375rem; gap: 0.5rem;
}
.heroButtonPrimary {
grid-column: 1 / -1;
} }
.heroButton { .heroButton {
min-width: 0; min-width: 0;
width: auto; width: auto;
height: 2.375rem; height: 2.75rem;
padding: 0 0.375rem; padding: 0 0.375rem;
font-size: 0.75rem; font-size: 0.875rem;
}
.contactBar {
flex-direction: column;
gap: 0.3125rem;
white-space: normal;
font-size: 0.71875rem;
}
.contactItem {
max-width: 100%;
overflow-wrap: anywhere;
}
.contactDivider {
display: none;
} }
} }
@@ -343,6 +347,8 @@
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
.iconButton:hover { .iconButton:hover {
color: var(--color-blue-500); color: var(--color-blue-500);
border-color: var(--accent-default);
background: var(--bg-raised);
transform: translateY(-1px); transform: translateY(-1px);
} }

67
src/components/HeroSection.tsx
View File

@@ -2,7 +2,7 @@
import React from 'react'; import React from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { Moon, Sun, Languages, Phone } from 'lucide-react'; import { Moon, Sun } from 'lucide-react';
import { useTheme } from '@/context/ThemeContext'; import { useTheme } from '@/context/ThemeContext';
import styles from './HeroSection.module.css'; import styles from './HeroSection.module.css';
@@ -11,13 +11,14 @@ export const HeroSection: React.FC = () => {
return ( return (
<div className={styles.heroContentWrapper}> <div className={styles.heroContentWrapper}>
{/* Top Floating Controls */} {/* Top utility control */}
<div className={styles.topBar}> <div className={styles.topBar}>
<button <button
type="button"
onClick={toggleTheme} onClick={toggleTheme}
className={styles.iconButton} className={styles.iconButton}
aria-label="Toggle theme" aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`} title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
> >
{theme === 'light' ? ( {theme === 'light' ? (
<Moon size={28} strokeWidth={1.8} className={styles.themeIcon} /> <Moon size={28} strokeWidth={1.8} className={styles.themeIcon} />
@@ -25,14 +26,6 @@ export const HeroSection: React.FC = () => {
<Sun size={28} strokeWidth={1.8} className={styles.controlIcon} /> <Sun size={28} strokeWidth={1.8} className={styles.controlIcon} />
)} )}
</button> </button>
<button
className={styles.iconButton}
aria-label="Switch Language"
title="Farsi version coming soon"
>
<Languages size={28} strokeWidth={2} className={styles.controlIcon} />
</button>
</div> </div>
{/* Hero Central Content */} {/* Hero Central Content */}
@@ -55,11 +48,12 @@ export const HeroSection: React.FC = () => {
{/* Display Typography */} {/* Display Typography */}
<h1 className={`font-display ${styles.heroTitle}`}> <h1 className={`font-display ${styles.heroTitle}`}>
Hi, I&apos;m Amirhossein Khalili <span className={styles.heroGreeting}>Hi, I&apos;m</span>
<span className={styles.heroName}>Amirhossein Khalili</span>
</h1> </h1>
<p className={styles.heroSubtitle}> <p className={styles.heroSubtitle}>
A PASSIONATE PRODUCT ENGINEER Product engineer building useful, resilient software.
</p> </p>
{/* Action Buttons */} {/* Action Buttons */}
@@ -75,51 +69,6 @@ export const HeroSection: React.FC = () => {
</a> </a>
</div> </div>
{/* Contact Info Strip */}
<div className={styles.contactBar}>
<a href="mailto:amirhosseinkhalili901@gmail.com" className={styles.contactItem}>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
aria-hidden="true"
className={styles.contactIcon}
>
<path
fill="currentColor"
d="M3 5h3l6 5 6-5h3v14h-3V9l-6 5-6-5v10H3V5Z"
/>
</svg>
<span>amirhosseinkhalili901@gmail.com</span>
</a>
<div className={styles.contactDivider} />
<a href="tel:+989388263077" className={styles.contactItem}>
<Phone size={20} strokeWidth={1.8} className={`${styles.contactIcon} ${styles.filledIcon}`} />
<span>+98 9388263077</span>
</a>
<div className={styles.contactDivider} />
<div className={styles.contactItem}>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
aria-hidden="true"
className={styles.contactIcon}
>
<path
fill="currentColor"
fillRule="evenodd"
d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
clipRule="evenodd"
/>
</svg>
<span>Karaj, Alborz, Iran</span>
</div>
</div>
</div> </div>
</div> </div>
); );