Project Section Responsive Design

Description

Summary

Create a responsive design for the project section on the collaborative web page site. Refer to the mentors section design for inspiration, available here.

Requirements

1. Implement a responsive design for the project section.
2. Use the mentor section design as inspiration, ensuring consistency in style and layout.

Design:

1. Design a visually appealing Mentors Section in Figma.
2. Include an image placeholder for each mentor.
3. Add a clickable link or placeholder for linking to each mentor's profile.

You can refer to the homepage design which is available in the readme for color palette and overall design theme.
Figma Link

Requirements:

1. Ensure the design is aesthetically consistent with the overall theme of the collaborative web application.
2. Consider creating a grid layout or card-based design for displaying mentor information.
3. submit your design under data/designs/mentors.json

Deadline:

[48 hours]

1. Add URL to "Get Started" Button

Currently, the "Get Started" button on the website lacks a direct link. To enhance user experience and direct new users to the OpenCode IIITA GitHub page, we should add a URL to the button.

2. Improve "About Us" Section Styling

The "About Us" section needs styling adjustments to enhance its appeal and ensure consistency with the rest of the website. Both mobile and regular views should be addressed. Additionally, the section appears off-centered, and we need to correct its alignment.

Description

We are looking to enhance our project documentation by adding relevant images for the projects mentioned in data/projects.json. This will improve the visual representation of our projects.

Tasks

1. Review the projects listed in data/projects.json.
2. Find or create relevant images for each project.
3. Add the images to the images folder in this repository.
4. Update the paths in data/projects.json to point to the newly added images.

Project List (from data/projects.json)

{
  "projects": [
    {
      "image": "images/collaborative.jpg",
      "name": "Collaborative Web 2023",
      "description": "Opencode'23 Collaborative website!",
      "repo-url": "https://github.com/opencodeiiita/Collaborative-Web-2023/"
    },
    // Add more projects as needed
  ]
}

Implement About Us Page

Description

We have a specific design for the "About Us" page, and your task is to implement it based on the provided Figma design. The design can be accessed at the following URL: Figma About Us Page Design

Task Requirements

1. Figma Design: Refer to the provided Figma design to understand the visual elements, layout, and content structure of the "About Us" page.
2. HTML and CSS Implementation: Implement the "About Us" page using HTML and CSS, ensuring it closely matches the design.
3. Responsive Design: Ensure that the page is responsive and works well on various devices.
4. Integration: Integrate the implemented "About Us" page into the website codebase. The html code should be written in the about us section
5. Timer: For the timer, just create a similar element and put some static time into it. The actual implementation of timer will be a different task.

Deadline

The deadline for submission is 48 hours only. The task is based on FCFS policy.

Discussion

If you have any questions or need clarification on the "About Us" page implementation requirements, please feel free to comment on this issue or ask on #collaborative-web channel on discord. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your implementation!
Happy coding!

Fix the logo of opencode and change the style @ 2023 OpenCode All rights reserved text make it fix at the bottom of the page

Add icon to this move to the top button.

Create the speaker section

Descrption:

You need to create a speaker section in the collaborative website under the speaker section that has been initialised in the index.html file. The section must fulfill the following requirements:

• The section must contain cards of different speakers.
• The section must be responsive.
• The details of the speakers can be reference from this link.
• The section must be present after the organiser section.
• The section must contain a show more button which only works on this section.

Deadline

The dealine for the task is 2 days.

Discussion

You can tag us here or ping us on discord if you've any doubt or confusion.

Description

Our website currently lacks some key user experience enhancements that we want to address to improve overall usability and engagement.

Tasks

1. Staggered Animation Delay on Cards:

   • Implement a staggered animation delay on the cards to create a visually appealing entrance effect.

2. Smooth Scroll on Navbar Click:

   • Add smooth scrolling behavior when users click on the navbar links for a seamless transition between sections.

Staggered Animation Delay on Cards

Details

• Location: Cards section of the website.
• Animation Type: Staggered entrance animation with a smooth transition.
• Delay: Add a delay to each card, creating a staggered effect.

Example Code

/* Example CSS code for staggered animation delay */
.card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.card:nth-child(odd) {
  animation-delay: 0.2s; /* Adjust delay based on desired stagger effect */
}

.card:nth-child(even) {
  animation-delay: 0.4s; /* Adjust delay based on desired stagger effect */
}

.card.animate {
  opacity: 1;
  transform: translateY(0);
}

Implementing show more button

Description

The show more buttons present in the website in sections like projects, organisers and mentors don't work in mobile view. You need to implement a logic in javascript so that initially it only shows 5 cards for each section and after clicking on the show more button, the complete list is shown.

