Description:

We need to add a hover effect to the "Apply to GSOC with AOSSIE" button on our website to enhance user experience and make the button more interactive. When users hover over the button, it should change its background color and display a subtle shadow effect to indicate that the button is clickable.

Requirements:

1. Hover Effect:

   • Change the background color to a slightly darker shade of the current color.
   • Add a subtle shadow effect to the button.

2. Implementation Details:

   • Ensure the hover effect is smooth and transitions seamlessly.
   • Maintain responsiveness and ensure the hover effect works on all screen sizes.
   • Ensure compatibility with different browsers.

Description:

Currently, when scrolling up the page, the navigation bar scrolls out of view. To improve the user experience and accessibility, the navigation bar should remain fixed at the top of the screen, making it easily accessible at all times.

Steps to Reproduce:

1. Open the website.
2. Scroll down the page.
3. Scroll back up, and observe the navigation bar.

Expected Behavior:
The navigation bar should remain visible and fixed at the top of the screen during scrolling.

Actual Behavior:
The navigation bar scrolls out of view and becomes hidden when scrolling up.

Suggested Solution:

• Implement a sticky navigation bar using CSS. This can be done by setting the position property to sticky and the top property to 0 for the navigation bar element.

Screenshots:

Before scrolling, the navbar looks like this:

But after scrolling, the navbar gets hidden:

The "Read More" links on the projects section of the webpage currently do not lead to any content. When clicked, they should direct the user to a detailed page or section with more information about the respective project.

Steps to Reproduce:

Navigate to the projects section of the webpage.
Click on any "Read More" link under the project descriptions.
Expected Behavior:
Clicking on "Read More" should lead to a page or section with detailed information about the project.

Actual Behavior:
Clicking on "Read More" does not lead to any content.

Screenshots:

Description

Add a LinkedIn icon and link to the footer of the website. This will allow users to easily find and follow our LinkedIn page.

Tasks

• Design a LinkedIn icon that matches the style of the existing social media icons in the footer.
• Add the LinkedIn icon to the footer.
• Ensure the LinkedIn icon links to our LinkedIn page: https://www.linkedin.com/company/your-company
• Test the new icon and link to ensure they work correctly on both desktop and mobile versions of the site.

Additional Notes

• Ensure the icon is appropriately sized and spaced in the footer.
• Follow the existing color scheme and design guidelines for consistency.

Reference

after adding dropdown beside Active Projects will enhance the user experience and they will get all projects in one dropdown only,this willl save their time and energy too,

Description

With the recent rebranding of Twitter to X, we need to update all references to Twitter on our homepage. This includes changing the name, icon, and link associated with Twitter to reflect the new branding.

Tasks

1. Update Name:

   • Change all instances of "Twitter" to "X" on the homepage.
   • Ensure consistency in all mentions, including tooltips and descriptive texts.

2. Update Icon:

   • Replace the Twitter bird icon with the new X logo.
   • Ensure the new icon is appropriately sized and matches the design language of the homepage.

3. Update Link:

   • Update the hyperlink currently pointing to https://twitter.com/ to https://x.com/.
   • Verify that the link directs users to the correct X homepage.

The footer currently displays an inaccurate copyright date, likely due to oversight or lack of regular updates.

We need to add a dropdown feature to the Ideas section on the website. This will allow users to view a list of ideas in a dropdown menu, enhancing the user experience by providing a more organized and accessible way to browse the ideas.

Requirements:

Add a button below the introductory text in the Ideas section that toggles the visibility of the dropdown menu.
The dropdown menu should display a list of ideas.
Ensure the dropdown menu is styled consistently with the rest of the site.
Implementation Details:

Create a new Dropdown component that accepts an options prop (an array of ideas) and an isVisible prop to control the visibility.
Add a state variable to the Ideas component to manage the visibility of the dropdown.
Define the options array with a list of ideas.
Toggle the visibility of the dropdown when the button is clicked.

update this to 2024

Title

Add padding and borders to Ideas and Article components for improved design

Description

Issue:
The Ideas and Article components lack sufficient padding and borders, making their design appear less polished. Adding padding and borders will enhance the visual appeal and readability of these components.

Screenshots:

Steps to Reproduce:

1. Go to the page where the Ideas component is rendered.
2. Observe the Article components and the overall layout.
3. Notice the lack of padding and borders.

Expected Behavior:

• Each Article component should have padding and a border to visually separate it from surrounding content.
• The Ideas component should have padding and borders applied to its container for a cleaner layout.
• Borders should be styled with a subtle color (e.g., border-gray-300).

