diff --git a/components/Projects/OngoingProjects/OngoingProjects.js b/components/Projects/OngoingProjects/OngoingProjects.js index 244525ea..6aec5869 100644 --- a/components/Projects/OngoingProjects/OngoingProjects.js +++ b/components/Projects/OngoingProjects/OngoingProjects.js @@ -1,11 +1,14 @@ import styles from './OngoingProjects.module.scss'; import Link from 'next/link'; +import React, { useState } from 'react'; import { OngoingProjectsData } from '../../../data'; import { faGithub, faLinkedinIn } from '@fortawesome/free-brands-svg-icons'; import Hero from '../../Hero/Hero'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; const OngoingProjects = () => { + const [selectedProject, setSelectedProject] = useState(OngoingProjectsData[0]) + return ( <> { subtitleList={['Ingenuinity in progress.']} isHome={false} /> -
- {OngoingProjectsData.map((proj, idx) => { - return ( - - ); - })} +
+ {OngoingProjectsData.map((proj, idx) => ( + + ))} +
+
+
- ); -}; + ) +} -const OngoingProjectCard = ({ imgName, name, sub, githubLink }) => { +const OngoingProjectCard = ({ imgName, name, sub, githubLink, modelLink }) => { return (
-
{name}
{sub}
-
- ); -}; + {imgName && (
)} + {modelLink && ( +
+ +
)} + +
+ ) +} export default OngoingProjects; diff --git a/components/Projects/OngoingProjects/OngoingProjects.module.scss b/components/Projects/OngoingProjects/OngoingProjects.module.scss index c9a26232..b43cd5dc 100644 --- a/components/Projects/OngoingProjects/OngoingProjects.module.scss +++ b/components/Projects/OngoingProjects/OngoingProjects.module.scss @@ -1,50 +1,120 @@ @import '../../variables'; .ongoingProj { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 20px; width: 100%; min-height: 70vh; - // margin: 0 auto; - margin-bottom: 3em; + - .ongoingProjImg { - background-position: center center; - margin-bottom: 10px; - margin-top: 10px; - background-repeat: no-repeat; - background-size: 25vw; - height: 75vh; - @media (max-width: 650px) { - height: 40vh; - } - @media (max-width: 450px) { - height: 30vh; - } + + @media (max-width: 900px) { + flex-direction: column; + align-items: center; } + .ongoingProjCont { - width: 70%; - margin: auto; - border-bottom: 2px solid $light; + width: 50%; + margin-right: 20px; padding-bottom: 1em; + + .ongoingProjContName { - font-size: 3rem; - text-align: center; - padding: 0em; + font-size: 2.5rem; + text-align: left; + margin-bottom: 0.5em; } + .ongoingProjContSub { - padding: 0.1em; line-height: 160%; margin: 1em 0; - text-align: center; + text-align: left; } + .ongoingProjContLinks { - text-align: center; + text-align: left; + margin-top: 1em; + a { font-size: 1.5rem; transition: color 0.2s; + &:hover { color: $dark; } } } } + + .ongoingProjImg { + width: 45%; + height: 400px; + + @media (max-width: 900px) { + width: 100%; + height: 300px; + } + + @media (max-width: 650px) { + height: 250px; + } + + @media (max-width: 450px) { + height: 200px; + } + } + + .ongoingProjModel { + width: 45%; + height: auto; + + iframe { + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + } + + @media (max-width: 900px) { + width: 100%; + margin-top: 20px; + } + + @media (max-width: 450px) { + iframe { + height: 250px; + } + } + } +} +.projectSelector { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: space-around; + margin-bottom: 20px; + margin-top: 20px; + padding: 10px; +} + +.projectName { + padding: 10px 20px; + cursor: pointer; + background-color: $black; + border: 2px solid transparent; + transition: background-color 0.3s, border-color 0.3s; + font-size: 1.5rem; + justify-content: space-around; + + + &:hover { + background-color: $light; + } +} + +.active { + border-color: $dark; + background-color: $dark; + } diff --git a/data/ongoingprojects.js b/data/ongoingprojects.js index 69b418b7..fd62a9e1 100644 --- a/data/ongoingprojects.js +++ b/data/ongoingprojects.js @@ -1,43 +1,6 @@ +// To add your 3D model, upload it on https://p3d.in/ and add the embed link under modelLink + const OngoingProjectsData = [ - { - imgName: 'delta_bot.jpg', - name: 'DELTA - PSP Bot', - sub: ( - <> - The Team DNS from SRA bagged Second Prize in the 7th Delta International - Automation Contest respresenting India globally. -
- PSP Bot : Pick Sort and Place Bot is customly designed, 3 Axis XYZ - Gantry based Pick and Place Robotic Solution for Industry Packaging - lines housing variable sized input items or boxes. It uses and efficient - item sorting and packaging algorithm to pick and place input items from - an incoming conveyor into an output container ensuring minimum space - wastage. Its primary use is in the Multinational Packaging supply chain - industry for variable sized item packaging and location based packaging. - - ), - githubLink: 'https://github.com/SRA-VJTI/Delta2021', - }, - { - imgName: 'smort.gif', - name: 'SMORT', - sub: ( - <> - Smart Multi-Object Realtime Tracking (SMORT) aims to study major types - of object tracking algorithms and finally build a robust object tracker - which can overcome some critical problems like occlusion, light - Intensity difference, re-identification etc. -
- This is a research oriented project in which a pre-existing algorithm is - studied in great detail from its official research record and a custom - implementation is created from it. This helps us understand some - intrinsic details of the algorithm which prove useful while creating our - original custom tracker. Implementation of object tracking research - papers. - - ), - githubLink: 'https://github.com/saharshleo/OpenCV-Trackers', - }, { imgName: 'titan_legs.jpeg', name: 'TitanLegs', @@ -57,23 +20,34 @@ const OngoingProjectsData = [ ), githubLink: 'https://github.com/SRA-VJTI/TitanLegs', }, + { - imgName: 'mobman.jpeg', - name: 'MobMan', + name: 'EvoBorne', sub: ( <> - MobMan project aims to build a model of a mobile manipulator capable of - performing various dexterous tasks autonomously. The project is divided - into two main components: -
- 1. Manipulator Arm: Perform pick and place operations using object - detection -
- 2. Mobile Base: Perform SLAM for navigation. + EvoBorne is a versatile multi-terrain modular robot designed to adapt to various surface and aerial environments, morphing its structure to meet the demands of its surroundings. + It operates as a wheeled robot on land, navigating diverse terrains with speed and agility, and seamlessly transforms into a drone when flight is required. + Equipped with advanced mapping techniques and a dynamic morphing capability, EvoBorne can autonomously switch between ground and aerial modes, optimizing performance for complex tasks such as search and rescue, environmental monitoring, and exploration. + Its robust, customizable design makes it a powerful tool for overcoming challenging environments. ), - githubLink: 'https://github.com/SRA-VJTI/Mobile_Manipulator', + githubLink: 'https://github.com/SRA-VJTI/evo-borne', + modelLink: 'https://p3d.in/e/RI78R' }, -]; + + { + imgName: 'synapse32.jpeg', + name: 'Synapse32', + sub: ( + <> + Synapse32 is an ambitious and innovative project spearheaded by SRA, focused on the design, verification, and implementation of a RISC-V based CPU using Verilog HDL. + Our goal is to develop a fully functional CPU core that we will initially deploy on FPGA platforms, with future plans to evolve it into a robust, high-performance softcore IP for Xilinx boards. + Looking ahead, we also plan to enhance Synapse32 to a level where it can support more complex operations, including the capability to run Linux. This would demonstrate the core’s ability to handle sophisticated software environments and expand its potential applications. + + ), + githubLink: 'https://github.com/SRA-VJTI/evo-borne', + + } +] export default OngoingProjectsData; diff --git a/public/static/images/synapse32.jpeg b/public/static/images/synapse32.jpeg new file mode 100644 index 00000000..8d153fa1 Binary files /dev/null and b/public/static/images/synapse32.jpeg differ