[Fix] Align social icons to the left

src/components/markdown.js

@@ -26,6 +26,18 @@ const Markdown = props => {
     }
     return ""
   }
+  const SectionTitle = props => {
+    if (props.label) {
+      return (
+        <>
+          {`<h3 align="left">${props.label}</h3>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   const DisplayWork = props => {
     if (props.prefix && props.project) {
       if (props.link) {
@@ -61,7 +73,7 @@ const Markdown = props => {
     if (props.username) {
       return (
         <>
-          {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}
+          {`<a href="${props.base}/${props.username}" target="blank" style="margin:0.5rem"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}
           <br />
         </>
       )
@@ -273,7 +285,10 @@ const Markdown = props => {
           github={props.social.github}
         />
       </>
-      {isSocial(props.social) ? `<p align="center">` : ""} <br />
+      {isSocial(props.social) ? `<p align="left">` : ""} <br />
+      <>
+        <SectionTitle label="Connect with me:" />
+      </>
       <>
         <DisplaySocial
           base="https://codepen.io"

src/components/markdownPreview.js

@@ -104,7 +104,8 @@ const MarkdownPreview = props => {
   }
   const SocialPreview = props => {
     return (
-      <div className="flex justify-center items-end">
+      <div className="flex justify-start items-end flex-wrap">
+        <h3 className="w-full text-lg sm:text-xl">Connect with me:</h3> 
         <DisplaySocial
           base="https://codepen.io"
           icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"