Smoother transition between sections

• Create a smoother transition between sections. As of now, if we click on an item in the navbar, it is an instant jump.
• Make it a smoother transition from one section to another, when navigating via the navbar.

P.S. - Make sure to provide the live link in the PR!

Design the logos for the below-mentioned projects!

Specifications:

1. Format - SVG
2. Resolution - 1080*1080 px

Projects Covered

1. Leaderboard Frontend leader_front.svg
2. Collaborative App collab_app.svg
3. Geek Chat geek_chat.svg
4. Coder Queen coder_queen.svg
5. Numismatics numismatics.svg
6. Geek Editor Frontend geek_edit_front.svg

Steps

• Once the 6 logos are created, add them in the img/projects directory.
• The names of all the files should be the same as the ones mentioned above!

References

For more references, refer to this website!

Improve mentor card and responsiveness of the mentor section.

Task:

• Add a more minimalistic hover effect
• Change the color scheme so that it's in contrast with Open Code theme.
• Make styling changes to the whole website as you find appropriate, be creative as well as minimalistic

Note :

This issue is open-for-all but only the best design would be chosen, hence no need to claim, just submit your PRs and make sure to include a live link of your changes. (We can also give extra points or bonus points if we find your work impressive)

Deadline :

10th October 00:00 hrs

Things required in the footer:

Logos of IIITA and GeekHaven on the left side.
OpenCode's social media links in the center-> Facebook, Twitter, and GitHub.
OpenCode's logo is on the right side.

Fetch Data from Leaderboard API and show it on website.
It should display the name and most of the information of the API.

Add pagination also since we have 500+ contributors. (20 per page)

Create a project.json file inside the data folder.

project.json will contain information about the various projects in OpenCode'21.

Following should be the template of each project entry:

{
"name": "Collaborative-Web",
"description":"Opencode 21 Collaborative website!",
"repo-url":"https://github.com/opencodeiiita/Collaborative-Web/",
}

Tip: Use the opencode21 label to get all repo list in OpenCode'21.

don't comment

Welcome! This will be your first task.
Follow this link if you need help: link

This is an open issue no need to claim it. Directly create PR for this issue.

JavaScript Game

• In this issue, you are required to make a game based on JavaScript. For styling, you are free to use HTML, CSS, or any other front-end library/framework.
• In <your-github-username>.json, you need to add

 "game-link": <Live Link of the game>,
 "game-github-link": <Github Link of the game>

Note

1. The game should be made after OpenCode'21 started.
2. No need to claim, directly create a PR
3. Before this issue, everyone needs to do #129
4. Follow JSON format correctly.

1. add nav in "Assigned Issues" page
2. add nav in "Project info" page
3. also fix the title of "Assigned Issues" page

Generate your GitHub resume by following the instructions in this repo.

Create a file named <your-github-username>.json in data > participants

For example: In my case file name would be garvitchittora.json and follow this format.

No need to claim, directly create a PR linking this issue

Create an active issue assigned page where all issues assigned to a particular user will be listed.
The search feature should also be there wherein we can search by username.

Create a new HTML file.

API: Link

It should be floating on the bottom right side

It should show the number of days hours and seconds left in the ending of OpenCode'21.

For ex:

an issue with the rank list on the website. On Clicking on the next page it redirects to the next section. We can add a pre-loader to it for better UX.

Add a view more button in the Project card.

• View More will redirect to a page where all issues of that project will be listed
• Use GitHub API
• Issues will contain all useful information that we get from the API
• Create a new HTML file for this

Fetch Data from projects.json and display the name and most of the information in JSON.

Design the logos for the below-mentioned projects!

Specifications:

1. Format - SVG
2. Resolution - 1080*1080 px

Projects Covered

1. Geek Editor Backend geek_edit_back.svg
2. Auction DApp auction.svg
3. PanoViewer pano_viewer.svg
4. Find My Roomie find_room.svg
5. Ask Us Frontend ask_us_front.svg
6. Ask Us Backend ask_us_back.svg

Steps

• Once the 6 logos are created, add them in the img/projects directory.
• The names of all the files should be the same as the ones mentioned above!

References

For more references, refer to this website!

Social links should open in a new tab.
Social links are there in the footer and mentor card.

Fetch Data from mentors.json and display the name and most of the information in JSON.

Add tags on the website to Improve SEO.

Reference this to know more about SEO.

https://opencodeiiita.github.io/Collaborative-Web/assigned-issues.html make the search case-insensitive.

Only need to improve

