added-awards-page

frontend/package.json

@@ -13,7 +13,7 @@
     "react-planet": "^1.0.1-ie11",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/components/People/awardCard.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+function ProjCard({data,title,awarded,profName,setSelectedProj, setDescription, selectedProj, index}) {
+    const cardClickHandler=()=>{
+        setSelectedProj(index);
+        setDescription(data);
+    }
+  return (
+    <div className={" ml-10 bg-[#D0E2DF] rounded-lg min-w-[20rem] h-[12rem] p-5 pr-0 relative z-[0] overflow-hidden "+((index==selectedProj)?(" drop-shadow-xl"):(" "))} onClick={cardClickHandler}>
+        <h1 className="absolute w-[75%] left-5 z-[2] font-[700]">{
+            title.length==120?title:title.substring(0,120)
+        }</h1>
+        <p className="italic absolute left-5 bottom-10 z-[2]">Awarded to{awarded}</p>
+        <h2 className="absolute left-5 bottom-5 z-[2]">{profName}</h2>
+    </div>
+  )
+}
+
+export default ProjCard

frontend/src/components/People/awardDescp.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+function projDescp({data, index, }) {
+	return(
+		<>
+			<div className='projectContainer'>
+				<span className='projectInfo'>
+					<div className='awardTitle'>
+						<b>Award Title: </b>{data.title}
+					</div>
+					<div className='awardedTo'>
+						<b>awarded to </b>{data.awarded}
+					</div>
+					<div className='profName'>
+						<b>Faculty Name: </b>{data.prof}
+					</div>
+				</span>
+			</div>
+		</>
+	);
+}
+
+export default projDescp;

frontend/src/components/navbar.jsx

