spythere-portfolio/src/components/ProjectsSection.tsx

import { StyledCursor } from './styles/Cursor.styled';
import { StyledProjects } from './styles/Projects.styled';
import { StyledSectionHeader } from './styles/SectionHeader.styled';

const badges = {
  HTML: ' https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white',
  CSS: ' https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white',
  JS: ' https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E',
  SASS: ' https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white',
  TS: ' https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white',
  Node: ' https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white',
  Vue: ' https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D',
  Express: ' https://img.shields.io/badge/Express.js-404D59?style=for-the-badge',
  Mongo: ' https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white',
  React: ' https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB',
  Flutter: ' https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white',
  NET: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
  Python: ' https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white',
  Java: ' https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white',
  AWS: ' https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white',
  Heroku: ' https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white',
  NestJS: 'https://img.shields.io/badge/nestjs-red?style=for-the-badge&logo=nestjs&logoColor=white',
  Discord: ' https://img.shields.io/badge/discord.js-white?style=for-the-badge&logo=discord&logoColor=blue',
  Postgresql: ' https://img.shields.io/badge/postgresql-blue?style=for-the-badge&logo=postgresql&logoColor=white',
  CSharp: ' https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white',
  Dotnet: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
};

function ProjectsSection() {
  return (
    <StyledProjects id="projects">
      <StyledSectionHeader>
        MY{' '}
        <span className="text--accent" style={{ position: 'relative' }}>
          PROJECTS
          <StyledCursor />
        </span>
      </StyledSectionHeader>

      <h3 className="sub-header">ROZWIJANE PROJEKTY</h3>

      <div className="projects-grid">
        <div className="project-card">
          <h2>Stacjownik</h2>
          <h3>Lorem ipsum dolor sit amet.</h3>

          <div className="project-badges">
            <img src={badges.TS} alt="typescript"></img>
            <img src={badges.Vue} alt="vue.js"></img>
            <img src={badges.SASS} alt="sass/scss"></img>
          </div>

          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
            ipsum inventore quidem unde dolore.
          </p>

          <div className="project-actions">
            <button>
              <a href="#">GITHUB REPO</a>
            </button>
            <button>
              <a href="#">STRONA</a>
            </button>
          </div>
        </div>

        <div className="project-card">
          <h2>Pojazdownik</h2>
          <h3>Lorem ipsum dolor sit amet.</h3>
          <div className="project-badges">
            <img src={badges.TS} alt="typescript"></img>
            <img src={badges.Vue} alt="vue.js"></img>
            <img src={badges.SASS} alt="sass/scss"></img>
          </div>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
            ipsum inventore quidem unde dolore.
          </p>
        </div>

        <div className="project-card">
          <h2>GeneraTOR</h2>
          <h3>Lorem ipsum dolor sit amet.</h3>
          <div className="project-badges">
            <img src={badges.TS} alt="typescript"></img>
            <img src={badges.Vue} alt="vue.js"></img>
            <img src={badges.SASS} alt="sass/scss"></img>
          </div>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
            ipsum inventore quidem unde dolore.
          </p>
        </div>

        <div className="project-card">
          <h2>Stacjobot</h2>
          <h3>Lorem ipsum dolor sit amet.</h3>
          <div className="project-badges">
            <img src={badges.TS} alt="typescript"></img>
            <img src={badges.Vue} alt="vue.js"></img>
            <img src={badges.SASS} alt="sass/scss"></img>
          </div>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
            ipsum inventore quidem unde dolore.
          </p>
        </div>
      </div>
    </StyledProjects>
  );
}

export default ProjectsSection;