# Aura — Premium Personal Portfolio Hero Section (Hero-03)

A standalone, commercial-grade, and fully responsive Hero Section component designed for designers, developers, creative directors, and digital product builders. Handcrafted by **CraftedWebs** in the design style of Apple, Figma, Framer, and Webflow.

Featuring a clean editorial layout, Swiss Grid lines, and a layered, floating 3D profile showcase window.

---

## Overview

**Aura** is a premium portfolio hero section crafted to instantly project creativity, professionalism, and design authority. The layout is divided into a structured typographic presentation column on the left and a multi-layered profile photo canvas on the right. Glassmorphic floating badges highlight core metrics (star reviews, project numbers, experience levels, satisfaction rate) which react to cursor movement. Built with pure HTML/CSS/JS, it features zero external dependencies, making it clean, modular, and fast.

- **Author:** CraftedWebs
- **Website:** [https://craftedwebs.in](https://craftedwebs.in)
- **Version:** 1.0.0
- **License:** Personal & Commercial Use (MIT-based)

---

## Features

- **Minimal Luxury & Swiss Grid Style:** Clean line dividers, spacious white space, large headlines, and balanced column structures.
- **Multi-Layered Portrait Showcase:** Glassmorphic badges float dynamically over the profile image wrapper, presenting stats.
- **Interactive Mouse Parallax:** Moving the cursor tilts the showcase canvas in 3D perspective and skews the stats cards.
- **Client Logos Marquee:** Horizontally scrolling brand tags (Google, Adobe, Figma, Spotify, Airbnb) represented in clean typography.
- **Stats Counting Panels:** 4-column metric cards that automatically count up when intersecting the viewport.
- **Fully Responsive & Standalone:** Tailored mobile-first layout that scales cleanly from small mobile displays up to ultra-wide desktop setups.

---

## Installation

Since the component is built using standard, framework-free web technology, setting it up is quick and easy:

1. **Clone or Download** the folder to your workspace.
2. **Move files** into your website directory.
3. Open `index.html` directly in your browser or serve it using a local development server (such as VS Code's Live Server or Python's HTTP server).

```bash
# Example serving locally with python
python -m http.server 8000
```

---

## Folder Structure

```text
Hero-03/
├── index.html            # Main HTML layout, inline SVGs, and marquees
├── style.css             /* Layout grids, spacing tokens, float keyframes, and marquees */
├── script.js             /* Mouse parallax, metrics count-up, scroll reveals */
├── README.md             # Product documentation (this file)
├── LICENSE.txt           # Product license file
├── CHANGELOG.md          # Version history log
├── CUSTOMIZATION.md      # Customize guide for photos, colors, and variables
├── assets/
│   ├── images/           # Custom local image files
│   ├── icons/            # Custom SVGs/Icons
│   └── preview.jpg       # Digital product presentation graphic mockup
└── screenshots/
    ├── desktop.png       # Desktop layout presentation image
    ├── tablet.png        # Tablet layout presentation image
    └── mobile.png        # Mobile layout presentation image
```

---

## Customization Guide

For full instructions, refer to the [CUSTOMIZATION.md](file:///c:/Users/Abira/OneDrive/Desktop/ui%20components/hero%20section/Hero-03/CUSTOMIZATION.md) file.

### CSS Variables
All colors, spacing scales, and glow variables are defined globally inside the `:root` scope of `style.css`:
- **Main Background (`--color-bg`):** Set to `#0a0a0a`.
- **Primary Text (`--color-text`):** White `#ffffff`.
- **Accent Color (`--color-accent`):** Electric blue `#2563eb`.
- **Secondary Accent (`--color-secondary`):** Soft purple `#a855f7`.

### Typography
- **Syne:** Headline font family for high visual character.
- **Inter:** Clean utility sans-serif for body descriptions, buttons, and subtext labels.

### Animations
- **Brand Marquee:** Infinite auto-scroll marquee (`@keyframes marquee-scroll`) running at 25s.
- **Floating Cards:** Gentle hovering motion using `@keyframes float-card-anim`.

---

## Design System Spec

### Responsive Breakpoints
- **Mobile:** Default (Mobile-first, up to 767px)
- **Tablet:** `768px - 1023px`
- **Laptop / Smaller Desktop:** `1024px - 1199px`
- **Desktop:** `1200px - 1599px`
- **Ultra Wide:** `1600px+`

### Browser Support
- Google Chrome (Latest)
- Apple Safari (Latest)
- Mozilla Firefox (Latest)
- Microsoft Edge (Latest)

---

## Performance Notes

- **Zero dependencies:** Loads in less than 150ms.
- **Hardware-accelerated CSS animations:** Translating card offsets via `translate3d` ensures smooth rendering performance at 60FPS.
- **Inline SVGs:** Optimized vector curves load directly inside the HTML markup for fast page loading speed.

---

## Credits

- Typography hosted on [Google Fonts](https://fonts.google.com).
- Portrait illustration photography courtesy of [Unsplash](https://unsplash.com).
- Composition inspired by modern Swiss Grid layouts and Apple designs.

---

## License

This digital product is licensed for both **Personal & Commercial Use**. You can use it as a standalone piece, integrate it with larger projects, or customize it for customer delivery. Re-selling or distributing the raw source files on digital marketplaces is strictly prohibited.
