MLH Portfolio Website

A template that adds some new features like contact forms and a revamped UI. Built on top of https://github.com/MLH-Fellowship/pod-3.1.3-portfolio

Comment

Introduction

  • This project was built on top of the original MLH Portfolio Website Template on GitHub
  • This was done during Week 1 of the MLH Prefellowship between July 19th and July 23rd, 2021.
  • Plenty of new features were added to the template to make it as personalized as possible

Issues that I created and worked on

  1. Enabling smooth scrolling
    • This makes the scrolling animations when clicking on internal anchor links, much smoother
  2. Modals not showing the right content
    • The modal showed the wrong title for the project modal and still showed the default one that was on the bootstrap website
  3. Adding a scroll to top button
    • This was a feature request created by me to add a scroll to top button. This would be extremely useful to the website users, as this prevents them from having to scroll all the way up manually.
  4. Navbar links not working as expected
    • The links on the navbar did not work mostly because of no ID's on the sections that links would scroll to.
  5. Making use of bootstrap grid system
    • Description given in the issue description
  6. UI revamp
    • Description given in the issue description
  7. Contact form issue
    • Users could not fill in any details in the contact form and submit the form. Adding HTML required attributes to the input elements fixed the issue.
  8. Adding a contact form
    • Description given in the issue description
  9. Modal content not positioned properly
    • Description given in the issue description
  10. Modal text color in dark mode
    • Description given in the issue description

Pull requests that I created to fix issues

  1. Fixing the modal issue
    • Fixes the issue of boilerplate content still being on the modal
  2. UI revamp
    • Makes use of bootstrap grid system instead of CSS grid as it makes the code a lot more maintainable, and cuts down on the final CSS bundle size shipped to the browser
  3. Fixing empty contact form submissions
    • Adding required attributes to all HTML input elements fixed the issue of empty submissions
  4. Adding a contact form
    • A contact form is one of the most important aspects of a portfolio website. Its the place where people can drop some feedback, or come to you with some questions. This pull request used Netlify Forms to add a contact form, and connect it with the deployed site on Netlify
  5. Fix the modal content issues
    • Check the respective pull request and issue pages for details.

Challenges I ran into

  1. Running into many Git merge conflicts, which were a huge pain to resolve
  2. Unfamiliar with Jekyll, and Ruby, so it took some time for me to understand the folder structure and how everything worked in general

What I learned

  1. I became a LOT more comfortable with Git and GitHub by actually creating issues, creating pull requests, fixing merge conflicts and learnt a lot more about Git and GitHub too.
  2. Learnt Jekyll, and the basics of Ruby
  3. Learnt to write well documented pull requsts and commit messages
Share this project:

Updates