Allow to use images instead of icons for skills (#288)

* Added imageSrc property to portfolio skills,  image rendering instead of icon under what i do

* Corrected readme and added portfolio example with imageSc

Author: dminkovski

README.md

@@ -97,6 +97,13 @@ You can change the personal information, experience, education, social media, ce
 4. Select the icon of your choice.
 5. Copy the text beside **Selected Icon** and replace it with `fontAwesomeClassName` of that particular softwareSkill.
 
+#### How to use custom images instead of Iconify Icons?
+
+1. Add a valid image file into the `public/skills` folder
+2. Insert the image name into the `imageSrc` attribute of the particular softwareSkill
+3. Remove the `fontAwesomeClassName` property or leave it empty because it takes precedence over `imageSrc`
+4. Add custom styling to the `img` using the `style` Property
+
 ### Github Information
 
 You will find `git_data_fetcher.mjs` file in the main directory of the repository. This file is used to fetch the data (Pull requests, Issues, Organizations, Pinned projects etc.) from your github.

public/skills/deeplearning_ai_logo.png

@@ -21,3 +21,7 @@
 .software-skill-inline > i:hover {
   color: #645beb;
 }
+
+.skill-image {
+  height: 48px;
+}

src/components/softwareSkills/SoftwareSkill.css

@@ -27,12 +27,22 @@ class SoftwareSkill extends React.Component {
                   }
                 >
                   <li className="software-skill-inline" name={logo.skillName}>
-                    <span
-                      className="iconify"
-                      data-icon={logo.fontAwesomeClassname}
-                      style={logo.style}
-                      data-inline="false"
-                    ></span>
+                    {logo.fontAwesomeClassname && (
+                      <span
+                        className="iconify"
+                        data-icon={logo.fontAwesomeClassname}
+                        style={logo.style}
+                        data-inline="false"
+                      ></span>
+                    )}
+                    {!logo.fontAwesomeClassname && logo.imageSrc && (
+                      <img
+                        className="skill-image"
+                        style={logo.style}
+                        src={`${process.env.PUBLIC_URL}/skills/${logo.imageSrc}`}
+                        alt={logo.skillName}
+                      />
+                    )}
                   </li>
                 </OverlayTrigger>
               );

src/components/softwareSkills/SoftwareSkill.js

@@ -125,6 +125,10 @@ const skills = {
             color: "#3776AB",
           },
         },
+        {
+          skillName: "Deeplearning",
+          imageSrc: "deeplearning_ai_logo.png",
+        },
       ],
     },
     {