Update about me section

samimsu · samimsu · commit 0fce34b2e67e · 2024-11-22T01:32:32.000+05:00
diff --git a/src/components/ChessPawnIcon.tsx b/src/components/ChessPawnIcon.tsx
@@ -0,0 +1,17 @@
+const ChessPawnIcon = ({ width = "12" }) => {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      viewBox="0 0 104.38 122.88"
+      fill="#83b34b"
+    >
+      <title>chess-pawn</title>
+      <path d="M35.73,32.57a20.45,20.45,0,1,1,32.91,0Zm35.06,3.88a7.1,7.1,0,0,1,6.17,7h0a7.11,7.11,0,0,1-6.61,7.06H34a7.1,7.1,0,0,1-6.6-7.06h0a7.1,7.1,0,0,1,6.17-7ZM63.33,54.4c.91,14.57,6,26.07,18.75,31.85V91.6H22.3V86.25c12-3.8,17.68-15,18.73-31.85ZM82.39,95.45a14.39,14.39,0,0,1,12.67,14.23v.22H9.32v-.22A14.39,14.39,0,0,1,22,95.45l.31,0H82.08l.31,0ZM94.9,113.77a12,12,0,0,1,9.48,9.11H0a12,12,0,0,1,9.47-9.11Z" />
+    </svg>
+  );
+};
+
+export default ChessPawnIcon;
diff --git a/src/components/DiscordIcon.tsx b/src/components/DiscordIcon.tsx
@@ -0,0 +1,16 @@
+const DiscordIcon = ({ width = "18" }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      viewBox="0 0 127.14 96.36"
+    >
+      <path
+        fill="#5865f2"
+        d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
+      />
+    </svg>
+  );
+};
+
+export default DiscordIcon;
diff --git a/src/components/PakistanFlagIcon.tsx b/src/components/PakistanFlagIcon.tsx
@@ -0,0 +1,44 @@
+const PakistanFlagIcon = ({ width = "18" }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      shapeRendering="geometricPrecision"
+      textRendering="geometricPrecision"
+      imageRendering="optimizeQuality"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      width={width}
+      viewBox="0 0 513 357.071"
+    >
+      <path
+        fill="#fff"
+        fillRule="nonzero"
+        d="M28.477.32h456.044c15.488 0 28.159 12.672 28.159 28.16v300.111c0 15.488-12.671 28.16-28.159 28.16H28.477c-15.486 0-28.157-12.672-28.157-28.16V28.48C.32 12.992 12.991.32 28.477.32z"
+      />
+      <path
+        fill="#01411C"
+        fillRule="nonzero"
+        d="M122.835 356.751V.32h361.686c15.488 0 28.159 12.672 28.159 28.16v300.111c0 15.488-12.671 28.16-28.159 28.16H122.835z"
+      />
+      <path
+        fill="#fff"
+        fillRule="nonzero"
+        d="M290.758 76.663C247.631 90.44 216.4 130.838 216.4 178.534c0 59.057 47.875 106.931 106.931 106.931 43.252 0 80.504-25.681 97.345-62.626a98.756 98.756 0 01-4.89 4.661c-40.459 35.966-102.416 32.322-138.381-8.138s-32.32-102.417 8.139-138.382a99.87 99.87 0 015.214-4.317zm71.563 21.855l45.044 50.672-66.225-14.516 62.11-27.179-34.273 58.495-6.656-67.472z"
+      />
+      <rect
+        fill="none"
+        stroke="#CCC"
+        strokeWidth=".64"
+        strokeMiterlimit="22.926"
+        x=".32"
+        y=".319"
+        width="512.359"
+        height="356.43"
+        rx="27.231"
+        ry="28.159"
+      />
+    </svg>
+  );
+};
+
+export default PakistanFlagIcon;
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -1,40 +1,94 @@
 import RootLayout from "../layouts/RootLayout";
+import { useThemeContext } from "../hooks/useThemeContext";
 import Heading2 from "../components/Heading2";
-import { myChessProfile } from "../data/links";
+import { myChessProfile, myLinkedinProfile } from "../data/links";
+import technologies from "../data/technologies";
+import ChessPawnIcon from "../components/ChessPawnIcon";
+import PakistanFlagIcon from "../components/PakistanFlagIcon";
+import DiscordIcon from "../components/DiscordIcon";
 
 const About = () => {
+  const { isLightMode } = useThemeContext();
+
   return (
     <RootLayout>
       <div className="page-container animate-slidein opacity-0 [--slidein-delay:300ms]">
         <div className="max-w-2xl mx-auto">
           <Heading2>About Me</Heading2>
           <div className="mt-6 space-y-4 text-left text-lg text-slate-700 dark:text-slate-400">
             <p>
-              Hi, I'm Sami, a Web Developer currently based in Pakistan. With
-              over 2 years of professional experience in software engineering, I
-              specialise in front end development using React.
+              Hi 👋 I'm Sami, a 💻 Web Developer currently based in{" "}
+              <span className="inline-flex items-center mr-1">
+                <PakistanFlagIcon />
+              </span>
+              Pakistan. With years of professional experience in software
+              engineering, I specialise in front end development using{" "}
+              <span className="inline-flex items-center mr-1 h-3">
+                <img
+                  src={
+                    isLightMode
+                      ? technologies.react.imageSrc.light
+                      : technologies.react.imageSrc.dark
+                  }
+                  className={`object-contain w-full h-full`}
+                />
+              </span>
+              React.
             </p>
             <p>
-              I started off as a freelancer in 2019 building chatbots for
-              clients online. I moved on to work for Letswork as a Frontend Web
-              Developer. My last job was a contract role as a Web Developer at
-              Classadia where I also got the chance to work on the backend using
+              I started off as a freelancer in 2019 building{" "}
+              <span className="inline-flex items-center mr-1">
+                <DiscordIcon />
+              </span>
+              Discord chatbots for clients online. I moved on to work for
+              Letswork as a Frontend Web Developer. My last job was a contract
+              role as a Web Developer at Classadia where I also got the chance
+              to work on the backend using{" "}
+              <span className="inline-flex items-center mr-1 h-3">
+                <img
+                  src={
+                    isLightMode
+                      ? technologies.nestjs.imageSrc.light
+                      : technologies.nestjs.imageSrc.dark
+                  }
+                  className={`object-contain w-full h-full`}
+                />
+              </span>
               NestJS.
             </p>
             <p>
-              Apart from coding, I also enjoy journaling, playing football,
-              reading books and playing chess (
+              Apart from coding, I also enjoy 📓 journaling, reading 📖 books,
+              playing ⚽ football and playing{" "}
               <a
                 href={myChessProfile}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="hover:underline"
+                className="text-blue-500 hover:underline"
               >
-                challenge me
+                <span className="inline-flex items-center mr-1">
+                  <ChessPawnIcon />
+                </span>
+                chess
               </a>
-              ).
+              .
+            </p>
+            <p>
+              At the moment, I'm on the hunt for my next opportunity. Feel free
+              to{" "}
+              <a
+                href={myLinkedinProfile}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-500 hover:underline"
+              >
+                reach out
+              </a>{" "}
+              if you'd like to get in touch.
             </p>
           </div>
+          <div className="mt-8 italic text-sm text-left text-slate-700 dark:text-slate-400">
+            Updated: 2024-11-22
+          </div>
         </div>
       </div>
     </RootLayout>
