Improve Content Visibility and Consistency on Scroll

[ayushichoudhary-19]

Issue Description

Current State:
Currently, when scrolling through the page, the visibility of section elements is triggered after almost half of the section has passed during scrolling. This behavior causes a delay in the appearance of content in the sections, adversely affecting the user experience.

Issue Details:

1. Scrolling Behavior:
   • The existing JavaScript logic triggers the appearance of section elements only after 80% of the section is scrolled, resulting in delayed content visibility.

Screenshots:

• In the 'About Us' section, statistics do not appear with other content. They become visible only after scrolling to the next 'Skills' section.
  
  

• 'Skills' do not appear on the scroll when reaching the section. They become visible only after scrolling past the section.
  

• Similar issues exist in the 'Education' and 'Project' sections.

• The sections after 'Projects' lack the Appear-on-Scroll Effect, causing inconsistency in UI.

2. Desired Behavior:

   • Revise the JavaScript code to ensure that when a section's heading reaches the top of the page, the entire content of that section should have already appeared on the screen.
   • Apply the Appear-on-Scroll Effect to elements in sections after 'Projects' for UI consistency.

3. Testing:

   • Conduct rigorous testing of the updated scrolling behavior across various browsers and devices to ensure consistent appearance.
   • Verify that the content of each section becomes visible promptly as its heading hits the top of the page on all device sizes.

Deadline:
Resolve this issue within 2 days of assignment, before it gets assigned to the next person.

[ShaikArshidBanu]

@ayushichoudhary-19 please assign this issue to me.