can you add a scroll train animation where the skills are moving from left to riht and below from right to left and so on , it must in the same theme "import React, { useEffect, useRef } from 'react';
import { StaticImage } from 'gatsby-plugin-image';
import styled from 'styled-components';
import { srConfig } from '@config';
import sr from '@utils/sr';
import { usePrefersReducedMotion } from '@hooks';

const StyledAboutSection = styled.section`
  max-width: 900px;

  .inner {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 50px;

    @media (max-width: 768px) {
      display: block;
    }
  }
`;
const StyledText = styled.div`
  ul.skills-list {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 200px));
    grid-gap: 0 5px;
    padding: 0;
    margin: 10px 0 0 0;
    overflow: hidden;
    list-style: none;

    li {
      position: relative;
      margin-bottom: 10px;
      padding-left: 20px;
      font-family: var(--font-mono);
      font-size: var(--fz-xs);

      &:before {
        content: '▹';
        position: absolute;
        left: 0;
        color: var(--green);
        font-size: var(--fz-sm);
        line-height: 12px;
      }
    }
  }
`;
const StyledPic = styled.div`
  position: relative;
  max-width: 300px;

  @media (max-width: 768px) {
    margin: 50px auto 0;
    width: 70%;
  }

  .wrapper {
    ${({ theme }) => theme.mixins.boxShadow};
    display: block;
    position: relative;
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--green);

    &:hover,
    &:focus {
      outline: 0;
      transform: translate(-4px, -4px);

      &:after {
        transform: translate(8px, 8px);
      }

      .img {
        filter: none;
        mix-blend-mode: normal;
      }
    }

    .img {
      position: relative;
      border-radius: var(--border-radius);
      mix-blend-mode: multiply;
      filter: grayscale(100%) contrast(1);
      transition: var(--transition);
    }

    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: var(--border-radius);
      transition: var(--transition);
    }

    &:before {
      top: 0;
      left: 0;
      background-color: var(--navy);
      mix-blend-mode: screen;
    }

    &:after {
      border: 2px solid var(--green);
      top: 14px;
      left: 14px;
      z-index: -1;
    }
  }
`;

const About = () => {
  const revealContainer = useRef(null);
  const prefersReducedMotion = usePrefersReducedMotion();

  useEffect(() => {
    if (prefersReducedMotion) {
      return;
    }

    sr.reveal(revealContainer.current, srConfig());
  }, []);

  const skills = {
    Languages: ['C/C++', 'Java', 'Python', 'JavaScript', 'TypeScript', 'Solidity', 'Rust', 'Move'],
    Databases: ['SQLite', 'PostgreSQL', 'MongoDB', 'Firebase'],
    DevOps: ['Docker', 'Jenkins'],
    Others: ['Computer Networks', 'Operating Systems', 'System Design', 'Microservices', 'Cloud Computing'],
    Frameworks: ['Node.js', 'React.js', 'Express.js', 'Django', 'Flask'],
    Tools: ['Git', 'Linux', 'Docker', 'GCP', 'AWS', 'Cisco Packet Tracer']
  };
  return (
    <StyledAboutSection id="about" ref={revealContainer}>
      <h2 className="numbered-heading">About Me</h2>

      <div className="inner">
        <StyledText>
          <div>
            <p>
               I Started my Journey by participating in hackathons, Events and Buildathons, Did some Freelancing and Intenships as a Full Stack Developer. 
            </p>

            <p>Here are a few technologies I’ve worked on</p>
            <br></br>
          </div>

          {Object.keys(skills).map((category, index) => (
          <div key={index}>
            <h5>{category}</h5>
            <ul className="skills-list">
              {skills[category].map((skill, i) => (
                <li key={i}>{skill}</li>
              ))}
            </ul>
          </div>
        ))}
        </StyledText>
      </div>
    </StyledAboutSection>
  );
};

export default About;
"