chore: updated projects

public/srjp-logo.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="256" fill="#151414"/>
+<path d="M72.4253 291.986V279.965H120.201C123.283 279.965 124.824 278.424 124.824 275.342V264.246C124.824 261.266 123.54 259.571 120.971 259.16L90.9189 252.995C78.5898 250.529 72.4253 242.259 72.4253 228.183V219.553C72.4253 202.292 81.0557 193.662 98.3164 193.662H133.608L143.934 201.675V213.696H99.2411C96.1588 213.696 94.6177 215.237 94.6177 218.32V228.337C94.6177 231.214 95.9019 232.909 98.4705 233.423L128.523 239.433C140.852 241.899 147.016 250.17 147.016 264.246V274.109C147.016 291.37 138.386 300 121.125 300H82.7509L72.4253 291.986ZM167.651 300V193.662H219.433C236.694 193.662 245.324 202.292 245.324 219.553V237.122C245.324 249.964 240.546 257.978 230.991 261.163L248.406 295.377L245.786 300H226.676L207.874 263.013H189.843V300H167.651ZM189.843 242.978H218.508C221.591 242.978 223.132 241.437 223.132 238.355V218.32C223.132 215.237 221.591 213.696 218.508 213.696H189.843V242.978ZM262.96 274.109V253.766H285.153V275.342C285.153 278.424 286.694 279.965 289.776 279.965H310.736C313.818 279.965 315.359 278.424 315.359 275.342V213.696H286.386V193.662H337.551V274.109C337.551 291.37 328.921 300 311.66 300H288.852C271.591 300 262.96 291.37 262.96 274.109ZM361.948 300V193.662H413.731C430.991 193.662 439.622 202.292 439.622 219.553V240.204C439.622 257.465 430.991 266.095 413.731 266.095H384.141V300H361.948ZM384.141 246.06H412.806C415.888 246.06 417.429 244.519 417.429 241.437V218.32C417.429 215.237 415.888 213.696 412.806 213.696H384.141V246.06Z" fill="white"/>
+<path d="M304.958 332.848V322.831H348.418V332.848H332.236V376H321.14V332.848H304.958ZM356.61 376V322.831H376.799C391.285 322.831 398.529 330.074 398.529 344.561V354.27C398.529 368.757 391.285 376 376.799 376H356.61ZM367.706 365.983H377.415C384.093 365.983 387.432 362.643 387.432 355.965V342.866C387.432 336.187 384.093 332.848 377.415 332.848H367.706V365.983ZM407.35 376V358.662C407.35 351.624 410.432 347.489 416.597 346.256L430.852 343.405C432.136 343.148 432.779 342.3 432.779 340.862V335.16C432.779 333.619 432.008 332.848 430.467 332.848H408.891V326.838L414.054 322.831H430.929C439.56 322.831 443.875 327.146 443.875 335.776V340.785C443.875 347.823 440.792 351.958 434.628 353.191L420.372 356.042C419.088 356.299 418.446 357.147 418.446 358.585V365.983H443.875V376H407.35Z" fill="#E63E3E"/>
+</svg>

src/App.tsx

@@ -6,13 +6,12 @@ import LandingSection from './sections/LandingSection';
 import './i18n';
 import ProjectsSection from './sections/ProjectsSection';
 import AboutSection from './sections/AboutSection';
-import AnimatedBg from './components/AnimatedBg';
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <>
-        <AnimatedBg />
+        {/* <AnimatedBg /> */}
         <GlobalStyles />
         <Navbar />
 

src/components/styles/Projects.styled.ts

