Deelz contract work update

public/index.html

@@ -5,56 +5,111 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Edit meta tags for SEO -->
-    <title>DeveloperFolio | Developer Portfolio Template</title>
-    <meta name="title" content="DeveloperFolio | Developer Portfolio Template">
-    <meta name="description" content="Software Developer Portfolio Template that helps you showcase your work and skills as a software developer">
+    <title>Farhaan's Developer Portfolio</title>
+    <meta
+      name="title"
+      content="Farhaan's Developer Portfolio | Software Developer"
+    />
+    <meta
+      name="description"
+      content="Farhaan's Developer Portfolio | Software Developer"
+    />
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://developerfolio.js.org/">
-    <meta property="og:title" content="DeveloperFolio | Developer Portfolio Template">
-    <meta property="og:description" content="Software Developer Portfolio Template that helps you showcase your work and skills as a software developer">
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://developerfolio.js.org/" />
+    <meta
+      property="og:title"
+      content="Farhaan's Developer Portfolio | Software Developer"
+    />
+    <meta
+      property="og:description"
+      content="Farhaan's Developer Portfolio | Software Developer"
+    />
     <!-- Link to a hosted image -->
     <!-- <meta property="og:image" content=""> -->
-    
+
     <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="https://developerfolio.js.org/">
-    <meta property="twitter:title" content="DeveloperFolio | Developer Portfolio Template">
-    <meta property="twitter:description" content="Software Developer Portfolio Template that helps you showcase your work and skills as a software developer">
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://developerfolio.js.org/" />
+    <meta
+      property="twitter:title"
+      content="Farhaan's Developer Portfolio | Software Developer"
+    />
+    <meta
+      property="twitter:description"
+      content="Farhaan's Developer Portfolio | Software Developer"
+    />
     <!-- Link to a hosted image -->
     <!-- <meta property="twitter:image" content=""> -->
 
-    <meta name="msapplication-TileColor" content="#603cba">
+    <meta name="msapplication-TileColor" content="#603cba" />
     <meta name="theme-color" content="#6c63ff" />
 
     <!-- Customize icons -->
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png?v8=qAJ44G5Bm7">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png?v8=qAJ44G5Bm7">
-    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg?v8=qAJ44G5Bm7" color="#885bd5">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v8=qAJ44G5Bm7">
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png?v8=qAJ44G5Bm7">
-	  <!--
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png?v8=qAJ44G5Bm7"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png?v8=qAJ44G5Bm7"
+    />
+    <link
+      rel="mask-icon"
+      href="%PUBLIC_URL%/safari-pinned-tab.svg?v8=qAJ44G5Bm7"
+      color="#885bd5"
+    />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v8=qAJ44G5Bm7" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png?v8=qAJ44G5Bm7"
+    />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <link rel=preload href="/static/media/Montserrat-Regular.ee653992.ttf" as="font" type="font/woff" crossorigin>
-    <link rel=preload href="/static/media/Agustina.21f233e1.woff" as="font" type="font/woff" crossorigin>
-
+
+    <link
+      rel="preload"
+      href="/static/media/Montserrat-Regular.ee653992.ttf"
+      as="font"
+      type="font/woff"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/static/media/Agustina.21f233e1.woff"
+      as="font"
+      type="font/woff"
+      crossorigin
+    />
+
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-135618960-2"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-135618960-2"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-      gtag('config', 'UA-135618960-2');
+      gtag("config", "UA-135618960-2");
     </script>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css">
-
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css"
+    />
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/components/experienceCard/ExperienceCard.js