Additional Information:

• If necessary, include any specific styling details or preferences.
• Provide links or references to the relevant code snippets or files where changes should be made.

Description

The "Read More" links on the Ideas page are not functioning. When clicked, they do not redirect to any other page or provide additional information about the Ideas.

Steps to Reproduce

1. Open the Ideas page.
2. Scroll and click on view Idea list .
3. Click on the "Read More" link.

Expected Behavior

Clicking on the "Read More" link should redirect to a detailed page about the respective project or expand to show more information on the same page.

Actual Behavior

Clicking on the "Read More" link does not redirect or display any additional information.

Screenshot

Possible Solution

• Ensure that the "Read More" links have the correct href attribute pointing to the respective project details page.
• If the intention is to show more information on the same page, implement JavaScript to expand or display additional content upon clicking.

The README file contains a typographical error in the "Getting Started" section. Specifically, the word "Th" should be "The" in the sentence: "Th website is a Next.js project using Tailwind for styling and design."

On the Ideas page, the "View Idea List" button lacks a hover effect, unlike all other buttons. Please add a standard hover effect to this button to maintain consistency.

Description:

I would like to request the implementation of smooth animations for the project cards in the projects section. Smooth animations can enhance the user experience by making interactions feel more responsive and visually appealing.

Current Behavior:

Currently, the project cards in the projects section do not have any animations, which can make the transitions feel abrupt and less engaging.

Proposed Solution:

Implement smooth animations for the project cards. This could include:

• Hover Animation: Smoothly enlarge the card or change its background color when the user hovers over it.
• Entry Animation: Smoothly animate the cards into view as the user scrolls down the page.

Example CSS for hover animation:

.project-card {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.project-card:hover {
  transform: scale(1.05);
  background-color: #f0f0f0;
}

Description:
We would like to add a LinkedIn link to our project to enhance our social media presence and provide users with more ways to connect with us.

Proposed Changes:

1. Update the aria-label to reflect LinkedIn.
2. Change the href attribute to our LinkedIn page.
3. Update the FontAwesome icon to use the LinkedIn icon.

Summary:

The "Apply to GSoC with AOSSIE" button in the Banner component needs a hover effect to improve user experience and visual feedback.

Details:

Component: Banner

• File Path: src/components/Banner.jsx

• Current Behavior: The button currently does not have any hover effect, which makes the user interaction less engaging.

• Expected Behavior: The button should have a hover effect that changes its background color and slightly scales up smoothly.

Proposed Solution:

• Add the following Tailwind CSS classes to the button for the hover effect: hover:bg-gray-200 dark:hover:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105.
• Ensure the component from next/link is used correctly without the tag to avoid invalid markup errors.

Steps to Reproduce:

• Navigate to the homepage or the page where the Banner component is rendered.
• Hover over the "Apply to GSoC with AOSSIE" button.

Additional Context:

The Link component should be used without an extra tag to conform to Next.js guidelines.

Screenshots:

Description

Currently, the button lacks any interactive feedback when users hover over it. To improve user experience and provide visual feedback, we want to add a hover effect to the button.

Proposed Solution:

Implement a simple hover effect that changes the button's background color, border, or text color when users hover over it. The effect should be subtle but noticeable, enhancing the button's visual appeal and indicating its interactive nature.

Steps to Implement:

1. Identify the CSS class or ID associated with the button.
2. Write CSS code to define the hover effect.
3. Test the effect on different browsers and devices to ensure compatibility.
4. Deploy the changes to the production environment.

Description

The "Project" section of the website is currently not clickable. Users are unable to interact with this section, which is affecting usability.

Steps to Reproduce

1. Navigate to the website’s main page.
2. Locate the "Project" section.
3. Attempt to click on the "Project" section link.

Expected Behavior

Clicking on the "Project" section should redirect the user to the corresponding page or perform the intended action.

Actual Behavior

Clicking on the "Project" section does not result in any action or redirect.

Suggested Fix

• Review and update the file located at src/pages/projects.jsx to ensure that the "Project" section is properly linked and clickable.

Comment:

• Please check the implementation in projects.jsx to resolve the issue.

Thank you!

Feature Request: Implement Smooth Scrolling

Description:

I would like to request the implementation of smooth scrolling for the website. Smooth scrolling improves the user experience by providing more fluid and visually appealing navigation when users scroll through the page.

Current Behavior:

Currently, the website uses the default scrolling behavior which can be jarring and abrupt.

Proposed Solution:

Implement smooth scrolling using CSS and JavaScript. This can be achieved by adding the following CSS rule:

html {
  scroll-behavior: smooth;
}

Or we can use a npm package to make it feel more appealing. 

Missing "Home" Section in Header

Description

The website header currently lacks a "Home" section, which is a standard feature in website navigation menus. This makes it difficult for users to return to the main page once they have navigated to other sections of the site.

Expected Behavior

The header should include a "Home" section that allows users to easily return to the main page from any other section.

Actual Behavior

The header menu contains the following sections:

• About
• Projects
• Ideas
• Apply

There is no "Home" section available.

Screenshot

The final "License" section only mentions "MIT License" without providing any additional details or link to the full license text. It might be helpful to include a brief description or a link to the full license.

when after npm install and npm run dev i am gettting this on my localhost:3000

Description: Currently, external links on the website open in the same tab, which disrupts the user experience. To improve usability, all external links should open in a new tab.

Description:

1. When the user scrolls down words you can observe the issue at the top of the page along with the scrolling
2. Icon, Menu Bar, and Dark Mode Icon also go up
3. if a user wants to go to another page he has to come to the top of the page and then he has to click.

Proposed Solution:

1. Icon, Menu Bar, and Dark Mode Icon For these three headers apply the Sticky property
2. Sticky property will stick in the same place. it will be easy for the user to use the application

Refer - https://github.com/AOSSIE-Org/website/actions/runs/7853672401

Currently the idea list looks like this:

Now we need the following fields:

a) a project title/description
b) more detailed description of the project (2-5 sentences)
c) expected outcomes
d) skills required/preferred
e) possible mentors
f) expected size of project (90, 175 or 350 hour).
And if possible, an easy, intermediate or hard/difficult rating of each project.