@@ -62,14 +62,15 @@ export const StyledProjects = styled.section`
 
   .project-title {
     display: flex;
-    gap: 0.5em;
+    gap: 0.4em;
 
     h2 {
       display: inline;
     }
 
     img.project-title-icon {
-      max-width: 2em;
+      width: 2em;
+      height: 2em;
     }
   }
 

src/locales/en.json

@@ -27,10 +27,8 @@
   "projects": {
     "title-1": "MY",
     "title-2": "PROJECTS",
-
     "showcase-title": "SHOWCASE - MAJOR PROJECTS",
     "other-projects-title": "OTHER PROJECTS",
-
     "source-link": "SOURCE",
     "docs-link": "DOCS",
     "live-app-link": "LIVE APP",
@@ -46,6 +44,14 @@
       "title": "GeneraTOR",
       "description": "The last of the \"Holy Trinity\" of applications created for the TD2 simulator. It's a graphical interface of so-called \"written orders\" (which are used in railway traffic to conduct trains in case of emergency). The app is fully interactive and beginner-friendly. It's available in native (Polish) language only due to the nature of the written orders which are exclusively used in Polish railway system."
     },
+    "pragotron": {
+      "title": "Pragotron TD2",
+      "description": "A simple simulator of Pragotron (the colloquial name for an old Czechoslovakian station departure board) displaying active schedules for a given scenario in the Train Driver 2 simulator."
+    },
+    "srjp": {
+      "title": "Rozkładownik - SRJP",
+      "description": "An online tool to generate printable timetables of user's train relation for Train Driver 2 simulator."
+    },
     "stacjownik-manager": {
       "title": "Stacjownik Station Manager",
       "description": "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). It's connected with dedicated API where all the changes are processed and updated. The manager is protected with a simple authentication system that prevents unauthorized people from accessing and using the site. Available entirely in Polish for practical reasons."
@@ -54,6 +60,10 @@
       "title": "Stacjownik Backend & API Services",
       "description": "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."
     },
+    "td2-discord-presence-ui": {
+      "title": "TD2 Discord Presence UI",
+      "description": "A standalone desktop application displaying current in-game user info on Discord for Train Driver 2 simulator."
+    },
     "stacjobot": {
       "title": "Stacjobot - Discord bot",
       "description": ""

src/locales/pl.json

@@ -46,6 +46,14 @@
       "title": "GeneraTOR",
       "description": "Strona z przygotowaną reprezentacją tzw. rozkazów pisemnych, które stanowią integralną część prowadzenia ruchu kolejowego. Za pomocą tej aplikacji można w wygodny i szybki sposób przygotować rozkaz dla gracza w symulatorze Train Driver 2, a następnie przekazać go za pomocą czatu. Narzędzie jest zaprojektowane tak, aby było jak najbardziej intuicyjne i dla początkujących. Jest dostępne tylko w języku polskim, jako że rozkazy pisemne mogą być podawane wyłącznie w tym języku."
     },
+    "pragotron": {
+      "title": "Pragotron TD2",
+      "description": "A simple simulator of Pragotron (the colloquial name for an old Czechoslovakian station departure board) displaying active schedules for a given scenario in the Train Driver 2 simulator."
+    },
+    "srjp": {
+      "title": "Rozkładownik - SRJP",
+      "description": "An online tool to generate printable timetables of user's train relation for Train Driver 2 simulator."
+    },
     "stacjownik-manager": {
       "title": "Stacjownik Station Manager",
       "description": "Dodatkowe narzędzie stworzone dla osób, które pomagają w aktualizacjach Stacjownika. Menedżer jest połączony z dedykowanym API i zabezpieczony przed nieautoryzowanym wejściem. Z powodów praktycznych, aplikacja jest tylko w języku polskim."
@@ -54,8 +62,12 @@
       "title": "Usługi backendowe Stacjownika",
       "description": "Główny serwer Stacjownika. Tutaj znajduje się serce przetwarzania informacji i wystawiania ich za pomocą API dla pozostałych aplikacji stworzonych dla symulatora Train Driver 2. Serwer operuje na Node.js, stworzony we frameworku Nest.js oraz z bazą danych PostgreSQL. Procesami serwerowymi zarządza PM2 na dedykowanym serwerze VPS z systemem Ubuntu."
     },
+    "td2-discord-presence-ui": {
+      "title": "TD2 Discord Presence UI",
+      "description": "A standalone desktop application displaying current in-game user info on Discord for Train Driver 2 simulator."
+    },
     "stacjobot": {
-      "title": "Stacjobot - bot Discord",
+      "title": "Stacjobot",
       "description": "Bot dla oficjalnego serwera Discord Stacjownika, za pomocą którego można wyszukiwać dane o graczach i sceneriach w symulatorze Train Driver 2, tak jak na stronie Stacjownika oraz brać udział w dedykowanych aktywnościach na serwerze. Jest on w całości zintegrowany z usługami backendowymi oraz API."
     },
     "td2-discord-presence": {

src/sections/ProjectsSection.tsx

@@ -26,6 +26,8 @@ const badges = {
   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',
+  Tailwind: 'https://img.shields.io/badge/TAILWIND-blue?style=for-the-badge&logo=tailwindcss&logoColor=white',
+  Electron: 'https://img.shields.io/badge/Electron%20JS-white?style=for-the-badge&logo=electron&logoColor=blue',
 };
 
 const projects = {
@@ -57,6 +59,23 @@ const projects = {
       repoLink: 'https://github.com/Spythere/genera-tor',
       siteLink: 'https://generator-td2.web.app/',
     },
+    {
+      id: 'srjp',
+      thumbnailSrc: 'srjp-1.png',
+      iconSrc: 'srjp-logo.svg',
+      subtitle: '',
+      technologies: [badges.Vue, badges.TS, badges.Tailwind],
+      repoLink: 'https://github.com/Spythere/srjp-td2',
+      siteLink: 'https://srjp-td2.web.app/',
+    },
+    {
+      id: 'td2-discord-presence-ui',
+      thumbnailSrc: 'td2-discord-presence-1.png',
+      iconSrc: 'td2-discord-presence-logo.png',
+      subtitle: '',
+      technologies: [badges.Node, badges.TS, badges.Electron],
+      repoLink: 'https://github.com/Spythere/td2-discord-presence-ui',
+    },
     {
       id: 'stacjownik-manager',
       thumbnailSrc: 'stacjownik-manager-1.png',
@@ -114,7 +133,7 @@ function ProjectsSection() {
             </div>
 
             <div className="project-content">
-              <a className="project-title" href={p.siteLink} target="_blank">
+              <a className="project-title" href={p.siteLink ?? p.repoLink} 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>
@@ -131,14 +150,18 @@ function ProjectsSection() {
               <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.siteLink && (
                   <a href={p.siteLink} target="_blank">
                     <FaExternalLinkAlt />
                     {t('projects.live-app-link')}
                   </a>
+                )}
               </div>
             </div>
           </div>