├── public ├── logo.png └── index.html ├── src ├── assets │ ├── img1.png │ ├── logo.png │ ├── team.jpg │ ├── Qr-code.png │ ├── calender.png │ ├── youtube.png │ ├── contactImg.jpg │ ├── opensource.jpg │ ├── Background 1.png │ ├── EventCalendar.png │ ├── Blank Background 3.png │ ├── Blank Background 4.png │ ├── Blank Backround 2.png │ ├── Blank Backround 4.png │ ├── Blank Backround 5.png │ ├── Blank Backround 7.png │ ├── qr-code-linkendIn.png │ ├── Blank Backgrounds 1.png │ └── ex-header-background.jpg ├── components │ ├── styles │ │ ├── opensource.css │ │ ├── about.css │ │ ├── TeamCard.css │ │ ├── hackathon.css │ │ ├── Card.css │ │ ├── testimonials.css │ │ ├── App.css │ │ ├── customnav.css │ │ ├── footer.css │ │ ├── HackCard.css │ │ ├── Home.css │ │ ├── contact.css │ │ └── event.css │ ├── utilities │ │ ├── ButtonStyles.js │ │ ├── TeamCard.js │ │ ├── progressbar.js │ │ ├── Testimonial.js │ │ ├── HackCard.js │ │ ├── validator.js │ │ ├── ScrollButton.js │ │ ├── Card.js │ │ ├── Testimonials.js │ │ ├── ContactStyle.js │ │ ├── hackCard.json │ │ ├── SocialLinks.js │ │ └── cardData.json │ ├── pages │ │ ├── openSource.js │ │ ├── Hackathon.js │ │ ├── collaboration.js │ │ ├── event.js │ │ ├── addevent.js │ │ └── home.js │ ├── constants │ │ ├── data.json │ │ └── testimonialSettings.js │ ├── hooks │ │ ├── useForm.js │ │ ├── useFirestore.js │ │ ├── useFetch.js │ │ └── useStorage.js │ ├── App.js │ └── layout │ │ ├── Footer.js │ │ └── customnavbar.js ├── index.css ├── index.js └── firebase │ └── firebase.js ├── .gitignore ├── .github └── workflows │ ├── greetings.yml │ ├── github-actions-demo.yml │ ├── manual.yml │ └── codeql-analysis.yml ├── package.json └── README.md /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/public/logo.png -------------------------------------------------------------------------------- /src/assets/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/img1.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/team.jpg -------------------------------------------------------------------------------- /src/assets/Qr-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Qr-code.png -------------------------------------------------------------------------------- /src/assets/calender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/calender.png -------------------------------------------------------------------------------- /src/assets/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/youtube.png -------------------------------------------------------------------------------- /src/assets/contactImg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/contactImg.jpg -------------------------------------------------------------------------------- /src/assets/opensource.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/opensource.jpg -------------------------------------------------------------------------------- /src/assets/Background 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Background 1.png -------------------------------------------------------------------------------- /src/assets/EventCalendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/EventCalendar.png -------------------------------------------------------------------------------- /src/assets/Blank Background 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Blank Background 3.png -------------------------------------------------------------------------------- /src/assets/Blank Background 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Blank Background 4.png -------------------------------------------------------------------------------- /src/assets/Blank Backround 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Blank Backround 2.png -------------------------------------------------------------------------------- /src/assets/Blank Backround 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Blank Backround 4.png -------------------------------------------------------------------------------- /src/assets/Blank Backround 5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Blank Backround 5.png -------------------------------------------------------------------------------- /src/assets/Blank Backround 7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Blank Backround 7.png -------------------------------------------------------------------------------- /src/assets/qr-code-linkendIn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/qr-code-linkendIn.png -------------------------------------------------------------------------------- /src/assets/Blank Backgrounds 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/Blank Backgrounds 1.png -------------------------------------------------------------------------------- /src/assets/ex-header-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeFlowOrg/codeflow/HEAD/src/assets/ex-header-background.jpg -------------------------------------------------------------------------------- /src/components/styles/opensource.css: -------------------------------------------------------------------------------- 1 | .opensource{ 2 | height: 100vh; 3 | width: 100vw; 4 | align-content: center; 5 | text-justify: auto; 6 | text-align: center; 7 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | #loading{ 2 | position:fixed; 3 | width:100%; 4 | height:100vh; 5 | background: #fff 6 | url('https://wpdaddy.com/wp-content/uploads/2019/05/atom-animation-loader.gif') 7 | no-repeat center; 8 | z-index : 99999; 9 | } -------------------------------------------------------------------------------- /src/components/utilities/ButtonStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Button = styled.div` 4 | position: fixed; 5 | width: 100%; 6 | left: 95%; 7 | @media (max-width:500px){ 8 | left:86%; 9 | } 10 | bottom: 50px; 11 | height: 20px; 12 | font-size: 3rem; 13 | z-index: 999; 14 | cursor: pointer; 15 | color: #4A403A; 16 | ` 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./components/App"; 5 | import "bootstrap/dist/css/bootstrap.min.css"; 6 | 7 | 8 | ReactDOM.render( < 9 | React.StrictMode > 10 | < 11 | App / > 12 | < 13 | /React.StrictMode>, 14 | document.getElementById("root") 15 | ); -------------------------------------------------------------------------------- /src/components/pages/openSource.js: -------------------------------------------------------------------------------- 1 | import '../styles/opensource.css' 2 | function Opensource() { 3 | return ( 4 |
5 | Page under Construction !
6 | Visit https://github.com/codeflow201 for our latest opensource projects ! 7 |
8 | ); 9 | } 10 | 11 | export default Opensource; 12 | -------------------------------------------------------------------------------- /src/components/utilities/TeamCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '../styles/TeamCard.css' 3 | 4 | function TeamCard({image,name,position}) { 5 | return ( 6 |
7 | thumbnail 8 |
{name}
9 |

{position}

10 |
11 | ) 12 | } 13 | 14 | export default TeamCard 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/constants/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Home", 4 | "path":"/" 5 | }, 6 | { 7 | "title": "About", 8 | "path":"/about" 9 | }, 10 | { 11 | "title": "Events", 12 | "path":"/events" 13 | },{ 14 | "title": "Team", 15 | "path":"/team" 16 | 17 | },{ 18 | "title": "Contact", 19 | "path":"/contact" 20 | 21 | } 22 | ] -------------------------------------------------------------------------------- /.github/workflows/greetings.yml: -------------------------------------------------------------------------------- 1 | name: Greetings 2 | 3 | on: [pull_request, issues] 4 | 5 | jobs: 6 | greeting: 7 | runs-on: ubuntu-latest 8 | permissions: 9 | issues: write 10 | pull-requests: write 11 | steps: 12 | - uses: actions/first-interaction@v1 13 | with: 14 | repo-token: ${{ secrets.GITHUB_TOKEN }} 15 | issue-message: 'Message that will be displayed on users first issue' 16 | pr-message: 'Message that will be displayed on users first pull request' 17 | -------------------------------------------------------------------------------- /src/components/utilities/progressbar.js: -------------------------------------------------------------------------------- 1 | import { React } from "react"; 2 | import "../styles/App.css"; 3 | import useStorage from "../hooks/useStorage"; 4 | import { ProgressBar } from "react-bootstrap"; 5 | const ProBar = ({ 6 | file, 7 | heading, 8 | description, 9 | }) => { 10 | const { url, progress } = useStorage(file, heading, description); 11 | console.log(progress, url); 12 | return ( 13 |
14 |
15 | 16 |
17 |
18 | ); 19 | }; 20 | 21 | export default ProBar; 22 | -------------------------------------------------------------------------------- /src/components/hooks/useForm.js: -------------------------------------------------------------------------------- 1 | import {useState} from 'react' 2 | 3 | const useForm = (validator) => { 4 | const[values, setValues] = useState({ 5 | firstname:'', 6 | lastname:'', 7 | email:'', 8 | phone:'', 9 | message:'' 10 | }) 11 | const[errors, setErrors] = useState({}) 12 | 13 | const handleChange = (e)=>{ 14 | setValues({ 15 | ...values, 16 | [e.target.name]:e.target.value 17 | }) 18 | } 19 | const handleSubmit =(e) =>{ 20 | e.preventDefault(); 21 | setErrors(validator(values)) 22 | } 23 | 24 | return{handleChange , values, handleSubmit , errors} 25 | } 26 | 27 | export default useForm; -------------------------------------------------------------------------------- /src/components/hooks/useFirestore.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { projectFirestore } from "../../firebase/firebase"; 3 | 4 | const useFirestore = (collection) => { 5 | const [docs, setDocs] = useState([]); 6 | 7 | useEffect(() => { 8 | projectFirestore 9 | .collection(collection) 10 | .orderBy("createdAt", "desc") 11 | .onSnapshot((snap) => { 12 | let documents = []; 13 | snap.forEach((doc) => { 14 | documents.push({ ...doc.data(), id: doc.id }); 15 | }); 16 | setDocs(documents); 17 | }); 18 | }, [collection]); 19 | return { docs }; 20 | }; 21 | export default useFirestore; 22 | -------------------------------------------------------------------------------- /src/components/utilities/Testimonial.js: -------------------------------------------------------------------------------- 1 | import { FaQuoteLeft } from "react-icons/fa"; 2 | 3 | const Testimonial = ({ name, body, email }) => { 4 | return ( 5 |
6 |
7 | 8 | {name} 9 |
10 |
11 |
{body}
12 |
13 |

{name}

14 | {email} 15 |
16 |
17 |
18 | ); 19 | }; 20 | 21 | export default Testimonial; 22 | -------------------------------------------------------------------------------- /src/components/utilities/HackCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '../styles/HackCard.css' 3 | function HackCard({img, heading, para,category,cat,timing}) { 4 | return ( 5 |
6 |
7 | thumbnail 8 | {timing} 9 |
10 |
11 |

{heading} {category}

12 |

{para}

13 | 14 |
15 |
16 | ) 17 | } 18 | 19 | export default HackCard 20 | -------------------------------------------------------------------------------- /src/components/utilities/validator.js: -------------------------------------------------------------------------------- 1 | export default function validator(values){ 2 | let errors={} 3 | if(!values.firstname.trim()){ 4 | errors.firstname = 'Firstname required' 5 | } 6 | if(!values.lastname.trim()){ 7 | errors.lastname = 'Lastname required' 8 | } 9 | if(!values.email.trim()){ 10 | errors.email = 'Email required' 11 | }else if (!/\S+@\S+\.\S+/.test(values.email)) { 12 | errors.email = 'Email address is invalid'; 13 | } 14 | if(values.phone.length < 10){ 15 | errors.phone = 'Phone no is incorrect' 16 | } 17 | if(!values.message.trim()){ 18 | errors.message='Message required' 19 | } 20 | return errors; 21 | } -------------------------------------------------------------------------------- /src/components/styles/about.css: -------------------------------------------------------------------------------- 1 | .about__page-part1 { 2 | background: url("../../assets/Blank\ Background\ 3.png") no-repeat 3 | center/cover; 4 | } 5 | .about__page-part2 { 6 | background: url("../../assets/Blank\ Background\ 4.png") no-repeat 7 | center/cover; 8 | } 9 | .about__page-text-wrapper { 10 | display: flex; 11 | justify-content: space-around; 12 | align-items: center; 13 | text-align: center; 14 | max-width: 1000px; 15 | margin: auto; 16 | color: #fff; 17 | padding: 0vh 5vh 15vh 5vh; 18 | text-overflow: clip; 19 | } 20 | 21 | .about__page-text-wrapper article p { 22 | font-size: 20px; 23 | text-align: center; 24 | } 25 | .about__page-title { 26 | font-size: 40px; 27 | color: #fff; 28 | } 29 | 30 | .about__page-title span { 31 | color: #1cbdd6; 32 | } 33 | -------------------------------------------------------------------------------- /src/firebase/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase/app"; 2 | import "firebase/storage"; 3 | import "firebase/firestore"; 4 | 5 | // Your web app's Firebase configuration 6 | const Config = { 7 | apiKey: "AIzaSyAc1HwKpWdsEPUBaU0y9mWmla5EU3_vqCQ", 8 | authDomain: "codeflow-org.firebaseapp.com", 9 | databaseURL: "https://codeflow-org-default-rtdb.firebaseio.com", 10 | projectId: "codeflow-org", 11 | storageBucket: "codeflow-org.appspot.com", 12 | messagingSenderId: "706543120697", 13 | appId: "1:706543120697:web:e90a5abaa092a306c778e8", 14 | }; 15 | // Initialize Firebase 16 | const firebaseApp = firebase.initializeApp(Config); 17 | 18 | const projectStorage = firebaseApp.storage(); 19 | const projectFirestore = firebaseApp.firestore(); 20 | const timestamp = firebase.firestore.FieldValue.serverTimestamp(); 21 | export { projectStorage, projectFirestore, timestamp }; 22 | -------------------------------------------------------------------------------- /src/components/utilities/ScrollButton.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {FaArrowCircleUp} from 'react-icons/fa'; 3 | import { Button } from './ButtonStyles'; 4 | 5 | const ScrollToTopButton = () => { 6 | 7 | const [visible, setVisible] = useState(false) 8 | 9 | const toggleVisible = () => { 10 | const scrolled = document.documentElement.scrollTop; 11 | if (scrolled > 300){ 12 | setVisible(true) 13 | } 14 | else if (scrolled <= 300){ 15 | setVisible(false) 16 | } 17 | }; 18 | 19 | const scrollToTop = () =>{ 20 | window.scrollTo({ 21 | top: 0, 22 | behavior: 'smooth' 23 | }); 24 | }; 25 | 26 | window.addEventListener('scroll', toggleVisible); 27 | 28 | return ( 29 | 33 | ); 34 | } 35 | 36 | export default ScrollToTopButton; 37 | -------------------------------------------------------------------------------- /.github/workflows/github-actions-demo.yml: -------------------------------------------------------------------------------- 1 | name: GitHub Actions Demo 2 | on: [push] 3 | jobs: 4 | Explore-GitHub-Actions: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event." 8 | - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!" 9 | - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}." 10 | - name: Check out repository code 11 | uses: actions/checkout@v2 12 | - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner." 13 | - run: echo "🖥️ The workflow is now ready to test your code on the runner." 14 | - name: List files in the repository 15 | run: | 16 | ls ${{ github.workspace }} 17 | - run: echo "🍏 This job's status is ${{ job.status }}." -------------------------------------------------------------------------------- /src/components/styles/TeamCard.css: -------------------------------------------------------------------------------- 1 | .teamCard { 2 | justify-content: center; 3 | align-items: center; 4 | flex-direction: column; 5 | border-radius: 15px; 6 | background-color: rgb(255, 255, 255); 7 | width: fit-content; 8 | margin: 0.6rem 0.6rem; 9 | padding: 15px 10px; 10 | width: 150px; 11 | cursor: pointer; 12 | height: 200px; 13 | word-break: break-word; 14 | } 15 | .teamCard:hover img { 16 | transform: scale(1.05); 17 | } 18 | .teamCard img { 19 | width: 100px; 20 | height: 100px; 21 | margin-left: 11%; 22 | border-radius: 50%; 23 | transition: all 0.3s ease; 24 | } 25 | .teamCard h5 { 26 | font-size: 1rem; 27 | text-align: center; 28 | margin-top: 0.5rem; 29 | margin-bottom: 0rem; 30 | font-weight: 700; 31 | } 32 | .teamCard p { 33 | font-size: 0.9rem; 34 | text-align: center; 35 | margin-top: 0.5rem; 36 | margin-bottom: 0rem; 37 | font-weight: 700; 38 | } 39 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Codeflow 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/hooks/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useCallback } from 'react'; 2 | 3 | export const useFetch = (url) => { 4 | //Loading state 5 | const [isLoading, setIsLoading] = useState(true); 6 | //Error state 7 | const [isError, setIsError] = useState(false); 8 | 9 | const [data, setData] = useState([]); 10 | 11 | const fetchData = useCallback(async () => { 12 | setIsLoading(true); 13 | try { 14 | const response = await fetch(url); 15 | 16 | if (!response.ok) throw new Error(`${response.status} Product not found`); 17 | 18 | const data = await response.json(); 19 | 20 | setData(data); 21 | 22 | //Disable loading screen 23 | setIsLoading(false); 24 | } catch (error) { 25 | setIsLoading(false); 26 | setIsError(true); 27 | } 28 | }, [url]); 29 | useEffect(() => { 30 | fetchData(); 31 | }, [url, fetchData]); 32 | 33 | return { data, isLoading, isError }; 34 | }; 35 | -------------------------------------------------------------------------------- /src/components/utilities/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '../styles/Card.css' 3 | import { BsCalendar } from "react-icons/bs"; 4 | 5 | function Card({image,title,info,category,date,time,btn}) { 6 | return ( 7 |
8 | thumbnail 9 |
10 |
11 |

({title}) {category}

12 |

{info}

13 |
14 |
15 | 16 |
17 |

Date: {date}

18 |

Time: {time}

19 |
20 |
21 |
22 | 23 |
24 | ) 25 | } 26 | 27 | export default Card 28 | -------------------------------------------------------------------------------- /.github/workflows/manual.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow that is manually triggered 2 | 3 | name: Manual workflow 4 | 5 | # Controls when the action will run. Workflow runs when manually triggered using the UI 6 | # or API. 7 | on: 8 | workflow_dispatch: 9 | # Inputs the workflow accepts. 10 | inputs: 11 | name: 12 | # Friendly description to be shown in the UI instead of 'name' 13 | description: 'Person to greet' 14 | # Default value if no value is explicitly provided 15 | default: 'World' 16 | # Input has to be provided for the workflow to run 17 | required: true 18 | 19 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 20 | jobs: 21 | # This workflow contains a single job called "greet" 22 | greet: 23 | # The type of runner that the job will run on 24 | runs-on: ubuntu-latest 25 | 26 | # Steps represent a sequence of tasks that will be executed as part of the job 27 | steps: 28 | # Runs a single command using the runners shell 29 | - name: Send greeting 30 | run: echo "Hello ${{ github.event.inputs.name }}" 31 | -------------------------------------------------------------------------------- /src/components/utilities/Testimonials.js: -------------------------------------------------------------------------------- 1 | import Slider from "react-slick"; 2 | import { useFetch } from "../hooks/useFetch"; 3 | import { settings } from "../constants/testimonialSettings"; 4 | import "../styles/testimonials.css"; 5 | import Testimonial from "./Testimonial"; 6 | import "slick-carousel/slick/slick.css"; 7 | import "slick-carousel/slick/slick-theme.css"; 8 | 9 | //Placeholder API 10 | const API_URL = `http://jsonplaceholder.typicode.com/comments?_page=1&_limit=8`; 11 | 12 | const Testimonials = () => { 13 | //Getting testimonials data 14 | const { data: testimonials, isLoading } = useFetch(API_URL); 15 | 16 | return ( 17 |
18 |

