I based the scrolling marquee on a CodePen project created by Raghav Budhiraja (source). While the original code provided a solid foundation, I had to make significant changes to tailor it to my website’s aesthetic and functionality.

Changes I Made

1. Content Customization:
   The original CodePen example used placeholder text, while I replaced it with terms and skills relevant to my expertise, such as “HTML,” “CSS,” “Python,” and “Machine Learning.” This personalized the design to reflect my professional skill set.
2. Animation Speed and Timing:
   The original marquee used a single animation duration. I adjusted the --t variable to ensure smoother scrolling and synchronized animations across multiple lines.
3. Multiple Lines Implementation:
   The original code focused on a single scrolling line. I modified the HTML and CSS to support two marquee lines running simultaneously but with offset animations. This added depth and variety to the visual flow.
4. Styling Enhancements:
   The default styles were minimal, so I adjusted:
   • Font size: Reduced to better fit the layout of my homepage.
   • Colors: Changed the background and text colors to align with my site’s dark theme.
   • Spacing: Adjusted the padding and margins for each scrolling item to make them compact yet visually distinct.
5. Responsiveness:
   One of my key challenges was ensuring the marquee worked seamlessly across devices, especially for smaller screens. I tweaked the CSS to handle viewport changes gracefully.

Challenges I Faced

1. Maintaining Performance:
   With multiple lines and a significant amount of text, the marquee animations initially caused performance issues. Debugging these required optimizing the CSS animations and ensuring they didn’t overwhelm the rendering engine.
2. Synchronization of Multiple Lines:
   Ensuring the two marquee lines scrolled at consistent speeds while starting at different offsets was tricky. This required careful adjustments to the animation delays and keyframes.
3. Cross-Browser Compatibility:
   While the code worked perfectly on modern browsers like Chrome, some inconsistencies appeared in older versions of Safari. I had to test thoroughly and make minor tweaks to improve compatibility.
4. Masking and Gradient Effects:
   Implementing the gradient mask for a seamless fading effect at the edges was one of the most satisfying but challenging parts. Getting the right transparency levels and avoiding abrupt text cuts required multiple iterations.