refactor(PageSection):👷map index and function return

components/layout/project-page/PageSection.tsx

@@ -4,17 +4,19 @@ import { Section } from '@/utils/interfaces/interfaces'
 
 type PageSectionProps = Section
 
-const PageSection = ({ title, titleHighlight, items }: PageSectionProps) => (
-  <div className="mt-8">
-    <h3 className="mb-4 text-3xl font-bold">
-      {title} {titleHighlight && <span className="text-violet-600">{titleHighlight}</span>}
-    </h3>
-    <List>
-      {items.map((item, index) => (
-        <ListItem key={index}>{item}</ListItem>
-      ))}
-    </List>
-  </div>
-)
+const PageSection = ({ title, titleHighlight, items }: PageSectionProps) => {
+  return (
+    <div className="mt-8">
+      <h3 className="mb-4 text-3xl font-bold">
+        {title} {titleHighlight && <span className="text-violet-600">{titleHighlight}</span>}
+      </h3>
+      <List>
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.text}</ListItem>
+        ))}
+      </List>
+    </div>
+  )
+}
 
 export default PageSection

data/projects/personal/cryptoMania.ts

@@ -1,12 +1,16 @@
+import { TEXT } from '@/localization/english'
 import { Section } from '@/utils/interfaces/interfaces'
 
 export const sections: Section[] = [
   {
     id: 1,
-    title: 'Description',
+    title: TEXT.description,
     titleHighlight: '',
     items: [
-      'This site was created to display cryptocurrencies with the ability to search for them and display their current value.',
+      {
+        id: '1-0',
+        text: 'This site was created to display cryptocurrencies with the ability to search for them and display their current value.',
+      },
     ],
   },
 ]

data/projects/personal/krsiak.ts

@@ -1,10 +1,16 @@
+import { TEXT } from '@/localization/english'
 import { Section } from '@/utils/interfaces/interfaces'
 
 export const sections: Section[] = [
   {
     id: 1,
-    title: 'Description',
+    title: TEXT.description,
     titleHighlight: '',
-    items: ['I needed a new website for my personal presentation. I learnt Next.js, and used Tailwind CSS.'],
+    items: [
+      {
+        id: '1-0',
+        text: 'I needed a new website for my personal presentation. I learnt Next.js, and used Tailwind CSS.',
+      },
+    ],
   },
 ]

data/projects/work/groupon.ts

@@ -1,47 +1,93 @@
+import { TEXT } from '@/localization/english'
 import { Section } from '@/utils/interfaces/interfaces'
 
 export const sections: Section[] = [
   {
     id: 1,
-    title: 'My job',
+    title: TEXT.myJob,
     titleHighlight: '',
     items: [
-      'I worked on automation, testing scripts and team coordination.',
-      'Groupon is an online marketplace, offering discounts on products and services, with 17 million customers.',
+      {
+        id: '1-0',
+        text: 'I worked on automation, testing scripts and team coordination.',
+      },
+      {
+        id: '1-1',
+        text: 'Groupon is an online marketplace, offering discounts on products and services, with 17 million customers.',
+      },
     ],
   },
   {
     id: 2,
     title: 'My role',
     titleHighlight: '',
     items: [
-      'SDET = Software Development Engineer in Testing.',
-      'In testing, it is an IT professional who can work equally in both development and testing.',
+      {
+        id: '2-0',
+        text: 'SDET = Software Development Engineer in Testing.',
+      },
+      {
+        id: '2-1',
+        text: 'In testing, it is an IT professional who can work equally in both development and testing.',
+      },
     ],
   },
   {
     id: 3,
     title: 'Responsibility #1:',
     titleHighlight: 'QA Automation and Testing Scripts',
     items: [
-      'Setting up automation, including Playwright for E2E.',
-      'Writing E2E tests in JavaScript and TypeScript.',
-      'Coordinating efforts related to unit tests and integration tests.',
-      'Writing documentation for developers.',
-      'CI/CD pipeline in GitHub using Jenkins, for unit, integration, and E2E tests.',
+      {
+        id: '3-0',
+        text: 'Setting up automation, including Playwright for E2E.',
+      },
+      {
+        id: '3-1',
+        text: 'Writing E2E tests in JavaScript and TypeScript.',
+      },
+      {
+        id: '3-2',
+        text: 'Coordinating efforts related to unit tests and integration tests.',
+      },
+      {
+        id: '3-3',
+        text: 'Writing documentation for developers.',
+      },
+      {
+        id: '3-4',
+        text: 'CI/CD pipeline in GitHub using Jenkins, for unit, integration, and E2E tests.',
+      },
     ],
   },
   {
     id: 4,
     title: 'Responsibility #2:',
     titleHighlight: 'Team Coordination',
     items: [
-      'Involved in hiring new SDET members for QA team.',
-      'Work across 4 teams.',
-      '3 DEV teams (15 developers). Setting priorities for writing unit and integration tests.',
-      '1 QA team (6 manual testers). Coordinating regression testing for the website.',
-      'Drive the discussion and decisions on technical topics related to the teams.',
-      'Keeping up-to-date JIRA tasks for testing.',
+      {
+        id: '4-0',
+        text: 'Involved in hiring new SDET members for QA team.',
+      },
+      {
+        id: '4-1',
+        text: 'Work across 4 teams.',
+      },
+      {
+        id: '4-2',
+        text: '3 DEV teams (15 developers). Setting priorities for writing unit and integration tests.',
+      },
+      {
+        id: '4-3',
+        text: '1 QA team (6 manual testers). Coordinating regression testing for the website.',
+      },
+      {
+        id: '4-4',
+        text: 'Drive the discussion and decisions on technical topics related to the teams.',
+      },
+      {
+        id: '4-5',
+        text: 'Keeping up-to-date JIRA tasks for testing.',
+      },
     ],
   },
 ]

