diplomatechcommunity / project-vault Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 8.0 508 KB

Home Page: https://projectvault.vercel.app/

JavaScript 70.25% HTML 2.18% CSS 27.56%

project-vault's Introduction

Project-Vault

How to Add Your Project to the Repository

To contribute your project, follow these steps:

Navigate to the src > components folder and locate ProjectData.js.
Inside ProjectData.js, you'll find a set of key-value pairs representing project information.

{
    "id": "<add your project's unique identifier>",
    "type": "<select a project type, e.g., Full stack, Backend, Web>",
    "project_name": "<enter your project's name>",
    "tech_stack": [
       "<list the technologies and frameworks used, e.g., 'React', 'HTML'>"
    ],
    "description": "<provide a concise and descriptive 1-2 line overview>",
    "author": "<mention the team members' names and surname initials>",
    "link": "<insert the link to your well-maintained GitHub repository>",
    "imgsrc": "<use a URL shortener for the project image/preview link>",
    "year": "<mention the year the project was created>",
    "majorProject" : "<true || false>"
},

Make sure to fill in the corresponding details accurately for your project as this will help maintain consistency and organization within the repository.

Repo maintainers

project-vault's People

Contributors

Stargazers

Watchers

Forkers

maaz25925 alfiyasiddique vitthalgund drasticcoder dhruvjaink07 nashrah1307 samani-humaira swatistiwari

project-vault's Issues

Feat: Making home page responsive

The home page (Home.jsx) which currently contains the Navbar and WhyMatter components is static.

Add the necessary CSS for different screen sizes.

Current state:

Desktop -

Mobile -

This is an awesome good first issue to try out for everyone.

Feat : Adding Home Page along with all the functionalities

1. Design and Content from Figma:

Refer to the Figma design file for the visual layout, colors, typography, and content arrangement.
Pay close attention to spacing, alignment, and any visual elements presented in the design.
Component Bifurcation:
Divide the webpage into separate components to ensure clarity and avoid confusion during development.
Identify components such as Navbar, Hero section, Why Does It Matter section, and Footer section.

2.Navbar & Footer component.

Implement the design of the footer with appropriate content, links, and any other information required.
Ensure that footer links are working correctly and lead to relevant pages or external sites.
Hero Section Component:
HeroSection.
Implement the design of the hero section with the main heading, subheading, and any accompanying visual elements.
Make sure the hero section content is responsive and adjusts well on different screen sizes.
Why Does It Matter Section Component:
Why Matter Section. (add a suitable name)
Implement the design of the "Why Does It Matter" section, including headings, content, and any images or icons.
Ensure that the section's content is responsive and maintains its layout on various devices.
Responsive Design:
Use CSS media queries to adjust styles, layout, and spacing as the screen size changes.
File Naming Conventions:

Follow a consistent and clear file naming convention for your components, styles, and other assets.
Create separate files for each component to keep your code organized and maintainable.

Adding the Navigation Bar

Navigation Bar

we can add a navigation bar to the Project-Vault Website containing the following links:

Different Social Media Handles of DTC
DTC Main website

Add a search bar

You can add a search bar so it is easier to reach projects in a paced manner.

Changing the title and Favicon of the website

Changing Title Vite + React to Project Vault - Explore Innovative Projects.
The favicon can also be changed with the DTC logo.

Category Filter.

A drop-down type of filter (not necessary, you may chose a different style if it's easier for the user to navigate around).

Maybe something like this.

On the other hand, you can choose if you want it to be a major project or not.

This can be placed besides the existing filter in my opinion, but you can choose for yourself as well.

This can be further extended by utilizing the information provided with each project like the tech stack filter and whatnot; similar to GitHub which has multiple filters to apply from...

Better Search.

The search bar finds the projects by a perfectly matching string and the output is affected by white-space.

When you search for the project name as it is, it works perfectly fine.

Example 1:

Example 2:

But when I type in:

And what if I do this:

I hope the problem is clear through the images and search queries.

What I would suggest to fix this is when processing the search query of the user, remove the white-spaces as well as remove the white-spaces of the project titles.

The removal of white-spaces would only be when the process of cross-checking would be there and otherwise they can be stored normally as they are.

Now I understand that the code behind the scenes searches in project name, description and tech stack used which is why this is a suggestion.