Deadline

The task needs to be completed in 2 days.

Discussion

Feel free to tag us here or ping us on discord if you've any doubts or confusions.

Minor Bugs (1)

Description

You are required to fix the following bugs:

• Change the display order of sections to home>about>leaderboard>projects>oragnizers>mentors.
• Give some padding to the about section so that it seems equally padded with other sections.
• Change the heading of the leaderboard section to Top Contributors

Deadline

The deadline is of 2 days.

Discussion

Feel free to comment here or ping us on discord if you've any doubt.

make these 2 buttons represent the design of button similar to project section

make it look like this button

the other part of the task is to fix the navbar highlight on the section which is visible. It used to work before but somehow some lines got removed your task is to fix it again. It's js is already available in js folder just fix the small bug.

Improve the responsive styling of the website

Description

Improve the styling of the website in the mobile view. The following are the requirements for this task:

• The opencode text and the hamburger menu in the navbar are not aligned properly with each other. This needs to be fixed.
• There is very less margin between the landing section and the about us section
• The landing section must contain the logo and the get started button only in the center of the page and give margins to both the landing and the about us section
• On the landing section which contains the logo and the get started button, the alignment of both the components is not correct. Fix it.
• The about us section content must be aligned to the center of the website.

Deadline

You've 2 days to complete this task

Discussion

Feel free to tag us here or ping us on discord if you've any doubt or confusion.

1. Add the newest speaker information in the list which happened yesterday.
2. fix styling and font of event section.

make the leaderboard match the styles of rest of the site. Also use the font used in the entire site on the leaderboard as currently it has a different font.

Create and fetch Organizers details section.

Description:

You are required to complete the organizers section in the index.html file in which you've to create a card for each organizer and also fetch the details from the data/organizers.json file and show it in that card. You need to use javascript for implementing the fetching part and no need to hard code the details.

• The section must be responsive.
• The card must contain all the details present in the file. You can take reference from the mentors card that has been already created.

Deadline

The deadline is of 2 days.

Discussion

If you've any doubt or confusion you can comment here or ping us on discord

Design:

Refer to the Figma design for the Hero Section. Figma link

Requirements:

1. Develop a responsive Hero Section using the design mentioned above.
2. Ensure compatibility across various devices and browsers.
3. Implement clean and maintainable HTML and CSS code.

Tasks:

1. write your code in index.html under the hero-section ID.
2. Apply the CSS styling in hero-section.css and import it in index.html based on the provided Figma design.
3. Ensure responsiveness for different screen sizes.

Deadline:

[48 hours]

Implement "Move to Top" Button

Issue Description

We want to enhance the user experience on the Collaborative Web 2023 website by adding a "Move to Top" button. This button should float on the bottom right side of the page and become visible when users scroll down the page. When clicked, it should smoothly scroll the user to the top of the page.

Task Requirements

1. Floating Button: The "Move to Top" button should be a circular element floating on the bottom right side of the page.
2. Icon: Inside the circular button, include a top-pointing arrow to indicate the "move to top" action.
3. Visibility: The button should become visible only when the user scrolls down the page.
4. Smooth Scroll: Implement a smooth scroll effect when the button is clicked, ensuring a seamless user experience.

Deadline

The deadline for submission is 48 hours. The issue is based on FCFS policy.

Discussion

If you have any questions or need clarification on the implementation requirements, please feel free to comment on this issue or contact us on the #collaborative-web channel. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your implementation!
Happy coding!

Create the Events section

Description

An event section has been initalized in the index.html file. You need to complete the section. It should fulfill the following requirements:

• The section must contain cards of different events that have been conducted/are being conducted in the Opencode '23 like Codeguerra, Data-Blitz etc.
• The section must be responsive.
• The data and information required for these events can be found on Discord announcements of Opencode'23/Instagram handle of Geekhaven.
• The CSS of cards must match with the background.

Deadline

You must complete the task in 2 days.

Discussions

You can tag us here or ping us on discord for any doubts or confusion.

Issue Description

The current mentor section in our project lacks dynamic content and visually appealing cards. To improve user experience and engagement, we need to implement a dynamic mentor section with themed cards.

Proposed Solution

Utilize the information present in data/mentors.json to dynamically generate mentor cards in the mentor section. The design of these cards should be similar to the themed cards present in the project section.

Steps to Implement

1. Reference from Project Section:

   • Examine the existing themed cards in the project section to understand the design structure, layout, and styling.

2. Data Source - mentors.json:

   • Review the structure and content of data/mentors.json to understand the available information for each mentor.

