feat(experience): ✨ work project Kooperativa

app/work-experience/komercni-banka/page.tsx

@@ -43,9 +43,9 @@ const ProjectWorkKomercniBanka = () => {
           pageLinkPrevious="/work-experience/smartsupp-dashboard"
           pageNamePrevious="Smartsupp Dashboard"
           dataTestIDPrevious="page-navigation-previous-smartsupp-dashboard"
-          pageLinkNext="/work-experience/smartsupp-web"
-          pageNameNext="Smartsupp Web"
-          dataTestIDNext="page-navigation-next-smartsupp-web"
+          pageLinkNext="/work-experience/kooperativa"
+          pageNameNext="Kooperativa"
+          dataTestIDNext="page-navigation-next-kooperativa"
         />
       }
     />

app/work-experience/kooperativa/page.tsx

@@ -0,0 +1,57 @@
+import NextPageNavigation from '@/components/NextPageNavigation'
+import { ProjectPageLayoutWrapper } from '@/components/layout/projectPage/ProjectPageLayoutWrapper'
+import { sections } from '@/data/projects/work/kooperativa'
+import { projectsWorkReact } from '@/data/projects/work/projectsOverview'
+import { ID, PAGES_URL } from '@/utils/constants'
+import { BreadCrumbsType } from '@/utils/types'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Kooperativa | Daniel Krsiak - React Developer',
+  description: 'I worked on an application for managing insurance policies for citizens property and products.',
+  keywords: [
+    'Daniel Krsiak',
+    'Kooperativa',
+    'Insurance company app',
+    'React Developer',
+    'JavaScript',
+    'TypeScript',
+    'React',
+    'Redux',
+    'Tailwind CSS',
+    'Figma',
+    'Storybook',
+  ],
+}
+
+const breadCrumbs: BreadCrumbsType = {
+  linkLevel1: '/work-experience',
+  textLevel1: 'Work Experience',
+  linkLevel2: '/work-experience/kooperativa',
+  textLevel2: 'Kooperativa',
+}
+
+const ProjectWorkKooperativa = () => {
+  return (
+    <ProjectPageLayoutWrapper
+      breadCrumbs={breadCrumbs}
+      pageID={PAGES_URL.work.kooperativa}
+      goBackLink="work"
+      sectionID={ID.section.react}
+      projectData={projectsWorkReact[2]}
+      sections={sections}
+      nextPageNavigation={
+        <NextPageNavigation
+          pageLinkPrevious="/work-experience/komercni-banka"
+          pageNamePrevious="Komerční banka"
+          dataTestIDPrevious="page-navigation-previous-komercni-banka"
+          pageLinkNext="/work-experience/smartsupp-web"
+          pageNameNext="Smartsupp Web"
+          dataTestIDNext="page-navigation-next-smartsupp-web"
+        />
+      }
+    />
+  )
+}
+
+export default ProjectWorkKooperativa

app/work-experience/smartsupp-web/page.tsx

@@ -41,9 +41,9 @@ const ProjectWorkSmartsuppWeb = () => {
       sections={sections}
       nextPageNavigation={
         <NextPageNavigation
-          pageLinkPrevious="/work-experience/komercni-banka"
-          pageNamePrevious="Komerční banka"
-          dataTestIDPrevious="page-navigation-previous-komercni-banka"
+          pageLinkPrevious="/work-experience/kooperativa"
+          pageNamePrevious="Kooperativa"
+          dataTestIDPrevious="page-navigation-previous-kooperativa"
           pageLinkNext="/work-experience/smartsupp-help"
           pageNameNext="Smartsupp HELP"
           dataTestIDNext="page-navigation-next-smartsupp-help"

components/layout/projectPage/HeaderSection.tsx

@@ -4,13 +4,13 @@ import { getGoBackLinkID } from '@/utils/getGoBackLink'
 import { HeaderSectionProps } from '@/utils/types'
 import Link from 'next/link'
 
-const HeaderSection = ({ title, role, years, goBackLink, sectionID }: HeaderSectionProps) => {
+const HeaderSection = ({ title, role, years, company, goBackLink, sectionID }: HeaderSectionProps) => {
   return (
     <div className="mb-16">
       <h1 className="mb-2 text-5xl font-bold leading-none tracking-tight text-neutral-900 sm:text-7xl">{title}</h1>
       <Heading2 textColor="text-violet-600">
         {role}
-        {years && <small className="text-md text-neutral-500">{` · ${years}`}</small>}
+        {years && <small className="text-md text-neutral-500">{` · ${years} · ${company}`}</small>}
       </Heading2>
       <p className="mb-3 mt-4">
         <Link

components/layout/projectPage/ProjectPageLayout.tsx

@@ -21,6 +21,7 @@ const ProjectPageLayout = ({
   title,
   role,
   years,
+  company,
   goBackLink,
   sectionID,
   description,
@@ -40,7 +41,14 @@ const ProjectPageLayout = ({
         linkLevel2={breadCrumbs.linkLevel2}
         textLevel2={breadCrumbs.textLevel2}
       />
-      <HeaderSection title={title} role={role} years={years} goBackLink={goBackLink} sectionID={sectionID} />
+      <HeaderSection
+        title={title}
+        role={role}
+        years={years}
+        company={company}
+        goBackLink={goBackLink}
+        sectionID={sectionID}
+      />
       <ProjectInformation
         description={description}
         mySkills={mySkills}

components/layout/projectPage/ProjectPageLayoutWrapper.tsx

@@ -20,7 +20,7 @@ export const ProjectPageLayoutWrapper = ({
   sections,
   nextPageNavigation,
 }: Props) => {
-  const { title, role, years, description, mySkills, customers, projectLinks, imageShowcase } = projectData
+  const { title, role, years, company, description, mySkills, customers, projectLinks, imageShowcase } = projectData
 
   return (
     <ProjectPageLayout
@@ -29,6 +29,7 @@ export const ProjectPageLayoutWrapper = ({
       title={title}
       role={role}
       years={years}
+      company={company}
       goBackLink={goBackLink}
       sectionID={sectionID}
       description={description}

data/projects/work/kooperativa.ts

@@ -0,0 +1,21 @@
+import type { SectionItem } from '@/utils/types'
+
+export const sections: SectionItem[] = [
+  {
+    title: 'My job',
+    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.',
+    ],
+  },
+  {
+    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.',
+    ],
+  },
+]

data/projects/work/projectsOverview.ts

@@ -1,6 +1,7 @@
 import {
   iconsSkillsProjectsWorkGroupon,
   iconsSkillsProjectsWorkKomercniBanka,
+  iconsSkillsProjectsWorkKooperativa,
   iconsSkillsProjectsWorkMoravia,
   iconsSkillsProjectsWorkSmartsuppDashboard,
   iconsSkillsProjectsWorkSmartsuppHelp,
@@ -9,6 +10,30 @@ import {
 import { PAGES_URL, PROJECT_ID } from '@/utils/constants'
 import { Project } from '@/utils/types'
 
+// moravia
+import moravia1 from '@/public/images/projects-work/moravia/moravia-1-light.png'
+import moravia2 from '@/public/images/projects-work/moravia/moravia-2-light.png'
+import moravia3 from '@/public/images/projects-work/moravia/moravia-3-light.png'
+import moraviaThumb from '@/public/images/projects-work/moravia/moravia-thumb-light-600.webp'
+
+// groupon
+import groupon1 from '@/public/images/projects-work/groupon/groupon-1-light.png'
+import groupon2 from '@/public/images/projects-work/groupon/groupon-2-light.png'
+import grouponThumb from '@/public/images/projects-work/groupon/groupon-thumb-light-600.webp'
+
+// komercni-banka
+import komercniBanka1 from '@/public/images/projects-work/komercni-banka/komercni-banka-1-light.png'
+import komercniBanka2 from '@/public/images/projects-work/komercni-banka/komercni-banka-2-light.png'
+import komercniBanka3 from '@/public/images/projects-work/komercni-banka/komercni-banka-3-light.png'
+import komercniBanka4 from '@/public/images/projects-work/komercni-banka/komercni-banka-4-light.png'
+import komercniBankaThumb from '@/public/images/projects-work/komercni-banka/komercni-banka-thumb-light-600.webp'
+
+// kooperativa
+import kooperativa1 from '@/public/images/projects-work/kooperativa/kooperativa-1-light.png'
+import kooperativa2 from '@/public/images/projects-work/kooperativa/kooperativa-2-light.png'
+import kooperativa3 from '@/public/images/projects-work/kooperativa/kooperativa-3-light.png'
+import kooperativaThumb from '@/public/images/projects-work/kooperativa/kooperativa-thumb-light-600.webp'
+
 // smartsupp-dashboard
 import smartsuppDashboard1 from '@/public/images/projects-work/smartsupp-dashboard/smartsupp-dashboard-1-light.png'
 import smartsuppDashboard2 from '@/public/images/projects-work/smartsupp-dashboard/smartsupp-dashboard-2-light.png'
@@ -24,30 +49,12 @@ import smartsuppWeb3 from '@/public/images/projects-work/smartsupp-web/smartsupp
 import smartsuppWeb4 from '@/public/images/projects-work/smartsupp-web/smartsupp-web-4-light.png'
 import smartsuppWebThumb from '@/public/images/projects-work/smartsupp-web/smartsupp-web-thumb-light-600.webp'
 
-// groupon
-import groupon1 from '@/public/images/projects-work/groupon/groupon-1-light.png'
-import groupon2 from '@/public/images/projects-work/groupon/groupon-2-light.png'
-import grouponThumb from '@/public/images/projects-work/groupon/groupon-thumb-light-600.webp'
-
-// komercni-banka
-import komercniBanka1 from '@/public/images/projects-work/komercni-banka/komercni-banka-1-light.png'
-import komercniBanka2 from '@/public/images/projects-work/komercni-banka/komercni-banka-2-light.png'
-import komercniBanka3 from '@/public/images/projects-work/komercni-banka/komercni-banka-3-light.png'
-import komercniBanka4 from '@/public/images/projects-work/komercni-banka/komercni-banka-4-light.png'
-import komercniBankaThumb from '@/public/images/projects-work/komercni-banka/komercni-banka-thumb-light-600.webp'
-
 // smartsupp-help
 import smartsuppHelp1 from '@/public/images/projects-work/smartsupp-help/smartsupp-help-1-light.png'
 import smartsuppHelp2 from '@/public/images/projects-work/smartsupp-help/smartsupp-help-2-light.png'
 import smartsuppHelp3 from '@/public/images/projects-work/smartsupp-help/smartsupp-help-3-light.png'
 import smartsuppHelpThumb from '@/public/images/projects-work/smartsupp-help/smartsupp-help-thumb-light-600.webp'
 
-// moravia
-import moravia1 from '@/public/images/projects-work/moravia/moravia-1-light.png'
-import moravia2 from '@/public/images/projects-work/moravia/moravia-2-light.png'
-import moravia3 from '@/public/images/projects-work/moravia/moravia-3-light.png'
-import moraviaThumb from '@/public/images/projects-work/moravia/moravia-thumb-light-600.webp'
-
 export const projectsWorkReact: Project[] = [
   {
     id: PROJECT_ID.work.smartsupp.dashboard,
@@ -122,6 +129,30 @@ export const projectsWorkReact: Project[] = [
     customers: '2 000 000+',
     linkProjectPage: PAGES_URL.work.komercniBanka,
   },
+  {
+    id: PROJECT_ID.work.kooperativa,
+    isFeatured: false,
+    image: kooperativaThumb.src,
+    imageShowcase: [kooperativa1.src, kooperativa2.src, kooperativa3.src],
+    title: '☔ Insurance company app',
+    company: 'Kooperativa',
+    role: 'React Developer',
+    years: '8 months',
+    description: 'I worked on an application for managing insurance policies for citizens property and products.',
+    mySkillsIcons: iconsSkillsProjectsWorkKooperativa,
+    mySkills: [
+      {
+        description: 'Frontend',
+        skills: ['JavaScript', 'TypeScript', 'React', 'Redux', 'Tailwind CSS'],
+      },
+      { description: 'Design', skills: ['Figma', 'Storybook'] },
+      { description: 'Other', skills: ['Jira', 'Confluence'] },
+    ],
+    linkText: 'Project details',
+    projectLinks: [{ urlText: 'Website →', url: 'https://www.koop.cz/pojisteni/pojisteni-majetku' }],
+    customers: '2 480 000+',
+    linkProjectPage: PAGES_URL.work.kooperativa,
+  },
 ]
 
 export const projectsWorkFrontEnd: Project[] = [

data/skills/skills-projects-work.ts

@@ -1,5 +1,15 @@
 import { generateIconsSkills } from '@/utils/generateIconsSkills'
 
+export const iconsSkillsProjectsWorkKooperativa = generateIconsSkills([
+  'js',
+  'ts',
+  'react',
+  'redux',
+  'tailwind',
+  'figma',
+  'storybook',
+])
+
 export const iconsSkillsProjectsWorkSmartsuppDashboard = generateIconsSkills([
   'js',
   'ts',

utils/constants.ts

@@ -23,6 +23,7 @@ export const CONTACT = {
 
 export const PROJECT_ID = {
   work: {
+    kooperativa: 'link-project-work-kooperativa',
     smartsupp: {
       dashboard: 'link-project-work-smartsupp-dashboard',
       web: 'link-project-work-smartsupp-web',
@@ -79,19 +80,24 @@ export const EXTERNAL_URL = {
 const URL_WORK_EXPERIENCE = '/work-experience'
 const URL_PERSONAL_PROJECTS = '/personal-projects'
 
+const generateUrlWorkExperience = (company: string) => {
+  return `${URL_WORK_EXPERIENCE}/${company}`
+}
+
 export const PAGES_URL = {
   home: '/',
   aboutMe: '/about-me',
   work: {
     main: URL_WORK_EXPERIENCE,
+    kooperativa: generateUrlWorkExperience('kooperativa'),
     smartsupp: {
-      dashboard: `${URL_WORK_EXPERIENCE}/smartsupp-dashboard`,
-      web: `${URL_WORK_EXPERIENCE}/smartsupp-web`,
-      help: `${URL_WORK_EXPERIENCE}/smartsupp-help`,
+      dashboard: generateUrlWorkExperience('smartsupp-dashboard'),
+      web: generateUrlWorkExperience('smartsupp-web'),
+      help: generateUrlWorkExperience('smartsupp-help'),
     },
-    komercniBanka: `${URL_WORK_EXPERIENCE}/komercni-banka`,
-    groupon: `${URL_WORK_EXPERIENCE}/groupon`,
-    moravia: `${URL_WORK_EXPERIENCE}/moravia`,
+    komercniBanka: generateUrlWorkExperience('komercni-banka'),
+    groupon: generateUrlWorkExperience('groupon'),
+    moravia: generateUrlWorkExperience('moravia'),
   },
   personal: {
     main: URL_PERSONAL_PROJECTS,

utils/types.ts

@@ -43,6 +43,7 @@ export type HeaderSectionProps = {
   sectionID: string
   role: string
   years?: string | undefined
+  company?: string
   goBackLink: GoBackLinkType
 }