refactor(h2): 👷 update component and texts

components/aboutMe/JobItem.tsx

@@ -1,3 +1,4 @@
+import Heading2 from '@/components/shared/Heading2'
 import Image from 'next/image'
 
 type JobItemProps = {
@@ -7,19 +8,35 @@ type JobItemProps = {
   years: number
 }
 
+interface JobIconProps {
+  path: string
+  title: string
+}
+
+const JobIcon = ({ path, title }: JobIconProps) => {
+  return (
+    <span className="absolute -start-5 flex h-10 w-10 items-center justify-center rounded-full bg-violet-100 ring-1 ring-violet-600">
+      <Image src={path} alt={title} width={28} height={28} loading="eager" />
+    </span>
+  )
+}
+
 const JobItem = ({ path, title, description, years }: JobItemProps) => {
   return (
     <li className="mb-10 ms-6 last:mb-0">
-      <span className="absolute -start-5 flex h-10 w-10 items-center justify-center rounded-full bg-violet-100 ring-1 ring-violet-600">
-        <Image src={path} alt={title} width={28} height={28} loading="eager" />
-      </span>
-      <h3 className="mb-1 ml-4 flex flex-col items-start text-3xl font-bold text-neutral-900 lg:flex-row">
+      <JobIcon path={path} title={title} />
+
+      <Heading2
+        textColor="text-neutral-900"
+        customCss="mb-1 ml-4 flex flex-col items-start text-3xl font-bold text-neutral-900 lg:flex-row"
+      >
         {title}
         <small className="text-md ml-0 inline text-neutral-500 lg:ml-1">
           <span className="hidden lg:inline">{years && ' · '}</span>
           {years} {years === 1 ? 'year' : 'years'}
         </small>
-      </h3>
+      </Heading2>
+
       <p className="mb-4 ml-4 text-base font-normal text-neutral-500 last:mb-2">{description}</p>
     </li>
   )

components/homepage/MyMindset.tsx

@@ -4,7 +4,7 @@ import Heading2 from '../shared/Heading2'
 const MyMindset = () => {
   return (
     <div className="lg:w-1/2">
-      <Heading2 textColor="text-violet-600">🥇🚀 I Have Committed Mindset</Heading2>
+      <Heading2>🥇🚀 I Have Committed Mindset</Heading2>
       {mindsetInfo.map((mindset) => (
         <div className="mt-8" key={mindset.id}>
           <p className="mt-4 text-lg text-neutral-600">

components/homepage/SkillsForCompany.tsx

@@ -4,7 +4,7 @@ import Heading2 from '../shared/Heading2'
 const SkillsForCompany = () => {
   return (
     <div className="lg:w-1/2">
-      <Heading2 textColor="text-violet-600">💰📈 My Skills For Your Company</Heading2>
+      <Heading2>💰📈 My Skills For Your Company</Heading2>
       {skillsInfo.map((skill) => (
         <div className="mt-8" key={skill.id}>
           <p className="mt-4 text-lg text-neutral-600">

components/layout/projectPage/HeaderSection.tsx

@@ -8,7 +8,7 @@ const HeaderSection = ({ title, role, years, company, goBackLink, sectionID }: H
   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">
+      <Heading2>
         {role}
         {years && <small className="text-md text-neutral-500">{` · ${years} · ${company}`}</small>}
       </Heading2>

components/shared/Heading2.tsx

@@ -1,10 +1,11 @@
 type Heading2Props = {
   children: React.ReactNode
-  textColor: string
+  textColor?: string
+  customCss?: string
 }
 
-const Heading2 = ({ children, textColor }: Heading2Props) => {
-  return <h2 className={`mb-2 text-4xl font-bold tracking-tight ${textColor}`}>{children}</h2>
+const Heading2 = ({ children, textColor = 'text-violet-600', customCss = '' }: Heading2Props) => {
+  return <h2 className={`mb-2 text-4xl font-bold tracking-tight ${textColor} ${customCss}`}>{children}</h2>
 }
 
 export default Heading2