MLH Pre-Fellowship Portfolio

We worked on creating a Jekyll Portfolio website template adding quite a few features and allowing anyone to easily start using this template

Comment

Inspiration

All of us had made a portfolio website earlier or used one from a template, we thought to build a portfolio website template that is super easy to use or customize, just change some markdown, and is equipped with all the necessary features.

What it does

Add Dark mode theme toggle

Having a dark theme option has become almost a necessity at this point. As it was missing from this website, We worked on adding a toggler for the same. We created a “darkmode” class over the body that is activated when the toggler is turned on. We also used a JS function to detect the user’s system preferences and set the initial theme to the same. As the theme data is stored in local storage, the preferences are stored even if the tab is closed/refreshed.

Add Resume

We noticed that the portfolio website did not have a Resume link for people to know more. Adding this was quite easy for us having worked on implementing a top navbar earlier. We added a Resume button to the navbar to allow having the resume on the portfolio website.

Adding a Contact section

We figured it would be super helpful to have something on the website from where you could be easily contacted. We did not want to simply make a button that opens up another application, probably the email app. So We used a free service called Formspree to allow us to do this easily.

Add Bio Section

The main portfolio template seemed quite raw and needed some extra information so that one could talk more about himself and his programming journey. We worked on adding a bio section and gave it a simple and minimalistic look.

Add Social Media Links

The footer of this template initially didn’t have anything to look out for. Therefore, We worked on adding social media links at the footer along with font awesome icons and hyperlinks, linking them to the official handles of MLH Fellowship social media.

Support for Google Analytics

If this was to be made a usable portfolio website it would imply for us to add Google analytics support right out of the box. We added Google Analytics support using GTags and also noticed a flaw that GA also considers the testing environment as an active user flawing the results which We also fixed.

Add links to the Navbar

We noticed that the navbar did not have any links to navigate to specific sections, so We decided to add them in and made it sticky. We also tried to make it responsive by changing the alignment for smaller devices.

Change UI for project details

Another feature We worked on is updating the UI of the project details. Initially, on clicking the project, We was redirected to another page with the details. Instead, We added an overlay box with all the details of the project. We had a little trouble getting this to work, as We could not figure out how to include the .md file and convert it to be used with HTML but fixed it.

Responsive

We noticed that the website wasn’t very responsive. We used media queries and in-built bootstrap classes to work on this and improve the usability for smaller screens.

How we built it

All of our project was managed on GitHub using the GitHub Flow.

  • We started by creating issues and assigning them to our team members and managed our tasks using GitHub Projects
  • We used GitHub PRs to concurrently work on multiple issues and incorporate code reviews
  • We managed reviews and PRs with GitHub Project Automations
  • We set up a CI/ CD to deploy and stage our website with Netlify

Challenges we ran into

Most of our team members had never worked with web development and were afraid of CSS. We had pair programming sessions to learn about this and write code together. Having used CSS for the first time we are indeed quite proud of what we have ended up with.

One of our team members had also not worked on using GitHub Flow and GitHub Projects but the rest of the team walked her through it.

Accomplishments that we're proud of

  • Most of our team has not worked with web development and CSS earlier we are quite proud of how our efforts turned out
  • Our team had never met or worked with each other and we are also quite proud of how we collaborated and worked together efficiently

What we learned

Some of our team members learned about:

  • CSS
  • Jekyll
  • Using the GitHub Flow
  • Working efficiently with GitHub projects

What's next for MLH Pre-Fellowship Portfolio

  • We are quite proud of how our website looks at the moment but we believe that there is still some room for UI improvement
  • We also plan to make a GUI wrapper around our template where one could just put his information up in a website and have his website created for him, without changing anything in code!
Share this project:

Updates