Issue Description:

We're looking to expand our collection of projects on "The Wall of Projects." If you have a project that you'd like to showcase or if you're a new open-source contributor looking to make your first contribution, this is a great opportunity to do so!

Steps to Add Your Project:

• Fork this repository to your GitHub account.

• Clone your forked repository to your local machine.

• Open the projects.js file in the root directory of the repository.

• Add your project in the following format:

{
    name: "Your Project Name",
    image: "./images/YourProjectImage.jpg", // Add your project image to the `images` directory
    description: "A brief description of your project.",
    usedTech: "Technologies or programming languages used.",
    contributorName: "Your Name",
    codeLink: "Link to your project's source code (GitHub, GitLab, etc.)",
    liveLink: "Link to the live version of your project (if available)",
},

• Make sure to place your project details within the square brackets of the projects array and Please do not add projects at the beginning or end of the file.

• Commit your changes and create a pull request to submit your project.

Contribution Guidelines:

Follow good coding and documentation practices when making changes to the project.

Community Chat:

Feel free to join our community chat room to connect with other contributors, ask questions, and share ideas.

We appreciate your contributions to "The Wall of Projects" and look forward to seeing your projects featured! If you have any questions or need assistance, please don't hesitate to ask. Happy contributing!

The project called "Social Media Handle's" is missing the image file for its project image. It's suggested to either revert it back to default for now or add the corresponding image.

Contacting @Withakash the author.

Problem

Our project images lack a favicon, which can enhance the overall user experience by providing a distinctive visual identity for each project.

Proposed Solution

We should add high-quality favicons to project images. These favicons should match the project's post image for consistency and visual appeal.

Implementation Details

1. Create high-quality favicons for each project image.
2. Ensure that each favicon is visually consistent with the project's post image.
3. Implement the favicons on the project cards.

Expected Outcome

With high-quality favicons in place, each project will have a unique and visually appealing identity, making the user experience more engaging and user-friendly.

Comments Before Contributing

Before contributing, please comment on this issue to coordinate the creation of favicons. Ensure that the favicons align with the respective project's post image for consistency.

Description:

The "Start Contributor" section has been added, but it currently lacks the desired styling. We need someone to enhance the style to make it appear as a well-structured table. This includes making the necessary CSS-related changes in the style.css file.

Tasks:

• Style the "Start Contributor" section to resemble a table.
• Adjust the layout, spacing, and alignment to ensure it looks organized and visually appealing.
• Modify the CSS in the style.css file to apply the new styling.

Acceptance Criteria:

• The "Start Contributor" section should be presented in a table-like format.
• The styling should be consistent with the project's overall design and theme.
• The changes should not negatively impact the rest of the project's layout.

Screenshot:

Additional Information:

Feel free to discuss any ideas or suggestions for improving the styling of the "Start Contributor" section. Your contributions to enhance the visual appeal of this project are highly valued.

If you have any questions or need assistance, please don't hesitate to ask. Thank you for helping us make this section more visually appealing!

Problem

Currently, project buttons don't visually indicate when they are active or clicked.

Proposed Solution

We should add an active class to project buttons when they are clicked to provide users with visual feedback.

Expected Outcome

With the active class added users will have a clearer indication of which project button is currently selected, improving the overall user experience.

Description:

While the current code in the style.css file is functional, it's essential to ensure that it follows best practices for maintainability and future development. We need to make sure that the CSS code is organized, well-documented, and follows industry standards.

Tasks:

• Review the existing CSS code in the style.css file.
• Organize the CSS rules and selectors for improved readability.
• Add comments to explain complex or non-obvious code sections.
• Ensure proper indentation and consistent naming conventions.
• Remove any unused or redundant CSS rules.

Acceptance Criteria:

• The CSS code in the style.css file should be well-organized and easy to understand.
• Comments should be added where necessary to explain the purpose of specific code sections.
• Indentation and naming conventions should follow best practices.
• Unused or redundant CSS rules should be removed.

