Above the Geektoberfest'20 Heading, add a cool looking timer for when Geektoberfest ends (30 Oct).

You can add a label above the timer like "Ends in" , followed by the countdown

To the about section, add some text about the Discord Server of Geektoberfest and then hyperlink the link to the Geektoberfest Discord Server with it. You can style the hyperlink so it doesn't look too distracting.

Here is the discord server link: https://discord.gg/VQqfNAG

For example, when hovering on some of the project cards, this is what happens:

As you can see, when hovered, according to the text there, some cards become shorter in height, while some cards become larger in height. This shouldn't be the case, the cards shouldn't change their height when hovered, make sure the cards remain the same height as before when hovered.

the current design is good, but the participant divs could be smaller and the aspect ratio of the original image should remain intact

In the projects section, add all the projects involved in Geektoberfest as cards. Add Relevant image for each repo, Project Title, Description, Maintainer Names and then a repo link button.

All the projects marked with 'hacktoberfest' tag in the GeekHaven org are part of Geektoberfest.

You can make use of Bootstrap cards, just make sure the Cards look good, the current card template present there is not to be used, it doesn't look that good.

Following the colour scheme and design of the new navbar, redesign the footer using a similar design style, fonts etc. Try to keep it minimal.

In the footer, it shows Copyright to Opencode'20 instead of Geektoberfest'20. Fix that.

Most Social Icons in the contact section are not visible, there is some class issue there. Make them visible again!

Make sure to update your repo to the latest version of this repo first, so you can see the issue and also to avoid conflicts.

In the navbar, the Geekhaven logo is looking stretched.. It maybe because of the use of both width and height properties instead of one. Also fix the margin around the logo, currently it has some uneven margin, make it look better.

After adding the background image, make sure the text "Geektober.." and the button are still visible properly, you may have to change their styling.

Screenshot:

As you can see, when the hamburger is clicked, there is no background behind the menu items, that shouldn't be the case, it looks out of place. It should look as if it was extended from the navbar, so make the background of the drop down navbar, the same color as the navbar.

Create a new page profile.html which takes the username as a parameter. For example the URL would be:
https://geekhaven.github.io/Geektoberfest-Main/profile.html?username=2802harsh

And then according to the username provided in the URL, first you can extract the username from URL, and fetch the details from the correct json file in the contributions folder and display a page showing the details of the mentioned participant.

You can get the json file using fetch(), the files should be hosted at https://geekhaven.github.io/Geektoberfest-Main/contributions/ so for example 2802harsh.json will be at https://geekhaven.github.io/Geektoberfest-Main/contributions/2802harsh.json

Similar to the participants section, add a mentors section below.

You can check the projects section for getting the names of mentors.

Each mentor should be in a card, with details such as Photo, Name, Github Link, Facebook Link. The card styling can be similar to the participants section.

Also add the Mentors menu item to the nav bar.

The actual timer is separated from the Days Hours Minutes labels while actually the labels should be right below the numbers.

Fix this, however don't add extra space between the 'Event Ends In' label and the countdown, your task is to shift the 'Day Hours..' labels upwards, not the countdown downwards.

Currently the site looks very dull, improve the colouring choice. You can search for good colour palletes.
Also, update the text in About section with information about Geektoberfest.

The current cursor is cool, but the color can be improved. Ideally, a blending mode which inverses the colors is desired, so the cursor is always visible. Also the cursor can change when hovering over a link or an icon.

Make the website locally remember the Dark Mode/Light Mode preference of the user. If I toggled Dark Mode on, then next time I open the site, it should default to Dark Mode toggled on. Similar with Light Mode.

You'll have to save user's preference in localStorage of the user's browser.

Currently the site looks quite dull and bland. Add a good font and try to redesign the site as you see fit without changing the html structure

When dark mode is toggled, we can barely see the black geekhaven logo. What you should do is change the geekhaven logo to a white version, when dark mode gets toggled, and then revert back to the old logo, when light mode gets toggled again.

You can find the white logo here: https://raw.githubusercontent.com/GeekHaven/GeekHaven-2020/master/images/gh.png
Or, you can possibly use css to invert the colours of the same logo, that maybe a better option.

Currently the text is almost as big as the countdown and doesn't look that good. Make the text a little bit smaller, and closer to the countdown timer.

You can look at how the participants are being fetched in the Participants section of the main site. (Refer the last bit of code in main.js )

In the same way, you have to fetch these participants in new page leaderboard.html, and then create a table where the participants appear in a sorted way according to their number of pull requests.

Currently, clicking the links on navbar scrolls the page abruptly, the scroll should be smooth. This may need a bit of JS. Add your JS in main.js in public/js and add a link to this file too in the html file

Right now the title is just a standard 'Profile'. This should be dynamic. According to the participant's name, the title should become 'Profile - Participant Name'

Example profile url is: https://geekhaven.github.io/Geektoberfest-Main/profile.html?username=2802harsh. You can change 2802harsh to your own username to get your own profile. So for example, this particular url's title should be 'Profile - Harshdeep Singh Pruthi'

some participants have provided invalid image urls. See to it that a default picture is shown instead of whats currently showing.

On special request from @starboi02, we need to fix Varun's name in maintainer names in the Projects Section, in the projects 'Chat App' and 'GOT Character App'.

His Name is Varun Bhardwaj not Varun Bharadwaj :P

The navbar should be visible from anywhere on the page. make it sticky without breaking the existing site. A live preview is expected with a PR

You can use Bootstrap/Jquery.

Add a cool looking preloader to the website. You can use a gif, but make sure its transparent.

By dynamically using the JSON files in the contributions/ folder, add the details of all participants in the form of Cards.

A participant card should have their image, name, about, buttons to their fb/github, and number of PRs they have made so far.

DON'T USE THE CARD TEMPLATE ALREADY PRESENT, it doesn't look that good. You can use Bootstrap Cards.

Make sure to separate the JS into a js file in the public folder instead of adding JS to your html file.

Along with the Github/Fb Buttons, add a profile button to the participant cards which links the participant's profile.

A participant's profile will be located at:

https://geekhaven.github.io/Geektoberfest-Main/profile.html?username=xyz123

where xyz123 is the username of the participant.

The username of the participant should be stored in the variable participant in the js code where the participant cards get generated.

After every Pull Request of yours that gets merged, you have to add its details to your contribution JSON file so that we can keep track of your contributions. Instructions on how to add PR details are given below:

To add your pull requests, open contributions folder and in their add your own json file with file name as your Github Username. Please maintain the following format EXACTLY (replacing values where indicated):

     {
        "name" : "Participant Name",
        "imageurl" : "https://sample-website/image.jpg",
        "about" : "Hello I'm a web developer",
        "facebook": "facebook-url",
        "github" : "github-url",
        "prs": [
            "https://github.com/link/to/pr/1",
            "https://github.com/link/to/pr/2",
            ...
        ]
     }

As you get more PRs merged, you can keep updating the same file. A sample file has been placed in the folder for your convenience. Make sure to update your file as soon as you get a PR merged.

You don't need to mention this issue, just make sure the commit message mentions that you are updating your PR file.

If I click on lets say 'Projects' menu item in the nav bar, the website should smoothly scroll to the projects section, instead of just snapping into it. (Just like there is scroll animation in the Scroll To Top button)

Currently, smooth scrolling is implemented but only works on Chrome/Brave browsers, make it work on all browsers. (Edge etc)

Add the GeekHaven logo as a favicon and also add it beside the Geektoberfest'20 heading in the navbar.

If you use a local image instead of a URL, make sure to put it in a seperate /public/images folder.

The default cursor and the scrollbar are getting in the way of the overall theme. They need to be customized.
(the cursor doesn't need to be flashy or animated, a simple dot which is visible anywhere in the page would do)

Leaderboard is now available at https://geekhaven.github.io/Geektoberfest-Main/leaderboard.html

Add it to the navbar.

Currently the site breaks at mobile and tablet widths. Add responsiveness to the site, so that it looks good, especially for mobile devices.

Since the navbar is hovering above and the entire page is pushed upwards to take the space of the previously non-sticky navbar, smooth scroll navigation is ending up in cropped sections.

Example:

Clicking on Projects leads me to here, it assumes there is no navbar there and shows cropped up, thus, hiding the Projects heading. Ideally the section should appear below the navbar

Currently there's no contact section in the page. Add a section at the end before the footer and add social media icons (these links' hrefs may be left empty, we will update it).

All the major work is done, but the site is still unbearable in smartphones. Making this extended site responsive without breaking the existing functionality can prove to be a challenge, but we need help and any contribution is welcome.

Add a button which lets you toggle between Night Mode and the current color scheme.

For implementing dark mode colors, you can google some good dark mode color palettes. Also, make sure the toggle button is not too big and distracting, it should be a small icon in the top right.

Each person's profile page is now available.

Example URL: https://geekhaven.github.io/Geektoberfest-Main/profile.html?username=2802harsh. You can change 2802harsh to your own username to get your own profile.

You have to redesign this profile page to look better(Make sure to check pages of different profiles to verify your styling is consistent):

1. Improve the header. Better font, also fix the grammer, coloring.
2. Show the number of PRs made.
3. Show the PRs in a styled table instead of a list, and make sure they are hyperlinked(they cannot be clicked as of now)
4. Improve the overall font and sizes etc, make it look good.
5. Make the social icons a little bigger and better placed.

Add a suitable favicon to profile.html

The night mode toggle button should not be in the middle, but in the extreme right. Also if the bottom shadow on link hover can be removed, and there's a transition duration to the hover effect, it will look better. (the navbar has a responsive feature, so also see that your redesign works well in mobile devices). Take inspiration from this-

The navbar is back to being non-sticky due to latest redesign commits. Also the brand is somewhat smaller than the links. They should be of equal size or the other way around. Also the current effect on hover is somewhat subtle. All these should be fixed without changing the current structure and functionality of the element

Participants are finally visible but their the styling is unfinished. Add bootstrap cards or sth to make the section look better.
(the participant divs are in main.js and are dynamically being rendered from there, so keep that in mind and don't break the code)

It should be floating in the bottom right side when scrolling down. Choose an appropriate icon for the button

Some participants have too big Abouts. Example:

and it is messing with the styling of the card.

So if the About of someone is bigger than some word limit, then end it with "..." after the limit. For example, you can set the character limit as 70. If someone has About more than 70 then you can just end it after 70 with "...".
70 is just a random guess, find the number which is big enough and doesn't mess with the styling.