3. Dynamic Card Generation:

   • Create a function or component that dynamically generates mentor cards based on the information provided in mentors.json.
   • Ensure that the design of these cards is consistent with the themed cards in the project section.

4. Content Placement:

   • Populate the mentor cards with relevant information from the mentors.json file, such as mentor name, expertise, and any other relevant details.

Expected Outcome

A dynamic mentor section with visually appealing cards that are generated based on the information provided in mentors.json.

Design the landing page of the collaborative web 2023 website

Add Favicon to the Website

Description

We want to improve the branding of the Collaborative Web 2023 website by adding a favicon. A favicon is a small icon that appears in the browser tab, bookmarks, and other areas. Your task is to create and implement a favicon that represents the essence of the project.

Task Requirements

1. Favicon Design: Design a favicon that reflects the theme and purpose of the Collaborative Web 2023 project.
2. File Format: Provide the favicon in a standard format such as ICO, PNG, or SVG.
3. Implementation: Integrate the favicon into the website so that it appears in browser tabs and bookmarks.

Deadline

The deadline for submission is 48 hours.The issue is bases on FCFS policy.

Discussion

If you have any questions or need clarification on the favicon requirements, please feel free to comment on this issue. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your creative favicon!
Happy designing!

Design the About Us Page

Description

We want to create a captivating "About Us" page for the Collaborative Web 2023 website. The page should include details about Opencode'23, a button redirecting to the Opencode'23 GitHub page, and a countdown timer indicating the time left for Opencode'23 to end in days, hours, minutes, and seconds. The base design can be referenced from here Figma URL

Task Requirements

1. About Opencode'23: Include informative content about Opencode'23, highlighting its goals, achievements, and community spirit.
2. GitHub Button: Design and implement a button that redirects users to the Opencode'23 GitHub page when clicked.
3. Countdown Timer: Integrate a countdown timer displaying the time remaining for Opencode'23 to end in days, hours, minutes, and seconds.
4. Integration: Add the design in the data/designs/AboutUs.json file

Deadline

The deadline for submission is for 48 hours only. The issue is based on FCFS policy only

Discussion

If you have any questions or need clarification on the "About Us" page requirements, please feel free to comment on this issue. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your creative design!
Happy designing!

add a grid background throught the entire site. You can take reference from the following video in order to complete your task. Make sure the grid is square and responsive for different sizes. All I need is if a certain tile is hovered I want its color to turn green for now and the layout should be similar to the video.

Add Yourself to Participants List

Task Description

Your task is to add yourself or another contributor as a participant in the participants.json file located in the data folder. The file follows the format:

{
   "name": "Name",
   "imageurl": "image/avatar url",
   "about": "Hello, I'm a web developer",
   "college": "My college",
   "facebook": "url",
   "github": "url",
   "twitter": "url",
   "referral": "Who referred you?"
}

Instructions

1. Navigate to the data folder.
2. Open the participants.json file.
3. Add a new entry for yourself following the provided JSON format.

Feel free to ask any queries on discord

On smaller devices, such as mobiles, the current design of the website requires excessive scrolling to view all the cards in the Mentor and Organizer sections. To enhance user experience and optimize space, we propose implementing a "Show More" button that initially displays a limited number of cards (e.g., 6 cards), and upon clicking the button, reveals the remaining cards.

Proposed Solution

Introduce a "Show More" button for both the Mentor and Organizer sections. The button should be positioned after the initial set of cards (6 cards) and, when clicked, dynamically load and display the remaining cards.

Additional Information

• Screenshots: [If applicable, include screenshots highlighting the current issues or proposed changes]

Project.json Completion Issue

Description

We have initiated the creation of a project.json file inside the data folder in the root directory of our OpenCode'23 project. The purpose of this file is to consolidate information about various projects within OpenCode'23. Your task is to complete the project.json file by adding entries for each project following the provided template.

Template for Project Entry

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

Feel free to ask any queries on discord

The deadline for the issue is 48 hours

Kindly create a footer for the collaborative web website. Make sure to include these following things in the footer:-

1. IIITA and GeekHaven Logos
2. OpenCode Social Media Links
3. OpenCode Logo

Additional Information

• Please ensure that the design is responsive and works well on various screen sizes.
• Verify that all logos and links are correctly linked to their respective destinations.

Deadline

Kindly complete this issue under 48 hours.

Related Files

• index.html (under the footer section specified.)
• footer.css (create this files under css/footer.css)

Screenshots (if applicable)

[Attach any relevant screenshots or mockups to illustrate your work on discord if needed.]

Thank you for your collaboration in improving the project's design! 🚀

Create the Leaderboard Section

Description

