Overall Project Info

How it was built

Using the existing Jekyll template, I forked and cloned the repo and used the readme instructions to install Ruby and Jekyll and set up a dev environment. I did have an issue with live reloading which was due to using WSL2 but the linked Git issue mentioned --force-polling which meant I could refresh and Jekyll would auto-build.

Challenges I Experienced

GitHub Permissions: In the beginning, one of the major challenges we had was lack of GitHub permissions which meant we couldn't deploy our static site or assign and label issues. To get around that (in the meantime before our pod leader fixes this), we communicated a lot in Discord to let each other know what issues we were working on.

Merge Conflicts - With conflicting PRs being merged before my own PRs was caused merge conflicts some of which I had to resort to using a Git client because they were too complicated to resolve using the web editor.

Branches - Not branching off of main initially which meant I had to review another PRs files from a branch.

Time Management - Had so many 1 on 1s and code reviews which I really enjoyed but combined with normal work, it was sometimes challenging to find time to work on implementing PRs.

Accomplishments

So happy to have helped so many of my fellow pod members with Git, Github, CSS, JS and merge conflicts through 1 on 1s and reviewing PRs. Hope my show and tell on Git Merge Conflicts (by popular request) helps also.

Pleased to have improved the Lighthouse score so much and hope that my PR template has helped fellow pod members write good PR descriptions that help fellow pod members keep up to date on development

What I learned

