UI Issue: Decorative background code text overlaps project cards on homepage

[nishtha-agarwal-211]

Describe the Issue

The decorative floating code snippets/text used in the homepage background are overlapping with the project cards section.

Some background texts like:

• roll = randint(1, 6)
• return is_prime(n)

appear directly behind or very close to the project cards, reducing readability and making the UI look cluttered.

Steps to Reproduce

1. Open the homepage.
2. Scroll to the projects/cards section.
3. Observe the floating background code snippets behind the cards.

Expected Behavior

Background decorative text should:

• Stay confined to the hero/background area
• Maintain proper opacity and spacing
• Not overlap important UI elements like cards/buttons

Actual Behavior

Background code snippets visually interfere with the project cards section.

Possible Cause

• Incorrect absolute positioning
• Missing overflow handling
• Z-index layering issue
• Insufficient spacing between sections

Suggested Fix

• Reduce opacity of background code snippets
• Restrict decorative elements within hero section bounds
• Adjust z-index and spacing
• Add responsive positioning for smaller/larger screens

Screenshot

[github-actions]

⚠️ Important Contribution Guideline

Please do not open a Pull Request without being assigned to this issue first.

Please do not open a Pull Request without being assigned to this issue first.

How to proceed:

1. Comment on this issue to express interest
2. Wait for maintainers to assign you to the issue
3. Once assigned, you can start working on the PR
4. Include the assignment in your PR checklist

Thank you for helping us maintain a smooth workflow! 🙏

[Nileshkrishesh]

Hi @yuvraj-k-singh , I would love to work on this issue for GSSoC'26. Could you please assign it to me and add the gssoc'26 label?

[steam-bell-92]

@nishtha-agarwal-211 suree work on it