chore: updated projects & about sections

src/components/AnimatedText.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useRef } from 'react';
+import { StyledAnimatedText } from './styles/AnimatedText.styled';
+
+interface IProps {
+  children: ReactNode;
+}
+
+export default function AnimatedText(props: IProps) {
+  const test = useRef<HTMLElement>(null);
+
+  // useEffect(() => {
+  //   console.log(test.current?.textContent);
+  // }, [test]);
+
+  return (
+    <StyledAnimatedText>
+      <span ref={test}>{props.children}</span>
+      <span className="cursor"></span>
+    </StyledAnimatedText>
+  );
+}

src/components/styles/AnimatedText.styled.ts

@@ -0,0 +1,19 @@
+import { styled } from 'styled-components';
+
+export const StyledAnimatedText = styled.div`
+  position: relative;
+  display: inline-block;
+
+  .cursor {
+    position: absolute;
+    top: 0;
+    left: calc(100% + 0.25em);
+
+    width: 10px;
+    height: 100%;
+
+    background-color: ${({ theme }) => theme.colors['accent']};
+
+    animation: blinking 1s infinite;
+  }
+`;

src/locales/pl.json

@@ -21,7 +21,7 @@
     "brief-2-title": "Wykształcenie",
     "brief-2-content": "technik mechatronik i inżynier informatyki",
     "brief-3-title": "Doświadczenie zawodowe",
-    "brief-3-content": "początkujący junior",
+    "brief-3-content": "początkujący\njunior",
     "brief-4-title": "Ulubione technologie"
   },
   "projects": {
@@ -36,31 +36,31 @@
     "live-app-link": "APLIKACJA",
     "stacjownik": {
       "title": "Stacjownik",
-      "description": "A tool made for the Polish railway simulator: Train Driver 2. It collects all the available data sent over API from the game, processes it and shows it on the page in a convenient form. User can browse online players, as well as search for their history and past activities. The app uses dedicated Stacjownik API which is collecting and serving game data on the backend. It's available in two languages: Polish and English."
+      "description": "Narzędzie stworzone dla społeczności polskiego symulatora kolei Train Driver 2. Zbiera i przetwarza dostępne dane z API gry, a następnie pokazuje je na stronie w przystępnej formie. Użytkownik może przeglądać graczy online, a także korzystać z funkcji dziennika, w którym zapisana jest ich historia aktywności w symulatorze. Aplikacja korzysta z dedykowanego API, za pomocą którego gromadzone są m.in. dane do dziennika. Stacjownik jest dostępny w dwóch językach - polskim i angielskim."
     },
     "pojazdownik": {
       "title": "Pojazdownik",
-      "description": "Another tool made for the Train Driver 2 community, which allows players to easily create their own railway rolling stock configurations. Its main features consist of uploading & downloading created rolling stock, drawing a real train number (according to Polish railways regulations) and generating a freight train composition with specified cargo. It's available in two languages: Polish and English."
+      "description": "Kolejne narzędzie zaprojektowane z myślą o symulatorze Train Driver 2. Pozwala na szybkie tworzenie i edycję składów pociągów, za pomocą których mogą poruszać się gracze. Głównymi funkcjami aplikacji są możliwość wgrania własnych zestawień, dodawanie i usuwanie pojazdów i wagonów, a także generator składu towarowego na podstawie wybranego ładunku w wagonach. Strona, podobnie jak Stacjownik, jest dostępna w języku polskim i angielskim."
     },
     "generator": {
       "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."
+      "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."
     },
     "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."
+      "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."
     },
     "stacjownik-api": {
-      "title": "Stacjownik Backend & API Services",
+      "title": "Usługi backendowe Stacjownika",
-      "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."
+      "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."
     },
     "stacjobot": {
-      "title": "Stacjobot - Discord bot",
+      "title": "Stacjobot - bot Discord",
-      "description": ""
+      "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": {
       "title": "TD2 Discord Presence",
-      "description": ""
+      "description": "Przestarzała wersja własnego statusu gracza w komunikatorze Discord, wyświetlająca informacje o użytkowniku w symulatorze Train Driver 2. Stworzona najpierw w C#, potem została jednak całkowicie przepisana w Electronie razem z nowym interfejsem graficznym."
     }
   }
 }