@@ -9,25 +9,37 @@ export default function NavBar({logo, rel, bg=true}){
     const[isAcadClicked, setAcadClicked] = useState(false);
     const[isPeoplesClicked, setPeoplesClicked] = useState(false);
     const[isResearchClicked, setResearchClicked] = useState(false);
+    const[isAboutClicked, setAboutClicked] = useState(false);
+
     const leaveHandler=()=>{
         setResearchClicked(false);
         setPeoplesClicked(false);
         setAcadClicked(false); 
+        setAboutClicked(false);
+    }
+    const aboutClickHandler=()=>{
+        setResearchClicked(false);
+        setPeoplesClicked(false);
+        setAcadClicked(false);
+        setAboutClicked(true);
     }
     const acadClickHandler=()=>{
         setResearchClicked(false);
         setPeoplesClicked(false);
         setAcadClicked(true);
+        setAboutClicked(false);
     }
     const peepClickHandler=()=>{
         setAcadClicked(false);
         setResearchClicked(false);
         setPeoplesClicked(true);
+        setAboutClicked(false);
     }
     const resClickHandler=()=>{
         setAcadClicked(false);
         setPeoplesClicked(false);
         setResearchClicked(true);
+        setAboutClicked(false);
     }
 
     return(
@@ -46,8 +58,14 @@ export default function NavBar({logo, rel, bg=true}){
                     )
                 }
                 <div id='navbar' className='font-Archivo text-[#444343] my-20'>
-                    <Link className="w-[90%] text-center mx-5 hover:bg-[#f1f1f165] rounded-[0.5rem]" to='/'>ABOUT</Link>
-
+                    {/* <Link className="w-[90%] text-center mx-5 hover:bg-[#f1f1f165] rounded-[0.5rem]" to='/'>ABOUT</Link> */}
+                    <div className={isAboutClicked?"Selected w-[90%] text-center mx-5 hover:bg-[#f1f1f165] rounded-[0.5rem]" :" w-[90%] text-center mx-5"} onMouseOver={aboutClickHandler} onMouseOut={leaveHandler}>ABOUT
+                        {isAboutClicked&&<div hidden={true} className='SelectedContent'>
+                            <div  className='w-[80%] h-[0.1rem] bg-[#444343]'></div>
+                            <Link id="subHeading" to='/'>Home </Link>
+                            <Link id="subHeading" to='/Awards'>Awards</Link>
+                        </div>}
+                    </div>
                     <div className="navSep">|</div>
 
                     <div className={isAcadClicked?"Selected w-[90%] text-center mx-5 hover:bg-[#f1f1f165] rounded-[0.5rem]" :" w-[90%] text-center mx-5"} onMouseOver={acadClickHandler} onMouseOut={leaveHandler}>ACADEMICS
@@ -70,9 +88,6 @@ export default function NavBar({logo, rel, bg=true}){
                             <Link id="subHeading" to='/staff'>Staff</Link>
                             <Link id="subHeading" to='/PhdStudent'>PhD</Link>
                             <Link id="subHeading" to='/students'>Students</Link>
-
-
-
                         </div>}
                     </div>
 

frontend/src/data/awardsPageData.json

@@ -0,0 +1,27 @@
+[
+
+    {
+        "prof": "Dr. Jainendra Shukla",
+        "title": "Department Outstanding Researcher",
+        "awarded": "awarded to",
+        "image" : "Jainendra-removebg.png"
+    },
+    {
+        "prof": "Dr Rajiv Ratan Shah",
+        "title": "Winning Major Research Grants and Dept. Outstanding Researcher",
+        "awarded": "awarded to",
+        "image" : "Jainendra-removebg.png"
+    },
+    {
+        "prof": "Dr Richa Gupta",
+        "title": "Design and research contributions towards the empowerment of people with disabilities",
+        "awarded": "awarded to",
+        "image" : "richagupta.png"
+    },
+    {
+        "prof": "Dr.Aman Parnami",
+        "title": "Tweek Labs for participating winning 60 lakhs for 10% equity share in Shark Tank India",
+        "awarded": "awarded to",
+        "image" : "amanparnami.png"
+    }
+]

frontend/src/index.js

@@ -20,6 +20,7 @@ import Staff from './pages/Staff';
 import Collaborations from './pages/Collaborations';
 import Advisory from './pages/Advisory';
 import PhdStudent from './pages/PhdStudent'
+import Awards from './pages/Awards'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
@@ -35,7 +36,7 @@ root.render(
       <Route path="/Students" element={<Student/>}/>
       <Route path="/Advisory" element={<Advisory/>}/>
       <Route path="/PhdStudent" element ={<PhdStudent/>}/>
-
+      <Route path="/Awards" element ={<Awards/>}/>
 
       <Route path="/ResearchLabs" element={<Research/>}/>
       <Route path="/TeachingLabs" element={<Teaching/>}/>

frontend/src/pages/Awards.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import NavBar from '../components/navbar';
+import ProfCard from '../components/Research/profCard'
+import AwardDescp from '../components/People/awardDescp';
+import data from "../data/awardsPageData.json";
+import '../styles/research.css'
+import { useState } from 'react';
+import AwardCard from '../components/People/awardCard';
+import Footer from '../components/footer';
+
+function ResearchProj(){
+    const [selectedProj, setSelectedProj] = useState(null);
+    const [description, setDescription] = useState(null);
+    return (
+        <>
+            <NavBar logo={true} rel={false} bg={false}/>
+            <div id="topSection">    
+                <span id="heading" className='font-Archivo font-[200] text-[10vw] small:w-[100%]'>ACHIEVEMENTS</span>
+            </div>
+            <div className="projBody"> 
+                <div className="profScroll">
+                    {data.map((project, index)=>(
+                        // <ProfCard data={prof} index={index} selectedProf={selectedProf} setSelectedProf={setSelectedProf} setDisplayProjects={setDisplayProjects}/>
+                        //<AwardCard data={project} title={project.title} funding={project.fundedBy} profName={project.prof} selectedProj={selectedProj} setSelectedProj={setSelectedProj} setDescription={setDescription} index={index}/>
+                        <AwardCard data={project} title={project.title} funding={project.awarded} profName={project.prof} selectedProj={selectedProj} index={index}/>
+                    ))}
+                </div>
+                {/* <div className="publicationsSection p-[2%]">
+                    {
+                        (selectedProj==null)?(
+                            "Please select a project to show full description"
+                            ):(
+                                <AwardDescp data={description}/>
+                        )
+                    }
+                </div> */}
+            </div>
+            <Footer/>
+        </>
+    )
+}
+
+export default ResearchProj

frontend/src/pages/PhdStudent.jsx

@@ -25,7 +25,7 @@ function ResearchPub() {
                 <div className="publicationsSection p-[2%]">
                     {
                         (selectedProf==null)?(
-                            "Please select a student to see thier bio"
+                            "Please select a student to see their bio"
                             ):(
                             displayProjects.map((publication, index) =>
                                 <PubDescp data={publication} index={index} />

frontend/yarn.lock

@@ -9354,4 +9354,4 @@
 "yocto-queue@^0.1.0":
   "integrity" "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
   "resolved" "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
-  "version" "0.1.0"
+  "version" "0.1.0"