chore: create initial project snapshot

Capture the portfolio source, design references, and production assets with repository-specific ignore rules.

src/components/HeroSection.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { Moon, Sun, Languages, Mail, Phone, MapPin } from 'lucide-react';
+import { useTheme } from '@/context/ThemeContext';
+import styles from './HeroSection.module.css';
+
+export const HeroSection: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className={styles.heroContentWrapper}>
+      {/* Top Floating Controls */}
+      <div className={styles.topBar}>
+        <button
+          onClick={toggleTheme}
+          className={styles.iconButton}
+          aria-label="Toggle theme"
+          title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`}
+        >
+          {theme === 'light' ? (
+            <Moon size={20} className={styles.controlIcon} />
+          ) : (
+            <Sun size={20} className={styles.controlIcon} />
+          )}
+        </button>
+
+        <button
+          className={styles.iconButton}
+          aria-label="Switch Language"
+          title="Farsi version coming soon"
+        >
+          <Languages size={20} className={styles.controlIcon} />
+        </button>
+      </div>
+
+      {/* Hero Central Content */}
+      <div className={styles.heroContent}>
+        {/* Avatar with double ring */}
+        <div className={styles.avatarWrapper}>
+          <div className={styles.avatarRingOuter}>
+            <div className={styles.avatarContainer}>
+              <Image
+                src="/images/avatar.png"
+                alt="Amirhossein Khalili"
+                width={192}
+                height={192}
+                className={styles.avatarImg}
+                priority
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Display Typography */}
+        <h1 className={`font-display ${styles.heroTitle}`}>
+          Hi, I&apos;m Amirhossein Khalili
+        </h1>
+
+        <p className={styles.heroSubtitle}>
+          A PASSIONATE PRODUCT ENGINEER
+        </p>
+
+        {/* Action Buttons */}
+        <div className={styles.actionButtons}>
+          <a href="#about" className="pill-btn pill-btn-outline">
+            About
+          </a>
+          <a href="#projects" className="pill-btn pill-btn-outline">
+            Work
+          </a>
+          <a href="#footer" className="pill-btn pill-btn-primary">
+            Contact
+          </a>
+        </div>
+
+        {/* Contact Info Strip */}
+        <div className={styles.contactBar}>
+          <a href="mailto:amirhosseinkhalili901@gmail.com" className={styles.contactItem}>
+            <Mail size={16} className={styles.contactIcon} />
+            <span>amirhosseinkhalili901@gmail.com</span>
+          </a>
+
+          <div className={styles.contactDivider} />
+
+          <a href="tel:+989388263077" className={styles.contactItem}>
+            <Phone size={16} className={styles.contactIcon} />
+            <span>+98 9388263077</span>
+          </a>
+
+          <div className={styles.contactDivider} />
+
+          <div className={styles.contactItem}>
+            <MapPin size={16} className={styles.contactIcon} />
+            <span>Karaj, Alborz, Iran</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};