diff --git a/frontend/src/pages/About.css b/frontend/src/pages/About.css index faf9ee8..2b857af 100644 --- a/frontend/src/pages/About.css +++ b/frontend/src/pages/About.css @@ -1,3 +1,146 @@ + +.main { + display: flex; + flex-direction: column; + align-items: center; + width: 99vw; + background:radial-gradient(rgb(54, 135, 141),rgb(79, 110, 167)); + padding: 10px; +} + + +/* Add these styles for the improved navbar */ +.navbar { + background:linear-gradient(to left,rgb(74, 74, 155),rgb(74, 140, 167)); + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; +} +.navbar ul{ + display: flex; +} + +.navbar ul li{ + list-style: none; +} + +.navbar .logo-img { + display: flex; + margin-right: 20px; +} + +.navbar .logo-img img { + width: 60px; + height: 60px; + margin-right: 20px; + +} + +.navbar h1 { + color: #fff; + font-size: 1.5rem; + align-self:center; + margin: 0; +} + +.navbar { + list-style: none; + display: flex; + align-items: center; + margin: 0; + padding: 0; +} + + + +.navbar a { + text-decoration: none; + color: #fff; + font-size: 1rem; + font-weight: 500; +} + +/* Add these styles to enhance the hover effect */ +.navbar a:hover { + color: #1f4a99; +} + + +.social-links { + list-style: none; + display: flex; + justify-content: space-evenly; + align-items: center; + +} + +.social-links { + padding: 10px; +} + +.social-links a { + color: black; + margin: 0px 6px; + text-decoration: none; + font-size: 1.2rem; +} + + +.what-is-gfi{ + padding-top:3rem; +} +.what-is-gfi, +.motivation, +.how-to-contribute { + + margin: 20px; + text-align: center; +} + +.what-is-gfi h2, +.motivation h2, +.how-to-contribute h2 { + font-size: 2rem; + color: #3c30a8f3; +} + +.what-is-gfi p, +.motivation p, +.how-to-contribute p { + font-size: 1rem; + line-height: 1.5; +} + +.footer { + background: linear-gradient(to left, rgb(74, 74, 155), rgb(74, 140, 167)); + padding: 20px; + text-align: center; + /* position: fixed; + */ + position: relative; + width: 99vw; + color: #fff; + /* margin-top: 20px; */ + margin-bottom: -20px; + bottom: 0; +} + +.footer a { + color: #ffcc00; + text-decoration: none; + font-size: 1.2rem; +} + +.footer a:hover { + color: #ff9900; +} + .about-container { padding: 2rem 12rem; background: #f3ebeb; @@ -39,4 +182,4 @@ .about-container hr { border-width: 5px; } -} \ No newline at end of file +} diff --git a/frontend/src/pages/About.js b/frontend/src/pages/About.js index 1ff141c..c4d9495 100644 --- a/frontend/src/pages/About.js +++ b/frontend/src/pages/About.js @@ -3,32 +3,84 @@ import "./About.css"; import {logo} from './index' + +import { FaGithub, FaTwitter } from "react-icons/fa"; +import { GoRepo, GoPerson } from "react-icons/go"; +import { HiUserGroup } from "react-icons/hi"; + const About = () => { return ( -
-
- logo -

About Club Gamma

-

Empowering Student Tech Community

-
-
-
-

What is GFI

-

GitHub advises the usage of "good first issue" (GFI) labels to identify issues that are feasible for newcomers to handle in order to speed up beginner onboarding. However, prior research demonstrates the scarcity and inappropriateness of manually classified GFIs, demonstrating the need for automated suggestions. In this project, we propose GFI-Web-app, a proof-of-concept for automatic GFI recommendation in reality (available at https://pending.com). Project administrators can set up GFI-app to find and tag potential GFIs so that beginners can quickly find issues to fix when submitting their first contributions.

-
-
-
-

Why GFI

-

This website is primarily intended for developers who wish to contribute to open source software but are unsure of where or how to begin. This website gives developers filters so they may search and choose issues and repositories based on the programming languages they are most familiar with. Additionally, they have a choice in the issues they choose to address.

-
-
- -
-

Contribution Guidelines

-

Welcome hackers it is really awesome have you here! Before start contributing with this project make sure you read our Code Of Conduct, it is really important to make this inclusive and open to everyone, otherwise, it would not be awesome to have you here

-
+
+ {/*
+
+ Club Gamma Logo +
+

Club Gamma

+

Empowering Student Tech Community

+
+
+
+ + + + + + + +
+
*/} +
+

What is GFI?

+

+ GitHub advises the usage of "good first issue" (GFI) labels to identify + issues that are feasible for newcomers to handle in order to speed up + beginner onboarding. However, prior research demonstrates the scarcity + and inappropriateness of manually classified GFIs, demonstrating the + need for automated suggestions. In this project, we propose + GFI-Web-app, a proof-of-concept for automatic GFI recommendation in + reality. Project administrators can set up GFI-app to find and tag + potential GFIs so that beginners can quickly find issues to fix when + submitting their first contributions. +

+
+
+

Motivation for the Project

+

+ This website is primarily intended for developers who wish to + contribute to open source software but are unsure of where or how to + begin. This website gives developers filters so they may search and + choose issues and repositories based on the programming languages they + are most familiar with. Additionally, they have a choice in the issues + they choose to address. +

+
+
+

How to Contribute

+
    +
  1. Visit our GitHub repository: Good_First_Issue_Web_App
    2. +
  2. Explore open issues and select a good first issue.
    3. +
  3. Fork the repository and create a branch for your work.
    4. +
  4. Make the necessary changes and commit them.
    5. +
  5. Create a pull request to propose your changes.
    6. +
  6. Participate in discussions and complete the assigned tasks.
    7. +
+
+ {/* */} + +
); }; export default About; + + + + + + diff --git a/frontend/src/pages/Form.js b/frontend/src/pages/Form.js index ea7efd1..7a96977 100644 --- a/frontend/src/pages/Form.js +++ b/frontend/src/pages/Form.js @@ -35,11 +35,56 @@ const options = [ function Form() { const [selected, setSelected] = useState(); - + const [repoName, setRepoName] = useState(""); + const [repoLink, setRepoLink] = useState(""); + const [description, setDescription] = useState(""); //Fuction handling the tech-stack options function handleSelect(data) { setSelected(data); } + + // Function to handle form submission + function handleSubmit(e) { + e.preventDefault(); + // Basic client-side validation + + let authenticated=true; + // Check if the repoName is empty + if (!repoName) { + alert("Repo Name cannot be empty"); + authenticated=false; + } + + // Check if the repoLink is empty + if (!repoLink) { + alert("Repo Link cannot be empty"); + authenticated=false; + } + const githubRepoPattern = /^https:\/\/github.com\/\w+\/\w+$/; + if (!githubRepoPattern.test(repoLink)) { + alert("Please enter a valid GitHub repository link (e.g., 'https://github.com/username/repo')."); + authenticated=false; + } + // Check if description is empty + if (!description) { + alert("Description cannot be empty"); + authenticated=false; + } + + // Check if a tech stack is selected + if (!selected || selected.length === 0) { + alert("Tech Stack cannot be empty"); + authenticated=false; + } + + // If the user is authenticated, you can proceed with the form submission + if(authenticated){ + return; + } + // Add your form submission logic here + } + + return ( <> {/* HTML for Form */} @@ -61,36 +106,30 @@ function Form() {
-
- - - {/* */} -

Repo Name cannot be empty

-
-
- - - {/* */} -

Repo Link cannot be empty

-
+
+ + setRepoName(e.target.value)} + /> +
+
+ + setRepoLink(e.target.value)} + /> +
+ +
{/* Tech Stack cannot be empty

-