add more social media (youtube, discord, whatsapp, soundcloud, tumblr…

…, snapchat, twitch, slack, vimeo)

src/components/socialMedia/SocialMedia.css

@@ -62,6 +62,42 @@
   background-color: #c13584;
 }
 
+.youtube i {
+  background-color: #FF0000;
+}
+
+.discord i {
+  background-color: #7087E4;
+}
+
+.whatsapp i {
+  background-color: #25D366;
+}
+
+.soundcloud i {
+  background-color: #E04005;
+}
+
+.tumblr i {
+  background-color: #001935;
+}
+
+.snapchat i {
+  background-color: #FFFC00;
+}
+
+.twitch i {
+  background-color: #9147FF;
+}
+
+.slack i {
+  background-color: #4A154B;
+}
+
+.vimeo i {
+  background-color: #41B1DB;
+}
+
 /* Hover Transition */
 .twitter i:hover,
 .google i:hover,
@@ -71,7 +107,16 @@
 .facebook i:hover,
 .instagram i:hover,
 .stack-overflow i:hover,
-.medium i:hover{
+.medium i:hover,
+.youtube i:hover,
+.discord i:hover,
+.whatsapp i:hover,
+.soundcloud i:hover,
+.tumblr i:hover,
+.snapchat i:hover,
+.twitch i:hover,
+.slack i:hover,
+.vimeo i:hover{
   background-color: black;
 }
 

src/components/socialMedia/SocialMedia.js

@@ -77,6 +77,86 @@ export default function socialMedia() {
       </a>)
       :
       null}
+
+      {socialMediaLinks.youtube ?
+      <a href={socialMediaLinks.youtube} className="icon-button youtube" target="_blank">
+        <i className="fab fa-youtube"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.discord ?
+      <a href={socialMediaLinks.discord} className="icon-button discord" target="_blank">
+        <i className="fab fa-discord"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.whatsapp ?
+      <a href={socialMediaLinks.whatsapp} className="icon-button whatsapp" target="_blank">
+        <i className="fab fa-whatsapp"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.soundcloud ?
+      <a href={socialMediaLinks.soundcloud} className="icon-button soundcloud" target="_blank">
+        <i className="fab fa-soundcloud"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.tumblr ?
+      <a href={socialMediaLinks.tumblr} className="icon-button tumblr" target="_blank">
+        <i className="fab fa-tumblr"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.snapchat ?
+      <a href={socialMediaLinks.snapchat} className="icon-button snapchat" target="_blank">
+        <i className="fab fa-snapchat"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.twitch ?
+      <a href={socialMediaLinks.twitch} className="icon-button twitch" target="_blank">
+        <i className="fab fa-twitch"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.slack ?
+      <a href={socialMediaLinks.slack} className="icon-button slack" target="_blank">
+        <i className="fab fa-slack"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.vimeo ?
+      <a href={socialMediaLinks.vimeo} className="icon-button vimeo" target="_blank">
+        <i className="fab fa-vimeo"></i>
+        <span></span>
+      </a>
+      :
+      null}
+
+      {socialMediaLinks.twitter ?
+      <a href={socialMediaLinks.twitter} className="icon-button twitter" target="_blank">
+        <i className="fab fa-twitter"></i>
+        <span></span>
+      </a>
+      :
+      null}
 
     </div>
   );

src/portfolio.js

@@ -24,7 +24,7 @@ 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 or more social media are also supported in the links!
 };
 
 // Your Skills Section