Additional Information:

Feel free to discuss any additional recommendations or best practices that you believe should be applied to the project's CSS. Your contributions to enhance the maintainability and readability of the code are highly appreciated.

If you have any questions or need assistance, please don't hesitate to ask. Thank you for helping us ensure that our project's CSS code adheres to best practices!

Description

The current setup lacks a search functionality to find projects based on their used technology or project name. Incorporating a search feature will significantly improve user navigation and accessibility within the repository.

Proposed Solution

• Introduce a search bar or filter mechanism enabling users to search projects by used technology or project name.
• Enhancing user experience by allowing quick and specific searches within the repository.

Expected Benefits

• Improved accessibility for users to find projects matching their interests.
• Enhances user interaction and exploration within the repository.

Additional Information

The addition of a search feature will enhance user interaction and streamline the process of discovering projects based on specific technologies or project names.

Problem

Our star contributors table lacks sorting, making it challenging to identify top contributors easily.

Before Sorting

Here is a snapshot of our star contributors table in its current state, without the sorting feature. As you can see, the contributors are listed without any particular order, making it challenging to quickly identify those who have contributed the most projects.

Proposed Solution

Implement sorting based on the number of projects added by each contributor.

Contributing to "The Wall of Projects"

Are you new to open source? This issue is your chance to make your first open-source contribution. Follow the step-by-step guide to add your project to "The Wall of Projects" and begin your open-source journey. Join us and showcase your work to the world!

Step-by-Step Guide

1. Fork the Repository

https://github.com/MrAshwin2142/The-Wall-of-Projects

Start by forking the main repository to your GitHub account. This creates a copy of the repository under your account.

2. Clone the Repository in Visual Studio Code

• Open Visual Studio Code.
• Go to the "View" menu and select "Command Palette" or use the keyboard shortcut Ctrl+Shift+P.
• In the Command Palette, enter and select "Git: Clone."
• Enter the repository's URL, which should look like: https://github.com/yourusername/yourrepository.git

git clone https://github.com/yourusername/yourrepository.git

• Choose a local directory to clone the repository and confirm your selection.

Replace yourusername and yourrepository with your GitHub username and the repository's name.

3. Add Your Project

Open the projects.js file in the root directory of the repository.

Add your project to the projects array in the following format:

    {
        name: "Your Project Name",
        image: "./images/YourProjectImage.jpg", // Add your project image to the `images` directory
        description: "A brief description of your project.",
        usedTech: "Technologies or programming languages used.",
        contributorName: "Your Name",
        codeLink: "Link to your project's source code (GitHub, GitLab, etc.)",
        liveLink: "Link to the live version of your project (if     available)",
    },

4. Commit Your Changes

Commit the changes to your local repository:

    git add projects.js
    git commit -m "Added my project: Your Project Name"
    git push

5. Create a Pull Request

• Go to your forked repository on GitHub and click the "New Pull Request" button.
• Compare the changes, review your additions, and create the pull request (PR).
• Provide a meaningful title and description for your PR.

6. Review and Merge

A project maintainer will review your PR. Once it's approved, your project will be added to "The Wall of Projects."

Congratulations! You've successfully contributed your project to "The Wall of Projects." Thank you for sharing your work with the community.

Contribution Guidelines

Follow good coding and documentation practices when making changes to the project.
If you have any questions or need assistance, feel free to open an issue in the Issues section. We're here to help.

Happy contributing!

hello @MrAshwin2142 , The "ADD NEW PROJECT" button looks too much like the other project buttons, making it hard to distinguish.

Preview :

The current styling of the navbar and homepage lacks consistency and visual appeal in our project. This issue aims to improve the design and layout of the navbar and homepage to enhance user experience and create a more polished look for our application.

Goals:

1. Refine the design of the navbar to ensure it is responsive, intuitive, and visually appealing across different devices and screen sizes.
2. Enhance the homepage layout and styling to create a more engaging and professional appearance.
3. Ensure consistency in colors, fonts, and overall styling throughout the navbar and homepage sections.