Our Testimonials

19 |
20 | {isLoading ? ( 21 |

Loading...

22 | ) : ( 23 | 24 | {testimonials.map((testimonial) => ( 25 | 26 | ))} 27 | 28 | )} 29 |
30 |
31 | ); 32 | }; 33 | 34 | export default Testimonials; 35 | -------------------------------------------------------------------------------- /src/components/hooks/useStorage.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { 3 | projectStorage, 4 | projectFirestore, 5 | timestamp, 6 | } from "../../firebase/firebase"; 7 | 8 | const useStorage = (file, heading, description) => { 9 | const [progress, setProgress] = useState(0); 10 | const [error, setError] = useState(null); 11 | const [url, setUrl] = useState(null); 12 | 13 | useEffect(() => { 14 | //references 15 | const storageRef = projectStorage.ref(file.name); 16 | const collectionRef = projectFirestore.collection("events"); 17 | storageRef.put(file).on( 18 | "state_changed", 19 | (snap) => { 20 | let percentage = (snap.bytesTransferred / snap.totalBytes) * 100; 21 | setProgress(percentage); 22 | }, 23 | (err) => { 24 | setError(err); 25 | }, 26 | async () => { 27 | const url = await storageRef.getDownloadURL(); 28 | const createdAt = timestamp; 29 | const title = heading; 30 | const content = description; 31 | collectionRef.add({ title, url, content, createdAt }); 32 | setUrl(url); 33 | } 34 | ); 35 | }, [file, heading, description]); 36 | return { progress, url, error }; 37 | }; 38 | 39 | export default useStorage; 40 | -------------------------------------------------------------------------------- /src/components/styles/hackathon.css: -------------------------------------------------------------------------------- 1 | .hackathon{ 2 | background-position: center; 3 | background-repeat: no-repeat; 4 | background-size: 100% 100%; 5 | background-attachment: fixed; 6 | width: 100%; 7 | height: 100%; 8 | overflow: hidden; 9 | background-repeat: no-repeat; 10 | /* background-image: url("../../assets/Blank\ Backround\ 5.png"); */ 11 | 12 | 13 | } 14 | .hackathon__cards{ 15 | padding: 2rem 4rem; 16 | align-items: center; 17 | flex-direction: column; 18 | display: flex; 19 | max-width: 1200px; 20 | margin: auto; 21 | } 22 | .hackathon__select{ 23 | width: 400px; 24 | outline: none; 25 | color: grey; 26 | padding: 8px 10px; 27 | text-transform: uppercase; 28 | font-weight: 600; 29 | cursor: pointer; 30 | } 31 | .hackathon__select option{ 32 | color: #663F3F; 33 | background-color: #12232E; 34 | font-weight: 600; 35 | } 36 | .hackathon__Cards{ 37 | flex-wrap: wrap; 38 | margin: 4rem 0; 39 | width: 100%; 40 | height: 100%; 41 | display: flex; 42 | justify-content: center; 43 | } 44 | 45 | 46 | @media(max-width:850px){ 47 | .hackathon__cards{ 48 | padding: 2rem 1.5rem; 49 | } 50 | } 51 | @media(max-width:450px){ 52 | .hackathon__select{ 53 | width: 340px; 54 | } 55 | } -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import "./styles/App.css"; 2 | 3 | import { HashRouter, Route } from "react-router-dom"; 4 | import Home from "./pages/home"; 5 | import Events from "./pages/event"; 6 | import Hackathon from "./pages/Hackathon"; 7 | import Collaboration from "./pages/collaboration"; 8 | import Addevent from "./pages/addevent"; 9 | import OpenSource from "./pages/openSource"; 10 | import Footer from "../components/layout/Footer"; 11 | import ScrollButton from "./utilities/ScrollButton"; 12 | import Customnav from "./layout/customnavbar"; 13 | 14 | function App() { 15 | return ( 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | ); 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /src/components/styles/Card.css: -------------------------------------------------------------------------------- 1 | .cards { 2 | width: 270px; 3 | padding: 10px; 4 | height: 360px; 5 | background-color: #fff; 6 | border-radius: 20px; 7 | margin: 2rem 2rem; 8 | } 9 | .card__img { 10 | height: 140px; 11 | width: 250px; 12 | border-radius: 20px; 13 | } 14 | .card__info { 15 | padding-top: 10px; 16 | display: flex; 17 | flex-direction: column; 18 | } 19 | .card__infoTxt h4 { 20 | font-size: 1rem; 21 | font-weight: 600; 22 | } 23 | .card__infoTxt h4 span { 24 | font-size: 0.6rem; 25 | background-color: #12232e; 26 | color: white; 27 | padding: 2px 28px; 28 | border-radius: 30px; 29 | text-transform: capitalize; 30 | } 31 | .card__infoTxt p { 32 | font-size: 0.8rem; 33 | margin-bottom: 0.6rem; 34 | } 35 | .card__infoTime { 36 | display: flex; 37 | align-items: center; 38 | } 39 | .card__infoTime-icon { 40 | width: 40px; 41 | height: 40px; 42 | color: black; 43 | } 44 | .card__infoTime-time p { 45 | margin-bottom: 3px; 46 | margin-top: 3px; 47 | margin-left: 4px; 48 | background-color: #12232e; 49 | font-size: x-small; 50 | color: #fff; 51 | text-align: center; 52 | padding: 0 30px; 53 | border-radius: 40px; 54 | } 55 | .card__btn { 56 | width: 100%; 57 | border: none; 58 | outline: none; 59 | color: white; 60 | margin-top: 10px; 61 | background-color: #FFC069; 62 | padding: 4px 0; 63 | border-radius: 30px; 64 | transition: all 0.3s ease; 65 | } 66 | .card__btn:hover { 67 | background-color:#FFC069 ; 68 | } 69 | -------------------------------------------------------------------------------- /src/components/utilities/ContactStyle.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@material-ui/core/styles'; 2 | 3 | export default makeStyles((theme) => ({ 4 | root: { 5 | '& .MuiTextField-root': { 6 | margin: theme.spacing(1), 7 | }, 8 | }, 9 | container: { 10 | padding: theme.spacing(2), 11 | display: 'flex', 12 | justifyContent: 'center', 13 | alignItems: "center" 14 | }, 15 | paper: { 16 | padding: theme.spacing(2), 17 | width: theme.spacing(50), 18 | }, 19 | form: { 20 | display: 'flex', 21 | flexWrap: 'wrap', 22 | width: "100%", 23 | justifyContent: 'center', 24 | }, 25 | buttonSubmit: { 26 | marginBottom: 10, 27 | backgroundColor: "#01bfd9", 28 | color: "#fff" 29 | 30 | }, 31 | btnCol: { 32 | backgroundColor: "#132c3c", 33 | color: "#fff", 34 | margin: "1vh", 35 | '&:hover': { 36 | boxShadow: "0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)", 37 | backgroundColor: "#0b1921", 38 | } 39 | }, 40 | clrBtn: { 41 | backgroundColor: "#1193a5", 42 | color: "#fff", 43 | margin: "1vh", 44 | fontWeight: "bold", 45 | '&:hover': { 46 | boxShadow: "0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)", 47 | backgroundColor: "#0c6571", 48 | } 49 | } 50 | })); -------------------------------------------------------------------------------- /src/components/styles/testimonials.css: -------------------------------------------------------------------------------- 1 | #testimonials { 2 | background-color: #fff; 3 | padding: 1rem; 4 | } 5 | 6 | #testimonials h1 { 7 | color: #FFC069; 8 | text-align: center; 9 | } 10 | .testimonial-wrapper { 11 | width: 89vw; 12 | margin: 2rem auto; 13 | position: relative; 14 | } 15 | .tesimonial-item { 16 | background-color: rgb(221, 217, 217); 17 | border-radius: 20px; 18 | padding: 1rem; 19 | display: flex; 20 | justify-content: center; 21 | margin: 2rem; 22 | height: 320px; 23 | transition: all 0.3s ease-in; 24 | } 25 | .tesimonial-item:hover{ 26 | background-color: #4A403A; 27 | color: white; 28 | } 29 | .tesimonial-item:hover .quote-icon{ 30 | color: #fff; 31 | } 32 | .testimonial-left { 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: space-between; 36 | margin-right: 1rem; 37 | } 38 | .testimonial-left .quote-icon { 39 | font-size: 3rem; 40 | color: #4A403A; 41 | } 42 | .testimonial-left img { 43 | border-radius: 50%; 44 | width: 75px; 45 | } 46 | .testimonial-right{ 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: space-between; 50 | } 51 | .testimonial-right p { 52 | font-weight: 600; 53 | margin: 0; 54 | } 55 | .testimonial-icon { 56 | font-size: 5rem; 57 | } 58 | @media (max-width: 1300px) { 59 | .testimonial-wrapper { 60 | width: 80vw; 61 | } 62 | } 63 | @media (max-width: 650px) { 64 | .testimonial-wrapper { 65 | width: 90vw; 66 | } 67 | } 68 | 69 | @media (max-width: 450px) { 70 | .testimonial-wrapper { 71 | margin: 0; 72 | } 73 | .tesimonial-item { 74 | flex-direction: column; 75 | margin: 0.5rem; 76 | } 77 | .testimonial-left { 78 | flex-direction: row-reverse; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/components/styles/App.css: -------------------------------------------------------------------------------- 1 | .nav, 2 | .nav:hover { 3 | color: inherit; 4 | text-decoration: none; 5 | color: white; 6 | } 7 | a, 8 | a:hover { 9 | text-decoration: none; 10 | } 11 | 12 | .ctr { 13 | margin: auto; 14 | } 15 | .navs { 16 | display: inline-flex; 17 | z-index: 1; 18 | background-color: #4a403a; 19 | } 20 | .fixed { 21 | width: 100%; 22 | position: sticky; 23 | top: 0; 24 | left: 0; 25 | z-index: 1; 26 | transition: 0.3s ease-in-out; 27 | background-color: #4A403A ; 28 | } 29 | 30 | .row-custom { 31 | margin: 0 !important; 32 | } 33 | .margin-card { 34 | margin: 1rem; 35 | margin-bottom: 3rem !important; 36 | } 37 | .event-div { 38 | min-height: 42vh; 39 | width: 80% !important; 40 | } 41 | 42 | .card img { 43 | width: 100%; 44 | height: 60%; 45 | } 46 | 47 | .title-div { 48 | min-height: 21% !important; 49 | } 50 | 51 | .card-header { 52 | margin-bottom: 0 !important; 53 | height: 19%; 54 | border-bottom: none !important; 55 | display: flex; 56 | align-items: center; 57 | padding-left: 1 rem; 58 | } 59 | 60 | .card-banner { 61 | height: 42vh; 62 | } 63 | 64 | .sc-bdvvaa.cmdZFS { 65 | position: fixed; 66 | width: 100%; 67 | left: 95%; 68 | bottom: 80px; 69 | height: 20px; 70 | font-size: 3rem; 71 | z-index: 999; 72 | cursor: pointer; 73 | color: #FFC069; 74 | } 75 | 76 | ::-webkit-scrollbar { 77 | width: 14px; 78 | } 79 | 80 | ::-webkit-scrollbar-track { 81 | background :rgba(32, 32, 32, 1); 82 | } 83 | 84 | ::-webkit-scrollbar-thumb { 85 | background: #696969; 86 | border-radius: 8px; 87 | } 88 | 89 | ::-webkit-scrollbar-thumb:hover { 90 | background-color: #7D7D7D; 91 | } 92 | 93 | @media(max-width:868px) { 94 | .headings-logos-buttons{ 95 | width: 100%; 96 | display: flex; 97 | justify-content: space-between; 98 | } 99 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": "https://codeflow201.github.io/codeflow/", 3 | "name": "codeflow", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@emotion/react": "^11.4.1", 8 | "@emotion/styled": "^11.3.0", 9 | "@mui/icons-material": "^5.0.1", 10 | "@mui/material": "^5.0.2", 11 | "@rocktimsaikia/github-card": "^3.0.1", 12 | "@testing-library/jest-dom": "^5.11.9", 13 | "@testing-library/react": "^11.2.5", 14 | "@testing-library/user-event": "^12.7.1", 15 | "axios": "^0.21.4", 16 | "bootstrap": "^4.6.0", 17 | "firebase": "^8.2.10", 18 | "gh-pages": "^3.1.0", 19 | "jquery": "^3.6.0", 20 | "mdbreact": "^5.1.0", 21 | "popper.js": "^1.16.1", 22 | "react": "^17.0.1", 23 | "react-bootstrap": "^1.5.1", 24 | "react-dom": "^17.0.1", 25 | "react-icons": "^4.2.0", 26 | "react-paginate": "^7.1.2", 27 | "react-router-dom": "^5.2.0", 28 | "react-scripts": "^4.0.3", 29 | "react-slick": "^0.28.1", 30 | "react-social-icons": "^5.6.1", 31 | "slick-carousel": "^1.8.1", 32 | "styled-components": "^5.2.3", 33 | "web-vitals": "^1.1.0" 34 | }, 35 | "scripts": { 36 | "start": "react-scripts start", 37 | "build": "react-scripts build", 38 | "test": "react-scripts test", 39 | "eject": "react-scripts eject", 40 | "predeploy": "npm run build", 41 | "deploy": "gh-pages -d build" 42 | }, 43 | "eslintConfig": { 44 | "extends": [ 45 | "react-app", 46 | "react-app/jest" 47 | ] 48 | }, 49 | "browserslist": { 50 | "production": [ 51 | ">0.2%", 52 | "not dead", 53 | "not op_mini all" 54 | ], 55 | "development": [ 56 | "last 1 chrome version", 57 | "last 1 firefox version", 58 | "last 1 safari version" 59 | ] 60 | }, 61 | "devDependencies": { 62 | "chokidar": "^3.5.1" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/components/styles/customnav.css: -------------------------------------------------------------------------------- 1 | .navbar.active { 2 | background: linear-gradient(98deg, rgb(66, 2, 194) 3 | 0%, rgb(62, 105, 170) 100%); 4 | } 5 | 6 | 7 | 8 | .navs .navbar-link-css { 9 | color: #fff; 10 | padding-left: 2vh; 11 | padding-right: 2vh; 12 | } 13 | .navbar-link-css:hover{ 14 | color: rgb(165, 131, 131); 15 | background: #12232e; 16 | content: '.'; 17 | } 18 | .navbar-link-css, 19 | .navbar-link-css:after, 20 | .navbar-link-css:before { 21 | transition: all .5s; 22 | } 23 | 24 | .headings-logos-buttons .nav-dynamic-button { 25 | display: none; 26 | margin: 5px; 27 | } 28 | 29 | 30 | 31 | @media (max-width: 1308px) { 32 | .navs .navbar-link-css { 33 | padding-left: 2vh; 34 | padding-right: 2vh; 35 | } 36 | } 37 | 38 | .justify-content-between #hidden { 39 | display: flex; 40 | } 41 | 42 | @media (max-width: 1140px) { 43 | .navs .navbar-link-css { 44 | padding-left: 2vh; 45 | padding-right: 2vh; 46 | } 47 | } 48 | 49 | @media (max-width: 985px) { 50 | .navs .navbar-link-css { 51 | padding-left: 2vh; 52 | padding-right: 2vh; 53 | } 54 | } 55 | 56 | @media (max-width: 820px) { 57 | .navs .navbar-link-css { 58 | padding-left: 1vh; 59 | padding-right: 1vh; 60 | } 61 | } 62 | 63 | @media (max-width: 868px) { 64 | .navs { 65 | display: none; 66 | } 67 | 68 | .headings-logos-buttons .nav-dynamic-button { 69 | display: inline; 70 | } 71 | 72 | .justify-content-between #hidden { 73 | position: absolute; 74 | left: 0px; 75 | top: 65px; 76 | height: 250px; 77 | max-height: 250px; 78 | width: 100%; 79 | display: flex; 80 | border-top: 1.5px solid white; 81 | flex-direction: column; 82 | align-items: center; 83 | z-index: 2; 84 | } 85 | 86 | .justify-content-between #hidden .navbar-link-css { 87 | margin: 10px !important; 88 | } 89 | 90 | } 91 | -------------------------------------------------------------------------------- /src/components/constants/testimonialSettings.js: -------------------------------------------------------------------------------- 1 | import { FaChevronLeft, FaChevronRight } from "react-icons/fa"; 2 | 3 | const SamplePrevArrow = (props) => { 4 | const { className, onClick } = props; 5 | return ( 6 | 23 | ); 24 | }; 25 | const SampleNextArrow = (props) => { 26 | const { className, onClick } = props; 27 | return ( 28 | 45 | ); 46 | }; 47 | 48 | export const settings = { 49 | infinite: false, 50 | speed: 750, 51 | slidesToShow: 3, 52 | slidesToScroll: 1, 53 | initialSlide: 0, 54 | nextArrow: , 55 | prevArrow: , 56 | responsive: [ 57 | { 58 | breakpoint: 1300, 59 | settings: { 60 | slidesToShow: 2, 61 | slidesToScroll: 1, 62 | }, 63 | }, 64 | { 65 | breakpoint: 850, 66 | settings: { 67 | slidesToShow: 1, 68 | slidesToScroll: 1, 69 | }, 70 | }, 71 | { 72 | breakpoint: 650, 73 | settings: { 74 | slidesToShow: 1, 75 | slidesToScroll: 1, 76 | arrows: false, 77 | }, 78 | }, 79 | ], 80 | }; 81 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codeflow 2 | 3 | Official website of Codeflow on React and Firebase. 4 | 5 | 6 | ## Prerequisites for Environment Setup 7 | 8 | * [Download and Install Nodejs](https://nodejs.org/en/download/) 9 | 10 | * Open terminal, write the following command and press enter. 11 | ``` 12 | $ npm -v 13 | ``` 14 | terminal should return your npm version. 15 | 16 | * [Download and install git](https://git-scm.com/downloads) 17 | 18 | ## Environment Setup for CodeFlow 19 | 20 | #### 1. Clone App 21 | 22 | * Make a new folder and open the terminal there. 23 | * Write the following command and press enter. 24 | 25 | ``` 26 | $ git clone git@github.com:CodeFlow201/codeflow.git 27 | ``` 28 | 29 | #### 2. Install node packages 30 | 31 | * Move inside the cloned folder with name codeflow. 32 | * Write the following command and press enter to download all required node modules. 33 | 34 | ``` 35 | $ npm install . 36 | ``` 37 | 38 | #### 3. Run Locally 39 | 40 | * While you are still inside the cloned folder, write the following command to run the website locally. 41 | 42 | ``` 43 | $ npm run start 44 | ``` 45 | 46 | ###### NOTE: The port by default will be ```http://localhost:3000/``` 47 | 48 | ## Want to Contribute? 49 | 50 | To start contributing, follow the below guidelines: 51 | 52 | **1.** Fork [this](git@github.com:CodeFlow201/codeflow.git) repository. 53 | 54 | **2.** Follow the Environment setup above. 55 | 56 | **3.** Checkout into a new branch 57 | 58 | $ git checkout -b 59 | 60 | **4.** Make your changes 61 | 62 | **5.** Add and commit your changes 63 | 64 | $ git add . && git commit -m "" 65 | 66 | **6.** Push Code to Github under your branch 67 | 68 | $ git push origin 69 | 70 | ## Contributors 71 | 72 | 73 | 78 | 79 |
74 | 75 | 76 | 77 |
80 | -------------------------------------------------------------------------------- /src/components/layout/Footer.js: -------------------------------------------------------------------------------- 1 | import logo from "../../assets/logo.png"; 2 | import img from "../../assets/Qr-code.png"; 3 | import { Link } from "react-router-dom"; 4 | import "../styles/footer.css"; 5 | 6 | const Footer = () => { 7 | return ( 8 |
9 | 66 |
67 | ); 68 | }; 69 | 70 | export default Footer; 71 | -------------------------------------------------------------------------------- /src/components/pages/Hackathon.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Customnav from "../layout/customnavbar"; 3 | import "../styles/hackathon.css"; 4 | import img1 from "../../assets/img1.png"; 5 | import HackCard from "../utilities/HackCard"; 6 | import Card from "../utilities/hackCard.json"; 7 | 8 | function Hackathon() { 9 | const [option, setOption] = useState(""); 10 | const handleInput = (e) => { 11 | const selectedOne = e.target.value; 12 | setOption(selectedOne); 13 | }; 14 | return ( 15 | <> 16 |
17 | {/* */} 18 |
19 |
20 | loading 21 |
22 |
23 |
24 |

25 | Codeflow 26 |

27 |

known for hackathons!

28 |

29 | Codeflow is an organisatiom whose main motive is to empower 30 | student community by organising webinars, hackathons and open 31 | source events 32 |

33 |
34 |
35 |
36 |
37 | 46 |
47 | {Card.filter((item) => { 48 | if (option === "") { 49 | return item; 50 | } else if (item.cat === option) { 51 | return item; 52 | } 53 | }).map((item) => { 54 | return ( 55 | 63 | ); 64 | })} 65 |
66 |
67 |
68 | 69 | ); 70 | } 71 | 72 | export default Hackathon; 73 | -------------------------------------------------------------------------------- /src/components/styles/footer.css: -------------------------------------------------------------------------------- 1 | .footer-styling a { 2 | color: #000 !important; 3 | } 4 | .footer-styling a:hover { 5 | color: #000; 6 | } 7 | footer { 8 | background-color: #edfbfb; 9 | padding: 1rem; 10 | } 11 | footer h3 { 12 | font-size: 1rem; 13 | text-decoration: underline; 14 | font-weight: normal; 15 | } 16 | footer .container { 17 | display: flex; 18 | justify-content: space-around; 19 | max-width: 70%; 20 | } 21 | .footer-link-group { 22 | display: flex; 23 | flex-direction: column; 24 | align-items: flex-start; 25 | } 26 | .footer-link-group a{ 27 | margin: 3px; 28 | } 29 | .footer-link-group a:last-child { 30 | border-radius: 5px; 31 | padding: 0 5px; 32 | border : 1px solid black; 33 | } 34 | .footer-logo { 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | } 39 | .footer-logo h2 { 40 | margin: 0; 41 | } 42 | .footer-logo-text { 43 | margin-left: 0.5rem; 44 | } 45 | @media screen and (max-width: 1200px) { 46 | footer .container { 47 | max-width: 85%; 48 | } 49 | } 50 | 51 | @media screen and (max-width: 992px) { 52 | footer .container { 53 | max-width: 95%; 54 | } 55 | } 56 | @media screen and (max-width: 768px) { 57 | footer .container { 58 | flex-wrap: wrap; 59 | } 60 | .footer-logo { 61 | width: 100%; 62 | margin-bottom: 1rem; 63 | } 64 | } 65 | @media screen and (max-width: 576px) { 66 | footer .container { 67 | flex-wrap: nowrap; 68 | flex-direction: column; 69 | align-items: center; 70 | } 71 | .footer-link-group { 72 | margin: 0.5rem auto; 73 | align-items: center; 74 | } 75 | } 76 | 77 | .footer-link-group a { 78 | position: relative; 79 | color: #000; 80 | text-decoration: none; 81 | } 82 | 83 | .footer-link-group a:hover { 84 | color: #000; 85 | text-decoration: none; 86 | } 87 | 88 | .footer-link-group a::before { 89 | content: ""; 90 | position: absolute; 91 | display: block; 92 | width: 100%; 93 | height: 1.75px; 94 | bottom: 0; 95 | left: 0; 96 | background-color: #000; 97 | transform: scaleX(0); 98 | transition: transform 0.3s ease; 99 | } 100 | 101 | .footer-link-group a:hover::before { 102 | transform: scaleX(1); 103 | } 104 | 105 | .social-media-links > h3, 106 | .other-links > h3 ,.footer-link-group > h3 { 107 | background-color: var(--dark); 108 | color: #edfbfb !important; 109 | border-radius: 5px; 110 | padding: 0 5px; 111 | text-decoration: none; 112 | } 113 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '19 16 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /src/components/styles/HackCard.css: -------------------------------------------------------------------------------- 1 | .hackCard { 2 | max-width: 300px; 3 | height: 215px; 4 | position: relative; 5 | background-color: rgba(255, 255, 255,0.1); 6 | box-shadow: 0 25px 45px rgba(0,0,0,0.25); 7 | margin: 30px 25px; 8 | padding: 20px 15px; 9 | display: flex; 10 | flex-direction: column; 11 | transition: all 0.5s ease; 12 | cursor: pointer; 13 | color: #663F3F; 14 | backdrop-filter: blur(25px); 15 | } 16 | .hackCard:hover { 17 | height: 350px; 18 | } 19 | .hackCard__img { 20 | position: relative; 21 | width: 260px; 22 | height: 260px; 23 | top: -40px; 24 | left: 6px; 25 | } 26 | .hackCard__img span{ 27 | position: absolute; 28 | background-color: #12232E; 29 | color: #fff; 30 | left: -21px; 31 | top: 200px; 32 | font-size: 11px; 33 | font-weight: bold; 34 | transition: all 0.3s ease; 35 | visibility: hidden; 36 | } 37 | .hackCard:hover .hackCard__img img{ 38 | transform: scale(1.02); 39 | } 40 | .hackCard__img img { 41 | max-width: 100%; 42 | border-radius: 10px; 43 | transition: all 0.8s ease; 44 | box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.75); 45 | -webkit-box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.75); 46 | -moz-box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.75); 47 | } 48 | .hackCard__content { 49 | position: relative; 50 | margin-top: -140px; 51 | padding: 10px 15px; 52 | text-align: center; 53 | visibility: hidden; 54 | opacity: 0; 55 | transition: all 0.5s ease; 56 | } 57 | .hackCard:hover .hackCard__content { 58 | visibility: visible; 59 | opacity: 1; 60 | margin-top: -40px; 61 | } 62 | .hackCard:hover .hackCard__img span{ 63 | top:50px; 64 | visibility: visible; 65 | } 66 | .hackCard h2 { 67 | font-size: 1.2rem; 68 | font-weight: bold; 69 | margin-bottom: 5px; 70 | margin-left: 10px; 71 | } 72 | .hackCard h2 span { 73 | font-size: small; 74 | background-color: #12232e; 75 | padding: 2px 4px; 76 | color:white; 77 | } 78 | .hackCard p { 79 | font-size: 0.9rem; 80 | line-height: 1.2; 81 | margin-bottom: 10px; 82 | } 83 | .hackCard button { 84 | width: 100%; 85 | border: none; 86 | outline: none; 87 | color: white; 88 | margin-top: 10px; 89 | background-color: #12232e; 90 | padding: 4px 0; 91 | border-radius: 5px; 92 | transition: all 0.3s ease; 93 | text-transform: capitalize; 94 | } 95 | .hackCard button:hover { 96 | background-color: #162c3a; 97 | } 98 | 99 | @media (max-width: 800px) { 100 | .hackCard { 101 | height: 350px; 102 | } 103 | .hackCard__content { 104 | visibility: visible; 105 | opacity: 1; 106 | margin-top: -40px; 107 | } 108 | .hackCard__img span{ 109 | top:50px; 110 | visibility: visible; 111 | } 112 | 113 | } 114 | -------------------------------------------------------------------------------- /src/components/pages/collaboration.js: -------------------------------------------------------------------------------- 1 | import "../styles/contact.css"; 2 | import logo from "../../assets/logo.png"; 3 | import { SocialIcon } from "react-social-icons"; 4 | 5 | function Collaboration() { 6 | return ( 7 |
8 | 9 |
10 |

Contact Us

{" "} 11 |
12 |
13 |
14 |

Any queries, feel free to Contact Us...!

{" "} 15 |

16 | {" "} 17 | logo{" "} 18 |

{" "} 19 |
{" "} 20 |
21 | 25 | 30 | 35 | 41 | 47 |
{" "} 48 |
{" "} 49 |
50 |
51 |
52 | {" "} 53 | 54 |
{" "} 55 |
56 | 57 |
{" "} 58 |
{" "} 59 |
60 |
61 | 62 |
{" "} 63 |
64 | 65 |
{" "} 66 |
{" "} 67 |
68 |
69 | {" "} 70 |
{" "} 71 |
{" "} 72 | {" "} 76 |
{" "} 77 |
{" "} 78 |
{" "} 79 |
80 | ); 81 | } 82 | 83 | export default Collaboration; 84 | -------------------------------------------------------------------------------- /src/components/utilities/hackCard.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 4 | "heading": "Bohat hard 🤘", 5 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 6 | "cat": "past", 7 | "category": "webdev", 8 | "timing": "12thAug,5:00pm" 9 | }, 10 | { 11 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 12 | "heading": "Bohat hard 🤘", 13 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 14 | "cat": "past", 15 | "category": "webdev", 16 | "timing": "12thAug,5:00pm" 17 | }, 18 | { 19 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 20 | "heading": "Bohat hard 🤘", 21 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 22 | "cat": "ongoing", 23 | "category": "webdev", 24 | "timing": "12thAug,5:00pm" 25 | }, 26 | { 27 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 28 | "heading": "Bohat hard 🤘", 29 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 30 | "cat": "upcoming", 31 | "category": "webdev", 32 | "timing": "12thAug,5:00pm" 33 | }, 34 | { 35 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 36 | "heading": "Bohat hard 🤘", 37 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 38 | "cat": "upcoming", 39 | "category": "webdev", 40 | "timing": "12thAug,5:00pm" 41 | }, 42 | { 43 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 44 | "heading": "Bohat hard 🤘", 45 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 46 | "cat": "upcoming", 47 | "category": "webdev", 48 | "timing": "12thAug,5:00pm" 49 | }, 50 | { 51 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 52 | "heading": "Bohat hard 🤘", 53 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 54 | "cat": "upcoming", 55 | "category": "webdev", 56 | "timing": "12thAug,5:00pm" 57 | }, 58 | { 59 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 60 | "heading": "Bohat hard 🤘", 61 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 62 | "cat": "upcoming", 63 | "category": "webdev", 64 | "timing": "12thAug,5:00pm" 65 | }, 66 | { 67 | "img": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 68 | "heading": "Bohat hard 🤘", 69 | "para": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident deserunt magni minima reiciendis aut non dolores deleniti recusandae reprehenderit accusamus.", 70 | "cat": "upcoming", 71 | "category": "webdev", 72 | "timing": "12thAug,5:00pm" 73 | } 74 | ] 75 | -------------------------------------------------------------------------------- /src/components/layout/customnavbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import "../styles/customnav.css"; 3 | import logo from "../../assets/logo.png"; 4 | import { Navbar } from "react-bootstrap"; 5 | import { NavLink, Link } from "react-router-dom"; 6 | import { HiOutlineViewList } from "react-icons/hi"; 7 | import HomeIcon from "@mui/icons-material/Home"; 8 | import GroupAddIcon from "@mui/icons-material/GroupAdd"; 9 | import CodeIcon from "@mui/icons-material/Code"; 10 | import EventIcon from "@mui/icons-material/Event"; 11 | import LaptopIcon from "@mui/icons-material/Laptop"; 12 | 13 | const Customnav = (props) => { 14 | const [showLinks, setShowLinks] = useState(false); 15 | 16 | function useWindowSize() { 17 | const [windowSize, setWindowSize] = useState({ 18 | width: undefined, 19 | height: undefined, 20 | }); 21 | 22 | useEffect(() => { 23 | // Handler to call on window resize 24 | function handleResize() { 25 | // Set window width/height to state 26 | setWindowSize({ 27 | width: window.innerWidth, 28 | height: window.innerHeight, 29 | }); 30 | } 31 | 32 | window.addEventListener("resize", handleResize); 33 | handleResize(); 34 | 35 | return () => window.removeEventListener("resize", handleResize); 36 | }, []); 37 | 38 | return windowSize; 39 | } 40 | 41 | const size = useWindowSize(); 42 | 43 | return ( 44 |
45 |
46 | 49 |
50 | 51 | logo 52 | 53 | setShowLinks(!showLinks)} 58 | /> 59 |
60 | 110 | 111 |
112 |
113 | ); 114 | }; 115 | 116 | export default Customnav; 117 | -------------------------------------------------------------------------------- /src/components/styles/Home.css: -------------------------------------------------------------------------------- 1 | .Home, .parent,.home__team { 2 | background-position: center; 3 | background-repeat: no-repeat; 4 | background-size: 100% 100%; 5 | width: 100%; 6 | height: 100%; 7 | background-repeat: no-repeat; 8 | } 9 | .Home{ 10 | background-image: url("../../assets/Blank\ Backgrounds\ 1.png"); 11 | } 12 | .parent { 13 | display: flex; 14 | justify-content: space-around; 15 | align-items: center; 16 | box-sizing: border-box; 17 | padding: 15vh 5vh 15vh 5vh; 18 | } 19 | .daughter img { 20 | width: 735px; 21 | } 22 | .son__Para{ 23 | color: #663F3F; 24 | ; 25 | } 26 | .son__Para h3{ 27 | font-size: 40px !important; 28 | font-weight:bold; 29 | font-family: "Arial"; 30 | } 31 | .son__Para h3 span{ 32 | color: #A45D5D; 33 | font-family: "Raleway"; 34 | font-size: 80px; 35 | } 36 | .home__about{ 37 | background-color: #FFC069; 38 | width: 100%; 39 | color: #fff; 40 | padding: 2.3rem 4rem; 41 | } 42 | .home__aboutInfo{ 43 | display: flex; 44 | justify-content: center; 45 | flex-direction: column; 46 | align-items: center; 47 | margin-bottom: 4rem; 48 | } 49 | .home__aboutInfo h3{ 50 | font-size: 40px; 51 | } 52 | .home__aboutInfo h3 span{ 53 | color: #4A403A; 54 | } 55 | .home__aboutInfo p{ 56 | font-size: 20px; 57 | width: 1000px; 58 | margin: auto; 59 | text-align: center; 60 | margin-top: 1rem; 61 | } 62 | .home__aboutCards{ 63 | display: flex; 64 | justify-content: space-around; 65 | width: 1000px; 66 | margin:auto; 67 | flex-wrap: wrap; 68 | } 69 | .home__aboutCard1{ 70 | background-color: rgb(255, 255, 255); 71 | color: #000000; 72 | padding: 4px; 73 | cursor: pointer; 74 | transition: all 0.3s ease; 75 | border-radius: 5px; 76 | margin-top: 1rem; 77 | } 78 | .home__aboutCard1:hover{ 79 | transform: translateY(-6px); 80 | } 81 | .home__aboutCard1 > img{ 82 | width: 225px; 83 | height: 200px; 84 | border-radius: 5px; 85 | } 86 | .home__aboutCard1 > h5{ 87 | text-align: center; 88 | margin-top: 19px; 89 | margin-bottom: 19px; 90 | font-size: 1rem; 91 | text-transform: capitalize; 92 | font-weight: 600; 93 | } 94 | .home__team{ 95 | background-image: url('../../assets/Blank\ Backround\ 5.png'); 96 | 97 | background-color: #663F3F; 98 | padding: 3rem 4rem; 99 | } 100 | .home__team h3{ 101 | text-align: center; 102 | margin-bottom: 2rem; 103 | color: white; 104 | font-size: 40px; 105 | } 106 | .home__team h3 span{ 107 | color: #FFC069; 108 | } 109 | .home__teamCards{ 110 | display: flex; 111 | width: 1020px; 112 | margin: auto; 113 | flex-wrap: wrap; 114 | justify-content: center; 115 | } 116 | .home__teamCardsContributor{ 117 | margin-top: 4rem; 118 | width: 1020px; 119 | margin: auto; 120 | } 121 | .home__teamCardsContributor h3{ 122 | text-align: left; 123 | font-size: 30px; 124 | margin-top: 4rem; 125 | } 126 | @media (max-width: 1612px) { 127 | .son__Para h3{ 128 | font-size: 50px; 129 | } 130 | } 131 | 132 | @media (max-width: 1358px) { 133 | .daughter img { 134 | width: 600px; 135 | } 136 | } 137 | 138 | @media (max-width: 1098px) { 139 | .daughter img { 140 | width: 500px; 141 | } 142 | .son__Para h3{ 143 | font-size: 35px; 144 | } 145 | .home__aboutInfo p,.home__aboutCards,.home__teamCards,.home__teamCardsContributor{ 146 | width: auto; 147 | } 148 | .home__teamCardsContributor h3{ 149 | text-align: center; 150 | } 151 | } 152 | 153 | @media (max-width: 920px) { 154 | .daughter { 155 | text-align:center; 156 | max-width: none !important; 157 | padding-top: 5vh; 158 | } 159 | .parent { 160 | display: block; 161 | padding-top: 5.2vh; 162 | } 163 | .son { 164 | max-width: none !important; 165 | text-align: center !important; 166 | } 167 | .son__Para h3 span{ 168 | color: #fff; 169 | } 170 | } 171 | 172 | @media (max-width: 650px) { 173 | .daughter img { 174 | width: 400px; 175 | } 176 | } 177 | @media (max-width: 550px) { 178 | .daughter img { 179 | width: 320px; 180 | } 181 | } 182 | @media (max-width: 468px) { 183 | .daughter img { 184 | width: 280px; 185 | } 186 | .home__aboutInfo p{ 187 | font-size: medium; 188 | } 189 | } 190 | @media (max-width: 430px) { 191 | .daughter img { 192 | width: 220px; 193 | } 194 | } 195 | @media (max-width: 430px) { 196 | .daughter img { 197 | width: 150px; 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /src/components/pages/event.js: -------------------------------------------------------------------------------- 1 | import "../styles/event.css"; 2 | import { useState } from "react"; 3 | import image from "../../assets/calender.png"; 4 | import team from "../../assets/team.jpg"; 5 | import { BsCalendar } from "react-icons/bs"; 6 | import { GoSearch } from "react-icons/go"; 7 | import Card from "../utilities/Card"; 8 | import jsonData from "../utilities/cardData.json"; 9 | import ReactPaginate from "react-paginate"; 10 | 11 | const Events = () => { 12 | const [searchValue, setSearchValue] = useState(""); 13 | const [card] = useState(jsonData); 14 | const [page, setPage] = useState(0); 15 | const cardperpage = 5; 16 | const pageVisited = page * cardperpage; 17 | 18 | const displayCard = card 19 | .filter((item) => { 20 | if (searchValue === "") { 21 | return item; 22 | } else if ( 23 | item.title.toLowerCase().includes(searchValue.toLowerCase()) || 24 | item.category.toLowerCase().includes(searchValue.toLowerCase()) 25 | ) { 26 | return item; 27 | } 28 | return console.log("card success"); 29 | }) 30 | .slice(pageVisited, pageVisited + cardperpage) 31 | .map((item) => { 32 | return ( 33 | 42 | ); 43 | }); 44 | const pageCount = Math.ceil(card.length / cardperpage); 45 | const changePage = ({ selected }) => { 46 | setPage(selected); 47 | }; 48 | 49 | return ( 50 |
51 |
52 |
53 |
54 | thumbnail 55 |
56 | 59 |

Heading of the event

60 |

61 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut 62 | suscipit temporibus, eaque qui corrupti corporis{" "} 63 |

64 | 65 |
66 | 67 |
68 |

Date: 21stJan,2021

69 |

Time: 4:00pm - 5:00pm

70 |
71 |
72 |
73 |
74 |
75 |
76 | png 77 |
78 |
79 |

80 | Codeflow believes that the best learning curve for any great 81 | lesson is achieved by
Learning-By-Doing technique.
82 | Therefore we 83 | organise various events to cultivate basic learning spirit in 84 | students 85 |

86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 | setSearchValue(e.target.value)} 99 | /> 100 |
101 |
{displayCard}
102 | 112 |
113 |
114 |
115 | ); 116 | }; 117 | 118 | export default Events; 119 | -------------------------------------------------------------------------------- /src/components/styles/contact.css: -------------------------------------------------------------------------------- 1 | .contact { 2 | height: auto; 3 | } 4 | 5 | .contact__Packet { 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | align-items: center; 10 | padding: 5rem 5rem; 11 | position: relative; 12 | width: 100%; 13 | position: relative; 14 | } 15 | 16 | .contact__Packet::after { 17 | position: absolute; 18 | content: ''; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | bottom: 0; 23 | width: 100%; 24 | background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); 25 | background-size: cover; 26 | z-index: -1; 27 | } 28 | 29 | .contact__Packet h1 { 30 | margin: 0.8rem 0; 31 | font-weight: bold; 32 | color: #663F3F; 33 | } 34 | 35 | .contact__container { 36 | display: flex; 37 | padding: 10px; 38 | border-radius: 15px; 39 | height: auto; 40 | backdrop-filter: blur(7px); 41 | background-color: #4A403A; 42 | border: 1px solid rgba(226, 225, 225, 0.568); 43 | box-shadow: -10px 9px 12px 0px rgba(0, 0, 0, 0.75); 44 | -webkit-box-shadow: -10px 9px 12px 0px rgba(0, 0, 0, 0.75); 45 | -moz-box-shadow: -10px 9px 12px 0px rgba(0, 0, 0, 0.75); 46 | } 47 | 48 | .contactContainer__left { 49 | color: #4A403A; 50 | background-color: #EFEFEF; 51 | flex: 0 1 40%; 52 | padding: 30px; 53 | border-radius: 10px; 54 | display: flex; 55 | flex-direction: column; 56 | justify-content: space-between; 57 | } 58 | 59 | .contactContainer__left h4 { 60 | font-size: 2rem; 61 | font-weight: 700; 62 | } 63 | 64 | .contactContainer__left p { 65 | font-size: 0.9rem; 66 | font-weight: 400; 67 | } 68 | 69 | .contactContainer__leftIcon { 70 | padding: 0 0.4rem !important; 71 | } 72 | 73 | .contact__icon { 74 | color: #fafafa; 75 | } 76 | 77 | .id { 78 | margin: 10px 80px 10px 12px; 79 | } 80 | 81 | .id1 { 82 | margin: 10px -30px 10px -69px; 83 | } 84 | 85 | .id3 { 86 | margin: -90px 10px -91px 42px; 87 | } 88 | 89 | .id2 { 90 | margin: 5px -100px 5px 5px; 91 | } 92 | 93 | form { 94 | padding: 25px; 95 | width: 80%; 96 | } 97 | 98 | .form__first { 99 | display: flex; 100 | flex: 0 0 100%; 101 | width: 100%; 102 | background-color: #4A403A; 103 | } 104 | 105 | .form__first-group { 106 | display: flex; 107 | flex-direction: column; 108 | padding-right: 40px; 109 | flex: 0 1 100%; 110 | margin-bottom: 20px; 111 | } 112 | 113 | .form__first-group label { 114 | font-size: 1rem; 115 | font-weight: 500; 116 | color: #FFFFFF; 117 | } 118 | 119 | .form__first-group input, 120 | .form__first-group textarea { 121 | background: transparent; 122 | border: none; 123 | padding: 8px; 124 | border-bottom: 2px solid rgba(124, 122, 122, 0.493); 125 | outline: none; 126 | font-size: 1rem; 127 | font-weight: 400; 128 | cursor: pointer; 129 | color: #FFFFFF; 130 | transition: all 0.4s ease; 131 | } 132 | 133 | .form__first-group input:hover { 134 | border-bottom: 2px solid #FFC069; 135 | } 136 | 137 | .form__first-group textarea:hover { 138 | border-bottom: 2px solid #FFC069; 139 | } 140 | 141 | .form__first-group input:focus { 142 | border-bottom: 2px solid #FFC069; 143 | } 144 | 145 | .form__first-group textarea:focus { 146 | border-bottom: 2px solid #FFC069; 147 | } 148 | 149 | .form__first-group p { 150 | color: red; 151 | margin-bottom: 0; 152 | } 153 | 154 | .form__btn { 155 | background-color: #FFC069; 156 | color: white; 157 | padding: 6px 30px; 158 | font-size: 1rem; 159 | font-weight: 600; 160 | border: none; 161 | outline: none; 162 | margin-left: auto; 163 | transition: all 0.3s ease; 164 | } 165 | 166 | .form__btn:hover { 167 | transform: scale(1.05); 168 | } 169 | 170 | @media(max-width:900px) { 171 | .contactContainer__leftIcon { 172 | padding: 0 0.3rem !important; 173 | } 174 | } 175 | 176 | @media(max-width:760px) { 177 | .contact__container { 178 | flex-direction: column; 179 | } 180 | } 181 | 182 | @media(max-width:550px) { 183 | .form__first { 184 | flex-direction: column; 185 | } 186 | .contact__container { 187 | width: 350px; 188 | } 189 | form { 190 | width: 100%; 191 | padding: 20px 5px; 192 | } 193 | .contact__Packet h1 { 194 | font-size: 2rem; 195 | } 196 | .contact__Packet::after { 197 | background-position: center; 198 | } 199 | } -------------------------------------------------------------------------------- /src/components/pages/addevent.js: -------------------------------------------------------------------------------- 1 | import { React, useState, useEffect, useRef } from "react"; 2 | import "../styles/App.css"; 3 | import Customnav from "../layout/customnavbar"; 4 | import { Form, Alert, Button } from "react-bootstrap"; 5 | import ProBar from "../utilities/progressbar"; 6 | 7 | const Addevent = () => { 8 | const selectedFileRef = useRef(); 9 | 10 | const [error, setError] = useState(null); 11 | const [file, setFile] = useState(null); 12 | const [preview, setPreview] = useState(null); 13 | const [fieldData, setFieldData] = useState({ 14 | selectedfile: null, 15 | heading: '', 16 | description: '', 17 | }); 18 | 19 | const handleSelectedFile = (event) => { 20 | const types = ["image/png", "image/jpeg", "image/jpg"]; 21 | let selected = event.target.files[0]; 22 | 23 | if (selected && types.includes(selected.type)) { 24 | setFieldData((prev) => ({ 25 | ...prev, 26 | selectedfile: selected, 27 | })); 28 | } else { 29 | setError("Please select image of type (png, jpg, jpeg)"); 30 | } 31 | }; 32 | 33 | const handleChangeFields = (event) => { 34 | setFieldData((prev) => ({ 35 | ...prev, 36 | [event.target.name]: event.target.value, 37 | })); 38 | } 39 | 40 | const handleSubmit = (event) => { 41 | event.preventDefault(); 42 | 43 | if (!fieldData.selectedfile) { 44 | return setError("Please select image "); 45 | } 46 | 47 | setFile(fieldData.selectedfile); 48 | // empty the field after the form is submitted 49 | selectedFileRef.current.value = ''; 50 | setFieldData((prev) => ({ 51 | ...prev, 52 | heading: '', description: '', 53 | })); 54 | 55 | setError(null); 56 | }; 57 | 58 | useEffect(() => { 59 | if (!fieldData.selectedfile) { 60 | return setPreview(null); 61 | } 62 | 63 | const objectUrl = URL.createObjectURL(fieldData.selectedfile); 64 | setPreview(objectUrl); 65 | // free memory when ever this component is unmounted 66 | return () => URL.revokeObjectURL(objectUrl); 67 | }, [fieldData.selectedfile]); 68 | 69 | return ( 70 |
71 | 72 |
73 |
74 |
75 |
76 | {error && ( 77 | {error} 78 | )} 79 |
80 |
81 | 82 | Heading 83 | 90 | 91 | 92 | 93 | 100 | 101 | 102 | 103 | Description: 104 | 111 | 112 | 113 |
114 |
115 |
116 |
117 | {fieldData.selectedfile && ( 118 | not available 119 | )} 120 | {file && ( 121 | 126 | )} 127 |
128 |
129 |
130 |
131 |
132 | ); 133 | }; 134 | 135 | export default Addevent; 136 | -------------------------------------------------------------------------------- /src/components/utilities/SocialLinks.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | const Card = () => { 5 | return ( 6 | 7 | 8 | Connect on Social Media 9 | 10 |
11 | 12 | 13 |
14 | not available 15 | 16 | 17 | Codeflow 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 |
26 | not available 27 | 28 | 33 | Codeflow 34 | 35 | 36 |
37 | 38 | 39 | 40 | 41 |
42 | not available 43 | 44 | 48 | Codeflow 49 | 50 | 51 |
52 | 53 | 54 | 55 | 56 |
57 | not available 58 | 59 | Codeflow 60 | 61 |
62 | 63 | 64 | 65 | 66 |
67 | not available 68 | 69 | Codeflow 70 | 71 |
72 | 73 | 74 |
75 | 76 | 77 | ) 78 | } 79 | const ContactStyle = styled.div` 80 | padding: 0.5rem 10rem; 81 | color: #353535; 82 | min-height: 90vh; 83 | 84 | `; 85 | 86 | const Hide = styled.div` 87 | overflow: hidden; 88 | display: flex; 89 | justify-content: center; 90 | `; 91 | 92 | const Social = styled.div` 93 | display: flex; 94 | align-items: center; 95 | 96 | 97 | h2 { 98 | margin: 2rem; 99 | text-decoration: none; 100 | } 101 | img{ 102 | width: 8vh; 103 | 104 | } 105 | a{ 106 | text-decoration: none; 107 | color: #333; 108 | } 109 | .social-btn { 110 | cursor: pointer; 111 | height: 50px; 112 | width: 50px; 113 | font-family: 'Titillium Web', sans-serif; 114 | color: #333; 115 | border-radius: 10px; 116 | box-shadow: 0px 10px 10px rgba(0,0,0,0.1); 117 | background: white; 118 | margin: 5px; 119 | transition: 1s; 120 | 121 | } 122 | .flex-center { 123 | display: flex; 124 | justify-content: center; 125 | align-items: center; 126 | } 127 | .social-btn span { 128 | width: 0px; 129 | overflow: hidden; 130 | transition: 1s; 131 | text-align: center; 132 | } 133 | .social-btn:hover { 134 | width: 150px; 135 | border-radius: 5px; 136 | } 137 | .social-btn:hover span { 138 | padding: 2px; 139 | width: max-content; 140 | } 141 | #linkedin svg { 142 | fill: #0e76a8; 143 | } 144 | #github { 145 | fill: #333; 146 | } 147 | `; 148 | export default Card; -------------------------------------------------------------------------------- /src/components/styles/event.css: -------------------------------------------------------------------------------- 1 | .event__home1 { 2 | background-position: center; 3 | background-repeat: no-repeat; 4 | background-size: 100% 100%; 5 | width: 100%; 6 | height: auto; 7 | background-position: center; 8 | background-repeat: no-repeat; 9 | background-image: url("../../assets/Blank\ Backround\ 4.png"); 10 | /* overflow: hidden; */ 11 | } 12 | .events__home2{ 13 | background-position: center; 14 | background-repeat: no-repeat; 15 | background-size: 100% 100%; 16 | width: 100%; 17 | height: auto; 18 | background-position: center; 19 | background-repeat: no-repeat; 20 | background-color: #4A403A; 21 | /* background-image: url("../../assets/Blank\ Backgrounds\ 1.png"); */ 22 | } 23 | .events__cardOutline { 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | flex-direction: column; 28 | } 29 | .events__upcomingCard { 30 | background: linear-gradient(to right, #663F3F, #2b304670, #17212c9c); 31 | display: flex; 32 | padding: 20px; 33 | width: 800px; 34 | color: #fff; 35 | margin-top: 4rem; 36 | position: relative; 37 | } 38 | .events__upcomingCard img { 39 | width: 350px; 40 | height: 250px; 41 | border-radius: 20px; 42 | } 43 | .events__upcomingCardinfo { 44 | display: flex; 45 | flex-direction: column; 46 | margin-left: 5px; 47 | } 48 | .events__upcomingCardinfo h2 { 49 | font-size: 1.4rem; 50 | margin-top: 25px; 51 | } 52 | .events__upcomingCardinfo p { 53 | margin-top: 15px; 54 | font-size: small; 55 | padding-right: 3rem; 56 | } 57 | .events__upcomingCard-btn1 { 58 | width: fit-content; 59 | margin-left: auto; 60 | position: absolute; 61 | top: -20px; 62 | right: 10px; 63 | border: none; 64 | border-radius: 25px; 65 | background-color: #A45D5D; 66 | color: #fff; 67 | font-size: medium; 68 | outline: none; 69 | padding: 8px 40px; 70 | } 71 | .events__upcomingCard-btn2 { 72 | width: fit-content; 73 | margin-left: auto; 74 | margin-top: 25px; 75 | border: none; 76 | border-radius: 25px; 77 | background-color: #ff8736; 78 | color: #fff; 79 | font-size: medium; 80 | outline: none; 81 | padding: 2px 20px; 82 | } 83 | .events__upcomingCardTiming { 84 | display: flex; 85 | align-items: center; 86 | justify-content: center; 87 | } 88 | .events__upcomingCardTiming p { 89 | margin: 0; 90 | font-size: x-small; 91 | margin: 4px 15px; 92 | font-weight: bold; 93 | } 94 | .events__upcomingCardIcon { 95 | width: 50px; 96 | height: 50px; 97 | color: black; 98 | } 99 | .event__info{ 100 | display: flex; 101 | align-items: center; 102 | width : 880px; 103 | margin: auto; 104 | margin-top: 3rem; 105 | overflow: hidden; 106 | } 107 | .event__infoSvg img{ 108 | width: 350px; 109 | height: 350px; 110 | margin-bottom: 10px; 111 | } 112 | .event__infoText{ 113 | text-align: center; 114 | color: #000; 115 | } 116 | .event__infoText h3{ 117 | font-size: 1.35rem; 118 | } 119 | .event__infoText p{ 120 | font-size: 1.1rem; 121 | } 122 | .event__home2Container{ 123 | padding: 1rem; 124 | display: flex; 125 | justify-content: center; 126 | align-items: center; 127 | flex-direction: column; 128 | } 129 | .events__search{ 130 | display: flex; 131 | align-items: center; 132 | height: 40px; 133 | background-color: #fff; 134 | padding: 15px 10px; 135 | width: 500px; 136 | margin-top: 4rem; 137 | } 138 | .events__searchIcon{ 139 | color: #12232E; 140 | } 141 | .events__search > input { 142 | flex: 1; 143 | padding: 5px 20px; 144 | font-size:1.1rem; 145 | border: none; 146 | } 147 | .events__search > input:focus { 148 | outline-width: 0; 149 | } 150 | .events__cards{ 151 | display: flex; 152 | padding-top: 2rem; 153 | flex-wrap: wrap; 154 | justify-content: center; 155 | max-width: 1200px; 156 | } 157 | .paginateBtn{ 158 | list-style: none; 159 | display: flex; 160 | padding: 10px; 161 | } 162 | .paginateBtn a{ 163 | padding: 10px; 164 | margin: 2px; 165 | border: 1px solid #FFC069; 166 | cursor: pointer; 167 | color: black; 168 | background-color: white; 169 | text-decoration: none !important; 170 | } 171 | .paginateBtn a:hover{ 172 | background-color: #FFC069; 173 | color: white; 174 | } 175 | 176 | 177 | /* media queries */ 178 | @media (max-width: 800px) { 179 | .events__upcomingCard { 180 | width: 700px; 181 | } 182 | .event__info{ 183 | width: 760px; 184 | } 185 | } 186 | @media (max-width: 750px) { 187 | /* .events{ 188 | height: auto; 189 | } */ 190 | .events__upcomingCard { 191 | flex-direction: column; 192 | width: auto; 193 | } 194 | .events__upcomingCard img { 195 | width: 400px; 196 | margin: auto; 197 | height: 250px; 198 | } 199 | .events__upcomingCardTiming { 200 | justify-content: flex-start; 201 | } 202 | .events__upcomingCard-btn1 { 203 | padding: 6px 40px; 204 | top: -25px; 205 | } 206 | .event__info{ 207 | flex-direction: column; 208 | width: auto; 209 | } 210 | 211 | } 212 | @media(max-width: 500px){ 213 | .events__upcomingCard img { 214 | width: 300px; 215 | } 216 | .events__search{ 217 | width: 350px; 218 | } 219 | .events__search > input{ 220 | padding: 5px 5px; 221 | font-size: 1rem; 222 | } 223 | .event__home1,.event__home1{ 224 | background-size: cover; 225 | } 226 | } -------------------------------------------------------------------------------- /src/components/utilities/cardData.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 4 | "title": "Web Development", 5 | "category": "webdev", 6 | "date": "21stJan,2021", 7 | "time": "4:00pm - 5:00pm", 8 | "btn": "Register Now", 9 | "info": "hello there this is a dummy description for the card we are using in event" 10 | }, 11 | { 12 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 13 | "title": "App Dev", 14 | "category": "category", 15 | "date": "21stJan,2021", 16 | "time": "4:00pm - 5:00pm", 17 | "btn": "Register Now", 18 | "info": "hello there this is a dummy description for the card we are using in event" 19 | }, 20 | { 21 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 22 | "title": "App Dev", 23 | "category": "category", 24 | "date": "21stJan,2021", 25 | "time": "4:00pm - 5:00pm", 26 | "btn": "Register Now", 27 | "info": "hello there this is a dummy description for the card we are using in event" 28 | }, 29 | { 30 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 31 | "title": "App Dev", 32 | "category": "category", 33 | "date": "21stJan,2021", 34 | "time": "4:00pm - 5:00pm", 35 | "btn": "Register Now", 36 | "info": "hello there this is a dummy description for the card we are using in event" 37 | }, 38 | { 39 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 40 | "title": "App Dev", 41 | "category": "category", 42 | "date": "21stJan,2021", 43 | "time": "4:00pm - 5:00pm", 44 | "btn": "Register Now", 45 | "info": "hello there this is a dummy description for the card we are using in event" 46 | }, 47 | { 48 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 49 | "title": "App Dev", 50 | "category": "category", 51 | "date": "21stJan,2021", 52 | "time": "4:00pm - 5:00pm", 53 | "btn": "Register Now", 54 | "info": "hello there this is a dummy description for the card we are using in event" 55 | }, 56 | { 57 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 58 | "title": "Machine Learning", 59 | "category": "category", 60 | "date": "21stJan,2021", 61 | "time": "4:00pm - 5:00pm", 62 | "btn": "Register Now", 63 | "info": "hello there this is a dummy description for the card we are using in event" 64 | }, 65 | { 66 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 67 | "title": "Big Data", 68 | "category": "category", 69 | "date": "21stJan,2021", 70 | "time": "4:00pm - 5:00pm", 71 | "btn": "Register Now", 72 | "info": "hello there this is a dummy description for the card we are using in event" 73 | }, 74 | { 75 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 76 | "title": "AI", 77 | "category": "category", 78 | "date": "21stJan,2021", 79 | "time": "4:00pm - 5:00pm", 80 | "btn": "Register Now", 81 | "info": "hello there this is a dummy description for the card we are using in event" 82 | }, 83 | { 84 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 85 | "title": "AI", 86 | "category": "category", 87 | "date": "21stJan,2021", 88 | "time": "4:00pm - 5:00pm", 89 | "btn": "Register Now", 90 | "info": "hello there this is a dummy description for the card we are using in event" 91 | }, 92 | { 93 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 94 | "title": "AI", 95 | "category": "category", 96 | "date": "21stJan,2021", 97 | "time": "4:00pm - 5:00pm", 98 | "btn": "Register Now", 99 | "info": "hello there this is a dummy description for the card we are using in event" 100 | }, 101 | { 102 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 103 | "title": "AI", 104 | "category": "category", 105 | "date": "21stJan,2021", 106 | "time": "4:00pm - 5:00pm", 107 | "btn": "Register Now", 108 | "info": "hello there this is a dummy description for the card we are using in event" 109 | }, 110 | { 111 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 112 | "title": "AI", 113 | "category": "category", 114 | "date": "21stJan,2021", 115 | "time": "4:00pm - 5:00pm", 116 | "btn": "Register Now", 117 | "info": "hello there this is a dummy description for the card we are using in event" 118 | }, 119 | { 120 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 121 | "title": "AI", 122 | "category": "category", 123 | "date": "21stJan,2021", 124 | "time": "4:00pm - 5:00pm", 125 | "btn": "Register Now", 126 | "info": "hello there this is a dummy description for the card we are using in event" 127 | }, 128 | { 129 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 130 | "title": "AI", 131 | "category": "category", 132 | "date": "21stJan,2021", 133 | "time": "4:00pm - 5:00pm", 134 | "btn": "Register Now", 135 | "info": "hello there this is a dummy description for the card we are using in event" 136 | }, 137 | { 138 | "image": "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", 139 | "title": "Social Media", 140 | "category": "category", 141 | "date": "21stJan,2021", 142 | "time": "4:00pm - 5:00pm", 143 | "btn": "Register Now", 144 | "info": "hello there this is a dummy description for the card we are using in event" 145 | } 146 | 147 | ] -------------------------------------------------------------------------------- /src/components/pages/home.js: -------------------------------------------------------------------------------- 1 | import "../styles/Home.css"; 2 | import img1 from "../../assets/img1.png"; 3 | // import Customnav from "../layout/customnavbar"; 4 | import team from "../../assets/team.jpg"; 5 | import youtube from "../../assets/youtube.png"; 6 | import opensource from "../../assets/opensource.jpg"; 7 | import TeamCard from "../utilities/TeamCard"; 8 | import Testimonials from "../utilities/Testimonials"; 9 | import React, { useEffect, useState } from "react"; 10 | import axios from "axios"; 11 | 12 | function Home() { 13 | const [contributors, setContributors] = useState(""); 14 | useEffect(() => { 15 | axios 16 | .get( 17 | "https://api.github.com/repos/codeflow201/codeflow/contributors?q=contributions&order=desc" 18 | ) 19 | .then((response) => { 20 | setContributors(response); 21 | // console.log(response.data[0].avatar_url); 22 | // console.log(response.data[0].login); 23 | // console.log(response.data); 24 | }); 25 | }); 26 | 27 | return ( 28 | <> 29 |
30 |
31 |
32 |
33 |

34 | Codeflow 35 |

36 |

Learning must go on!

37 |

38 | Codeflow is an organisatiom whose main motive is to empower 39 | student community by organising webinars, hackathons and open 40 | source events 41 |

42 |
43 |
44 |
45 | loading 46 |
47 |
48 |
49 |
50 |
51 |

52 | About Us 53 |

54 |

55 | An initiative to contribute to the Student community by providing 56 | opportunities, resources, and awareness about the possibilities in 57 | the field of software to students & professionals. 58 |

59 |
60 |
61 |
62 |
63 | thumbnail 64 |
OpenSource
65 |
66 |
67 | thumbnail 68 |
Community building
69 |
70 |
71 | thumbnail 72 |
Events and Workshops
73 |
74 |
75 |
76 |
77 | 78 | 79 |
80 |

81 | Core Team 82 |

83 |
84 | 85 | 90 | 91 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |
113 |
114 |

115 | Top Contributors 116 |

117 |
118 | {contributors ? ( 119 | 120 | 124 | 128 | 132 | 136 | 140 | 144 | 145 | ) : ( 146 | `` 147 | )} 148 |
149 |
150 |
151 | 152 | ); 153 | } 154 | 155 | export default Home; 156 | --------------------------------------------------------------------------------