1. Performance
2. Accessibility
3. Best Practices

**No need to do SEO, already done in #473 **

Scores rn:

1. mWeb

2. Desktop

Use lighthouse in Google Developer Console to check the score and for getting the list of things you can improve.

• Banner styling need to be fixed

• Timer in one frame

• Footer styling

In <your-github-username>.json, you need to add these key-value pairs:

"website-link": <live link of the website>,
"website-github-link": <github link of the website>

Must Features:

1. Footer
2. Header
3. About Section
4. Project Section
5. Education Section
6. Gallery Section
7. Responsiveness

Note:

1. Don't use site builders
2. The website should be made after the opencode started.
3. No need to claim, directly create a PR
4. Before this issue, everyone needs to do #129
5. Follow JSON format correctly.

Design the logos for the below-mentioned projects!

Specifications:

1. Format - SVG
2. Resolution - 1080*1080 px

Projects Covered

1. Collaborative-Web collab_web.svg
2. GoGit go_git.svg
3. Code Trouble code_trouble.svg
4. Shopping Cart shop_cart.svg
5. Contest Countdown cont_count.svg
6. Warriors warriors.svg

Steps

• Once the 6 logos are created, add them in the img/projects directory.
• The names of all the files should be the same as the ones mentioned above!

References

For more references, refer to this website!

Spacing between Sections

• Make the space between the different sections, i.e., landing section, timer section, about section, mentors section, participants section, and projects section uniform.
• These include space between the ending of a section and the title of the next section and space between the title of a section and the content of the section itself.
• Adjust padding and/or margin in order to complete this issue!

P.S. - Make sure to provide the live link in the PR!

Refining the Headings

• In this issue, you have to refine the headings of the mentors section, the participants section and the projects section.
• Make sure they are aligned the same, they follow the same animation, have the same font color, font size, font weight, font family, etc.

P.S. - Make sure to provide the live link in the PR!

Technical Blog

• In this issue, you are required to write a blog on any technology, that you learned during the OpenCode, or are learning, or will be learning after OpenCode.
• It could range from anything between different ways to give CSS properties to any HTML element to building say your own backend server or about an algorithm which you learned or any productivity tip on which editor to use or which terminal extensions or environment you use or which cloud service you use to deploy ML-based apps or which blockchain technology you like the most.
• I guess you get the gist that the blog can be about anything and everything.
• The blog must be written on Medium and must have a reading time of at least 5 minutes.
• In <your-github-username>.json, you need to add

 "medium-blog": <Medium URL of the blog>

Note

1. The blog should be written after OpenCode'21 started.
2. No need to claim, directly create a PR
3. Before this issue, everyone needs to do #129
4. Follow JSON format correctly.
5. The best blogs might get a chance to get featured on the Nybles handle. Feel free to explore the Nybles handle for taking inspiration on how to write blogs!

On the assigned issues page ; a search suggestion list is not implemented. I would like to do it

Improve banner and header section of the website.

The header will have navigation to:

1. Footer
2. Participants section
3. Mentor section
4. Project section

Banner images and Text should be related to Open Code. Also, fix the timer background to something according to the theme.

Improve styling of project card

Add favicon on the website

Add some image related to open code in the about section

Design the logos for the below-mentioned projects!

Specifications:

1. Format - SVG
2. Resolution - 1080*1080 px

Projects Covered

1. Productivity Tracker prod_track.svg
2. Information Chest info_chest.svg
3. PhotoStore photo_store.svg
4. LiblessML libless_ml.svg
5. OpenCode Revamp oc_revamp.svg
6. Let's Design 2.0 lets_design_2.svg

Steps

• Once the 6 logos are created, add them in the img/projects directory.
• The names of all the files should be the same as the ones mentioned above!

References

For more references, refer to this website!

Don't comment

use HTML, CSS, and JSS and make a simple to-do list application having an add and remove button.

In <your-github-username>.json, you need to add these key-value pairs:

"todo-link": <live link of the todo app>,
"todo-github-link": <github link of the todo app>

Note:

1. The To-do list app should be made after the opencode started.
2. No need to claim, directly create a PR
3. Before this issue, everyone needs to do #129
4. Follow JSON format correctly.

Apply for the GitHub Student Developer's Pack. Read more about it here.

In <your-github-username>.json, you need to add these key-value pairs:

"github-student-pack": "Yes",

Note:

1. No need to claim, directly create a PR
2. Before this issue, everyone needs to do #129
3. Create PR after you get PRO.