The current design of the project detail section could benefit from enhancements in terms of color, layout, buttons, background color, and fonts.

Suggested Changes

1. Color Scheme: Consider updating the color palette to create a more cohesive and modern appearance.
2. Layout Organization: Review and optimize the overall layout for better user navigation and content presentation.
3. Button Styles: Evaluate the design of buttons for consistency and clarity of user interactions.
4. Font Choices: Explore alternative font options to improve readability and aesthetics.

Display total project count. Enhance user experience by showing the total number of projects on the web page.

We can make the nav bar buttons more realistic

Seeing that we have people from around the world contributing and visiting this project, for convenience sake, a language button should be added to the top of the page (navbar) where visitors and future contributors can opt to translate the website for diversity and to improve accessibility.
I would like to be assigned to this issue and implement this.

Issue Description:
"The Wall of Projects" is a fantastic resource, but it could be even more accessible to a wider audience. To achieve this, we need to make sure it's mobile-friendly to accommodate users on various devices.

Description:

Tasks:

• Ensure the layout and design are responsive and adapt to different screen sizes, including mobile devices.
• Test the project on various mobile devices and browsers to identify and fix any issues.
• Adjust font sizes, spacing, and UI elements for better mobile usability.
• Optimize images for faster loading on mobile devices.
• Implement any necessary CSS media queries to make the project more responsive.

Acceptance Criteria:

• The project should look and function well on a variety of mobile devices and screen sizes.
• Text and images should be legible and appropriately sized on mobile screens.
• The user interface should remain user-friendly on mobile devices.
• The changes should not negatively impact the project's desktop version.

Additional Information:
Feel free to discuss any suggestions, ideas, or resources that could help us achieve a better mobile experience for "The Wall of Projects."

We appreciate your contributions to make this project more accessible to a wider audience. If you have any questions or need assistance, please don't hesitate to ask. Thank you for helping us improve "The Wall of Projects" for mobile users!

Hi, when adding comments to the style.css file, I found what appeared to be redundant code, I wanted to check if this code is supposed to be there or if it should be removed?

.starContributor {
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  padding: 0.6rem;
}

/* sets h4 element with class of starContributor  to have a margin-bottom of 1rem */
.starContributor h4 {
  margin-bottom: 1.5rem;
}

/*-----Table container-----*/

/* 
not sure if this code is redundant or not
 */
.starContributor {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 20px;
}

Hello, amazing contributors!
@JohnPatrickAncajas
@IrfanSalim
@KubasuIvanSakwa
@Shoyebaktar-shirol
@animasoul
@laibatariq07
@ktriggsdev
@rishabh-patil-03
@traez
@globalnebula
@SusheelThapa

We're excited to share some recent design changes with you. We've revamped the project display to enhance clarity and user experience.

Key Changes

1. Project Image: We've replaced the project button with a project image for a more visually appealing presentation.

2. Used Technologies: We've added a "Used Technologies" section to provide insights into the technologies or programming languages used in each project.

Seeking Your Input

As valued contributors, we'd love to hear your thoughts and ideas on these design changes. Do you have any suggestions for further improvements? Is there anything else you'd like to see?

Feel free to share your feedback, and let's work together to make The Wall of Projects even better! Your insights are incredibly valuable, and we appreciate your contributions.

Happy coding, and thanks for being a part of this project!

Issue Description:

I suggest improving the styling of the live link error message to make it more visually appealing and user-friendly.

Current Styling:

The current styling of the live link error message is functional but lacks visual appeal. It uses a basic color scheme and minimal formatting.

Enhancement Details:

• Adjust the position of the error message to ensure it is consistently displayed in a user-friendly and intuitive location.

• Refine the layout to maintain consistency with the overall design of the application.

• Optimize spacing and alignment for better visual coherence with the rest of the user interface.