@@ -6,6 +6,14 @@ export default function ExperienceCard({cardInfo, isDark}) {
   const [colorArrays, setColorArrays] = useState([]);
   const imgRef = createRef();
 
+  function openUrlInNewTab(url) {
+    if (!url) {
+      return;
+    }
+    var win = window.open(url, "_blank");
+    win.focus();
+  }
+
   function getColorArrays() {
     const colorThief = new ColorThief();
     setColorArrays(colorThief.getColor(imgRef.current));
@@ -32,52 +40,80 @@ export default function ExperienceCard({cardInfo, isDark}) {
 
   return (
     <div className={isDark ? "experience-card-dark" : "experience-card"}>
-      <div style={{background: rgb(colorArrays)}} className="experience-banner">
-        <div className="experience-blurred_div"></div>
-        <div className="experience-div-company">
-          <h5 className="experience-text-company">{cardInfo.company}</h5>
-        </div>
-
-        <img
-          crossOrigin={"anonymous"}
-          ref={imgRef}
-          className="experience-roundedimg"
-          src={cardInfo.companylogo}
-          alt={cardInfo.company}
-          onLoad={() => getColorArrays()}
-        />
-      </div>
-      <div className="experience-text-details">
-        <h5
-          className={
-            isDark
-              ? "experience-text-role dark-mode-text"
-              : "experience-text-role"
-          }
+      <div className="banner-container">
+        <div
+          style={{background: rgb(colorArrays)}}
+          className="experience-banner"
         >
-          {cardInfo.role}
-        </h5>
-        <h5
-          className={
-            isDark
-              ? "experience-text-date dark-mode-text"
-              : "experience-text-date"
-          }
-        >
-          {cardInfo.date}
-        </h5>
-        <p
-          className={
-            isDark
-              ? "subTitle experience-text-desc dark-mode-text"
-              : "subTitle experience-text-desc"
-          }
-        >
-          {cardInfo.desc}
-        </p>
-        <ul>
-          <GetDescBullets descBullets={cardInfo.descBullets} isDark={isDark} />
-        </ul>
+          {/* <div className="experience-blurred_div"></div> */}
+          <div className="experience-div-company">
+            <h5 className="experience-text-company">{cardInfo.company}</h5>
+          </div>
+          <img
+            crossOrigin={"anonymous"}
+            ref={imgRef}
+            className="experience-roundedimg"
+            src={cardInfo.companylogo}
+            alt={cardInfo.company}
+            onLoad={() => getColorArrays()}
+          />
+        </div>
+        <div className="lower-banner">
+          <div className="experience-text-details">
+            <h5
+              className={
+                isDark
+                  ? "experience-text-role dark-mode-text"
+                  : "experience-text-role"
+              }
+            >
+              {cardInfo.role}
+            </h5>
+            <h5
+              className={
+                isDark
+                  ? "experience-text-date dark-mode-text"
+                  : "experience-text-date"
+              }
+            >
+              {cardInfo.date}
+            </h5>
+            <p
+              className={
+                isDark
+                  ? "subTitle experience-text-desc dark-mode-text"
+                  : "subTitle experience-text-desc"
+              }
+            >
+              {cardInfo.desc}
+            </p>
+            <ul>
+              <GetDescBullets
+                descBullets={cardInfo.descBullets}
+                isDark={isDark}
+              />
+            </ul>
+          </div>
+          <div className="your-class-name">
+            {cardInfo.footerLink ? (
+              <div className="project-card-footer project-card-extra">
+                {cardInfo.footerLink.map((link, i) => {
+                  return (
+                    <span
+                      key={i}
+                      className={
+                        isDark ? "dark-mode project-tag" : "project-tag"
+                      }
+                      onClick={() => openUrlInNewTab(link.url)}
+                    >
+                      {link.name}
+                    </span>
+                  );
+                })}
+              </div>
+            ) : null}
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/experienceCard/ExperienceCard.scss

@@ -13,7 +13,7 @@
   background-color: $darkBackground;
   box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
   border-radius: 10px;
-  border: 1px solid $lightBorder1;
+  // border: 1px solid $lightBorder1;
 }
 
 .experience-card:hover {
@@ -154,3 +154,30 @@
     font-size: 16px;
   }
 }
+
+.project-card-footer span.project-tag {
+  background: $buttonColor;
+  color: $lightBackground3;
+  vertical-align: middle;
+  align-items: center;
+  border-radius: 4px;
+  display: inline-flex;
+  font-size: 0.75rem;
+  height: 2em;
+  justify-content: center;
+  white-space: nowrap;
+  line-height: 1.5;
+  margin: 0 0.5rem 0.5rem 0;
+  padding: 0 0.75em;
+  cursor: pointer;
+  transition: 0.2s ease-in;
+  margin-left: 0.8rem;
+}
+
+.your-class-name {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+}

src/components/footer/Footer.js

@@ -9,15 +9,15 @@ export default function Footer() {
   return (
     <Fade bottom duration={1000} distance="5px">
       <div className="footer-div">
-        <p className={isDark ? "dark-mode footer-text" : "footer-text"}>
+        {/* <p className={isDark ? "dark-mode footer-text" : "footer-text"}>
           {emoji("Made with ❤️ by DeveloperFolio Team")}
         </p>
         <p className={isDark ? "dark-mode footer-text" : "footer-text"}>
           Theme by{" "}
           <a href="https://github.com/saadpasta/developerFolio">
             developerFolio
           </a>
-        </p>
+        </p> */}
       </div>
     </Fade>
   );

src/components/header/Header.js

@@ -69,14 +69,14 @@ function Header() {
               <a href="#talks">Talks</a>
             </li>
           )}
-          <li>
+          {/* <li>
             <a href="#contact">Contact Me</a>
-          </li>
+          </li> */}
           <li>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a>
+            {/* <a>
               <ToggleSwitch />
-            </a>
+            </a> */}
           </li>
         </ul>
       </header>

src/components/socialMedia/SocialMedia.js

@@ -92,6 +92,18 @@ export default function socialMedia() {
         </a>
       ) : null}
 
+      {socialMediaLinks.resume ? (
+        <a
+          href={socialMediaLinks.resume}
+          className="icon-button gitlab"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fas fa-file-alt"></i>
+          <span></span>
+        </a>
+      ) : null}
+
       {socialMediaLinks.medium ? (
         <a
           href={socialMediaLinks.medium}

src/components/softwareSkills/SoftwareSkill.js

@@ -14,7 +14,15 @@ export default function SoftwareSkill() {
                 className="software-skill-inline"
                 name={skills.skillName}
               >
-                <i className={skills.fontAwesomeClassname}></i>
+                {skills.svg ? (
+                  <span className={`icon-style ${skills.fontAwesomeClassname}`}>
+                    {skills.svg}
+                  </span>
+                ) : (
+                  <i
+                    className={`icon-style ${skills.fontAwesomeClassname}`}
+                  ></i>
+                )}
                 <p>{skills.skillName}</p>
               </li>
             );