text: import React from 'react';
  import {
    Section,
    SectionDivider,
    SectionText,
    SectionTitle,
  } from '../../styles/GlobalComponents';
  import {
    List,
    ListContainer,
    ListItem,
    ListParagraph,
    ListTitle,
  } from './TechnologiesStyles';
  import { Skills } from './Skills';
  import { SocialIcons } from '../Header/HeaderStyles';
  
  const Technologies = () => (
    <Section id="skills">
      <SectionDivider divider />
      <SectionTitle>Skills</SectionTitle>
      <SectionText>
        I've worked with multiple technologies as a developer to develop &
        maintain my projects.
      </SectionText>
      <List>
        {Skills.map((Skill) => (
          <ListItem key={Skill.slug}>
            <SocialIcons>
              <picture>
                <Skill.Component size="3rem" />
              </picture>
            </SocialIcons>
  
            <ListContainer>
              <ListTitle>{Skill.title}</ListTitle>
              <ListParagraph>
                <Skill.Description />
              </ListParagraph>
            </ListContainer>
          </ListItem>
        ))}
      </List>
      <SectionDivider colorAlt />
    </Section>
  );
  
  export default Technologies;
  