mlh-fellowship / jan-2022-prep-portfolio

Portfolio for January 2022 Prep

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

jan-2022-prep-portfolio's Issues

Contribution count is failing on PR pushes

It seems that the Contribution Count is failing on PR pushes but not when merging to main. Can we change its setting so that it only runs when there's a commit to main (including merge commits) so that it doesn't fail on PR branches?

Log here

Netlify won't build due to config error in _config.yml, causing all checks to fail.

Commit f4100c7 introduced changes to the _config.yml, causing bundle exec jekyll build to crash unexpectedly.

Here's the log from Netlify:

6:47:15 AM: $ bundle exec jekyll build
6:47:16 AM:                     ------------------------------------------------
6:47:16 AM:       Jekyll 4.1.1   Please append `--trace` to the `build` command 
6:47:16 AM:                      for any additional information or backtrace. 
6:47:16 AM:                     ------------------------------------------------
6:47:16 AM: /opt/build/cache/bundle/ruby/2.7.0/gems/safe_yaml-1.0.5/lib/safe_yaml/load.rb:143:in `parse': **(/opt/build/repo/_config.yml):** found character that cannot start any token while scanning for the next token at line 7 column 19 (Psych::SyntaxError)
	from /opt/build/cache/bundle/ruby/2.7.0/gems/safe_yaml-1.0.5/lib/safe_yaml/load.rb:143:in `load'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/safe_yaml-1.0.5/lib/safe_yaml/load.rb:157:in `block in load_file'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/safe_yaml-1.0.5/lib/safe_yaml/load.rb:157:in `open'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/safe_yaml-1.0.5/lib/safe_yaml/load.rb:157:in `load_file'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/configuration.rb:129:in `safe_load_file'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/configuration.rb:167:in `read_config_file'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/configuration.rb:198:in `block in read_config_files'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/configuration.rb:195:in `each'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/configuration.rb:195:in `read_config_files'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll.rb:118:in `configuration'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/command.rb:44:in `configuration_from_options'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:29:in `process'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `each'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:18:in `block (2 levels) in init_with_program'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
	from /opt/build/cache/bundle/ruby/2.7.0/gems/jekyll-4.1.1/exe/jekyll:15:in `<top (required)>'
	from /opt/build/cache/bundle/ruby/2.7.0/bin/jekyll:23:in `load'
	from /opt/build/cache/bundle/ruby/2.7.0/bin/jekyll:23:in `<main>'
	from /opt/build/cache/bundle/ruby/2.7.0/bin/ruby_executable_hooks:22:in `eval'
	from /opt/build/cache/bundle/ruby/2.7.0/bin/ruby_executable_hooks:22:in `<main>'

Add a navigation bar

As the portfolio gains more information, it may make sense to add a navigation bar. This bar should include the logo on the left side but only once the page has scrolled down a bit.

Add social icons for fellows

At the moment, it only displays the fellow name and location. To help people network, we should add social icons to each of the fellow cards.

• Add LinkedIn icons to the card
• Add Twitter icons to the card
• Add Resume icons to the card
• Add GitHub icons to the card

Encourage uniform basic code style

The code that's being added via PRs should follow the same style as existing code (indentation, line endings, end of file newline) for consistency and clean diffs. I propose an EditorConfig file for a frictionless experience.

Map is breaking mobile view

The map is breaking mobile view.

Check the image for more info.

Add some transitions/animations!

Currently, our site is a bit boring and it does not have any animations. Why don't we add one?

Some social links are broken!

Add Dark Theme toggle

I want to add a toggle to swap the website to a dark theme. There could also be an option to match the system theme too

Add header background

At the moment, the header background is a colour. Have an option to add an image that's easy to swap to something else and works on multiple screen sizes.

Add the pod!

Currently, then repository has members of the MLH team on it, but you should replace them with members of the pod.

You can update information in _data/fellows.yml

You should work on:

• Replacing the images
• Update the names and locations of each fellow
• Update the pod number inside of _config.yml

Center align project cards

Should we center these cards?
Right now, there's blank space towards the right end

Workflow Contribution Count/PR Review Fails on External PRs

Instance

Ref: #71
https://github.com/MLH-Fellowship/jan-2022-prep-portfolio/runs/4831613810?check_suite_focus=true

Context

I believe the workflow doesn't account for external PRs. I read that the GH_TOKEN workflows use by default don't have push permission for external PRs. A fix might be to use a personal access token instead or change how the workflow works to avoid this scenario.

cc @KhudaDad414

Social icons look weird in dark mode

Consider using dark-only and light-only classes. As they're recently merged into main, you might wish to branch again (if you're starting from scratch) or merge main to your existing branch to make these classes available.

Add pod stats

Add a way to display the number of contributions between fellows. Make a little leaderboard or similar to motivate people to add new issues!

Fix missing pod name

Our name does not have a name. Find one!

Add a map showing all the countries that fellows are located in

Underneath projects and fellows, have an interactive map that displays where everyone is located.

• When you click on the pin location for that fellow, it gives you a card with information about the fellow (similar to the fellow section

You can chose to have pins or use circular profile pictures to show where everyone is on the map. You could remove the fellows section and replace it with the map.

Improve projects UI

Currently projects are cards at the bottom of the page. It looks all too similar to the other cards on the page.

A few suggestions:

• Add an image to the project preview.
• Make the cards bigger and display more information on them, like who built it, and what not
• Improve the project page when you click on it, so it's easy to navigate back to the main site

Profile page for each fellow

When you click on each fellows card, it sends you to a separate page which includes more detail such as:

• Description
• Favourite programming languages
• Interests outside of technology
• University

Improve profile picture layout

At the moment, the profile pictures at the top, overflow when the screen is too narrow, or there's too many pictures!

This issue will need you to go through the CSS and make sure the website is responsive!

Improve loading time for images

Currently, images take a while to load as they're quite large. Can we compress the images when they are committed using a GitHub action to improve loading speeds?

Replace the MLH Fellowship logo with the MLH Prep logo

When you go to the project page, it shows the MLH Fellowship logo at the top. It would be great to replace this with the Prep logo and make sure that's used throughout the website!

What should be the metric for contribution?

Context

As part of #5 we are adding a leaderboard to the website that shows who are the top contributors.
Currently, we are taking into account the number of commits each fellow pushes plus the total number of issues they opened. As you might have noticed the number of commits isn't a good metric since one fellow can push all of their code in one commit and some fellow like to push a commit for each small task.
IMO we should consider the number of reviews as well.
What do you think should be the metric of contribution?

Add the history of contributions

after merging #41 the bot counts all of your contributions from now on, but it doesn't have access to the history of your commits, reviews and issues.
Update the current stats with the stats of each contributor till now.

Add a footer

Add a footer that acts a site map, and includes some information about the pod, such as:

• Blog
• About
• Socials
• Projects

Dark mode button's z-index is too low; Footer does not work in dark mode.

Add pod blog

It would be awesome to add a blog feature to this repository where fellows can share their insights and people can tune in!

Only ask for the user's location after clicking a button

Currently, the page asks for the user's location every time you open the website. This can be annoying/intimidating to a user.

Can we add a button that, upon click, asks for the user's location and update the map (or otherwise, refresh the page)? Like a button/link "Show my location on the map"

https://web.dev/geolocation-on-start/

Netlify status batch is broken

Context

We have a Netlify deploy status batch in our README, but it is broken at the moment.

Solution

The badge and the deploy link should be fixed.

Consider hiding profile images in index.html when viewed on mobile.

It takes a long time to scroll to the bottom of the page on a phone. Consider adding a @media rule to hide the profile images and only show them on larger screens.

Contribution count action has the wrong stats

Many people are getting 0 commits. What went wrong?
@CIPHERTron @KhudaDad414 Do you want to double check? Not sure what's the issue. Probably because the action was triggered by a merge?

Profile images looks weird

Can anybody fix it?