Upgrading The UI in Apply section makes user experience"

SMALL BUG:
There is an issue where the two cards ("Social Street Smart" and "Djed") overlap when the screen width is between 640px and 715px. This problem occurs on tablet devices or when the browser is resized to these dimensions.
I Can fix this !

Suggested Fix:
Ensure that the cards have adequate spacing and do not overlap by modifying the CSS for the relevant breakpoints (640px to 715px). For example, you can adjust the flex properties or add specific styles for these breakpoints to ensure proper layout.

Description

Objective:
Implement a Twitter community feature to enhance user connections within our platform.

Requirements:

2. Community Integration:

   • Allow users to join the Twitter community directly from our platform.
   • Provide options to follow/unfollow other community members.
   • Display a feed of recent tweets from community members.

3. User Interface:

   • Design a clean and user-friendly interface for the Twitter community section.
   • Include features such as liking, retweeting, and commenting on tweets.

ScreenShot

adding a new dropdown menu button in apply section will greatly enhance the user experience by consolidating all project information into a single, easily accessible dropdown. This improvement will save users time and effort by allowing them to view all their projects at once, streamlining navigation and making the interface more efficient.

make changes at this page :

The "Know More" links under the project descriptions currently lead nowhere as there is no additional data or information available. To improve user experience and avoid confusion, these links should be temporarily removed until relevant data is available.

Describe the bug:
On the Ideas page, only the bottom and the top part of the idea card is clickable, while the entire card should be clickable.

To Reproduce:
Steps to reproduce the behavior:

1. Go to the Ideas page.
2. Hover over or click on different parts of an idea card.
3. Observe that only the bottom and the top part of the card is clickable.
4. Expected behavior:
5. A clear and concise description of what you expected to happen:
6. The entire idea card should be clickable, not just the bottom part.

Screenshots:

Desktop (please complete the following information):

OS: Windows 11
Browser: Chrome
Version: 23H2

Description:
The "Active Projects" button on the Projects page does not show any visual effect when hovered over. A hover effect would improve user experience by providing visual feedback.

Steps to Reproduce:

Navigate to the Projects page.
Hover the mouse pointer over the "Active Projects" button.

Expected Behavior:
The button should display a visual effect (e.g., change in color, shadow, etc.) to indicate it is being hovered over.

Actual Behavior:
No visual effect is observed when the button is hovered over.

Screenshot -

Description

The AOSSIE image in the About Section currently lacks hover effects, which affects the user experience by making the transition less engaging. Adding hover effects would enhance the visual appeal and interactivity of the image.

Suggested Enhancement

