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

67
src/components/HeroSection.tsx
View File

@@ -2,7 +2,7 @@
import React from 'react';
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 styles from './HeroSection.module.css';
@@ -11,13 +11,14 @@ export const HeroSection: React.FC = () => {
return (
<div className={styles.heroContentWrapper}>
{/* Top Floating Controls */}
{/* Top utility control */}
<div className={styles.topBar}>
<button
type="button"
onClick={toggleTheme}
className={styles.iconButton}
aria-label="Toggle theme"
title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`}
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
>
{theme === 'light' ? (
<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} />
)}
</button>
<button
className={styles.iconButton}
aria-label="Switch Language"
title="Farsi version coming soon"
>
<Languages size={28} strokeWidth={2} className={styles.controlIcon} />
</button>
</div>
{/* Hero Central Content */}
@@ -55,11 +48,12 @@ export const HeroSection: React.FC = () => {
{/* Display Typography */}
<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>
<p className={styles.heroSubtitle}>
A PASSIONATE PRODUCT ENGINEER
Product engineer building useful, resilient software.
</p>
{/* Action Buttons */}
@@ -75,51 +69,6 @@ export const HeroSection: React.FC = () => {
</a>
</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>
);