Skip to content

Commit

Permalink
[Update]: Add new Ongoing projects and update the UI of Ongoing Proje…
Browse files Browse the repository at this point in the history 
…cts page (#143)

* add new research paper in publications

* add new ongoing projects and update UI for the same page (#6)

* update css to handle mobile view
  • Loading branch information
@NachtSpyder04
NachtSpyder04 authored Sep 14, 2024
1 parent 2d360e8 commit f3d3c88
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 98 deletions.
77 changes: 54 additions & 23 deletions components/Projects/OngoingProjects/OngoingProjects.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Hero
Expand All @@ -14,41 +17,69 @@ const OngoingProjects = () => {
subtitleList={['Ingenuinity in progress.']}
isHome={false}
/>
<div className={styles.ongoingProjects} id='is'>
{OngoingProjectsData.map((proj, idx) => {
return (
<OngoingProjectCard
key={`ongoing_project_${idx}`}
imgName={proj.imgName}
name={proj.name}
sub={proj.sub}
githubLink={proj.githubLink}
/>
);
})}
<div className={styles.projectSelector}>
{OngoingProjectsData.map((proj, idx) => (
<button
key={idx}
className={`${styles.projectName} ${proj === selectedProject ? styles.active : ''}`}
onClick={() => setSelectedProject(proj)}
>
{proj.name}
</button>
))}
</div>
<div className={styles.ongoingProjects}>
<OngoingProjectCard
key={selectedProject.name}
imgName={selectedProject.imgName}
name={selectedProject.name}
sub={selectedProject.sub}
githubLink={selectedProject.githubLink}
modelLink={selectedProject.modelLink}
/>
</div>
</>
);
};
)
}

const OngoingProjectCard = ({ imgName, name, sub, githubLink }) => {
const OngoingProjectCard = ({ imgName, name, sub, githubLink, modelLink }) => {
return (
<div className={styles.ongoingProj}>
<div
style={{ backgroundImage: `url("/static/images/${imgName}")` }}
className={styles.ongoingProjImg}
></div>
<div className={styles.ongoingProjCont}>
<div className={styles.ongoingProjContName}>{name}</div>
<div className={styles.ongoingProjContSub}>{sub}</div>
<div className={styles.ongoingProjContLinks}>
<a href={githubLink}>
<a href={githubLink} target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGithub} />
</a>
</div>
</div>
</div>
);
};
{imgName && ( <div
className={styles.ongoingProjImg}
style={{
backgroundImage: `url("/static/images/${imgName}")`,
backgroundPosition: 'center',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
height: '400px',
width: '45%',
}}

></div>)}
{modelLink && (
<div className={styles.ongoingProjModel}>
<iframe
className={styles.iframeModel}
allowfullscreen
width="640"
height="480"
loading="lazy"
frameborder="1"
src={modelLink}>
</iframe>
</div>)}

</div>
)
}
export default OngoingProjects;
118 changes: 94 additions & 24 deletions components/Projects/OngoingProjects/OngoingProjects.module.scss
View file
Original file line number Diff line number Diff line change
@@ -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;

}
76 changes: 25 additions & 51 deletions data/ongoingprojects.js
View file
Original file line number Diff line number Diff line change
@@ -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.
<br />
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.
<br />
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',
Expand All @@ -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:
<br />
1. Manipulator Arm: Perform pick and place operations using object
detection
<br />
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;
Binary file added public/static/images/synapse32.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f3d3c88

Please sign in to comment.