import React, { useEffect, useRef } from 'react';
import { StaticImage } from 'gatsby-plugin-image';
import styled, { keyframes } from 'styled-components';
import { srConfig } from '@config';
import sr from '@utils/sr';
import { usePrefersReducedMotion } from '@hooks';

// Define keyframe animations for scrolling left to right and right to left
const scrollLeftToRight = keyframes`
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
`;

const scrollRightToLeft = keyframes`
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
`;

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`
  padding: 1rem;

  div {
    margin-bottom: 2rem;
  }

  h5 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--green);
  }
`;

// New styled component for the scrolling skills list
const StyledSkillsList = styled.ul`
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;

  /* Apply animation if not reduced motion */
  ${({ prefersReducedMotion, direction }) =>
    !prefersReducedMotion &&
    `
    animation: ${
      direction === 'left-to-right' ? scrollLeftToRight : scrollRightToLeft
    } 10s linear infinite;
  `}

  li {
    display: inline-block;
    margin-right: 2rem;
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    position: relative;

    &:before {
      content: '▹';
      position: absolute;
      left: -1.5rem;
      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. I have also undertaken freelancing and internships as a Full Stack Developer.
            </p>

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

          {Object.keys(skills).map((category, index) => (
            <div key={index}>
              <h5>{category}</h5>
              <StyledSkillsList
                prefersReducedMotion={prefersReducedMotion}
                direction={index % 2 === 0 ? 'left-to-right' : 'right-to-left'}
              >
                {skills[category].map((skill, i) => (
                  <li key={i}>{skill}</li>
                ))}
              </StyledSkillsList>
            </div>
          ))}
        </StyledText>

        {/* If you have an image or additional content, include it here */}
        {/* <StyledPic>
          <div className="wrapper">
            <StaticImage
              className="img"
              src="../../images/profile-pic.png"
              alt="Profile Picture"
              quality={95}
              formats={['AUTO', 'WEBP', 'AVIF']}
            />
          </div>
        </StyledPic> */}
      </div>
    </StyledAboutSection>
  );
};

export default About;


7 Unhandled Runtime Errors
Close
Multiple unhandled runtime errors found in your files. See the list below to fix them:


Error in function D in ./node_modules/styled-components/dist/styled-components.browser.esm.js:1
It seems you are interpolating a keyframe declaration (gaoTSJ) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\ helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css