refactor(pages): 👷 highlight text

__tests__/playwright/about-me/aboutMe.spec.ts

@@ -18,7 +18,7 @@ test.describe('About Me Page - Tests', () => {
     await test.step('Check that the paragraph text is correct', async () => {
       const paragraph = await page.textContent(getDataTestId(DATA_TEST_IDS.page.aboutMe.introduction))
       expect(paragraph).toContain(
-        'I am React Developer, who knows QA Automation and is capable of leading people as Team Leader.',
+        'I am a React Developer with expertise in QA Automation and experience in leading teams as a Team Leader',
       )
     })
   })

app/about-me/page.tsx

@@ -41,7 +41,8 @@ const About = () => {
       <BreadCrumbs level1Url={PAGES_URL.aboutMe} level1Text={TEXT.aboutMe} />
       <div>
         <HeadingInfo />
-        <div className="mt-16 flex flex-col-reverse justify-between lg:flex-row lg:space-x-10">
+        <div className="mb-2 mt-16 border-b pb-2 text-2xl font-bold uppercase">My Career Path</div>
+        <div className="mt-16 flex flex-col-reverse justify-between lg:mt-8 lg:flex-row lg:space-x-10">
           <JobsDescription />
           <Photo />
         </div>

app/personal-projects/page.tsx

@@ -3,6 +3,7 @@ import ProjectsLayout from '@/components/layout/ProjectsLayout'
 import PageNavigation from '@/components/page-navigation/PageNavigation'
 import { ProjectSection } from '@/components/projects/overview-page/ProjectSection'
 import BreadCrumbs from '@/components/shared/Breadcrumbs'
+import Highlight from '@/components/shared/Highlight'
 import { projectsPersonalNext } from '@/data/projects/personal/projects-overview/personalNext'
 import { projectsPersonalReact } from '@/data/projects/personal/projects-overview/personalReact'
 import { TEXT } from '@/localization/english'
@@ -30,13 +31,21 @@ const ProjectsPersonal = () => {
   return (
     <PageContainer id={ID.projects.personal}>
       <BreadCrumbs level1Url={PAGES_URL.personal.mainUrl} level1Text={TEXT.personalProjects} />
+
       <ProjectsLayout
         heading={TEXT.personalProjects}
-        description="I like to learn new technologies and create personal projects where I can apply what I know and keep up on the latest trends."
+        description={
+          <p className="mt-4 text-lg text-neutral-600">
+            I enjoy learning <Highlight text="new technologies" /> and creating <Highlight text="personal projects" />{' '}
+            where I can apply my knowledge and stay updated with the <Highlight text="latest trends" />.
+          </p>
+        }
       >
         <ProjectSection sectionId={ID.section.next} sectionText={TEXT.next} projectData={projectsPersonalNext} />
+
         <ProjectSection sectionId={ID.section.react} sectionText={TEXT.react} projectData={projectsPersonalReact} />
       </ProjectsLayout>
+
       <div className="mt-20">
         <PageNavigation
           linkPrevious={PAGES_URL.work.mainUrl}

app/resume/page.tsx

@@ -51,15 +51,30 @@ const Resume = () => {
       <BreadCrumbs level1Url={PAGES_URL.resume} level1Text={TEXT.resume} />
       <div>
         <ResumeInfo />
-        <div className="mt-8">
-          <HeroLink
-            href={EXTERNAL_URL.resume.resumeViewPDF}
-            text={`Download - ${TEXT.resumePDF}`}
-            className="bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 sm:mb-0"
-            dataTestId={DATA_TEST_IDS.hero.linkResume}
-          />
+
+        <div>
+          <div className="mb-4 mt-16 border-b pb-2 text-2xl font-bold uppercase">Download resume</div>
+          <p className="mb-4 text-base font-normal text-neutral-500">
+            Click the link below to download my resume. It includes detailed information about my professional
+            experience.
+          </p>
+          <div className="mt-8">
+            <HeroLink
+              href={EXTERNAL_URL.resume.resumeViewPDF}
+              text={`Download - ${TEXT.resumePDF}`}
+              className="bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 sm:mb-0"
+              dataTestId={DATA_TEST_IDS.hero.linkResume}
+            />
+          </div>
+        </div>
+
+        <div>
+          <div className="mb-4 mt-16 border-b pb-2 text-2xl font-bold uppercase">My resume</div>
+          <p className="mb-4 text-base font-normal text-neutral-500">
+            Below is an embedded preview of my resume. Read it to learn more about me.
+          </p>
+          <ResumePreviewEmbed />
         </div>
-        <ResumePreviewEmbed />
       </div>
       <PageNavigation
         linkPrevious={PAGES_URL.aboutMe}

app/work-experience/page.tsx

@@ -5,6 +5,7 @@ import ExperienceCard from '@/components/projects/experience/ExperienceCard'
 import { ProjectSection } from '@/components/projects/overview-page/ProjectSection'
 import BreadCrumbs from '@/components/shared/Breadcrumbs'
 import Heading4 from '@/components/shared/Heading4'
+import Highlight from '@/components/shared/Highlight'
 import { projectsWorkFrontEnd } from '@/data/projects/work/projects-overview/workFrontEnd'
 import { projectsWorkLocalization } from '@/data/projects/work/projects-overview/workLocalization'
 import { projectsWorkQA } from '@/data/projects/work/projects-overview/workQA'
@@ -48,7 +49,13 @@ const ProjectsWork = () => {
 
       <ProjectsLayout
         heading={TEXT.workExperience}
-        description="I worked on modern products, developed new features, redesigned websites, implemented responsive design, updated legacy codebase, was responsible for localization, QA automation and testing, including work as team leader."
+        description={
+          <p className="mt-4 text-lg text-neutral-600">
+            I developed <Highlight text="new features" />, led entire website redesigns, implemented{' '}
+            <Highlight text="responsive designs" />, modernized legacy codebase, and managed localization,{' '}
+            <Highlight text="QA automation" />, and testing, including serving as a <Highlight text="team leader" />.
+          </p>
+        }
       >
         <ProjectSection sectionId={ID.section.react} sectionText="React" projectData={projectsWorkReact} />
 

components/about-me/HeadingInfo.tsx

@@ -8,8 +8,8 @@ const HeadingInfo = () => {
     <div>
       <Heading1>{TEXT.aboutMe}</Heading1>
       <p className="mt-4 text-lg text-neutral-600" data-testid={DATA_TEST_IDS.page.aboutMe.introduction}>
-        I am <Highlight text="React Developer" />, who knows <Highlight text="QA Automation" /> and is capable of
-        leading people as <Highlight text="Team Leader" />.
+        I am a <Highlight text="React Developer" /> with expertise in <Highlight text="QA Automation" /> and experience
+        in leading teams as a <Highlight text="Team Leader" />.
       </p>
     </div>
   )

components/homepage/hero/HeroLink.tsx

@@ -5,15 +5,13 @@ type HeroLinkProps = {
   dataTestId: string
 }
 
-const sharedCss = 'w-[248px] text-md rounded-lg px-5 py-2.5 text-center font-medium focus:outline-none focus:ring-4'
-
 const HeroLink = ({ href, text, className = '', dataTestId }: HeroLinkProps) => (
   <a
     data-testid={dataTestId}
     href={href}
     target="_blank"
     rel="noopener noreferrer"
-    className={`${sharedCss} ${className}`}
+    className={`text-md w-[248px] rounded-lg px-5 py-2.5 text-center font-medium focus:outline-none focus:ring-4 ${className}`}
   >
     {text}
   </a>

components/layout/ProjectsLayout.tsx

@@ -4,7 +4,7 @@ import Heading1 from '@/components/shared/Heading1'
 
 type ProjectsLayoutProps = {
   heading: string
-  description: string
+  description: ReactNode
   children: ReactNode
 }
 
@@ -13,7 +13,7 @@ const ProjectsLayout = ({ heading, description, children }: ProjectsLayoutProps)
     <>
       <div className="flex flex-col">
         <Heading1>{heading}</Heading1>
-        <p className="mt-4 text-lg text-neutral-600">{description}</p>
+        <div>{description}</div>
       </div>
       {/* This is ProjectItem */}
       <div>{children}</div>

components/resume/ResumeInfo.tsx

@@ -8,8 +8,8 @@ const ResumeInfo = () => {
     <div>
       <Heading1>{TEXT.resume}</Heading1>
       <p className="mt-4 text-lg text-neutral-600" data-testid={DATA_TEST_IDS.page.resume.introduction}>
-        Experienced <Highlight text="React Developer" /> building web applications using <Highlight text="JavaScript" />
-        , <Highlight text="TypeScript" />, and <Highlight text="React" />.
+        I am experienced <Highlight text="React Developer" /> building web applications using{' '}
+        <Highlight text="JavaScript" />, <Highlight text="TypeScript" />, and <Highlight text="React" />.
       </p>
     </div>
   )

components/resume/ResumePreviewEmbed.tsx

@@ -2,7 +2,7 @@ import { EXTERNAL_URL } from '@/utils/constants/urls/externalUrls'
 
 const ResumePreviewEmbed = () => {
   return (
-    <div className="mt-16">
+    <div className="mt-8">
       <iframe
         src={EXTERNAL_URL.resume.resumeEmbedPreviewPDF}
         width="100%"