diff --git a/public/images/IIT_Modular_Mobile.png b/public/images/IIT_Modular_Mobile.png new file mode 100644 index 0000000..3163565 Binary files /dev/null and b/public/images/IIT_Modular_Mobile.png differ diff --git a/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx b/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx index 7b6048e..2f03439 100644 --- a/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx +++ b/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx @@ -2,6 +2,7 @@ import React from 'react' import { ParallaxBanner, ParallaxProvider } from 'react-scroll-parallax' import { Box, Grid, IconButton, Typography, useTheme } from '@mui/material' import { ExpandMore } from '@mui/icons-material' +import { useViewport } from '../../utils/viewport' type AnchorType = 'left' | 'top' | 'right' | 'bottom' @@ -10,6 +11,7 @@ type Props = { title: string caption: React.ReactNode children: React.ReactNode + mobileImage?: string ref?: React.ForwardedRef anchor?: AnchorType scrollTarget?: React.ForwardedRef @@ -124,7 +126,7 @@ const Description = (props: Props) => { } } -const ProjectSpotlight = React.forwardRef((props, ref) => { +const DesktopComponent = React.forwardRef((props, ref) => { return (
@@ -163,4 +165,51 @@ const ProjectSpotlight = React.forwardRef((props, ref) ) }) +const MobileComponent = React.forwardRef((props, ref) => { + const theme = useTheme() + return ( + <> + + + + + {props.title} + {props.caption} + + + {props.children} + + + + + ) +}) + +const ProjectSpotlight = React.forwardRef((props, ref) => { + const { width } = useViewport() + const theme = useTheme() + + return width < theme.breakpoints.values.md ? : +}) + export default ProjectSpotlight diff --git a/src/components/pages/MainPage/MainPage.test.tsx b/src/components/pages/MainPage/MainPage.test.tsx index 084ff4a..ef676f6 100644 --- a/src/components/pages/MainPage/MainPage.test.tsx +++ b/src/components/pages/MainPage/MainPage.test.tsx @@ -5,9 +5,23 @@ import { renderWithRouter as render } from 'components/utils/tests' import MainPage from '.' // Tests -describe('Main page', async () => { - it('Should render the page correctly', async () => { - // Setup +describe('Main page', () => { + it('Should render the page correctly on desktop', async () => { + await render() + + // Make sure the page title is correct + expect(screen.getByText('Robotics Engineer')).toBeInTheDocument() + + // Make sure the project spotlights are present + expect(screen.getByText('LINFA: An Intuitive Block-Programming Interface for Reconfigurable Robots')).toBeInTheDocument() + expect(screen.getByText("Revamping HHCM's Modular: Swift Generation of Modular Robot Models")).toBeInTheDocument() + expect(screen.getByText('Automated Actuators and Robotic Modules Calibration')).toBeInTheDocument() + expect(screen.getByText('Voice Controlled Mobile Robot for Indoor Applications')).toBeInTheDocument() + }) + it('Should render the page correctly on mobile', async () => { + // Set the window size to mobile (Galaxy Note 20 Android 11) + window.innerWidth = 412 + window.innerHeight = 915 await render() // Make sure the page title is correct diff --git a/src/components/pages/MainPage/MainPage.tsx b/src/components/pages/MainPage/MainPage.tsx index 4fb642b..285a7ed 100644 --- a/src/components/pages/MainPage/MainPage.tsx +++ b/src/components/pages/MainPage/MainPage.tsx @@ -1,6 +1,7 @@ import React from 'react' import { Box, Typography } from '@mui/material' +import { ViewportProvider } from 'components/utils/viewport' import { AcademyIconLink, DescriptionIconLink, GitHubIconLink, VideoIconLink } from 'components/atoms' import { Footer, Hero, Toobar, ProjectSpotlight } from 'components/molecules' @@ -15,102 +16,106 @@ const MainPage = () => { const refWUTThesis = React.useRef(null) return ( - - - - {/* 1 IIT - Linfa */} - - - - Software Engineer @ IIT - - - }> - This project aims to simplify the control, monitoring, and programming of reconfigurable robots through an intuitive block-programming - interface. It includes a front-end web app, built with TypeScript and React, allowing users to effortlessly change robot operating modes and - settings, monitor the robot's state, and assemble programs by dragging and dropping code blocks representing various robot capabilities. - Additionally, back-end services, developed with TypeScript and Python, translate these programs into formats compatible with the underlying - systems and manage mission execution. The project emphasizes extensibility, enabling users with Python experience to integrate custom blocks - and capabilities. Automated CI/CD pipelines further streamline integration and deployment processes. - - {/* 2 IIT - Modular */} - - - - Software Engineer @ IIT - - - }> - This project focused on overhauling HHCM's Modular, enhancing its graphical interface, API, and deployment pipeline. Modular serves as a web - application for the swift generation of modular robot models, with an offline approach (Building Mode) enabling users to set up robots in a - virtual environment by selecting and assembling reconfigurable modules, immediately visualized in 3D. Additionally, an online approach - (Discovery Mode) allows users to query the EtherCAT master for network topology, recognizing and displaying robots built from physical modules - in 3D. The system seamlessly produces URDF, SRDF, and a full ROS package that can then be utilized for simulating and controlling the robot. - - {/* 3 IIT - Motor Calibration */} - - - - Embedded Engineer @ IIT - - - }> - This project focused on automating the calibration of EtherCAT actuators and robotic modules, aiming for a fully automated procedure for newly - assembled actuators. The process involved testing the PDO, conducting phase angle calibration, torque sensor calibration, ripple and - position-dependent torque offset calibration, inertia and friction identification, and frequency response calibration. The goal was to - optimize motor performance and collect necessary data for accurate characterization, with results stored centrally and presented in a - comprehensive PDF report. - - {/* 4 WUT - Master Thesis */} - - + + + + + {/* 1 IIT - Linfa */} + + + + Software Engineer @ IIT + + + }> + This project aims to simplify the control, monitoring, and programming of reconfigurable robots through an intuitive block-programming + interface. It includes a front-end web app, built with TypeScript and React, allowing users to effortlessly change robot operating modes and + settings, monitor the robot's state, and assemble programs by dragging and dropping code blocks representing various robot capabilities. + Additionally, back-end services, developed with TypeScript and Python, translate these programs into formats compatible with the underlying + systems and manage mission execution. The project emphasizes extensibility, enabling users with Python experience to integrate custom blocks + and capabilities. Automated CI/CD pipelines further streamline integration and deployment processes. + + {/* 2 IIT - Modular */} + + + + Software Engineer @ IIT + + + }> + This project focused on overhauling HHCM's Modular, enhancing its graphical interface, API, and deployment pipeline. Modular serves as a web + application for the swift generation of modular robot models, with an offline approach (Building Mode) enabling users to set up robots in a + virtual environment by selecting and assembling reconfigurable modules, immediately visualized in 3D. Additionally, an online approach + (Discovery Mode) allows users to query the EtherCAT master for network topology, recognizing and displaying robots built from physical + modules in 3D. The system seamlessly produces URDF, SRDF, and a full ROS package that can then be utilized for simulating and controlling + the robot. + + {/* 3 IIT - Motor Calibration */} + + + + Embedded Engineer @ IIT + + + }> + This project focused on automating the calibration of EtherCAT actuators and robotic modules, aiming for a fully automated procedure for + newly assembled actuators. The process involved testing the PDO, conducting phase angle calibration, torque sensor calibration, ripple and + position-dependent torque offset calibration, inertia and friction identification, and frequency response calibration. The goal was to + optimize motor performance and collect necessary data for accurate characterization, with results stored centrally and presented in a + comprehensive PDF report. + + {/* 4 WUT - Master Thesis */} + + - - - Master Thesis @ WUT - - - }> - This thesis proposes a design for a small mobile robot controlled by voice. Firstly a preliminary analysis of the state of art of human-robot - interaction has been conducted. Then, an analysis of the equipment selected took place, and, later, appropriate methodologies for voice - recognition and user detection have been evaluated for this specific case. Finally, an overview of the complete software architecture of the - system was given with three possible structures and their comparison. The results obtained show both the feasibility of using low power boards - and some of their limitations. - -