diff --git a/public/hack1.jpg b/public/hack1.jpg new file mode 100644 index 0000000..25e7e65 Binary files /dev/null and b/public/hack1.jpg differ diff --git a/src/app/(pages)/Hackathon/Card.jsx b/src/app/(pages)/Hackathon/Card.jsx new file mode 100644 index 0000000..91f25ed --- /dev/null +++ b/src/app/(pages)/Hackathon/Card.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { FaGithub } from 'react-icons/fa'; +import Image from 'next/image'; + +function Card({ title, description, image, link }) { + return ( +
+ {/* Image Section */} +
+ {title} +
+ + {/* Content Section */} +
+
{title}
+

{description}

+
+ + {/* Action Button Section */} +
+ + + View on GitHub + +
+
+ ); +} + +export default Card; diff --git a/src/app/(pages)/Hackathon/page.jsx b/src/app/(pages)/Hackathon/page.jsx new file mode 100644 index 0000000..4b84412 --- /dev/null +++ b/src/app/(pages)/Hackathon/page.jsx @@ -0,0 +1,80 @@ +'use client' +import React, { useState } from 'react'; +import Card from './Card.jsx'; +import { hackathonProjects } from '../../../lib/Hackathon'; +import { motion } from 'framer-motion'; + +function ProjectsPage() { + const [searchQuery, setSearchQuery] = useState(''); + + // Filter projects based on search query + const filteredProjects = hackathonProjects.filter((project) => + project.title.toLowerCase().includes(searchQuery.toLowerCase()) || + project.description.toLowerCase().includes(searchQuery.toLowerCase()) + ); + + return ( +
+
+ {/* Heading Section */} +
+ + Girl Hackathon 2024 + + + + Girl Hackathon is a program for women students in computer science and allied courses across India. + +
+ + {/* Search Bar */} +
+ setSearchQuery(e.target.value)} + /> +
+ + {/* Cards Section */} +
+ {filteredProjects && filteredProjects.length > 0 ? ( + filteredProjects.map((project, index) => ( + + + + )) + ) : ( +

No projects match your search

+ )} +
+
+
+ ); +} + +export default ProjectsPage; diff --git a/src/components/Global/Header.jsx b/src/components/Global/Header.jsx index ab73eaf..9874678 100644 --- a/src/components/Global/Header.jsx +++ b/src/components/Global/Header.jsx @@ -88,6 +88,11 @@ export function NavigationMenu() { Projects + + + Hackathons + + diff --git a/src/lib/Hackathon.js b/src/lib/Hackathon.js new file mode 100644 index 0000000..3c0f613 --- /dev/null +++ b/src/lib/Hackathon.js @@ -0,0 +1,53 @@ +import Img1 from "../../public/hack1.jpg"; + +export const hackathonProjects = [ + { + title: 'HacktoberFest 2024 Challenge', + description: 'Kickstart your Hacktoberfest 2024 journey by contributing to open-source projects with GDSC JU! Whether you are a beginner or an expert, there’s something for everyone. Contribute to web development, AI, and other exciting fields.', + image: Img1, + link: 'https://github.com/GDSC-RCCIIT/gdg-website', + challenge: 'Contribute at least 4 pull requests to any open-source repository to complete the Hacktoberfest challenge.', + }, + { + title: 'GDSC Website Challenge', + description: 'Join the GDSC JU hackathon by building features for the official GDSC website. Work on front-end and back-end tasks to improve the platform’s usability and performance.', + image: Img1, + link: 'https://github.com/GDSC-RCCIIT/gdg-website', + challenge: 'Build new features, fix bugs, and enhance the user experience on the official website. Front-end and back-end developers welcome!', + }, + { + title: 'AI-Powered News Aggregator Hack', + description: 'Develop an AI-powered news aggregator that curates the latest tech news from multiple sources and personalizes recommendations. Ideal for participants interested in machine learning and AI.', + image: Img1, + link: 'https://github.com/GDSC-RCCIIT/gdg-website', + challenge: 'Implement machine learning models to curate and recommend relevant news articles based on user preferences.', + }, + { + title: 'GDSC Blog Platform Build', + description: 'Help create a platform where GDSC JU members can publish technical articles, tutorials, and blogs. The hackathon challenge involves both front-end and back-end tasks.', + image: Img1, + link: 'https://github.com/GDSC-RCCIIT/gdg-website', + challenge: 'Develop a blog platform with features like markdown support, user authentication, and search functionality.', + }, + { + title: 'Open-Source Contribution Tracker', + description: 'Build a tool to track and display open-source contributions of GDSC members, particularly during Hacktoberfest. Showcase how each member has participated in open-source projects.', + image: Img1, + link: 'https://github.com/GDSC-RCCIIT/gdg-website', + challenge: 'Create a real-time tracking system for open-source contributions using GitHub’s API.', + }, + { + title: 'Campus Event Management Hack', + description: 'Design and develop a comprehensive system for organizing GDSC events on campus, complete with RSVP functionality, event scheduling, and more.', + image: Img1, + link: 'https://github.com/GDSC-RCCIIT/gdg-website', + challenge: 'Implement an event management system with real-time notifications, user RSVPs, and event calendars.', + }, + { + title: 'GDSC Member Portfolio Hack', + description: 'Create a customizable portfolio template for GDSC JU members to showcase their projects, skills, and contributions. This project requires front-end design and back-end integration skills.', + image: Img1, + link: 'https://github.com/GDSC-RCCIIT/gdg-website', + challenge: 'Develop a responsive portfolio template with project showcases, skills, and social media integration.', + }, +];