done

Author: burtonjong

components/Avatar.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable indent */
+// please forgive me idk why it made me do this someone with different eslint config can fix this
 import Image from 'next/image';
 import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import FontAwesomeLink from './FontAwesomeLink';
@@ -17,7 +19,7 @@ const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileConta
 
   return (
     <div className={`${PROFILE_CONTAINER} ${profileContainerClasses}`}>
-      <div className={`w-28 h-28 sm:w-48 sm:h-48 rounded-full relative overflow-hidden`}>
+      <div className={`size-28 sm:size-44 md:size-48 rounded-full relative overflow-hidden`}>
         <Image src={img} alt={name} layout="fill" objectFit="contain" unoptimized={true} />
       </div>
       <h2 className={`${colorTheme} text-xs sm:text-base font-semibold mt-3 ${classes}`}>{name}</h2>

components/InternalTeam.jsx

@@ -56,18 +56,20 @@ const InternalTeam = () => {
       </div>
       {groups.length > 0 && (
         <Tabs value={activeTab}>
-          <TabsHeader className="overflow-x-auto whitespace-nowrap scrollbar-hide w-full flex flex-row">
-            {groups.map((group) => (
-              <Tab key={group} value={group} onClick={() => setActiveTab(group)}>
-                <div
-                  className={`rounded-full p-2 px-6 font-medium hover:bg-[#00D3A9] hover:text-white transition-all duration-200
-                  ${activeTab === group ? 'bg-[#00D3A9] text-white' : 'text-black'}
-                  `}
-                >
-                  {group}
-                </div>
-              </Tab>
-            ))}
+          <TabsHeader className="overflow-x-auto grid place-items-center">
+            <div className="flex flex-row gap-2">
+              {groups.map((group) => (
+                <Tab key={group} value={group} onClick={() => setActiveTab(group)}>
+                  <div
+                    className={`rounded-full px-4 py-2 font-medium hover:bg-[#00D3A9] hover:text-white transition-all duration-200
+              ${activeTab === group ? 'bg-[#00D3A9] text-white' : 'text-black'}
+            `}
+                  >
+                    {group}
+                  </div>
+                </Tab>
+              ))}
+            </div>
           </TabsHeader>
           <TabsBody>
             {groups.map((group) => (

components/TechnicalTeam.jsx

@@ -36,18 +36,20 @@ const TechnicalTeam = () => {
       </div>
       {positions.length > 0 && (
         <Tabs value={activeTab}>
-          <TabsHeader className="overflow-x-auto whitespace-nowrap scrollbar-hide w-full flex flex-row">
-            {positions.map((position) => (
-              <Tab key={position} value={position} onClick={() => setActiveTab(position)}>
-                <div
-                  className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-200
+          <TabsHeader className="overflow-x-auto grid place-items-center">
+            <div className="flex flex-row gap-2 whitespace-nowrap">
+              {positions.map((position) => (
+                <Tab key={position} value={position} onClick={() => setActiveTab(position)}>
+                  <div
+                    className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-200
                   ${activeTab === position ? 'bg-[#7559fc] text-white' : 'text-black'}
                   `}
-                >
-                  {position}
-                </div>
-              </Tab>
-            ))}
+                  >
+                    {position}
+                  </div>
+                </Tab>
+              ))}
+            </div>
           </TabsHeader>
           <TabsBody>
             {positions.map((position) => (