Merge pull request #130 from sarbikbetal/srbk/dev

[fix]: align social and skill 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"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="40" /></a>`}
           <br />
         </>
       )
@@ -137,6 +149,7 @@ const Markdown = props => {
     })
     return listChosenSkills.length > 0 ? (
       <>
+        <SectionTitle label="Languages and Tools:" />
         {`<p align="left">${listChosenSkills.join(" ")}</p>`}
         <br />
         <br />
@@ -277,7 +290,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

@@ -18,6 +18,12 @@ const MarkdownPreview = props => {
     }
     return null
   }
+  const SectionTitle = props => {
+    if (props.label) {
+      return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
+    }
+    return null
+  }
   const DisplayWork = props => {
     if (props.prefix && props.project) {
       if (props.link) {
@@ -104,7 +110,8 @@ const MarkdownPreview = props => {
   }
   const SocialPreview = props => {
     return (
-      <div className="flex justify-center items-end">
+      <div className="flex justify-start items-end flex-wrap">
+        <SectionTitle label="Connect with me:" />
         <DisplaySocial
           base="https://codepen.io"
           icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
@@ -272,6 +279,7 @@ const MarkdownPreview = props => {
     })
     return listSkills.length > 0 ? (
       <div className="flex flex-wrap justify-start items-center">
+        <SectionTitle label="Languages and Tools:" />
         {listSkills}
       </div>
     ) : (