We have a specific design for the Leaderboard section, and your task is to implement it based on the provided Figma design. The design can be accessed at the following URL: Figma Leaderboard Design

Task Requirements

1. Figma Design: Refer to the provided Figma design to understand the visual elements, layout, and content structure of the "Leaderboard" section.
2. HTML and CSS Implementation: Implement the "Leaderboard" section using HTML and CSS, ensuring it closely matches the design.
3. Responsive Design: Ensure that the section is responsive and works well on various devices.
4. Integration: Keep the html code in index.js inside the leaderboard section and the css in css/leaderboard.css. Don't forget to use the leaderboard id with every css you add in the file

Deadline

The deadline for submission is 48 hours. The task will be assigned on FCFS policy.

Discussion

If you have any questions or need clarification on the Leaderboard section implementation requirements, please feel free to comment on this issue. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your implementation!
Happy coding!

Problem

The current lack of transitions on section visibility makes the website's user experience less engaging. To improve this, we propose implementing transitions using the Intersection Observer in JavaScript. These transitions should activate only when a section becomes visible on the screen for the first time, creating a smoother and more visually appealing user experience.

Proposed Solution

Leverage the Intersection Observer API in JavaScript to detect when each section comes into view on the screen. Apply appropriate transition styles to the sections to enhance the visual experience. Ensure that the transitions are triggered only when the section is visited for the first time, preventing them from displaying on subsequent visits to the same section.

Summary

Create a new page for mentors section using HTML and CSS based on the design provided in the Figma Mentor Page Design.

Requirements

1. Implement the HTML and CSS according to the provided Figma design.
2. Ensure responsiveness for various screen sizes.
3. Include placeholders for dynamic content (to be populated with real data later).
4. Write your html code inside the mentor-section in the index.html
5. add your CSS styles inside css/mentors.css and make sure that these styles only change for mentor section. For that you can add a prefix #mentor-section or whatever the id name of that section is.

Update the Readme of the project

Description

You need to update the README of the collaborative-web-2023 repository and include all the necessary details about the project including all the design links that have been provided till now and all the API links. Also make it look attractive and appealing. For reference, you can go through different repositories of Opencode'23 and you may reference some other repository too.

Deadline

The task deadline is for 48 hours. If you've any doubt you may comment here or ping us on discord.

Fetch and Display Data on "Leaderboard" Section

Description

We have a "Leaderboard" section on the Collaborative Web 2023 website, and your task is to fetch data from the provided API and dynamically display the top 10 contributors within this section. The structure and styling of the section have already been implemented using HTML and CSS.

API : https://events-api.geekhaven.in/api/v1/events//Opencode'23/leaderboard

Task Requirements

