feat(about): update personal bio, favorite shows, and refine highlight colors for better contrast

Author: steadyfall

src/components/About.tsx

@@ -60,12 +60,13 @@ const AccordionForExtraInfo = (items: CustomAccordionItemDetails[] = []) => {
 
 const About = () => {
   const findMeDoingBody = [
+    <>tinkering on projects that make my life a little easier.</>,
     <>
       <StrikeHighlight text="re-watching" color="pink" /> any one of these series:{' '}
-      <StrikeHighlight text="Breaking Bad" color="pink" />,{' '}
+      <StrikeHighlight text="Better Call Saul" color="pink" />,{' '}
       <StrikeHighlight text="Silicon Valley" color="pink" />,{' '}
       <StrikeHighlight text="South Park" color="pink" /> and{' '}
-      <StrikeHighlight text="The Office" color="pink" />.
+      <StrikeHighlight text="House" color="pink" />.
     </>,
   ];
   const thoseOfYouCuriousBody = [
@@ -143,14 +144,14 @@ const About = () => {
         <div className="text-gray-700 dark:text-gray-300">
           <p className="mb-2">
             I am a <StrikeHighlight text="software developer" color="red" /> based in{' '}
-            <StrikeHighlight text="Toronto" color="red" /> and currently a{' '}
-            <StrikeHighlight text="junior" /> pursuing a{' '}
-            <StrikeHighlight text="Computational Mathematics" /> major at the{' '}
-            <StrikeHighlight text="University of Waterloo" />. I am passionate about tech and
-            innovation, always exploring the{' '}
-            <span className="underline underline-offset-4">
-              intersection of software development and AI.
-            </span>
+            <StrikeHighlight text="Waterloo" color="red" /> and currently a{' '}
+            <StrikeHighlight text="junior" /> majoring in{' '}
+            <StrikeHighlight text="Computational Mathematics" /> at the{' '}
+            <StrikeHighlight text="University of Waterloo" />. I am passionate about technology and
+            innovation, especially exploring{' '}
+            <span className="underline underline-offset-4">unexplored or complex domains</span> and
+            uncovering their{' '}
+            <span className="underline underline-offset-4">intersection with tech</span>.
           </p>
           <div className="mb-2">{AccordionForExtraInfo(itemsForExtraInfo)}</div>
         </div>

src/components/ui/StrikeHighlighter.tsx

@@ -23,11 +23,11 @@ interface StrikeHighlightProps {
  */
 export default function StrikeHighlight({ text, color = 'yellow' }: StrikeHighlightProps) {
   const colors: Record<string, string> = {
-    cyan: 'bg-cyan-200 dark:bg-cyan-500/45',
-    pink: 'bg-[#ffa7ee] dark:bg-[#f73ed2]/50',
-    'slate-blue': 'bg-[#a0a8ff] dark:bg-[#675bf9]/50',
-    red: 'bg-[#ffa0a0] dark:bg-[#f83b3b]/45',
-    yellow: 'bg-[#ffff77] dark:bg-[#fce913]/35',
+    cyan: 'bg-cyan-200/80 dark:bg-cyan-500/35',
+    pink: 'bg-[#ffa7ee]/80 dark:bg-[#f73ed2]/35',
+    'slate-blue': 'bg-[#a0a8ff] dark:bg-[#675bf9]/40',
+    red: 'bg-[#ffa0a0]/75 dark:bg-[#f83b3b]/40',
+    yellow: 'bg-[#ffff77]/75 dark:bg-[#fce913]/40',
   };
 
   if (color === 'violet-web') {