project section update

src/sections/ProjectsSection.tsx

@@ -28,10 +28,10 @@ const badges = {
 };
 
 const projects = {
-  frontend: [
+  showcase: [
     {
       thumbnailSrc: 'stacjownik-1.png',
-      iconSrc: null,
+      iconSrc: 'stacjownik-logo.svg',
       title: 'Stacjownik',
       subtitle: '',
       desc: "A tool made for the Polish railway simulator: Train Driver 2.\
@@ -44,7 +44,7 @@ const projects = {
     },
     {
       thumbnailSrc: 'pojazdownik-1.png',
-      iconSrc: null,
+      iconSrc: 'pojazdownik-logo.svg',
       title: 'Pojazdownik',
       subtitle: '',
       desc: "Another tool made for the Train Driver 2 community, which allows players to easily create their own railway rolling stock configurations.\
@@ -56,7 +56,7 @@ const projects = {
     },
     {
       thumbnailSrc: 'generator-1.png',
-      iconSrc: null,
+      iconSrc: 'generator-logo.svg',
       title: 'GeneraTOR',
       subtitle: '',
       desc: 'The last of the "Holy Trinity" of applications created for the TD2 simulator. It\'s a graphical interface of so-called "written orders"\
@@ -68,7 +68,7 @@ const projects = {
     },
     {
       thumbnailSrc: 'stacjownik-manager-1.png',
-      iconSrc: null,
+      iconSrc: 'stacjownik-dev-logo.svg',
       title: 'Stacjownik Manager',
       subtitle: '',
       desc: "An additional tool made for people who work with Stacjownik and update it with the freshest data coming from the simulator which isn't automatically scraped, mainly new sceneries (maps available for the community).\
@@ -79,13 +79,34 @@ const projects = {
       siteLink: 'https://station-manager.web.app/',
     },
   ],
-  backend: [
+  other: [
     {
-      title: 'Stacjownik API',
+      title: 'Stacjownik Backend + API',
       iconSrc: null,
       subtitle: '',
       desc: 'The backend services for Stacjownik site. Here I compute all data which is further sent to the app. Aside from the API,\
       it\'s also used for storing history data about users which can be later browsed in the "Journal" tab. ',
+      technologies: [badges.NestJS, badges.TS, badges.Postgresql],
+      repoLink: 'https://github.com/Spythere/station-manager-2.0',
+      docsLink: 'https://stacjownik.spythere.eu/docs',
+    },
+    {
+      title: 'Stacjobot',
+      iconSrc: null,
+      subtitle: '',
+      desc: 'The backend services for Stacjownik site. Here I compute all data which is further sent to the app. Aside from the API,\
+      it\'s also used for storing history data about users which can be later browsed in the "Journal" tab. ',
+      technologies: [badges.NestJS, badges.Discord, badges.TS],
+      repoLink: 'https://github.com/Spythere/station-manager-2.0',
+    },
+    {
+      title: 'TD2 Discord Presence',
+      iconSrc: null,
+      subtitle: '',
+      desc: 'The backend services for Stacjownik site. Here I compute all data which is further sent to the app. Aside from the API,\
+      it\'s also used for storing history data about users which can be later browsed in the "Journal" tab. ',
+      technologies: [badges.CSharp, badges.Dotnet],
+      repoLink: 'https://github.com/Spythere/station-manager-2.0',
     },
   ],
 };
@@ -101,17 +122,20 @@ function ProjectsSection() {
         </span>
       </StyledSectionHeader>
 
-      <h3 className="sub-header">MY FRONT-END PROJECTS</h3>
+      <h3 className="sub-header">SHOWCASE - MAJOR PROJECTS</h3>
 
-      <div className="projects-grid">
-        {projects.frontend.map((p) => (
-          <div className="project-card">
+      <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">
-              <h2 className="project-title">{p.title}</h2>
+              <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">{p.title}</h2>
+              </a>
               <h3 className="project-subtitle">{p.subtitle}</h3>
 
               <div className="project-badges">
@@ -139,7 +163,47 @@ function ProjectsSection() {
         ))}
       </div>
 
-      <h3 className="sub-header">MY BACK-END PROJECTS</h3>
+      <h3 className="sub-header">OTHER PROJECTS</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">{p.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">{p.desc}</p>
+
+              <div className="project-actions">
+                {p.repoLink && (
+                  <a href={p.repoLink} target="_blank">
+                    <FaGithub />
+                    SOURCE
+                  </a>
+                )}
+
+                {p.docsLink && (
+                  <a href={p.docsLink} target="_blank">
+                    <FaExternalLinkAlt />
+                    DOCS
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </StyledProjects>
   );
 }