Hacktoberfest 2023 EXCLUDED

After I did my pull reguest, I checked the Hacktoberfest 2023 page and it says 'This repository is EXCLUDED from Hacktoberfest, and it will not count for towards your participation'. :(

Another thing we could add, is a 404 page in the style of the main Hacktoberfest website.

Maybe with a text saying "Uh oh, you hacked too far..." and a big button underneath to go back to the main page of this repo.

Issue Title: Conversion to WebP Format and Image Storage Folder

Issue Description:

I propose a modification to the existing project to transition from using PNG and JPEG image formats to the more efficient WebP format. Additionally, I suggest the creation of a separate folder to systematically store these images. This adjustment will improve the performance of the project and enhance image management.

Proposed Changes:

1. Image Format Conversion: Convert existing PNG and JPEG images to WebP format. This format is more suitable for web usage due to its smaller file size and better compression, which ultimately leads to faster loading times.

2. Image Storage Folder: Create a dedicated folder for storing all the converted WebP images. This organized structure will streamline image management and make it easier to locate and update images.

Rationale:

The conversion to WebP format and the establishment of an image storage folder are crucial for the following reasons:

Improved Performance:

WebP images are known for their superior compression capabilities, resulting in reduced loading times and improved project performance, especially for web applications.

Enhanced Image Organization:

A designated image storage folder simplifies image management, making it easier to keep track of and update project images, ensuring a more organized codebase.

Additional Information (if available):

If specific guidelines or steps are required for making these changes and if any additional information is needed, please advise. I am committed to providing all necessary details and implementing these improvements effectively.

Let's make the website more fun! A great way to do so would be with Lottie Animations.

For those who might not be familiar with it, here is a documentation about it:

• https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page-html

Preparations

I have prepared a button which changes the "layout-type" attribute under the element with the id "contributors" from "full" to "compact".

contributors.html (html):

• Row: 23 - 27

contributors.html (javascript):

• Row: 125 - 136

main.css (css):

• Row 54+ (for default css which will be for the full layout)
• Row 64+ (for the compact css)

Idea

The idea is to make a toggleable layout switcher so instead of the cards for the participants being full width, we would make the width smaller so more cards can fit in one row and optionally also either hide or change the look of the information about the developer.

Although showcasing yourself on the contributors page is great since you can tell us something about yourself, we could make it even more customizable.

The idea would be card themes!

• What are card themes?

Card themes are classes you can assign to the main div of your presentation which would add a neat look to an individual card.

• How would it look like?

An example would be that the class "nature-card" would change the cards background image to something nature-ish or the color of it, or add a "nature-like" border around it, maybe even animations since we now have Lottie Animations for the site!

• Additional information:

The themes should not be too complex, since we want everything to run nice and smooth and not disturb the visitor too much so the main point of the website doesn't get lost. It would also be great if we could make a template theme, in case that someone would like to make their own theme they would just copy the template and edit it a bit along with the class selector.

So currently, there is a modal ready and in place to be used. But it isn't really anything special.

A great thing we could do is improve the design, functionality and maybe make it more dynamic so we could pass into onto it so it could be reused or something.