Adding social icons

[shehabadel]

This pull request addresses #Issue 11 We were able to add social media accounts' icons to the project. Each member or item inside fellow.yml must have the following attributes or variables

The following attributes are case-sensitive

1. twitter
2. github
3. linkedin
4. resume

They must be URLs to external links to platforms like Twitter, GitHub, Linkedin, and Google drive. I am currently waiting for @LiubovRukhlina to push the data from the form.

The following snippet shows each card for a fellow. It now also contains their social media accounts

<div>
                <!--Social media icons list-->
                <ul class="socialmedia">
                    <!--Represents a social media icon-->
                    <a target="_blank" href= {{item.twitter}}>
                        <!--Replace the text in the list item with the <i> from the font awesome-->
                        <li> <i class="fab fa-twitter"></i> </li>
                    </a>
                    <a target="_blank" href= {{item.linkedin}}>
                        <li><i class="fab fa-linkedin"></i></li>
                    </a>
                    <a target="_blank" href= {{item.github}}>
                        <li><i class="fab fa-github"></i></li>
                    </a>
                    <a target="_blank" href= {{item.resume}}>
                        <li><i class="far fa-file"></i></li>
                    </a>
                </ul>
            </div>

We also added a transition and styling to the unordered list containing the social media icons. In addition we used font-awesome package or library for the needed icons.

And that's how it looks now

It is an important pull request since it will allow the website visitors to explore our batch's fellows' social media accounts, and can connect with them.

Please check out the pull request @sadiq-b

• [x] My Pod Leader knows I'm working on this Pull Request

• [x] I've explained what the Pull Request is adding.

• [x] I've explained why this is important.

[netlify[bot]]

✅ Deploy Preview for prep-22-jul-prep-3-portfolio ready!

Name	Link
🔨 Latest commit	e8bc7b29271533e4a74b142b1730f7d1f5eafad4
🔍 Latest deploy log	https://app.netlify.com/sites/prep-22-jul-prep-3-portfolio/deploys/62cecb00be07a300082b42e6
😎 Deploy Preview	https://deploy-preview-19--prep-22-jul-prep-3-portfolio.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[shehabadel]

Still need to revise the pull request, since the changes from the other branches might have affected the main source code.

[shehabadel]

@sadiq-b Please checkout the latest commit . I added if conditions for each social media account

[shehabadel]

It looks like this now

[awilkescom]

Thanks for this! I'm going to accept the PR but I can't see the dummy data working. It would be good to have some data working within the PR next time!

[shehabadel]

Thanks for this! I'm going to accept the PR but I can't see the dummy data working. It would be good to have some data working within the PR next time!

@awilkescom I tested it using dummy data locally. I didn't push these dummy data on the repo just to avoid conflicts, and made sure that Liuba will add the data in the needed format.