forked from GDSC-IIIT-Kalyani/Winter-of-Code-2.0-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/GDSC-IIIT-Kalyani/Winter-…
- Loading branch information
Showing
8 changed files
with
459 additions
and
25,602 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,108 @@ | ||
| import React from "react"; | ||
| import React, { useEffect, useState } from "react"; | ||
| import "./Projects.css"; | ||
| import "../../header/NavBar"; | ||
| import SlideData from "./SlideData"; | ||
| import proj_video from "../../../assets/projectAssests/proj_video.mp4"; | ||
| import NavBar from "../../header/NavBar"; | ||
| import "./grid.css"; | ||
| import { FaGithub, FaArrowRight, FaArrowDown } from "react-icons/fa"; | ||
|
|
||
| class Projects extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { value: "all" }; | ||
| } | ||
| handleChange = (e) => { | ||
| this.setState({ value: e.target.value }); | ||
| const Projects = () => { | ||
| let [proj_type, setproj_type] = useState("all"); | ||
| const handleChange = (e) => { | ||
| setproj_type(e.target.value); | ||
| }; | ||
| render() { | ||
| return ( | ||
| <div | ||
| className="projects" | ||
| onLoad={() => { | ||
| document.querySelector(".navBar_link-item").style.color = | ||
| "white !important"; | ||
| }} | ||
| > | ||
| <NavBar navLinkColor="white" /> | ||
| <div className="proj_vid"> | ||
| <video autoPlay loop muted> | ||
| <source src={proj_video} type="video/mp4" /> | ||
| </video> | ||
| </div> | ||
| <div className="filter_option"> | ||
| <h3>Filter out by Categories</h3> | ||
| <form id="proj_form"> | ||
| <select | ||
| className="proj_slt" | ||
| value={this.state.value} | ||
| onChange={this.handleChange} | ||
| useEffect(() => { | ||
| const proj_form = document.querySelectorAll(".main_item"); | ||
| proj_form.forEach((item) => { | ||
| item.addEventListener("click", () => { | ||
| item.children[1].classList.toggle("proj-active"); | ||
| item.children[1].children[2].classList.toggle("ideas-active"); | ||
| item.children[0].classList.toggle("proj-active-left"); | ||
| }); | ||
| }); | ||
| }, []); | ||
| return ( | ||
| <div className="projects"> | ||
| <NavBar navLinkColor="white" /> | ||
| <div className="proj_vid"> | ||
| <video autoPlay loop muted> | ||
| <source src={proj_video} type="video/mp4" /> | ||
| </video> | ||
| </div> | ||
| <div className="filter_option"> | ||
| <h3>Filter out by Categories</h3> | ||
| <form id="proj_form"> | ||
| <select className="proj_slt" onChange={handleChange}> | ||
| <option value="all">All Categories</option> | ||
| <option value="web">Web Development</option> | ||
| <option value="app">App Development</option> | ||
| <option value="ml">Machine Learning</option> | ||
| </select> | ||
| </form> | ||
| </div> | ||
|
|
||
| {/* Grid section */} | ||
| <div className="project_grid"> | ||
| {SlideData.map((slide, idx) => { | ||
| return ( | ||
| <div | ||
| key={idx} | ||
| className={ | ||
| slide.tags.includes(proj_type) ? "main_item" : "no_view" | ||
| } | ||
| > | ||
| <option value="all">All Categories</option> | ||
| <option value="web">Web Development</option> | ||
| <option value="app">App Development</option> | ||
| <option value="ml">Machine Learning</option> | ||
| </select> | ||
| </form> | ||
| </div> | ||
| <div className="proj_grid"> | ||
| {SlideData.map((slides, idx) => { | ||
| return ( | ||
| <a className="proj_link" key={idx} href="###" target="_blank"> | ||
| <div | ||
| className={ | ||
| slides.tags.includes(this.state.value) | ||
| ? "proj_item" | ||
| : "no_view" | ||
| } | ||
| id={"section" + idx.toString()} | ||
| > | ||
| <img src={slides.image} alt="Proj_Logo"></img> | ||
| <div> | ||
| <h3 className="proj_title">{slides.title}</h3> | ||
| <p className="proj_desc">{slides.Descrption}</p> | ||
| <div> | ||
| <a | ||
| className="proj_link proj_link-github" | ||
| href="### " | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| Link | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className="project_left" | ||
| style={{ backgroundImage: `url(${slide.org_img})` }} | ||
| > | ||
| <div className="arrow"> | ||
| <FaArrowRight className="rightarr" /> | ||
| <FaArrowDown className="downarr" /> | ||
| </div> | ||
| <div className="org_name"> | ||
| <div className="proj_dess">ORGNIZATION </div> | ||
| <div className="size-1">{slide.org_name}</div> | ||
| </div> | ||
| <div className="project_name"> | ||
| <div className="proj_dess">PROJECT NAME </div> | ||
| <div className="size-1">{slide.title}</div> | ||
| </div> | ||
| <div className="mentor"> | ||
| <div className="size-1">MENTOR</div> | ||
| {slide.mentors.map((mentor, index) => { | ||
| return ( | ||
| <div key={index} className="size-4"> | ||
| {mentor} | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| <div className="repo"> | ||
| <div className="size-2">REPO's LINK 🔗</div> | ||
| <a href={slide.repo_link}> | ||
| <FaGithub className="gh_logo" /> | ||
| </a> | ||
| </div> | ||
| </a> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| <div className="project_right"> | ||
| <div className="size-2">Ideas Presented:</div> | ||
| <br /> | ||
| <ul className="ideas"> | ||
| {slide.Ideas.map((idea, id) => { | ||
| return ( | ||
| <li className="size-4" key={id}> | ||
| {idea} | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Projects; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,72 @@ | ||
| import imgs from "../../../assets/images/projects/img1.png"; | ||
| import imgs from '../../../assets/organizations/asyncAPI4.png' | ||
| const SliderData = [ | ||
| { | ||
| image: imgs, | ||
| title: "Project-1", | ||
| Descrption: | ||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sequi? Laudantium doloribus sint asperiores. Neque, distinctio molestiae ad beatae aliquid voluptate soluta veritatis, impedit pariatur minus, dolores quaerat eos exercitationem.", | ||
| tags: "all web", | ||
| org_name: 'Hoppscoth', | ||
| title: 'Self Driving Car', | ||
| Ideas: [ | ||
| 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae dicta magni dolorum ipsam itaque in, voluptatum voluptas ipsa similique at ex ea rem fugit vero asperiores commodi at pariatur soluta modi! Quaerat modi laudantium commodi.', | ||
| 'Lorem ipsum dolor sit amet,m commodi.', | ||
| '2', | ||
| '3', | ||
| ], | ||
| mentors: ['laxman', 'jhonny'], | ||
| repo_link: 'afjkdfkla', | ||
| org_img:imgs, | ||
| tags: 'all web', | ||
| }, | ||
| { | ||
| image: imgs, | ||
| title: "Project-2", | ||
| Descrption: | ||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sequi? Laudantium doloribus sint asperiores. Neque, distinctio molestiae ad beatae aliquid voluptate soluta veritatis, impedit pariatur minus, dolores quaerat eos exercitationem.", | ||
| tags: "all web", | ||
| org_name: 'ABC', | ||
| title: 'Project-2', | ||
| Ideas: ['1', '2', '3'], | ||
| mentors: ['laxman', 'jhonny'], | ||
| repo_link: 'afjkdfkla', | ||
| org_img:imgs, | ||
| tags: 'all web', | ||
| }, | ||
| { | ||
| image: imgs, | ||
| title: "Project-3", | ||
| Descrption: | ||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sequi? Laudantium doloribus sint asperiores. Neque, distinctio molestiae ad beatae aliquid voluptate soluta veritatis, impedit pariatur minus, dolores quaerat eos exercitationem.", | ||
| tags: "all app", | ||
| org_name: 'ABC', | ||
| title: 'Project-3', | ||
| Ideas: ['1', '2', '3'], | ||
| mentors: ['laxman', 'jhonny'], | ||
| repo_link: 'afjkdfkla', | ||
| org_img:imgs, | ||
| tags: 'all app', | ||
| }, | ||
| { | ||
| image: imgs, | ||
| title: "Project-4", | ||
| Descrption: | ||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sequi? Laudantium doloribus sint asperiores. Neque, distinctio molestiae ad beatae aliquid voluptate soluta veritatis, impedit pariatur minus, dolores quaerat eos exercitationem.", | ||
| tags: "all app", | ||
| org_name: 'ABC', | ||
| title: 'Project-4', | ||
| Ideas: ['1', '2', '3'], | ||
| mentors: ['laxman', 'jhonny'], | ||
| repo_link: 'afjkdfkla', | ||
| org_img:imgs, | ||
| tags: 'all app', | ||
| }, | ||
| { | ||
| image: imgs, | ||
| title: "Project-5", | ||
| Descrption: | ||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sequi? Laudantium doloribus sint asperiores. Neque, distinctio molestiae ad beatae aliquid voluptate soluta veritatis, impedit pariatur minus, dolores quaerat eos exercitationem.", | ||
| tags: "all ml", | ||
| org_name: 'ABC', | ||
| title: 'Project-5', | ||
| Ideas: ['1', '2', '3'], | ||
| mentors: ['laxman', 'jhonny'], | ||
| repo_link: 'afjkdfkla', | ||
| org_img:imgs, | ||
| tags: 'all ml', | ||
| }, | ||
| { | ||
| image: imgs, | ||
| title: "Project-6", | ||
| Descrption: | ||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sequi? Laudantium doloribus sint asperiores. Neque, distinctio molestiae ad beatae aliquid voluptate soluta veritatis, impedit pariatur minus, dolores quaerat eos exercitationem.", | ||
| tags: "all ml", | ||
| org_name: 'ABC', | ||
| title: 'Project-6', | ||
| Ideas: ['1', '2', '3'], | ||
| mentors: ['laxman', 'jhonny'], | ||
| repo_link: 'afjkdfkla', | ||
| org_img:imgs, | ||
| tags: 'all ml', | ||
| }, | ||
| { | ||
| image: imgs, | ||
| title: "Project-7", | ||
| Descrption: | ||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sequi? Laudantium doloribus sint asperiores. Neque, distinctio molestiae ad beatae aliquid voluptate soluta veritatis, impedit pariatur minus, dolores quaerat eos exercitationem.", | ||
| tags: "all web", | ||
| org_name: 'ABC', | ||
| title: 'Project-7', | ||
| Ideas: ['1', '2', '3'], | ||
| mentors: ['laxman', 'jhonny'], | ||
| repo_link: 'afjkdfkla', | ||
| org_img:imgs, | ||
| tags: 'all web', | ||
| }, | ||
| ]; | ||
| export default SliderData; |
Oops, something went wrong.