1. Fetch Data: Implement a mechanism to fetch data from the provided API link using the fetch function (don't use axios for it).
2. Top 10 Contributors: Display only the top 10 contributors from the fetched data.
3. Dynamic Display: Dynamically display the top contributors within the "Leaderboard" section.
4. Display Format: Ensure the data is presented in a visually appealing and well-organized format.
5. Responsive Design: Ensure that the section remains responsive, adapting to different screen sizes.

Deadline

The deadline for submission is 48 hours. The task will be assigned on FCFS basis.

Discussion

If you have any questions or need clarification on the dynamic fetching and displaying the leaderboard data, please feel free to comment on this issue or ping us on discord. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your implementation!

Happy coding!

Implement the dynamic Timer

Description

We want to implement a dynamic timer whose design is already implemented, to the Collaborative Web 2023 website, displaying the time left for the event to finish in days, hours, minutes, and seconds. Your task is to implement this timer section, updating in real-time as the event progresses using javascript.

Task Requirements

1. Display Format: Show the time left in days, hours, minutes, and seconds.
2. Countdown: The timer should count down towards the end of the event.
3. Integration: The js file required to be placed in js/timer.js file.

Deadline

The deadline for submission is 48 hours only. The task will be assigned on FCFS policy.

Discussion

If you have any questions or need clarification on the dynamic timer section implementation requirements, please feel free to comment on this issue or on discord. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your implementation!

Design the Leaderboard Section

Description

We aim to showcase and recognize the contributions of our community members through a Leaderboard section on the Collaborative Web 2023 website. Your task is to design this section, highlighting top contributors, their achievements, and any relevant metrics.
You can take the reference from the homepage design of the website. The figma design of the homepage is present in the README section of this repo.

Task Requirements

1. Design Elements: Incorporate visually appealing elements to showcase the leaderboard, such as user avatars, achievement badges, and contribution statistics.
2. Top Contributors: Highlight the top contributors prominently, showcasing their profile pictures and usernames.
3. Metrics: Display relevant metrics, such as the number of contributions, lines of code written, or any other quantifiable contributions.
4. Responsive Design: Ensure that the "Leaderboard" section is responsive and works well on various devices.
5. Integration: Put up your figma design URL in the data/designs/leaderboard.json with your Github ID.

Deadline

The deadline for submission is 48 hours only. The task assignment is based on the FCFS policy

Discussion

If you have any questions or need clarification on the "Leaderboard" section design requirements, please feel free to comment on this issue or on discord in the collaborative-web channel. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your creative design!
Happy designing!

In the website i want to enhance styling of fotter and add Parallx effect in the website

Improving responsive styling

Description

The following styling needs to be improved in the mobile version of the website:

• The heading, text and button in the about us section is not aligned to the center. It needs to be shown on the center of the page.

• The headings like top contributors need to have more padding.
• The navigation list that opens up after clicking on the hamburger menu is not styled properly. Fix it

Deadline

The task needs to be completed in 2 days.

Discussion

Feel free to tag us here or ping us on discord if you've any doubts or confusions.

Minor Bugs (2)

Description

You are required to fix the following bugs :

• Improve the CSS of different cards that are present in the website. All the cards must look similar and you need to improve their styling. While changing the CSS of cards keep in mind the responsiveness of the section. The styling of card images must also bhi uniform in each and every card.
• The logo present in the footer is of low quality and it isn't looking good. So you need to change the Opencode logo of the footer section.

Deadline

The deadline is of 2 days.

Discussion

Feel free to comment here or ping us on discord if you've any doubt or confusion.

Objective

Create an innovative home page for Collaborative Web showcasing your creativity and design skills.

Guidelines

• OpenCode Branding: Prominently feature the OpenCode logo and name.
• Creativity Encouraged: Experiment with colors, layouts, and unique visual elements.
• Responsive Design: Ensure compatibility with desktop, tablet, and mobile devices.

Submission Instructions

1. Fork the repository.
2. Submit your figma link in the designsjson which is availablel in data/designs/homepage.json
3. Add your entry in the following format:-

[
  {
    "GitHubId": "your_github_id",
    "figmaURL": "your_figma_url"
  }
]

Evaluation and Rewards

• Designs will be judged on creativity, usability, and adherence to brand guidelines.
• The winning design will be implemented on the Collaborative Web home page.
• Top 3 designs would recieve the following points respectively
  1. 30 points
  2. 25 points
  3. 20 points

Submission Deadline: [48 Hours]

Get ready to unleash your creativity! 🎨💻

Currenty their out some inconsistencies in the background of the whole site. Kindly fix this by editing the required css files available in css folder. You can also improve some styling if necessary.

Fetch and Display Data on Projects Section

Description

We have a "Projects" section on the Collaborative Web 2023 website, and your task is to fetch data from the data/projects.json file and dynamically display it within this section. The structure and styling of the section have already been implemented using HTML and CSS.

Task Requirements

1. Fetch Data: Implement a mechanism to fetch data from the data/projects.json file.
2. Dynamic Display: Dynamically display the fetched data within the "Projects" section.
3. Display Format: Ensure the data is presented in a visually appealing and well-organized format.
4. Responsive Design: Ensure that the section remains responsive, adapting to different screen sizes.

Deadline

The deadline for submission is 48 hours. The task will be assigned on the basis of FCFS policy

Discussion

If you have any questions or need clarification on the data fetching and dynamically showing, please feel free to comment on this issue or tag us on discord. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your work!

Happy Coding!

Implement the Navbar

Description

We have a specific design for the website's Navbar, and your task is to implement it based on the provided Figma design. The design can be accessed at the following URL: Figma Navbar Design

Task Requirements

1. Figma Design: Refer to the provided Figma design to understand the visual elements and layout of the Navbar.
2. HTML and CSS Implementation: Implement the Navbar using HTML and CSS, ensuring it closely matches the design.
3. Responsive Design: Ensure that the Navbar is responsive and works well on various devices. The navbar should be visible on the larger devices and it should become a hamburger menu on smaller devices.
4. Integration: Integrate the implemented Navbar into the website codebase by putting it in Navbar section in the index.html file and CSS in the css/navbar.css. file
5. Hyperlinks: Leave all the hyperlinks linked to a "/" only for now in Home, About Us etc.

Deadline

The deadline for submission is for 48 hours only. The issue is bases on the FCFS policy

Discussion

If you have any questions or need clarification on the Navbar requirements, please feel free to comment on this issue. We're here to help!

Thank you for contributing to the Collaborative Web 2023 project. We look forward to seeing your implementation!
Happy coding!