data/projects/work/komercniBanka.ts

@@ -1,32 +1,54 @@
+import { TEXT } from '@/localization/english'
 import { Section } from '@/utils/interfaces/interfaces'
 
 export const sections: Section[] = [
   {
     id: 1,
-    title: 'My job',
+    title: TEXT.myJob,
     titleHighlight: '',
     items: [
-      'I worked for the 3rd biggest bank in the Czech Republic, Komerční banka, owned by Société Générale.',
-      'I worked on a website that is used by 2 000 000+ customers.',
+      {
+        id: '1-0',
+        text: 'I worked for the 3rd biggest bank in the Czech Republic, Komerční banka, owned by Société Générale.',
+      },
+      {
+        id: '1-1',
+        text: 'I worked on a website that is used by 2 000 000+ customers.',
+      },
     ],
   },
   {
     id: 2,
     title: 'Developed new features',
     titleHighlight: '',
     items: [
-      'I was tasked with creating a search page, with filters and results pagination for the bank branches and ATM locations and detail sub-pages.',
-      'My task was to provide an easy user experience for all customers, using the Geolocation API and the Google Places Autocomplete API, so they could find their nearest bank branch or ATM.',
-      'I created an Exchange Rates page with rates detail pages.',
+      {
+        id: '2-0',
+        text: 'I was tasked with creating a search page, with filters and results pagination for the bank branches and ATM locations and detail sub-pages.',
+      },
+      {
+        id: '2-1',
+        text: 'My task was to provide an easy user experience for all customers, using the Geolocation API and the Google Places Autocomplete API, so they could find their nearest bank branch or ATM.',
+      },
+      {
+        id: '2-2',
+        text: 'I created an Exchange Rates page with rates detail pages.',
+      },
     ],
   },
   {
     id: 3,
     title: 'Responsive design',
     titleHighlight: '',
     items: [
-      'I was responsible for the responsive aspects of the web as well.',
-      'Making sure it works well for users across desktop, tablet, and mobile platforms.',
+      {
+        id: '3-0',
+        text: 'I was responsible for the responsive aspects of the web as well.',
+      },
+      {
+        id: '3-1',
+        text: 'Making sure it works well for users across desktop, tablet, and mobile platforms.',
+      },
     ],
   },
 ]

data/projects/work/kooperativa.ts