src/sections/AboutSection.tsx

@@ -1,13 +1,16 @@
 import { FaBriefcase, FaHeart, FaStar, FaUserGraduate, FaVuejs } from 'react-icons/fa';
 import { StyledAbout } from '../components/styles/About.styled';
-import { StyledCursor } from '../components/styles/Cursor.styled';
 import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
+import { StyledCursor } from '../components/styles/Cursor.styled';
 import { SiNestjs } from 'react-icons/si';
 
 import { useGSAP } from '@gsap/react';
 import { gsap } from 'gsap';
+import { useTranslation } from 'react-i18next';
 
 function AboutSection() {
+  const { t } = useTranslation();
+
   useGSAP(() => {
     const tl = gsap.timeline({
       scrollTrigger: {
@@ -36,24 +39,22 @@ function AboutSection() {
 
         <div className="about-content">
           <StyledSectionHeader>
-            ABOUT{' '}
+            <div>
-            <span className="text--accent" style={{ position: 'relative' }}>
+              {t('about.title-1') + ' '}
-              ME
+              <span className="text--accent" style={{ position: 'relative' }}>
-              <StyledCursor />
+                {t('about.title-2')}
-            </span>
+                <StyledCursor />
+              </span>
+            </div>
           </StyledSectionHeader>
 
-          <h2>A coder with a pinch of explorer</h2>
+          <h2>{t('about.subtitle')}</h2>
 
           <p>
-            I am a self-taught programmer who excels in working with web technologies. I spend most of my free time creating and expanding
+            {t('about.content')}
-            applications for the Polish train simulator,{' '}
+            {/* <a href="https://td2.info.pl/" target="_blank">
-            <a href="https://td2.info.pl/" target="_blank">
               Train Driver 2
-            </a>
+            </a> */}
-            , where I actively participate as a developer. In my projects, I value simplicity and functionality. I aim for my tools to be
-            user-friendly and accessible to everyone. I often stick to solutions I am used to work with, but I'm not afraid to change them in order to
-            make my projects better and more efficient. I enjoy exploring and testing new technologies and I have no trouble adapting to them.
           </p>
         </div>
       </div>
@@ -62,34 +63,31 @@ function AboutSection() {
         <div className="stat-item">
           <h1>
             <FaStar />
-            <div>Pasjonat programowania</div>
+            <div>{t('about.brief-1-title')}</div>
           </h1>
-          <p>od 9 lat</p>
+          <p>{t('about.brief-1-content')}</p>
         </div>
 
         <div className="stat-item">
           <h1>
             <FaUserGraduate />
-            <div>Wykształcenie</div>
+            <div>{t('about.brief-2-title')}</div>
           </h1>
-          <p>wyższe - absolwent informatyki</p>
+          <p>{t('about.brief-2-content')}</p>
         </div>
 
         <div className="stat-item">
           <h1>
             <FaBriefcase />
-            <div>Zaawansowanie zawodowe</div>
+            <div>{t('about.brief-3-title')}</div>
           </h1>
-          <p>
+          <p>{t('about.brief-3-content')}</p>
-            początkujący <br />
-            junior
-          </p>
         </div>
 
         <div className="stat-item">
           <h1>
             <FaHeart />
-            <div>Ulubione technologie</div>
+            <div>{t('about.brief-4-title')}</div>
           </h1>
           <p>
             <FaVuejs /> Vue

src/sections/ProjectsSection.tsx

@@ -2,6 +2,7 @@ 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',
@@ -30,50 +31,37 @@ const badges = {
 const projects = {
   showcase: [
     {
+      id: 'stacjownik',
       thumbnailSrc: 'stacjownik-1.png',
       iconSrc: 'stacjownik-logo.svg',
-      title: 'Stacjownik',
       subtitle: '',
-      desc: "A tool made for the Polish railway simulator: Train Driver 2.\
-      It collects all the available data sent over API from the game, processes it and shows it on the page in a convenient form.\
-      User can browse online players, as well as search for their history and past activities. The app\
-      uses dedicated Stacjownik API which is collecting and serving game data on the backend. It's available in two languages: Polish and English.",
       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',
-      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.\
-      Its main features consist of uploading & downloading created rolling stock, drawing a real train number (according to Polish railways regulations)\
-      and generating a freight train composition with specified cargo. It's available in two languages: Polish and English.",
       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',
-      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"\
-      (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.',
       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',
-      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).\
-      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.",
       technologies: [badges.Vue, badges.TS, badges.SASS],
       repoLink: 'https://github.com/Spythere/station-manager-2.0',
       siteLink: 'https://station-manager.web.app/',
@@ -81,30 +69,22 @@ const projects = {
   ],
   other: [
     {
-      title: 'Stacjownik Backend + API',
+      id: 'stacjownik-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',
+      id: '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',
+      id: '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',
     },
@@ -112,17 +92,19 @@ const projects = {
 };
 
 function ProjectsSection() {
+  const { t } = useTranslation();
+
   return (
     <StyledProjects id="projects">
       <StyledSectionHeader>
-        MY{' '}
+        {t('projects.title-1') + ' '}
         <span className="text--accent" style={{ position: 'relative' }}>
-          PROJECTS
+          {t('projects.title-2')}
           <StyledCursor />
         </span>
       </StyledSectionHeader>
 
-      <h3 className="sub-header">SHOWCASE - MAJOR PROJECTS</h3>
+      <h3 className="sub-header">{t('projects.showcase-title')}</h3>
 
       <div className="showcase-container">
         {projects.showcase.map((p) => (
@@ -134,7 +116,7 @@ function ProjectsSection() {
             <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">{p.title}</h2>
+                <h2 className="project-title-content">{t(`projects.${p.id}.title`)}</h2>
               </a>
               <h3 className="project-subtitle">{p.subtitle}</h3>
 
@@ -146,16 +128,16 @@ function ProjectsSection() {
 
               <hr />
 
-              <p className="project-desc">{p.desc}</p>
+              <p className="project-desc">{t(`projects.${p.id}.description`)}</p>
 
               <div className="project-actions">
                 <a href={p.repoLink} target="_blank">
                   <FaGithub />
-                  SOURCE
+                  {t('projects.source-link')}
                 </a>
                 <a href={p.siteLink} target="_blank">
                   <FaExternalLinkAlt />
-                  LIVE APP
+                  {t('projects.live-app-link')}
                 </a>
               </div>
             </div>
@@ -163,7 +145,7 @@ function ProjectsSection() {
         ))}
       </div>
 
-      <h3 className="sub-header">OTHER PROJECTS</h3>
+      <h3 className="sub-header">{t('projects.other-projects-title')}</h3>
 
       <div className="other-projects-container">
         {projects.other.map((p) => (
@@ -171,7 +153,7 @@ function ProjectsSection() {
             <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>
+                <h2 className="project-title-content">{t(`projects.${p.id}.title`)}</h2>
               </div>
               <h3 className="project-subtitle">{p.subtitle}</h3>
 
@@ -183,20 +165,20 @@ function ProjectsSection() {
 
               <hr />
 
-              <p className="project-desc">{p.desc}</p>
+              <p className="project-desc">{t(`projects.${p.id}.description`)}</p>
 
               <div className="project-actions">
                 {p.repoLink && (
                   <a href={p.repoLink} target="_blank">
                     <FaGithub />
-                    SOURCE
+                    {t('projects.source-link')}
                   </a>
                 )}
 
                 {p.docsLink && (
                   <a href={p.docsLink} target="_blank">
                     <FaExternalLinkAlt />
-                    DOCS
+                    {t('projects.docs-link')}
                   </a>
                 )}
               </div>

vite.config.ts

@@ -5,6 +5,6 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [react()],
   server: {
-    port: 5002,
+    port: 5000,
   },
 });