added some formatting

frontend/src/components/Introduction.tsx

@@ -59,15 +59,15 @@ const Introduction = () => {
         {socialLinks.map((link, index) => (
           <div key={index} className="group relative">
             <Tooltip label={link.label} position="top">
-            <a
-              href={link.href}
-              target="_blank"
-              rel="noreferrer"
-              className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}  hover:text-sky-600 dark:hover:text-sky-500 transition-colors duration-200`}
-              aria-label={link.label}
-            >
-              {link.icon}
-            </a>
+              <a
+                href={link.href}
+                target="_blank"
+                rel="noreferrer"
+                className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}  hover:text-sky-600 dark:hover:text-sky-500 transition-colors duration-200`}
+                aria-label={link.label}
+              >
+                {link.icon}
+              </a>
             </Tooltip>
           </div>
         ))}

frontend/src/components/Navbar.tsx

@@ -51,28 +51,28 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
   return (
     <div className="w-full flex justify-center">
       <nav className="py-5 mb-6 flex justify-between dark:text-white w-full max-w-5xl px-4">
-        <Tooltip label={copyText} position='bottom'>
-        <button
-          onClick={handleCopyEmail}
-          className="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-800 px-3 py-2 rounded-lg transition-colors duration-200 group relative"
-        >
-          <Mail size={25} className={`${COLORS.DARK_PRIMARY}`} />
-          {copied ? (
-            <Check size={16} className="text-green-500" />
-          ) : (
-            <Copy
-              size={16}
-              className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-            />
-          )}
-        </button>
+        <Tooltip label={copyText} position="bottom">
+          <button
+            onClick={handleCopyEmail}
+            className="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-800 px-3 py-2 rounded-lg transition-colors duration-200 group relative"
+          >
+            <Mail size={25} className={`${COLORS.DARK_PRIMARY}`} />
+            {copied ? (
+              <Check size={16} className="text-green-500" />
+            ) : (
+              <Copy
+                size={16}
+                className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+              />
+            )}
+          </button>
         </Tooltip>
         <ul className="flex items-center">
           <li
             className="transition ease-in-out delay-50 duration-100 cursor-pointer"
             onClick={toggleDarkMode}
           >
-            <Tooltip label={darkMode ? 'Light Mode' : 'Dark Mode'} position='bottom'>
+            <Tooltip label={darkMode ? 'Light Mode' : 'Dark Mode'} position="bottom">
               <div className="flex items-center space-x-2 mr-4">
                 {darkMode ? (
                   <Sun className="text-amber-400 hover:scale-110" size={30} />
@@ -83,7 +83,7 @@ const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
             </Tooltip>
           </li>
           <li className="transition ease-in-out delay-50 duration-100">
-            <Tooltip label="Resume" position='bottom'>
+            <Tooltip label="Resume" position="bottom">
               <a
                 className="text-white flex items-center space-x-2 ml-4"
                 href={RESUME}

frontend/src/components/Tooltip.tsx

@@ -11,15 +11,13 @@ export const Tooltip: React.FC<TooltipProps> = ({ children, label, position }) =
     left: 'right-full top-1/2 -translate-y-1/2',
     right: 'left-full top-1/2 -translate-y-1/2',
   }
-  const tooltipPosition:string = tooltipStyles[position]
+  const tooltipPosition: string = tooltipStyles[position]
   const tooltipClass = `pointer-events-none absolute mt-2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100 ${tooltipPosition}`
 
   return (
     <div className="group relative">
       {children}
-      <span className={tooltipClass}>
-        {label}
-      </span>
+      <span className={tooltipClass}>{label}</span>
     </div>
   )
 }