fix: constrain decorative code snippets to hero section

[nishtha-agarwal-211]

Describe the changes

Fixes #474

DOM Restructure

• Wrapped the landing page hero components (.hero-background, .hero-code-snippets, .container) inside a .hero-section container in web-app/index.html.

CSS Fix

• Restored and defined .hero-section in web-app/css/styles.css with:
  • position: relative
  • overflow: hidden

This constrains all absolutely positioned decorative elements within the hero section and prevents overlap with the projects section.

Visual Improvements

• Reduced code snippet opacity from 0.5/0.42 to a subtle 0.15 - 0.22 range for improved readability and reduced visual clutter.

JavaScript Fix

• Restored .hero-section to resolve the IntersectionObserver console error in main.js.

---

How to test

1. Open the homepage locally.
2. Verify that floating code snippets remain inside the hero section.
3. Ensure decorative elements no longer overlap project cards.
4. Confirm background visuals remain subtle and readable.
5. Check the browser console to verify there are no IntersectionObserver errors.

[vercel]

@nishtha-agarwal-211 is attempting to deploy a commit to the Anuj's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

This PR reintroduces a dedicated .hero-section wrapper and styling so that absolutely positioned decorative elements (background + floating code snippets) are constrained to the landing-page hero, preventing overlap into the projects section.

Changes:

• Wraps the hero DOM content in a new <section class="hero-section"> container.
• Restores/enables the .hero-section CSS (positioning + overflow clipping) and adjusts hero padding.
• Lowers decorative code snippet opacity values to reduce visual clutter.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
web-app/index.html	Wrapes hero elements in a .hero-section container to constrain decorative positioning.
web-app/css/styles.css	Enables .hero-section styling (relative + overflow hidden) and tunes snippet opacity/padding.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.