Learned about JS ternary operators that were used in the Dark Mode PR. Learned about Bootstrap (since I've never used it before) as well as Jekyll and Ruby. Also, learned a bit more about Sass (particularly mixins).

Personal Contributions

Features (PRs) I Added

Add Recommendation Section - #13 - I was inspired by LinkedIn profiles that have a recommendations/testimonials section so I thought I could add a recommendations section to the portfolio. I first thought of having it in a project modal - similar to #4 but decided to have a full-width card instead to maximise use of text.

I added a new card class and use the selector (.card.full) to add its associated styles in all.scss. I added a linkedin_username YAML variable to dynamically add Will's LinkedIn username to a button to read more about testimonials. Testimonial data was taken from Will's LinkedIn username. Only one testimonial card was implemented but a nice to have would have been a slider to display multiple.

It would have been nice to be able to dynamically obtain LinkedIn testimonial information but LinkedIn's API only works using Sign in with LinkedIn so wouldn't work for a static site and would only use the user's information.

Portfolio Recommendation Card

Improve PR Template: - #16 - When submitting my first PR, I saw the default checklist and thought it could be improved by added more content, using Markdown formatting so instead of a checklist, there would be section headings and add notes to help fellow pod members be detailed and descriptive in their PRs (especially since at the time, we didn't have deploy previews). I edited the existing MD template and added notes and examples of MD formatting such as images (to help those who may not have used MD before) and also added issue linking text to help link issue to PRs to help prevent two people working on the same issue so we couldn't assign users to issue or PRs at the time.

Before

Old PR Template

After:

New PR Template

Use Let and Const Instead of Var - #67 Changed the vars in headers.html into const for more modern ES6 and prevent reassignment.

Improve Lighthouse Score - #75 - From the Google Lighthouse CI reports, I wanted to improve the Google Lighthouse scores. Before, the scores were okay, 79/70/93/60 but with only one green audit, I wanted to fix this so all audits were green and get as high a score as possibly without making too many breaking changes.

Mainly it was small fixes that helped improve the score the most. Adding a meta description tag (instead of just the Open Graph version), adding descriptive link text using the project name to the project modal read more button and a href attribute to the project card so Google bot could access/index the project page increased the SEO score from 60 to 97.

The low accessiblity score (70) was aided by changing the hello there heading to h3 so all headings are used in sequential order to aid the hierarchy used by screen readers and adding the modal id attribute to the project modal aria label so each aria label is unique since screen readers may skip elements with duplicate aria labels. This resulted in a green score of 96.

Best Practises was a little tricker. To get to 100, required plugging the security vulnerabilities present in the web application from using older versions of front-end JS frameworks (Bootstrap and jQuery). Updating jQuery (to 3.6.0) was easier (just grabbing the latest CDN from their website) but upgrading to v5 of Bootstrap broke the grid layout. Thanks to Anand (with his Bootstrap knowledge - since I hadn't used it before), he advised me of the particular breaking change that likely caused this issue. Reverting to 4.6.0 fixed both issues though.

It would have been nice to look at the mobile lighthouse score but needed to wait for this PR to merge first as many of the Lighthouse issues are shared between both audits. It would also have been nice to tackle the remaining accessibility issue (the colour contrast between button and text) but I believe that's already being handled in a new issue.

Before

Previous Portfolio Lighthouse Score

After

After Portfolio Lighthouse Score

Features (Issues) I Came Up With

Deployment - #17 - I tried to deploy the site using Netlify (since that's what the main template site used) but was unable to due to the lack of GitHub permissions. This meant in the beginning, it was difficult to conduct peer reviews because I had to manually checkout each PR rather than view a deploy preview. Robbie, our pod leader fixed and implemented this.

Improve Readme - #18 - Inspired by the Trainual training, I added an issue to improve the default Readme which was full of developer information such as how to build this site and how to fork it and use as your own portfolio rather than what we had built and an intro to what the site was.

Lucas (SnowPrimate) took this issue on and I suggested to move the developer docs into a separate .md file and added my notes about --force-polling for live reloading in WSL2 which is an OS specific fix for Jekyll that I learned when setting up my development environment.

Add GitHub Stats - #29 - For this issue, I was inspired by GitHub profile readmes that I had seen that display a user's GitHub stats and thought why couldn't we add it to our static site? Since this generator uses GitHub actions, I thought there may be a way for us to integrate it into our portfolio which would be a nice dynamic addition that would update on each site build, especially since for traditional software development jobs, GitHub is well known.

Nandini (Inoxia25) took this issue on and I reviewed her PR #41 for her via her review request and suggested she change the default colour scheme which was dark to a lighter colour scheme more in keeping with the existing colour scheme as well as fix a lack of margin issue with smaller devices. We had a 1 on 1 to chat about the margin issue and through the use of the browser console, I helped her realise that she needed to use a more specific CSS selector .github-stats img instead of just the class to target the image itself and not its container.

Before:

Portfolio GitHub Stats Card Dark

After:

Portfolio GitHub Stats Card Light

Improving Dark Mode Toggle - #48 - Having looked at the dark mode that Damir helped implement, I opened an issue to make some suggestion on how to improve the UI/UX of the toggle button. Before, it was an awkward position just over halfway down the header so it wasn't vertically aligned with any other elements and there was no margin between it and the left hand side and it had large text (which didn't align with existing typography styles) saying enable Dark Mode.

I suggested that the toggle could be moved to the top left to align with the navigation bar and that the toggle switch could be changed to a sun and moon icon to be more aesthetically pleasing and interactive.

Add Lighthouse Score to Readme - #68 - I was inspired by the awesome work done to add Google Lighthouse's automated CI to the readme so Google Lighthouse checks are run after every Netlify deploy and GitHub readme stats that we could display our Google Lighthouse score in our Readme.

PRs I Reviewed / Helped With

Added About Section - #6 - I reviewed this PR after teaching Riddhi about how to link PRs to their original issue. I made some suggestions to increase padding and split text up into paragraphs for a cleaner look. I also helped Riddhi in a 1 on 1 to find the source of the card border so she could replicate it in the new card.

Project Overlay Card - #36 - Prakhar reaches out to me for a 1 on 1 to help with this PR. I helped Prakhar by talking through how he wanted the overlay cards to work and advised which css properties he could use to make this happen (display vs visibility) and whether to use jQuery or JS instead of CSS.

After deciding on JS, I helped him with the logic he'd need for show/hiding elements and directed him to some articles/resources he could use to help him write the JS such as combining forEach and querySelectorAll to add click listeners to the project cards.

Add Dropdown Menu - #62 - Sudha approached me for a 1 on 1 to help her with a CSS display issue for positioning dropdown elements for her navbar. I gave her advice and we tried different things such as display: block, display: flex and found some different header resources we could use to try and emulate the layout we were looking for.

After she fixed it, I reviewed her PR and gave her some suggestions on how to improve the colour contrast, fixing margins and the movable logo.

Built With

Share this project:

Updates