text: 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(2, minmax(140px, 200px));
      grid-gap: 0 10px;
      padding: 0;
      margin: 20px 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 {
        background: transparent;
        outline: 0;
  
        &:after {
          top: 15px;
          left: 15px;
        }
  
        .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: 20px;
        left: 20px;
        z-index: -1;
      }
    }
  `;
  
  const About = () => {
    const revealContainer = useRef(null);
    const prefersReducedMotion = usePrefersReducedMotion();
  
    useEffect(() => {
      if (prefersReducedMotion) {
        return;
      }
  
      sr.reveal(revealContainer.current, srConfig());
    }, []);
  
    const skills = ['Python', 'SQLite', 'Flutter', 'Dart', 'C/C++', 'C#'];
  
    return (
      <StyledAboutSection id="about" ref={revealContainer}>
        <h2 className="numbered-heading">About Me</h2>
  
        <div className="inner">
          <StyledText>
            <div>
              <p>
                Helloo! My name is Tayfun and I enjoy creating things. My interest in programming
                started back in 2018 when I was in school. I decided that I want to get notified if
                there were changes on our substition schedules (Vertretungungsplan). So I began
                teaching myself Python and hooking that script on a Raspberry Pi. It didn't last long
                until my classmates wanted to take advantage of the program as well. It became very
                popular at school. In the end there were approximately 150 registered users. I was
                constantly adding new features to the program and had a lot of fun. — turns out web
                scraping our schedule at school taught me a lot about Python, managing a server and
                programming in general!
              </p>
  
              <p>
                Fast-forward to today, and I’ve had the privilege of studying IT-Security at
                Ruhr-Universität Bochum.
              </p>
  
              <p>Here are a few technologies I’ve been working with recently:</p>
            </div>
  
            <ul className="skills-list">
              {skills && skills.map((skill, i) => <li key={i}>{skill}</li>)}
            </ul>
          </StyledText>
  
          <StyledPic>
            <div className="wrapper">
              <StaticImage
                className="img"
                src="../../images/me.jpg"
                width={500}
                quality={95}
                formats={['AUTO', 'WEBP', 'AVIF']}
                alt="Headshot"
              />
            </div>
          </StyledPic>
        </div>
      </StyledAboutSection>
    );
  };
  
  export default About;
  