• Implement hover effects on the AOSSIE image to improve transitions.
• Consider using CSS properties such as transform, opacity, or box-shadow to create a smooth and visually appealing effect.

Steps to Reproduce

1. Navigate to the About Section of the website.
2. Locate the AOSSIE image.
3. Observe that there are no hover effects applied.

Current view

Expected Outcome

The AOSSIE image should have a hover effect that provides a smooth and engaging transition when the user hovers over it.

Thank you for addressing this issue! Looking forward to seeing the improvements.

The current design of the website includes a navigation bar (navbar) in both the header and footer sections. This duplication is not a good practice as it can lead to confusion for users and does not follow standard web design principles.

Steps to Reproduce:

Open the website.
Observe the navbar in the header section.
Scroll down to the footer section.
Observe the duplicate navbar in the footer section.
Expected Behavior:
The navbar should only be present in one section, preferably in the header section to maintain consistency and avoid redundancy.

Screenshots:
Header Section:

Footer Section:

Possible Solution:

Remove the navbar from the footer section.
Ensure that the navbar remains consistent and functional in the header section.

Invalid <Link> with <a> Child Usage

Description:

The project currently has multiple instances of using the <Link> component from Next.js with nested <a> tags. This usage is invalid with the recent updates to Next.js, resulting in the following error:

Error: Invalid with child. Please remove or use .

While Running the localhost server, this pops up :

Proposed Solutions:

1. Remove <a> Tags: Update the code to remove the nested <a> tags and let the <Link> component handle the anchor behavior.

   <Link href="/about">About Us</Link>

2. Use legacyBehavior Prop: Retain the <a> tags by adding the legacyBehavior prop to the <Link> component.

   <Link href="/about" legacyBehavior>
     <a>About Us</a>
   </Link>

Affected Files:

• components/Navbar.js
• pages/index.js
• components/Footer.js

Additional Context:
This issue was identified in Next.js version 14.1.3. More details can be found in the Next.js documentation: Next.js Link Documentation

Description

In the current implementation of the Projects component, only the text within the Card.Link is clickable, redirecting to the specified link. However, the requirement is to make the entire span area, including the text inside it, clickable to redirect to the specified link. This will improve user experience by allowing users to click anywhere on the text within the span to be redirected.

Steps to Reproduce

1. Navigate to the Projects page.
2. Observe the span element with the class ml-2.
3. Attempt to click on the span text.
4. Notice that only the text within the Card.Link is clickable, not the entire span.

Current Behavior

Expected Behavior

The entire span area, including the text inside it, should be clickable and redirect to the specified link.

Only the text within the Card.Link is clickable, not the entire span area.

Suggested Fix

To make the span clickable and redirect to the specified link, the span element should be wrapped with an a tag. This way, when users click anywhere on the span, they will be redirected to the specified link.

Please add an Instagram icon to the social media links at the bottom of page. Thank you!

The current hover effects on the project blocks need to be enhanced to create a more visually appealing and interactive user experience. Additionally, increasing the special effect timings on these blocks will make the transitions smoother and more noticeable.

Before Updation:

To enhance security and ensure a good user experience, it's important to use target="_blank" combined with rel="noopener noreferrer" when creating external links. This approach helps prevent potential security risks and avoids unintended interactions.

Description

1. Starting with Next.js 13, renders as , so attempting to use as a child is invalid.
2. Some files have not been updated regarding the first point.

We would like to enhance the user interface by adding a hover effect to the blocks in our application. The desired effect includes:

Color Change: When a user hovers over a block, its background color should change to provide visual feedback.
Bulge-Out Animation: The block should appear to bulge out or enlarge slightly on hover to make it stand out and draw attention.

change here :

Describe the bug:
On the website, external links are opening in the same tab instead of opening in a new tab.

To Reproduce:
Steps to reproduce the behavior:

Go to any page with an external link.
Click on the external link.
Observe that the link opens in the same tab.
Expected behavior:
A clear and concise description of what you expected to happen:
External links should open in a new tab, not in the same tab.

Desktop:

OS: Windows 11
Browser Chrome
Version 23H2

Implement a CSS hover effect that changes the text color of the "Active Projects" section to orange when the user hovers over it in the Projects page. The goal is to enhance user interaction by providing a visual cue that the section is interactive. Ensure that the hover effect is smoothly applied and does not interfere with the existing design and accessibility standards.

Please add a Facebook icon to the social media links section at the bottom of the page, alongside the existing icons. This will enhance our social media presence and provide users with easy access to our Facebook page. Thank you!

add icon after it :