MLH Prep Portfolio for Pod 22.JUL.PREP.3

  • By MLH Fellowship
  • Last update: Oct 7, 2022
  • Comments: 15

Portfolio Template

This is a Jekyll website template designed for Prep Fellows.

Make your own!

  1. Use the Template button.
  2. Update _config.yml to contain your information.
    1. Change url to the URL you'll be hosting it at
    2. Make sure it has the /
  3. Use something like Netlify or GitHub Pages to deploy (note, this only works on username.github.io, not username.github.io/repo-name)

Add your portfolio

Head to _data and fill out either projects.yml, experience.yml and education.yml.

Project example.

- title: Online Shopping Application
  event: MLH Prep - Batch 4.5
  date: Fall 2021

Experience example.

- role: MLH Prep Fellow
  company: MLH Fellowship
  dates: Summer 2021
  logo: fellowship.svg

Education example.

- course: Prep Fellow
  institute: MLH Fellowship
  dates: Fall 2021
  logo: fellowship.svg

Add project posts

  1. Make a new .md file inside of projects.
  2. Add the header to your markdown file (see below) and change the title to the name of your blog post.
  3. Write your project page! Can be a README from GitHub or your Devpost page.
  4. Add the page-name field to your projects.yml (see below).

Top of post markdown file post.

---
title: Project
layout: page
---

projects.yml with the page-name field.

- title: Online Shopping Application
  event: MLH Prep - Batch 4.5
  date: Summer 2021
  page-name: project

Development

If you want to test it locally or add some new features, run the below commands. Make sure to have Ruby and Bundler installed.

bundle install --path vendor/bundle
bundle exec jekyll serve

Github

https://github.com/MLH-Fellowship/prep-portfolio-22.JUL.PREP.3

Comments(15)

  • 1

    Adding social icons

    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

    image

    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.

  • 2

    issue #6 ; improved project card's ui on landing page and added new fields

    Please, go through these steps before you submit a PR.

    • [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.

    ##What? Improved project card UI on landing page issue #26. The new card ui contains the following

    • Details of the project's developer (name and picture)
    • Screenshot of project
    • live Url of project
    • link to Github repo
    • Brief project description
    • link to a project page that describes the project in details

    Why

    I and my partner divided the 3 tasks in issue 6 between ourselves. I chose to-

    • Add an image to the project preview.
    • Make the cards bigger and display more information on them, like who built it, and what not.

    while my partner chose to.

    • Improve the project page when you click on it, so it's easy to navigate back to the main site

    screenshot of project section before my commit

    Screenshot 2022-07-14 at 08 35 28

    screenshot of project section after my commit

    Screenshot 2022-07-14 at 08 38 39
  • 3

    Issue #5: Replace the MLH Fellowship logo with the MLH Prep logo

    This Pull request fixes the bug wherein MLH Fellowship logo shows instead of the Prep Logo.

    The pull request is for issue #5 which asks to replace the MLH Fellowship logo with the MLH Prep logo on the Projects page. It is important since this portfolio website is a part of MLH Prep and hence the logo. Then

    Now

    I have also added a boilerplate for Dark mode functionality which requires JavaScript. Kindly ignore the 4 commits pertaining to the dark mode. Only the first is relevant.

  • 4

    fixed profile pictures on main

    Please, go through these steps before you submit a PR.

    • [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.

    Found an issue in previous PRs that effected profile pics display and changed it in CSS file.

  • 5

    Overflow & ID's for Data

    This pull request re-adds the overflow fixed in this pull request which was overridden in merge conflicts. This was part of Issue #12. This is important so we do not lose improvements made to our site.

    I also added unique ID's as part of fellow data. This addresses Issue #50. This is important because it makes the map function smoothly, and for any future features, we have a way to easily refer to unique fellows. Prior to this the map code was relying on the name data to refer to individual fellows. Since some people entered both their first and last name with a space in-between, this broke the map functionality because individual fellows were parsed by spaces.

    • [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.
  • 6

    Issue #9 Profile page for each fellow

    Please, go through these steps before you submit a PR.

    • [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.

    Profile.html page is added. When the user clicks on the fellow name at the main page, they will be redirected to the profile page that displays detailed information about the fellow.

  • 7

    Image compression test issue #2

    Please, go through these steps before you submit a PR.

    • [x] My Pod Leader knows I'm working on this Pull Request
    • [x] I've explained why this is important.
    • [x] I've explained what the Pull Request is adding.

    Added Calibre Image Actions and made a workflow to execute it, which reduces the image size up to 50%. This PR is made with respect to issue #2

  • 8

    Navbar implementation

    This PR is adding a navigation bar to the portfolio page so that different sections can be navigated more easily

    1. Initially (without any scrolling), the page should looks like this screenshot below (the logo is still in the middle)

    image

    1. When scrolling down, the navigation bar appears to be a bit lighter in color and the logo is now on the left of the page along with the navigation section link next to it (see below screenshot)

    image

    This feature is important when more sections will be added to the portfolio page and it may get harder to navigate to each desired section when the page is too long.

  • 9

    Dark mode finalized

    • Implemented the dark/light mode changing the toggle button
    • Fixed it for working toggle button for the project pages also
    • Set up the local storage for save mode of toggle button while navigate on web-site
    • Implemented auto-switching the dark/light mode considering the system time
  • 10

    Issue#4 Add Pod Stats

    The pull request is for issue https://github.com/MLH-Fellowship/prep-portfolio-22.JUL.PREP.3/issues/4 . Added a leader board for showing up pod statistics like total PRs merged for each member , total open PRs for each member and total commits for each member

    Screenshot from 2022-07-14 19-22-55

  • 11

    added about section to home page

    Please, go through these steps before you submit a PR.

    • [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.

    I added an about section template on the landing page to introduce the portfolio site and the pod group. It also includes a picture beside it which we can replace with our pod class photo. This is for issue #21

  • 12

    fixed the links to social media and resume

    Please, go through these steps before you submit a PR.

    • [ ] My Pod Leader knows I'm working on this Pull Request
    • [ ] I've explained what the Pull Request is adding.
    • [ ] I've explained why this is important. I fixed the links to the social media accounts and resume in the profile page. Previously the links only refreshed the page. Now all fellows can navigate to their peers social accounts.

    kindly review @himanshu-thakur-7 @dw2761

  • 13

    Add unique ID for fellow data

    Currently there is no unique ID field in the fellow data. This makes referring to specific fellows difficult in code. It will be good practice to have an ID field for our data.

  • 14

    Fix content appearing on top of header

    issue

    Currently when you scroll down the page, the content of the site appears on top of the header. This can likely be fixed by adjusting the z-index of the header.

  • 15

    Add about description

    Currently, the portfolio doesn't have an "about" or introduction section to introduce the website. We could add a description to introduce the pod as a whole group/introduce the project, and include our class photo beside it once we take it.