Add support for Kaggle social link, hide resumeLink on empty value (#409

)

* fix autoprefixer warnings

* Add kaggle social icon support, hide resumeLink on empty value

package.json

@@ -35,11 +35,16 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
+      ">0.3%",
+      "not ie 11",
       "not dead",
       "not op_mini all"
     ],
     "development": [
+      ">0.3%",
+      "not ie 11",
+      "not dead",
+      "not op_mini all",
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"

src/_globalColor.scss

@@ -87,3 +87,4 @@ $twitter: #1da1f2;
 $medium: #000;
 $stackoverflow: #f48024;
 $instagram: #c13584;
+$kaggle: #20beff;

src/components/socialMedia/SocialMedia.js

@@ -115,6 +115,18 @@ export default function socialMedia() {
           <span></span>
         </a>
       ) : null}
+
+      {socialMediaLinks.kaggle ? (
+        <a
+          href={socialMediaLinks.kaggle}
+          className="icon-button kaggle"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fab fa-kaggle"></i>
+          <span></span>
+        </a>
+      ) : null}
     </div>
   );
 }

src/components/socialMedia/SocialMedia.scss

@@ -60,6 +60,10 @@
   background-color: $stackoverflow;
 }
 
+.kaggle i {
+  background-color: $kaggle;
+}
+
 .instagram i {
   background-color: $instagram;
 }
@@ -73,6 +77,7 @@
 .facebook i:hover,
 .instagram i:hover,
 .stack-overflow i:hover,
+.kaggle i:hover,
 .medium i:hover {
   background-color: $textColor;
 }

src/containers/greeting/Greeting.js

@@ -40,11 +40,13 @@ export default function Greeting() {
               <SocialMedia />
               <div className="button-greeting-div">
                 <Button text="Contact me" href="#contact" />
-                <Button
-                  text="See my resume"
-                  newTab={true}
-                  href={greeting.resumeLink}
-                />
+                {greeting.resumeLink && (
+                  <Button
+                    text="See my resume"
+                    newTab={true}
+                    href={greeting.resumeLink}
+                  />
+                )}
               </div>
             </div>
           </div>

src/portfolio.js

@@ -7,7 +7,7 @@
 import emoji from "react-easy-emoji";
 
 const illustration = {
-  animated: true // set to false to use static SVG
+  animated: true // Set to false to use static SVG
 };
 
 const greeting = {
@@ -17,7 +17,7 @@ const greeting = {
     "A passionate Full Stack Software Developer 🚀 having an experience of building Web and Mobile applications with JavaScript / Reactjs / Nodejs / React Native and some other cool libraries and frameworks."
   ),
   resumeLink:
-    "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing",
+    "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing", // Set to empty to hide the button
   displayGreeting: true // Set false to hide this section, defaults to true
 };
 
@@ -31,7 +31,8 @@ const socialMediaLinks = {
   facebook: "https://www.facebook.com/saad.pasta7",
   medium: "https://medium.com/@saadpasta",
   stackoverflow: "https://stackoverflow.com/users/10422806/saad-pasta",
-  // Instagram and Twitter are also supported in the links!
+  // Instagram, Twitter and Kaggle are also supported in the links!
+  // To customize icons and social links, tweak src/components/SocialMedia
   display: true // Set true to display this section, defaults to false
 };