Additional Context:

The project uses HTML and CSS for rendering error messages. The goal is to make the error message stand out and provide a clear indication of the issue.

Adjust the font-color of the 'ADD NEW PROJECT' button to improve its visibility on normal, hover, focus and active state.

Current state:

Description

The current project layout lacks a navigation bar and requires an update to the main page content. Introducing a navbar with sections for "Star Repo", "The Wall", and "Star Contributors" will enhance user navigation and accessibility. Additionally, the main page content needs restructuring and enrichment to provide a clearer overview of the repository.

Proposed Changes

1. Navbar Addition:

   • Implement a navigation bar featuring "Star Repo", "The Wall", and "Star Contributors" sections for easy access.

2. Main Page Content Update:

   • Update the content of the main page (index.html or related file) to include a more descriptive and engaging overview.
   • Consider restructuring the existing content for improved readability and user engagement.

Expected Impact

• Improved user navigation with a clearly defined navigation bar.
• Enriched main page content to provide a comprehensive overview and encourage user interaction.

Additional Information

The goal is to enhance user experience by implementing a more intuitive navigation system and enriching the main page content for better engagement and understanding of the repository.

Here, I would like to create a simple To-do list app to keep track of the to-do things that have been completed or not.

This app is created using React js, HTML, and CSS.

The current button UI all share the same design at a certain state making it look like there are three active buttons at the same time. Improve the UI by changing this values to make their state more visible and understandable.

Current state:

The dark mode feature is pretty much common in modern websites and this is no different.
Adding it to the website would increase positive user experience and would consider users who may have photosensitive eyesight.

This feature should be optional, users should be able to click/toggle a button
it should take into consideration the current styling and modify it for dark mode.

Hello @MrAshwin2142,
With an eye on ensuring good Modular Organization, Enhanced User Experience: and Adaptability to Growth, May I suggest site be rewritten in React.js. Or specifically Next.js?

1) So that clicking on any of the buttons. Eg: "Trae's ecommerce-website", project info now opens up on new route:
https://the-wall-of-projects.netlify.app/traez

2) Contributors with multiple projects like Patrick Ancajas, clicking on "Patrick Ancajas button" will take you to
https://the-wall-of-projects.netlify.app/patrickancajas .
With each project now available on a route like:
https://the-wall-of-projects.netlify.app/patrickancajas/1
https://the-wall-of-projects.netlify.app/patrickancajas/2

3) When that is done make the "The Wall of Projects" Top line clickable like a button. Clicking on it should always take you back to the homepage https://the-wall-of-projects.netlify.app/

I see you're currently learning React.js. All this is possible with "React Router".
An even more advanced style of accomplishing this is to build it with Next.js.

Adjust the CSS styling of the footer section so it reaches the edges of the screen. Additional styling for improved design will also be much appreciated!

Current state:

Description

Currently, The Wall of Projects might not be easily discoverable in search engine results when users search for beginner-friendly or open-source projects. To improve visibility and ensure that the platform ranks higher in relevant searches, SEO enhancements are required.

Proposed Changes

1. Meta Tags Optimization:

   • Implement appropriate meta tags (title, description, keywords) to accurately represent the content of the platform.

2. Content Optimization:

   • Enhance content throughout the platform, including project descriptions, titles, and tags, to include relevant keywords and phrases.

3. Structured Data Markup:

   • Implement structured data markup to help search engines better understand and categorize the content.

Expected Impact

• Improved search engine visibility, enabling users to easily find The Wall of Projects when searching for beginner-friendly or open-source projects.

Additional Information

Enhancing the SEO of The Wall of Projects will ensure that it reaches a wider audience, especially those looking for projects tailored to their skill levels. Let's work on implementing these SEO enhancements to make the platform more accessible and discoverable.

The current issue involves a problem where, upon closing, the button color fails to revert to its original state. Adjust the code to make the button return to its inactive color when the element closes.

Current state: