Added a new page for SRA Talks

components/Hero/Hero.js

@@ -2,7 +2,6 @@ import styles from './Hero.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
 import { useEffect, useState } from 'react';
-import useWindowSize from '../../utils/ResizeHook';
 
 function Hero({
   imgName,
@@ -12,16 +11,6 @@ function Hero({
   backgroundPosition = 'center',
 }) {
   const [isLoad, setIsLoad] = useState('none');
-  const [path, setpath] = useState(imgName);
-
-  const size = useWindowSize();
-
-  useEffect(() => {
-    if (size.width < 780) 
-    {
-      setpath('landing-hero4.png');
-    }
-  }, [size]);
   useEffect(() => {
     setTimeout(() => {
       setIsLoad('');
@@ -35,7 +24,7 @@ function Hero({
                             to bottom,
                             rgba(0, 0, 0, 0.5),
                             rgba(0, 0, 0, 0.5),
-                            rgba(0, 0, 0, 0.5)), url("/static/images/hero/${path}")`,
+                            rgba(0, 0, 0, 0.5)), url("/static/images/hero/${imgName}")`,
           backgroundPosition: backgroundPosition,
         }}
         className={styles.hero}

components/OurReach/HomeReach.module.scss

@@ -25,4 +25,4 @@
       }
     }
   }
-}
+}

components/SingleBlog/SingleBlog.module.scss

@@ -2,7 +2,7 @@
 
 .blogDetails {
   width: 100%;
-  height: 70vh;
+  height: 40vh;
   display: flex;
   flex-direction: column;
   justify-content: center;

components/Talks/Talks.js

@@ -0,0 +1,85 @@
+import styles from './Talks.module.scss';
+import Hero from '../Hero/Hero';
+import React from 'react';
+import TalksList from '../../data/talks';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+const Talks = () => {
+  return (
+    <React.Fragment>
+      <Hero
+        imgName={'talks1.png'}
+        backgroundPosition={'center center'}
+        title={<>{/* Learn from the Best */}</>}
+        subtitleList={
+          [
+            // 'Learn from the Best',
+          ]
+        }
+        isHome={false}
+      />
+
+      <div id='is'>
+        <div className={styles.blogCloud}>
+          {TalksList.map((year, idx) => {
+            return (
+              <a
+                href={`#blogs_${year.year}`}
+                className={styles.blogCloudElem}
+                key={`cloudelem_${year.year}`}
+              >
+                <div>{year.year}</div>
+              </a>
+            );
+          })}
+        </div>
+        {TalksList.map((TalkYear) => {
+          return (
+            <div
+              className={styles.blogGrp}
+              id={`blogs_${TalkYear.year}`}
+              key={`bloggrp_${TalkYear.year}`}
+            >
+              <div className={styles.blogGrpHead}>{TalkYear.year}</div>
+              {TalkYear.talks.map((blog, idx) => {
+                return (
+                  <Talk
+                    {...blog}
+                    key={`blog_${idx}`}
+                    year={TalkYear.year}
+                    blogNum={idx}
+                  />
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </React.Fragment>
+  );
+};
+
+const Talk = ({ title, photo, author, year, blogNum }) => {
+  const router = useRouter();
+  return (
+    <div onClick={() => router.push(`/talks/${year}/${blogNum}`)}>
+      <div className={styles.blog}>
+        <div
+          className={styles.blogImage}
+          style={{ backgroundImage: `url(${photo})` }}
+        ></div>
+        <div className={styles.blogDetails}>
+          <div className={styles.blogTitle}>{title}</div>
+          <div className={styles.blogAuthor}>{author}</div>
+          {/* <div className={styles.blogTime}>
+            <em>{time}</em>
+          </div> */}
+          {/* <div className={styles.blogShort}>{short}</div> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Talks;

components/Talks/Talks.module.scss

@@ -0,0 +1,161 @@
+@import '../variables';
+
+.blogGrp {
+  margin-top: 5em;
+  .blogGrpHead {
+    color: $lightest;
+    width: 30%;
+    margin: 0 auto;
+    padding-bottom: 0.5em;
+    border-bottom: 2px solid $light;
+    font-size: 2rem;
+    text-align: center;
+  }
+}
+
+.blogCloud {
+  width: 50%;
+  padding: 1em;
+  margin: 3em auto;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+
+  border: 2px solid $light;
+  border-radius: 20px;
+  // border-bottom: 2px solid $light;
+  .blogCloudElem {
+    // margin: 1em;
+    padding: 1em;
+    flex-grow: 1;
+    text-align: center;
+    font-size: 1.5rem;
+    transition: background-color 0.2s;
+
+    border-radius: 10px;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.199);
+    }
+    // border-right: 1px solid $lightest;
+
+    // &:last-of-type {
+    // 	border-right: none;
+    // }
+  }
+}
+
+.blog {
+  width: 80%;
+  margin: 70px auto;
+  min-height: 300px;
+  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);
+  }
+  .blogImage {
+    width: 30%;
+    height: 100%;
+    min-height: 300px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  .blogDetails {
+    width: 60%;
+    margin-left: 50px;
+    border-left: 1px solid $light;
+    padding-left: 50px;
+
+    .blogTitle {
+      font-size: 3rem;
+    }
+    .blogAuthor {
+      margin-top: 10px;
+      font-size: 2rem;
+    }
+    .blogTime {
+      text-align: right;
+    }
+    .blogShort {
+      margin-top: 40px;
+    }
+
+    @media (max-width: 1300px) {
+      .blogTitle {
+        font-size: 2.5rem;
+      }
+      .blogAuthor {
+        margin-top: 10px;
+        font-size: 2rem;
+      }
+      .blogTime {
+        margin-top: 10px;
+        text-align: right;
+      }
+      .blogShort {
+        margin-top: 40px;
+      }
+    }
+
+    @media (max-width: 1000px) {
+      .blogTitle {
+        font-size: 2rem;
+      }
+      .blogAuthor {
+        margin-top: 10px;
+        font-size: 1.8rem;
+      }
+      .blogTime {
+        text-align: right;
+      }
+      .blogShort {
+        margin-top: 40px;
+      }
+    }
+
+    @media (max-width: 700px) {
+      .blogTitle {
+        font-size: 1.2rem;
+      }
+      .blogAuthor {
+        margin-top: 10px;
+        font-size: 1rem;
+      }
+      .blogTime {
+        text-align: right;
+      }
+      .blogShort {
+        margin-top: 40px;
+      }
+    }
+  }
+
+  @media (max-width: 900px) {
+    flex-direction: column;
+    .blogImage {
+      width: 80%;
+    }
+    .blogDetails {
+      width: 80%;
+      margin: 0;
+      padding: 0;
+      margin-top: 20px;
+      padding-top: 20px;
+      border: none;
+      border-top: 1px solid $light;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .blogDetails {
+      width: 95%;
+    }
+  }
+}

data/SRA-talks/2022/2022_abhinav_paper.md

@@ -0,0 +1,17 @@
+## Introduction of the Speaker
+
+Abhinav Venkatadri graduated from VJTI, Mumbai. He has expertise in the field of computer vision and deep learning. He participated in Google Summer of Code at the International Neuroinformatics Coordinating Facility (INCF), where he developed an eye tracker in Python and improved and updated the state of the art tracker. He gave a presentation to other SRA members about his most recent research paper and shared his experiences from developing the idea for the paper to publishing it.
+
+## Gist of the talk
+
+The talk addressed the attendees to the research being done to supplement machine learning with image processing methods to make plant pathology more accessible to study. He began by discussing literature and the uniqueness of his approach, where he was able to achieve greater accuracy using Machine Learning methods compared to most existing methods that used Neural Networks, while also using fewer computational resources. He discussed creating custom datasets and combining them with other popular datasets for better robustness. The pre-processing step was then described, along with each filter's purpose and how it was applied. Later, he utilised this to extract 17 features from the image based on its colour, texture, and shape.
+
+He also discussed the use of various colour models in disease detection. Later, he displayed the results and outcomes and the efficiency of this. He then came to a conclusion by outlining the future direction and work in this subject. This was followed by a much interactive and insighiful Q&A session, the session continued along as the speaker presented his entire path as well as advice for publishing a research paper.
+
+## More information on the session
+
+All of the information shared in the session can be found [here.](https://docs.google.com/presentation/d/11fWPWx6MI-YhYLvITmZOksqgIjZkLqR94PLdmcqG3Ik/edit?usp=drivesdk)
+
+## Best way to contact the speaker
+
+You can contact me at my email: [[email protected]](mailto:[email protected])

data/SRA-talks/2022/2022_anushree_epfl.md

@@ -0,0 +1,19 @@
+# Introduction of Speaker ?
+
+Anushree Sabnis is a mechanical student in her final year at VJTI in Mumbai. She has been working in the robotics field since her first year. She has completed a number of internships. She worked as an embedded development intern for Munga Innovation Private Limited, a summer intern for AIRPIX, a summer intern for Magnes, and so on. She has also made significant contributions to open source organisations. She interned at Open Robotics as part of the Open Source Promotion Plan (OSPP) and at Open Horizon as part of the Linux Foundation's Mentorship Program. She also did research internships at the Robert Bosch Centre for Cyber-Physical Systems (IISC) and EPFL (École polytechnique fédérale de Lausanne).
+
+# Gist of the talk?
+
+Anushree gave a fantastic presentation on her work at the BioRobotics Laboratory, where she studied the human gait, or the cyclical motion we make when walking; she researched the muscle groups used during walking, their mathematical models, and how to simulate the same using various packages, optimizing energies for efficient walking.
+Anushree created a controller for human gait that uses PD control for spinal stability and sends constant signals to muscle groups with a specific constant range of motion.
+She described the various studies and benchmarks carried out, as well as how her work incorporated and built on previous work. She also created a number of graphs to demonstrate her final results.
+
+# More information on session.
+
+Can’t give ppt. Confidential.
+
+# What is the best way to contact you ?
+
+You can contact me at my email, [[email protected]](mailto:[email protected])
+
+Also you can connect with me on Linkedin, [https://www.linkedin.com/in/anushreesabnis/](https://www.linkedin.com/in/anushreesabnis/)

data/SRA-talks/2022/2022_chinmay_moteen_bioamp.md

@@ -0,0 +1,29 @@
+# Introduction of Speakers ?
+
+Chinmay Lonkar is a third-year student pursuing B.Tech in Electrical Engineering at VJTI, Mumbai. He has been working with Embedded Systems, PCB Designing and robotics from his school days and is experienced in programming with C/C++. He worked as a Hardware Design intern at UpSide Down Labs during his summer break after second semester. He is also an upcoming Field Analog Apllication Intern at Texas Instruments.
+
+Moteen Shah is a third-year student pursuing B.Tech in EXTC at VJTI, Mumbai. He has been working with embedded systems, bootloaders and robotics right from his junior year and is experienced in programming with C/C++, python embedded firmware development. He worked as a Hardware Design intern at UpsideDown Labs during his summer break after second semister. He was also selected as a mentee under Open Source Promotion Plan(OSPP) under the org AOSC.
+
+They delivered a talk on the work done as the interns at UDL in which they developed a C++ library for Bio-Potential Signal filtering.
+
+# Gist of the talk?
+
+The talk introduced the atendees a small yet powerful sensor, the BioAmp EXG Pill. It's a small (2.54 X 1.00 cm) and elegant Analog Front End (AFE) board for BioPotential signal acquisition that you can use with any 5v Micro Controller Unit (MCU) with an ADC. It is capable of recording publication grade BioPotential signals like ECG, EMG, EOG, and EEG without the inclusion of any dedicated Hardware/Software filter. Chinmay and Moteen explained how the electric bio-potential signals were aquired from the human body using various techniques like Electromyography. Atendees also got to know how digital bandpass filters can be used to filter out analog signals from the sensor.
+
+# More information on session.
+
+[PPT Link](https://docs.google.com/presentation/d/1tKO2L_bPqytU22UY4ngMIO2LIm0DEGv5UYwP9_aTC0Y/edit?usp=sharing)
+
+# What is the best way to contact you ?
+
+You can contact Chinmay by email,
+[[email protected]](mailto:[email protected]).
+
+Also you can connect with him on LInkedin,
+[linkedin.com/in/chinmay-lonkar](https://www.linkedin.com/in/chinmay-lonkar-845207214/)
+
+You can contact Moteen by email,
+[[email protected]](mailto:[email protected]).
+
+Also you can connect with him on LInkedin,
+[linkedin.com/in/moteen-shah](https://in.linkedin.com/in/moteen-shah-98997216b)

data/SRA-talks/2022/2022_chinmay_pcb_design.md

@@ -0,0 +1,23 @@
+# Introduction of Speaker ?
+
+Chinmay Lonkar is a third-year student pursuing B.Tech in Electrical Engineering at VJTI, Mumbai. He has been working with Embedded Systems, PCB Designing from his school days and is experienced in programming with C/C++. He worked as a Hardware Design intern at UpSide Down Labs during his summer break after second semester. He delivered a talk on PCB Designing to other SRA members and juniors taking part in Eklavya.
+
+# Gist of the talk ?
+
+The talk introduced the attendees to PCB Designing. It started with Chinmay explaining why there is a need for PCBs and how they are better than traditional methods, then we went to basics of PCB Designing from creating schematic to exporting final gerber files for fabrication of PCB. The attendees designed their first PCB during the session, they learned how to import various required components in the schematic, making the required circuit, use of footprints for the components after that we moved on to aligning all the components in Pcbnew, followed by routing. They were then introduced to all the important steps that you should follow while designing the PCB from sourcing the components from various sites to maintaining the Bill Of Material(BOM). The session ended with an interactive Q&A session. The attendees were then given further resources to explore by themselves and an assignment to get them hands on practice.
+
+# More information on session
+
+All of the information contained in the lecture can be found here:
+
+[Intro to KiCAd](https://www.youtube.com/playlist?list=PLEBQazB0HUyR24ckSZ5u05TZHV9khgA1O)
+
+[PPT Link](https://docs.google.com/presentation/d/14QZT7BjKvLbPYLTM2Hj5V7lSQEi6Zk6fdYUAS722yy8/edit?usp=sharing)
+
+# What is the best way to contact you ?
+
+You can contact me at my email,
+[[email protected]](mailto:[email protected]).
+
+Also you can connect with me on LInkedin,
+[linkedin.com/in/chinmay-lonkar](https://www.linkedin.com/in/chinmay-lonkar-845207214/)