Contribution 4: Coding the website template & pull request

Housekeeping

Before developing my website template and contributing to the project, I double-checked the contribution guidelines and licenses to ensure that I contributed in the right manner and right file.

Forking project and starting the development process

a. Forking

Once I read through all the documentation, I forked the project to my GitHub and cloned it to my local computer.

b. Setting up the layout and responsivity

The website is essentially split into 2 section: User information, User's works.
Hence, the first thing I did was to set up a resonsive column to manage the content of the website. Code bellow:

c. User information section

This section is fairly straightforward, primarily consisting of styling the typefaces and creating the button components. Below is the code and what it looked like.

d. Developing parallax interactivity

The parallax interactivity is done by integrating the "transform" command into each image container (div). I experimented a lot with the transformation values to achieve the effect and interactivity I liked. Below is a snippet of the interactivity styling.

e. Integrating loader

As all the image assets are from a cloud database, it would take the website a couple of seconds to display the intended interface. Hence, to ensure that the website is as seamless as possible, I added a loading function to replace the website interface while it loads all assets.

Gathering assets & finalising web template

After finishing all the sections, I compiled them all together (html, CSS, js, image assets, etc). Below is the final website demo. Link to website demo: https://hilaryoung.github.io/HNY-OpenSource-Web/#

Video Demo

Committing project and creating a pull request

Once I finished the website, I made a commit and created a pull request for the SimpleBio project.

Uploading project contribution to CodePen

Additionally, I also uploaded the code I made to another open-source platform, CodePen, to further expose my contribution.
Link to codepen: https://codepen.io/youngwen/full/yLREqrV

Uploading my code to CodePen proved to be effective in gaining exposure for my website template. As a result, I received a comment from a CodePen user expressing interest in using my template for commercial purposes (See screenshot below).

This interaction prompted me to consider the legality and approach of using open-source projects for commercial use, as well as explore the available licensing options. Through my previous contributions, I observed that many open-source projects in GitHub utilize GNU Copyleft licenses, while CodePen employs MIT licenses. This revelation served as inspiration for my upcoming blog post, which will focus on a comparison between the GNU General Public License (copyleft) and MIT License, specifically tailored for digital artists (READ BLOG HERE) .

---

Reflection

For this contribution, I was able to utilise a combination of skills I learned in the Coding Six unit. particularly from the lecture on Best Practices for contributing to open-source projects in Week 3. I gained an understanding of the importance of order in collaboration, where rules are established to maintain organization in the project. This is why I made sure to strictly adhere to the "commit" guidelines when submitting my website template.

Additionally, I utilised the knowledge I learned from Week 10 which talked about the value of good documentation. Before committing my web template to the project, I made sure I commented on my code. Specifically, I commented:

1. What each function does
2. Where to change metadata to the user's own data
3. What can be modified (e.g. colours) and shouldn't modify (e.g. responsivity configuration, div layouts)

I realise that contributing my template to an open-source project entails that anyone is free to use, hence in the spirit of open-source collaborations, I want to make sure that whoever wants to use my template can easily modify it to their preference.

I would say the most challenging part of this project contribution is identifying the type of website template I want to contribute as there is no specific issue to work on. Due to the "free" nature of the project, I find it quite challenging to create a contribution that would add value to the project. Eventually, I did manage to find a gap in the project after going through the most recent pull requests and commits other people have made - and identifying that a "creative" and interactive web template - that is also beginner friendly is non-existent in the project, which is why I decided to fill in that gap.