@@ -1,23 +1,39 @@
+import { TEXT } from '@/localization/english'
 import { Section } from '@/utils/interfaces/interfaces'
 
 export const sections: Section[] = [
   {
     id: 1,
-    title: 'My job',
+    title: TEXT.myJob,
     titleHighlight: '',
     items: [
-      'I worked for Kooperativa, the 2nd biggest insurance company in the Czech Republic, owned by Vienna Insurance Group.',
-      'I was involved in the development of application that will improve services and customer experience of over 2 480 000+  customers.',
+      {
+        id: '1-0',
+        text: 'I worked for Kooperativa, the 2nd biggest insurance company in the Czech Republic, owned by Vienna Insurance Group.',
+      },
+      {
+        id: '1-1',
+        text: 'I was involved in the development of application that will improve services and customer experience of over 2 480 000+ customers.',
+      },
     ],
   },
   {
     id: 2,
     title: 'Developed new features',
     titleHighlight: '',
     items: [
-      'I was part of team to create comprehensive solution for arranging and managing insurance contracts.',
-      'The application is designed to enhance the customer experience while providing employees with a modern system that simplifies their work.',
-      'I worked with TypeScript, React, and Redux. I used Figma designs to develop a user interface. I also worked with a backend developer to ensure  API integration.',
+      {
+        id: '2-0',
+        text: 'I was part of team to create comprehensive solution for arranging and managing insurance contracts.',
+      },
+      {
+        id: '2-1',
+        text: 'The application is designed to enhance the customer experience while providing employees with a modern system that simplifies their work.',
+      },
+      {
+        id: '2-2',
+        text: 'I worked with TypeScript, React, and Redux. I used Figma designs to develop a user interface. I also worked with a backend developer to ensure API integration.',
+      },
     ],
   },
 ]

data/projects/work/moravia.ts

@@ -1,26 +1,38 @@
+import { TEXT } from '@/localization/english'
 import { Section } from '@/utils/interfaces/interfaces'
 
 export const sections: Section[] = [
   {
     id: 1,
-    title: 'My job',
+    title: TEXT.myJob,
     titleHighlight: '',
-    items: ['I managed a team of 3 people in localization team.'],
+    items: [
+      {
+        id: '1-0',
+        text: 'I managed a team of 3 people in localization team.',
+      },
+    ],
   },
   {
     id: 2,
     title: 'Responsibility',
     titleHighlight: '',
     items: [
-      'I was responsible for translation delivery and quality checks for Microsoft projects Windows 8 + Windows Phone.',
+      {
+        id: '2-0',
+        text: 'I was responsible for translation delivery and quality checks for Microsoft projects Windows 8 + Windows Phone.',
+      },
     ],
   },
   {
     id: 3,
     title: 'QA Automation',
     titleHighlight: '',
     items: [
-      'I was working on automation and scripts for manual repetitive tasks including filling in forms and checking translations.',
+      {
+        id: '3-0',
+        text: 'I was working on automation and scripts for manual repetitive tasks including filling in forms and checking translations.',
+      },
     ],
   },
 ]

data/projects/work/smartsuppDashboard.ts

@@ -1,23 +1,39 @@
+import { TEXT } from '@/localization/english'
 import { Section } from '@/utils/interfaces/interfaces'
 
 export const sections: Section[] = [
   {
     id: 1,
-    title: 'My job',
+    title: TEXT.myJob,
     titleHighlight: '',
     items: [
-      'I worked for a company that creates a chat solution for customer care teams.',
-      'The product is a chat box for e-commerce and regular websites, and integrates with an email inbox and Facebook Messenger, all-in-one messaging platform.',
+      {
+        id: '1-0',
+        text: 'I worked for a company that creates a chat solution for customer care teams.',
+      },
+      {
+        id: '1-1',
+        text: 'The product is a chat box for e-commerce and regular websites, and integrates with an email inbox and Facebook Messenger, all-in-one messaging platform.',
+      },
     ],
   },
   {
     id: 2,
     title: 'Developed new features',
     titleHighlight: '',
     items: [
-      'I participated in the implementation of new features for the chat application dashboard.',
-      'Ranging from new chat features to working on a chatbot page and creating graphs for statistics.',
-      'I also updated the old JavaScript codebase to a modern one using REACT with hooks.',
+      {
+        id: '2-0',
+        text: 'I participated in the implementation of new features for the chat application dashboard.',
+      },
+      {
+        id: '2-1',
+        text: 'Ranging from new chat features to working on a chatbot page and creating graphs for statistics.',
+      },
+      {
+        id: '2-2',
+        text: 'I also updated the old JavaScript codebase to a modern one using REACT with hooks.',
+      },
     ],
   },
 ]