My contributions to the Pod 3.1.3 portfolio template!

For our orientation week, we were given this portfolio website template. So here are some of the changes I made to it!

Comment 1

Inspiration

What it does

I have contributed to the Pod 3.1.3 portfolio template by making a number of Pull Requests and Issues.

My Pull Requests to this template are:

  • Adding constants for the CSS colors (Pull Request #19) Link to the PR In this Pull Request, I have improved the readability and modularity of the scss files by using constants for the css variables. All the css variables are declared in the main.scss file using the css root selector, making assigning colors easy in rest of the scss files. These constants would also help in making the dark mode functionality.
  • Added Github Stats and Most Used Languages (Pull Request #41) Link to the PR Through this pull request, I have tried to give more idea about the user's contributions and most used languages on Github. It adds a Github Stats Card which tells us about the user's stars , commits, PRs and issues from their Github. I have also added a Most Used Languages Card, which tells us about the 4 most used languages by the user on Github. I have changed the github username in _config.yml and added images for both the cards in _includes/about.html using the github-readme-stats app.I also worked on editing the margin for the cards so that it also looks good on smaller screens. I searched for the various themes under this project to find one whose color scheme matches exactly our template! :)
  • Add the social icons to the project card (Pull Request#64) Link to the PR For this PR, I collaborated with Prakhar, so i cloned his fork and pushed my changes to his fork, from where we made a Pull Request. I added the tooltip to the icons added to the project modal card, and styled the spacing of the icons using Bootstrap flex.
  • Added animation on hovering over the cards (Pull Request #70) Link to the PR By this PR, I tried to improve the UX, by slightly increasing the size of the cards while hovering over them. I did this adding a transform class in all.scss, specifying the transition time. Next this transform class is called in all the cards where we want this hovering effect.
  • Added the sun moon toggle for the dark mode (Pull Request #77) Link to the PR Using this PR, I have used animation and changed the previous toggle to a sun moon toggle, showing a sun for the light mode and moon for the dark mode.I have added all the css for the sun moon toggle in the toggle.scss file.

Issues I opened:

** Issues I worked on:**

Challenges I ran into

This was my first time working with ruby and jekyll, so could setup my dev environment after a lot of debugging. I also had never worked with Sass, so struggled with css constants, but my pod mates helped me with this one! I had issues with the merge conflicts, and struggled with git and the branches initially. Added the dark mode toggle and fixing its animation was also quite a challenge.

Accomplishments that we're proud of

I am proud of the whole dark mode feature we have worked on, and I was able to handle my merge conflicts issues. I have never worked so much on frontend, so the fact that I have made many chnages to the UI of the site is what Im proud of!

What we learned

I got to learn a lot of Sass variables, animations in CSS, flex styling using Bootstrap and how to solve merge conflicts. I also became familiar with git branching and pull requests.

Video demo link:

Google drive link for the video

Deployed project link

Link

Sun Moon Toggle

Built With

Share this project:

Updates