spythere-portfolio/src/sections/ProjectsSection.tsx

import { FaExternalLinkAlt, FaGithub } from 'react-icons/fa';
import { StyledCursor } from '../components/styles/Cursor.styled';
import { StyledProjects } from '../components/styles/Projects.styled';
import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
import { useTranslation } from 'react-i18next';

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',
};

const projects = {
  showcase: [
    {
      id: 'stacjownik',
      thumbnailSrc: 'stacjownik-1.png',
      iconSrc: 'stacjownik-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/stacjownik',
      siteLink: 'https://stacjownik-td2.web.app/',
    },
    {
      id: 'pojazdownik',
      thumbnailSrc: 'pojazdownik-1.png',
      iconSrc: 'pojazdownik-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/pojazdownik',
      siteLink: 'https://pojazdownik-td2.web.app/',
    },
    {
      id: 'generator',
      thumbnailSrc: 'generator-1.png',
      iconSrc: 'generator-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/genera-tor',
      siteLink: 'https://generator-td2.web.app/',
    },
    {
      id: 'stacjownik-manager',
      thumbnailSrc: 'stacjownik-manager-1.png',
      iconSrc: 'stacjownik-dev-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/station-manager-2.0',
      siteLink: 'https://station-manager.web.app/',
    },
  ],
  other: [
    {
      id: 'stacjownik-api',
      iconSrc: null,
      subtitle: '',
      technologies: [badges.NestJS, badges.TS, badges.Postgresql],
      docsLink: 'https://stacjownik.spythere.eu/docs',
    },
    {
      id: 'stacjobot',
      iconSrc: null,
      subtitle: '',
      technologies: [badges.NestJS, badges.Discord, badges.TS],
    },
    {
      id: 'td2-discord-presence',
      iconSrc: null,
      subtitle: '',
      technologies: [badges.CSharp, badges.Dotnet],
      repoLink: 'https://github.com/Spythere/station-manager-2.0',
    },
  ],
};

function ProjectsSection() {
  const { t } = useTranslation();

  return (
    <StyledProjects id="projects">
      <StyledSectionHeader>
        {t('projects.title-1') + ' '}
        <span className="text--accent" style={{ position: 'relative' }}>
          {t('projects.title-2')}
          <StyledCursor />
        </span>
      </StyledSectionHeader>

      <h3 className="sub-header">{t('projects.showcase-title')}</h3>

      <div className="showcase-container">
        {projects.showcase.map((p) => (
          <div className="project-card showcase">
            <div className="project-thumbnail">
              <img src={p.thumbnailSrc} alt="" />
            </div>

            <div className="project-content">
              <a className="project-title" href={p.siteLink} target="_blank">
                {p.iconSrc && <img className="project-title-icon" src={p.iconSrc} alt="" />}
                <h2 className="project-title-content">{t(`projects.${p.id}.title`)}</h2>
              </a>
              <h3 className="project-subtitle">{p.subtitle}</h3>

              <div className="project-badges">
                {p.technologies.map((tech) => (
                  <img src={tech} alt="technology badge"></img>
                ))}
              </div>

              <hr />

              <p className="project-desc">{t(`projects.${p.id}.description`)}</p>

              <div className="project-actions">
                <a href={p.repoLink} target="_blank">
                  <FaGithub />
                  {t('projects.source-link')}
                </a>
                <a href={p.siteLink} target="_blank">
                  <FaExternalLinkAlt />
                  {t('projects.live-app-link')}
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>

      <h3 className="sub-header">{t('projects.other-projects-title')}</h3>

      <div className="other-projects-container">
        {projects.other.map((p) => (
          <div className="project-card">
            <div className="project-content">
              <div className="project-title">
                {p.iconSrc && <img className="project-title-icon" src={p.iconSrc} alt="" />}
                <h2 className="project-title-content">{t(`projects.${p.id}.title`)}</h2>
              </div>
              <h3 className="project-subtitle">{p.subtitle}</h3>

              <div className="project-badges">
                {p.technologies.map((tech) => (
                  <img src={tech} alt="technology badge"></img>
                ))}
              </div>

              <hr />

              <p className="project-desc">{t(`projects.${p.id}.description`)}</p>

              <div className="project-actions">
                {p.repoLink && (
                  <a href={p.repoLink} target="_blank">
                    <FaGithub />
                    {t('projects.source-link')}
                  </a>
                )}

                {p.docsLink && (
                  <a href={p.docsLink} target="_blank">
                    <FaExternalLinkAlt />
                    {t('projects.docs-link')}
                  </a>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </StyledProjects>
  );
}

export default ProjectsSection;