made changes in club.json

src/App.js

@@ -31,7 +31,10 @@ function App() {
     loader: () => import("./pages/home/index"),
     loading: () => loading,
   });
-
+  const WebDevClub = Loadable({
+    loader: () => import("./pages/webDevClub/index"),
+    loading: () => loading,
+  })
   const About = Loadable({
     loader: () => import("./pages/about/index"),
     loading: () => loading,
@@ -289,6 +292,7 @@ function App() {
           path="/admission_fee_structure"
           component={AdmissionFeeStructure}
         />
+          <Route path="/webDevClub" component={WebDevClub} />
         <Route path="/admission_forms" component={AdmissionForms} />
         <Route path="/anti_ragging_committee" component={AntiRagging} />
         <Route path="/admission_contact" component={AdmissionContact} />

src/components/footer/index.js

@@ -84,10 +84,10 @@ const Footer = () => {
           <Temperature />
         </div>
         <div>
-          <p className="credits">
+          <a className="credits" href="webDevClub">
             &lt;/&gt; with <Icon id="favorite">favorite_border</Icon> by Web
             Dev-IIITT
-          </p>
+          </a>
         </div>
       </footer>
     </div>

src/components/footer/style.css

@@ -11,6 +11,10 @@ html {
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   border-top: 5px solid #256f46;
 }
+.navbar{
+  height: inherit !important;
+}
+
 
 .credits {
   background-color: #256f46;
@@ -24,6 +28,8 @@ html {
   justify-content: center;
   font-size: 1.2rem;
   border-top: 2px solid #050e09;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .main-div {
@@ -422,3 +428,9 @@ a {
     color: #ff4c4c;
   }
 }
+@media (max-width:800px) {
+  .container{
+    margin-top: 0px !important;
+    padding-top: 0px !important;
+  }
+}

src/json/clubs.json

@@ -294,6 +294,7 @@
         }
       ]
     },
+
     {
       "name": "Yoga Club",
       "motto": "Yoga",

src/pages/webDevClub/components/Alumini/AluminiCard.js

@@ -0,0 +1,56 @@
+import React,{useState} from 'react';
+import LinkedInIcon from "@material-ui/icons/LinkedIn";
+import GitHubIcon from "@material-ui/icons/GitHub";
+import LanguageIcon from '@material-ui/icons/Language';
+
+const AluminiCard = (props) => {
+
+  const [projectDetail, setProjectDetail] = useState('false');
+     const setHidden = () => {
+
+      if (document.body.style.overflow !== "hidden") {
+        setProjectDetail('true');
+        document.body.style.overflow = "hidden";
+
+      } else {
+        document.body.style.overflow = "scroll";
+        setProjectDetail(false);
+      }
+    };
+
+    return (
+      <div>
+      <div className="alumini_card" onClick={() =>  setHidden()}>
+              <div className="alumini_card_top">
+                 <img src={props.image} alt="profile" className="alumini_profile"></img>
+              </div>
+              <div className="alumini_card_bottomp">
+                <h3 className="alumini_name"> { props.name } </h3>
+              </div>
+         </div>
+         {projectDetail === 'true' && (props.number == '1' || props.number == '2' || props.number == '3' || props.number == '4' || props.number == '5')?(
+          <section className="project_detail_section">
+          <div className="project__detail">
+                <button className="close__button" onClick={() =>setHidden()}><img className="closed_img" src={require("../../media/closed.svg")}/></button>
+                <div className="project_detail__page">
+                  <img className="project_detail__page_image" src={props.image} alt="image"></img>
+                  <div className="project_detail__page_content" >
+                     <h1 className="project_detail__page_name alumini_utility" > {props.name} </h1>
+                     <p className="project_detail__page_description" > {props.about} </p>
+                     <p className="project_detail__page_tech" ><span className="utility__desgin utility__color_tech">skills</span>&nbsp;:&nbsp; <p className="contri">{props.skills} </p></p>
+                     <p className="project_detail__page_contibutors" ><span className="utility__desgin utility__color_con">timeline</span>&nbsp; : &nbsp; <p className="contri">{props.achievements}</p> </p>
+                     <div className="alumini_accounts">
+                       <a className="alumini_website alumini_icons"  href= { props.website} ><LanguageIcon style={{color:"#f05945",fontSize:"40px"}} /></a>
+                       <a className="alumini_icons" href= { props.linkdin} ><LinkedInIcon style={{color:"#0077b5",fontSize:"40px"}} /></a>
+                       <a className="alumini_icons" href= { props.github } ><GitHubIcon style={{color:"black",fontSize:"35px"}} /></a>
+                    </div>
+                  </div>                         
+                </div>
+            </div> 
+          </section>
+        ):null}
+        </div>
+    )
+}
+
+export default AluminiCard;

src/pages/webDevClub/components/Alumini/AluminiData.js

@@ -0,0 +1,13 @@
+export const AluminiData = [
+    {   
+        key:"1",
+        name:"Fahad Israr",
+        image:require("../../media/Fahad_israr.jfif"),
+        about:"I <3 Open Sorce.",
+        skills:"Java, QUARKUS, JBANG, PICOCLI, REACT-JS, NODE-JS, MYSQL, HTML, CSS, DRUPAL 8",
+        achievements:"GOOGLE SUMMER OF CODE with Redhat(jBoss), IIT BOMBAY (FOSSEE FELLOWSHIP ’19), LENSHOOD (Software Development Intern), IOTREK (Software Development Intern)",
+        website:"https://fahad-israr.github.io/profile/#aboutMe",
+        github:"https://github.com/fahad-israr",
+        linkdin:"https://www.linkedin.com/in/fahad00cms/",
+    }
+]

src/pages/webDevClub/components/ClubMembers/PersonCard.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import EmailIcon from "@material-ui/icons/Email";
+import LinkedInIcon from "@material-ui/icons/LinkedIn";
+import GitHubIcon from "@material-ui/icons/GitHub";
+import { MembersData } from "./PersonData";
+
+const PersonCard = () => {
+    return (
+         <div className="webdev__card_container-main">
+           {
+             MembersData.map(member => {
+               return (
+                <section className="webdev__card_container">
+                <div className="webdev__card_profile">
+                  <img className="webdev__card_image" src={ member.image }  />
+                  <h4 className="webdev__card_name"> { member.name } </h4>
+                  <h6 className="webdev__card_work"> { member.role } </h6>
+                  <p className="webdev__card_text"> { member.about } </p>
+                  <div className="webdev__card_links-container">
+                     <div className="webdev__card_links">
+                       <a className="webdev__card_twitter" href= { member.email} ><EmailIcon style={{color:"#fff"}} /></a>
+                       <a className="webdev__card_linkedin" href= { member.linkdin} ><LinkedInIcon style={{color:"#fff"}} /></a>
+                       <a className="webdev__card_git" href= { member.github } ><GitHubIcon style={{color:"#fff"}} /></a>
+                     </div>
+                  </div>
+                </div>
+              </section>
+               )
+             })
+           }
+         </div>
+    )
+}
+export default PersonCard;

src/pages/webDevClub/components/ClubMembers/PersonData.js

@@ -0,0 +1,26 @@
+export const MembersData = [
+    {  image: require("../../media/Dinesh_vikram.svg"),
+       name: "Dinesh Vikram V",
+       role: "Fourth Year",
+       about: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi",
+       email: "#",
+       linkdin: "https://www.linkedin.com/in/dinesh-vikram-venkatesh-8b1a2516b/",
+       github: "https://github.com/dinskid"
+    },
+     {  image: require("../../media/nitish_kumar.jpeg"),
+       name: "Nitish Kumar",
+       role: "Fourth Year",
+       about: "A problem-solver who started the journey long back. After gathering some experiences, I started exploring web development, where I learned enormous things, It’s been a great journey for me and, I’m still learning.",
+       email: "#",
+       linkdin: "https://www.linkedin.com/in/thisisnitish/",
+       github: "https://github.com/thisisnitish"
+    },
+    {  image: require("../../media/Mayank_sonkar.jpeg"),
+    name: "Mayank Sonkar",
+    role: "Third Year",
+    about: "I started coding to fossick distinct fields and opportunities but as I went intensively, I fell in love with the process. I enhanced my wealth of experience designing and developing a web application.",
+    email: "mailto:[email protected]",
+    linkdin: "https://www.linkedin.com/in/mayank-sonkar-17a8401b6/ ",
+    github: "https://github.com/mayank2021"
+   }
+]

src/pages/webDevClub/components/Projects/Projects.js

@@ -0,0 +1,47 @@
+import React,{useState} from 'react';
+import './style.css';
+
+const Projects = (props) => {
+    const [projectDetail, setProjectDetail] = useState('false');
+    const setHidden = () => {
+     if (document.body.style.overflow !== "hidden") {
+       setProjectDetail('true');
+       document.body.style.overflow = "hidden";
+
+     } else {
+       document.body.style.overflow = "scroll";
+       setProjectDetail(false);
+     }
+   };
+   const desc = props.description.slice(0,64);
+   const name = props.name.slice(0,18);
+    return (
+      <div>
+            <div className="project" onClick={() =>  setHidden() }>
+            <img className="project_image" src={props.image} alt="project_image" />
+            <h3 className="project__name">{name}...</h3>
+            <p className={props.status == "completed"?`utility__color_status_completed project__status utility__desgin`:props.status == "pending"?`utility__color_status_pending project__status utility__desgin`:`utility__color_status_working project__status utility__desgin`}>{props.status}</p>
+            <p className="project__description">{desc}...</p>
+          </div>
+          {projectDetail === 'true' && (props.number == '1' || props.number == '2' || props.number == '3' || props.number == '4' || props.number == '5' || props.number == '6' || props.number == '7' || props.number == '8' || props.number == '9' || props.number == '10')?(
+            <section className="project_detail_section">
+            <div className="project__detail">
+                  <button className="close__button" onClick={() =>setHidden()}><img className="closed_img" src={require("../../media/closed.svg")}/></button>
+                  <div className="project_detail__page">
+                    <img className="project_detail__page_image" src={props.image} alt="image"></img>
+                    <div className="project_detail__page_content" >
+                       <h1 className="project_detail__page_name" > {props.name} </h1>
+                       <span className={props.status == "completed"?`utility__color_status_completed project_detail__page_status utility__desgin`:props.status == "pending"?`utility__color_status_pending project_detail__page_status utility__desgin`:`utility__color_status_working project_detail__page_status utility__desgin`} > {props.status} </span>
+                       <p className="project_detail__page_description" > {props.description} </p>
+                       <p className="project_detail__page_tech" ><span className="utility__desgin utility__color_tech">Technologies</span>&nbsp;:&nbsp; <p className="contri" >{props.tech}</p> </p>
+                       <p className="project_detail__page_contibutors" ><span className="utility__desgin utility__color_con">Contributors</span>&nbsp;: &nbsp;<p className="contri"> {props.contributors}</p> </p>
+                    </div>                         
+                  </div>
+              </div> 
+            </section>
+          ):null}
+    </div>     
+    );
+};
+
+export default Projects;

src/pages/webDevClub/components/Projects/projectsData.js

@@ -0,0 +1,54 @@
+export const ProjectData = [
+    {   
+         key:"1",
+         name:"IIITT Website (old)",
+         image:require("../../media/old_site.png"),
+         status:"completed",
+         description:"The old website of IIIT Tiruchirappalli",
+         tech:"HTML, CSS, Bootstrap, Express(NodeJS)",
+         contributors:"fahad israr, mayank sonkar"
+    },
+    {   
+        key:"2", 
+        name:"IIITT Website",
+        image:require("../../media/current_site.png"),
+        status:"completed",
+        description:"The revamped website of IIIT Tiruchirappalli was built as a mobile-first, modern web app, we considered several things while building the site like, A better UI : With different views for mobile and desktop and features like Quick Links on Mobile Nav, Custom CMS : We've developed it in such a way that to update website content you need not modify the code. Now even the layman can update info, Open Source : Our code is free to use and any other educational institute can also use what we've developed, CI/CD : We've set up CI/CD with GitHub Actions with Triggers on both Push and Pull Request.",
+        tech:"HTML5, CSS3, ReactJS(JS)",
+        contributors:"Fahad Israr, Dinesh Vikram V, Nitish Kumar, mayank sonkar"
+    },
+   {
+    key:"3", 
+    name:"Training & Placement Cell",
+    image:require("../../media/t&p.jpg"),
+    status:"completed",
+    description:"Official website for the training and placement cell of IIIT Tiruchirappalli",
+    tech:"HTML5, CSS3, JS",
+    contributors:"Fahad Israr"
+ },{
+    key:"4", 
+    name:"IIITT Grades Portal",
+    image:require("../../media/grade_portal.jpg"),
+    status:"completed",
+    description:"The website where the results are published after each semester",
+    tech:"HTML5, CSS3, Javascript, Flask, CSV files",
+    contributors:"Dinesh Vikram V"
+  },
+  {
+     key:"5", 
+     name:"PHD Online Application",
+     image:require("../../media/phd.png"),
+     status:"completed",
+     description:"The web app used by applicants for the PhD program at IIIT Tiruchirappalli",
+     tech:"HTML5, CSS3, Javascript, Django(Python), MariaDB",
+     contributors:"Dinesh Vikram V"
+  },{
+   key:"6", 
+   name:"Convocation Web App's",
+   image:require("../../media/convo.png"),
+   status:"completed",
+   description:"utilities for convoaction liek registration form with multipart inputs",
+   tech:"HTML5, CSS3, Javascript, NOdeJS, MySQL",
+   contributors:"Fahad Israr, Mayank Sonkar"
+}
+]