[ New Page ] : Adds Publication page (#123)

* [ New Page ] : Adds Publication page

* [ Minor Debugging ] : Adds dependencies for publications page

* [ Minor Changes ] : Rename Faruk Kazi to Prof. Faruk Kazi

* [ Minor Changes ] : Rename Shraddha Suratkar to Dr. Shraddha Suratkar

components/Hero/Hero.module.scss

@@ -16,6 +16,7 @@
   .heroSub {
     font-size: 1.5rem;
     margin-top: 30px;
+    text-align: center;
   }
   @media (max-width: 650px) {
     .heroHead {

components/NavbarItem/NavbarItems.js

@@ -86,6 +86,7 @@ const NavbarItems = ({
             </Link>
           </div>
         ))}
+
       {!isWebView &&
         (navItem.subMenu ? (
           <div className={styles.Menu}>

components/Publications/Publications.js

@@ -0,0 +1,74 @@
+import styles from './Publications.module.scss';
+import Hero from '../Hero/Hero';
+import { PublicationsList } from '../../data';
+
+const Publications = () => {
+  return (
+    <>
+      <Hero
+        imgName={'publications-hero.jpg'}
+        backgroundPosition={'center top'}
+        title={<>Publications</>}
+        subtitleList={[
+          'Research is looking in great depths, flying to new heights, Imagining the unimagined!',
+        ]}
+        isHome={false}
+      />
+      <div className={styles.publicationsList} id='is'>
+        {PublicationsList.map((publicationSec, idx) => {
+          return (
+            <>
+              <div
+                className={styles.publicationsSection}
+                key={`publication_${idx}`}
+              >
+                <div className={styles.publicationsSectionTitle}>
+                  {publicationSec.name}
+                </div>
+
+                {publicationSec.publications.map((startup, idx) => {
+                  return (
+                    <PublicationCard
+                      {...startup}
+                      key={`publication_card_${idx}`}
+                    />
+                  );
+                })}
+              </div>
+            </>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+const PublicationCard = ({
+  title,
+  photo,
+  author,
+  time,
+  short,
+  externalLink,
+}) => {
+  return (
+    <div onClick={() => (window.location = externalLink)}>
+      <div className={styles.publications}>
+        <div
+          className={styles.publicationsImage}
+          style={{ backgroundImage: `url(${photo})` }}
+        ></div>
+        <div className={styles.publicationsDetails}>
+          <div className={styles.publicationsTitle}>{title}</div>
+          <div className={styles.publicationsAuthor}>{author}</div>
+          <div className={styles.publicationsTime}>
+            <em>{time}</em>
+          </div>
+          <div className={styles.publicationsShort}>{short}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Publications;

components/Publications/Publications.module.scss

@@ -0,0 +1,135 @@
+@import '../variables';
+
+.publicationsSectionTitle {
+  font-size: 2rem;
+  text-align: center;
+  width: 50%;
+  margin: auto;
+  margin-top: 30px;
+  margin-bottom: 1em;
+  padding-bottom: 0.5em;
+  border-bottom: 2px solid $light;
+
+  @media (max-width: 450px) {
+    width: 80%;
+  }
+}
+
+.publications {
+  width: 80%;
+  margin: 70px auto;
+  min-height: 200px;
+  display: flex;
+  cursor: pointer;
+  border: 2px solid $light;
+  align-items: center;
+  padding: 2em;
+  border-radius: 10px;
+  transition: transform 0.2s;
+  &:hover {
+    transform: scale(1.03);
+  }
+  .publicationsImage {
+    width: 30%;
+    height: 100%;
+    min-height: 200px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  .publicationsDetails {
+    width: 60%;
+    margin-left: 50px;
+    border-left: 1px solid $light;
+    padding-left: 50px;
+
+    .publicationsTitle {
+      font-size: 2rem;
+    }
+    .publicationsAuthor {
+      margin-top: 10px;
+      font-size: 1rem;
+    }
+    .publicationsTime {
+      text-align: right;
+    }
+    .publicationsShort {
+      margin-top: 40px;
+    }
+
+    @media (max-width: 1300px) {
+      .publicationsTitle {
+        font-size: 1.5rem;
+      }
+      .publicationsAuthor {
+        margin-top: 10px;
+        font-size: 1rem;
+      }
+      .publicationsTime {
+        margin-top: 10px;
+        text-align: right;
+      }
+      .publicationsShort {
+        margin-top: 40px;
+      }
+    }
+
+    @media (max-width: 1000px) {
+      .publicationsTitle {
+        font-size: 1.3rem;
+      }
+      .publicationsAuthor {
+        margin-top: 10px;
+        font-size: 0.8rem;
+      }
+      .publicationsTime {
+        font-size: 0.8rem;
+        text-align: right;
+      }
+      .publicationsShort {
+        font-size: 0.8rem;
+        margin-top: 40px;
+      }
+    }
+
+    @media (max-width: 700px) {
+      .publicationsTitle {
+        font-size: 1rem;
+      }
+      .publicationsAuthor {
+        margin-top: 10px;
+        font-size: 0.7rem;
+      }
+      .publicationsTime {
+        font-size: 0.7rem;
+        text-align: right;
+      }
+      .publicationsShort {
+        font-size: 0.7rem;
+        margin-top: 40px;
+      }
+    }
+  }
+
+  @media (max-width: 900px) {
+    flex-direction: column;
+    .publicationsImage {
+      width: 80%;
+    }
+    .publicationsDetails {
+      width: 80%;
+      margin: 0;
+      padding: 0;
+      margin-top: 20px;
+      padding-top: 20px;
+      border: none;
+      border-top: 1px solid $light;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .publicationsDetails {
+      width: 95%;
+    }
+  }
+}

data/index.js

@@ -24,6 +24,7 @@ import OngoingProjectsData from './ongoingprojects';
 import EklavyaProjectList from './eklavyaprojects';
 import ActivitiesList from './activities';
 import FacultyInchargeList from './faculty';
+import PublicationsList from './publications';
 
 export {
   NavbarData,
@@ -48,4 +49,5 @@ export {
   Achievementlist,
   FacultyInchargeList,
   SenateList,
+  PublicationsList,
 };

data/navbar.js

@@ -43,10 +43,10 @@ const NavbarData = [
       },
     ],
   },
-  // {
-  //   name: 'Publications',
-  //   link: '/', // Publications coming up soon
-  // },
+  {
+    name: 'Publications',
+    link: '/publications',
+  },
   {
     name: 'Teams',
     link: '/teams',

data/publications.js

@@ -0,0 +1,30 @@
+const PublicationsList = [
+  {
+    name: 'Research Papers',
+    publications: [
+      {
+        photo: '/static/images/publications/2023_april_08.png',
+        title: 'DEEPFAKE CLI: Accelerated Deepfake Detection using FPGAs',
+        author:
+          'Omkar Bhilare | Rahul Singh | Vedant Paranjape | Sravan Chittupalli | Dr. Shraddha Suratkar | Prof. Faruk Kazi',
+        time: '08 April 2023',
+        short:
+          'Parallel and Distributed Computing, Applications and Technologies. PDCAT 2022',
+        externalLink: 'https://doi.org/10.1007/978-3-031-29927-8_4',
+      },
+      {
+        photo: '/static/images/publications/2017_september_27.png',
+        title:
+          'Swarm Robots in a Closed Loop Visual Odometry System by Using Visible Light Communication',
+        author:
+          'Dhiraj Patil | Kewal Shah | Udit Patadia | Nilay Sheth | Rahul Solank | Anshuman Singh',
+        time: '27 September 2017',
+        short:
+          'Advances in Signal Processing and Intelligent Recognition Systems. SIRS 2017',
+        externalLink: 'https://doi.org/10.1007/978-3-319-67934-1_18',
+      },
+    ],
+  },
+];
+
+export default PublicationsList;

pages/publications.js

@@ -0,0 +1,15 @@
+import Publications from '../components/Publications/Publications';
+import Head from 'next/head';
+
+const PublicationsPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Publications | SRA VJTI</title>
+      </Head>
+      <Publications />
+    </>
+  );
+};
+
+export default PublicationsPage;