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

feat: align hero styling with portfolio design

Browse Source 
Refine hero controls, buttons, contact icons, and avatar treatment across light and dark themes.
This commit is contained in:
Amirhossein Khalili
2026-09-05 00:05:27 +08:00
parent 75c9a62b37
commit 704b7ab2d2
2 changed files with 159 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/HeroSection.tsx
View File

@@ -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' ? (
<Moon size={20} className={styles.controlIcon} />
<Moon size={28} strokeWidth={1.8} className={styles.themeIcon} />
) : (
<Sun size={20} className={styles.controlIcon} />
<Sun size={28} strokeWidth={1.8} className={styles.controlIcon} />
)}
</button>
@@ -31,7 +31,7 @@ export const HeroSection: React.FC = () => {
aria-label="Switch Language"
title="Farsi version coming soon"
>
<Languages size={20} className={styles.controlIcon} />
<Languages size={28} strokeWidth={2} className={styles.controlIcon} />
</button>
</div>
@@ -64,13 +64,13 @@ export const HeroSection: React.FC = () => {
{/* Action Buttons */}
<div className={styles.actionButtons}>
<a href="#about" className="pill-btn pill-btn-outline">
<a href="#about" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
About
</a>
<a href="#projects" className="pill-btn pill-btn-outline">
<a href="#projects" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
Work
</a>
<a href="#footer" className="pill-btn pill-btn-primary">
<a href="#footer" className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`}>
Contact
</a>
</div>
@@ -78,21 +78,45 @@ export const HeroSection: React.FC = () => {
{/* Contact Info Strip */}
<div className={styles.contactBar}>
<a href="mailto:amirhosseinkhalili901@gmail.com" className={styles.contactItem}>
<Mail size={16} className={styles.contactIcon} />
<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={16} className={styles.contactIcon} />
<Phone size={20} strokeWidth={1.8} className={`${styles.contactIcon} ${styles.filledIcon}`} />
<span>+98 9388263077</span>
</a>
<div className={styles.contactDivider} />
<div className={styles.contactItem}>
<MapPin size={16} className={styles.contactIcon} />
<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>