casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor: improve external links implementation

Browse Source
This commit is contained in:
m-tartari
2025-05-23 13:33:12 +00:00
parent 5fccaa6773
commit d4901e0e1a
9 changed files with 156 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/ContactPage/ContactPage.tsx
+55 -40
View File
@@ -1,20 +1,41 @@
import { List, ListItem, ListItemButton as MuiListItemButton, Typography, styled } from '@mui/material'
import { Drafts as DraftsIcon, LinkedIn as LinkedInIcon, GitHub as GitHubIcon } from '@mui/icons-material'
import { Link, List, ListItem, Stack, Typography } from '@mui/material'
import DraftsIcon from '@mui/icons-material/Drafts'
import LinkedInIcon from '@mui/icons-material/LinkedIn'
import GitHubIcon from '@mui/icons-material/GitHub'
import { Page } from 'components/templates'
const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
h6: {
color: theme.palette.text.secondary,
},
':hover': {
backgroundColor: 'transparent',
color: theme.palette.primary.main,
h6: {
color: theme.palette.primary.dark,
},
},
}))
interface ListItemProps {
children?: React.ReactNode
href?: string
}
const ListItemLink: React.FC<ListItemProps> = ({ children, ...props }) => (
<ListItem>
<Link
{...props}
rel="noopener noreferrer"
target="_blank"
underline="hover"
sx={theme => ({
color: 'inherit',
h6: {
color: theme.palette.text.secondary,
},
':hover': {
backgroundColor: 'transparent',
color: theme.palette.primary.main,
h6: {
color: theme.palette.primary.dark,
},
},
})}>
<Stack direction="row" alignItems="center">
{children}
</Stack>
</Link>
</ListItem>
)
const ContactPage = () => {
return (
@@ -23,32 +44,26 @@ const ContactPage = () => {
Feel free to contact me using any of the following:
</Typography>
<List>
<ListItem disablePadding>
<ListItemButton aria-label="Email button" onClick={() => window.open('mailto:info@m-tartari.eu', '_blank')}>
<DraftsIcon fontSize="large" />
<Typography variant="h6" ml={2}>
info
<wbr />
@m-tartari.eu
</Typography>
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton aria-label="LinkedIn button" onClick={() => window.open('https://www.linkedin.com/in/m-tartari/', '_blank')}>
<LinkedInIcon fontSize="large" />
<Typography variant="h6" ml={2}>
m-tartari
</Typography>
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton aria-label="GitHub button" onClick={() => window.open('https://www.github.com/m-tartari/', '_blank')}>
<GitHubIcon fontSize="large" />
<Typography variant="h6" ml={2}>
m-tartari
</Typography>
</ListItemButton>
</ListItem>
<ListItemLink href="mailto:info@m-tartari.eu" aria-label="Email link">
<DraftsIcon fontSize="large" />
<Typography variant="h6" ml={2}>
info
<wbr />
@m-tartari.eu
</Typography>
</ListItemLink>
<ListItemLink aria-label="LinkedIn link" href="https://www.linkedin.com/in/m-tartari/">
<LinkedInIcon fontSize="large" />
<Typography variant="h6" ml={2}>
m-tartari
</Typography>
</ListItemLink>
<ListItemLink aria-label="GitHub link" href="https://www.github.com/m-tartari/">
<GitHubIcon fontSize="large" />
<Typography variant="h6" ml={2}>
m-tartari
</Typography>
</ListItemLink>
</List>
</Page>
)
src/components/pages/CurriculumPage/CurriculumPage.tsx
+2 -2
View File
@@ -132,9 +132,9 @@ const Curriculum = () => {
</Typography>
{/* id="WUT" */}
<CurriculumItem title="IBM Full Stack Software Developer Professional Certificate" dates="03/24">
<Stack direction="row" alignItems="flex-end">
<Stack direction="row" alignItems="center" gap={0.5}>
<Typography>Credential ID: EZ34GWQLRHEG</Typography>
<ExternalIconLink size="small" fontSize="small" href="https://www.coursera.org/account/accomplishments/professional-cert/EZ34GWQLRHEG" />
<ExternalIconLink fontSize="inherit" href="https://www.coursera.org/account/accomplishments/professional-cert/EZ34GWQLRHEG" />
</Stack>
</CurriculumItem>
src/components/pages/MainPage/MainPage.tsx
+19 -32
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { Box, Typography } from '@mui/material'
import { Box, Stack, Typography } from '@mui/material'
import { ViewportProvider } from 'components/utils/viewport'
import { AcademyIconLink, DescriptionIconLink, ExternalAppIconLink, GitHubIconLink, VideoIconLink } from 'components/atoms'
@@ -28,12 +28,10 @@ const MainPage = () => {
image="images/IIT_Linfa.webp"
title="LINFA: An Intuitive Block-Programming Interface for Reconfigurable Robots"
caption={
<>
<VideoIconLink size="small" fontSize="small" href="https://www.linkedin.com/feed/update/urn:li:activity:7034480841569284096/" />
<Typography component="span" color="text.secondary" ml={1}>
Software Engineer @ IIT
</Typography>
</>
<Stack direction="row" gap={1} alignItems="center">
<VideoIconLink fontSize="small" pt={0.5} href="https://www.linkedin.com/feed/update/urn:li:activity:7034480841569284096/" />
<Typography color="text.secondary">Software Engineer @ IIT</Typography>
</Stack>
}>
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
@@ -52,13 +50,11 @@ const MainPage = () => {
mobileImage="images/IIT_Modular_Mobile.webp"
title="Revamping HHCM's Modular: Swift Generation of Modular Robot Models"
caption={
<>
<GitHubIconLink size="small" fontSize="small" href="https://github.com/ADVRHumanoids/motor_calibration" />
<ExternalAppIconLink size="small" fontSize="small" href="https://modular.alberobotics.it" />
<Typography component="span" color="text.secondary" ml={1}>
Software Engineer @ IIT
</Typography>
</>
<Stack direction="row" gap={1} alignItems="center">
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/ADVRHumanoids/modular_hhcm" />
<ExternalAppIconLink pt={0.5} fontSize="small" href="https://modular.alberobotics.it" />
<Typography color="text.secondary">Software Engineer @ IIT</Typography>
</Stack>
}>
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
@@ -75,12 +71,10 @@ const MainPage = () => {
image="images/IIT_Modules.webp"
title="Automated Actuators and Robotic Modules Calibration"
caption={
<>
<GitHubIconLink size="small" fontSize="small" href="https://github.com/ADVRHumanoids/motor_calibration" />
<Typography component="span" color="text.secondary" ml={1}>
Embedded Engineer @ IIT
</Typography>
</>
<Stack direction="row" gap={1} alignItems="center">
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/ADVRHumanoids/motor_calibration" />
<Typography color="text.secondary">Embedded Engineer @ IIT</Typography>
</Stack>
}>
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
@@ -96,18 +90,11 @@ const MainPage = () => {
mobileImage="images/thesis.webp"
title="Voice Controlled Mobile Robot for Indoor Applications"
caption={
<>
<AcademyIconLink size="small" fontSize="small" href="https://doi.org/10.1007/978-3-030-58380-4_7" />
<DescriptionIconLink
size="small"
fontSize="small"
href="https://drive.google.com/file/d/1wBfvAzy9N8uChNxNj9Kd_hcvI0Qq3uQj/view?usp=sharing"
/>
<Typography component="span" color="text.secondary" ml={1}>
Master Thesis @ WUT
</Typography>
</>
<Stack direction="row" gap={1} alignItems="center">
<AcademyIconLink pt={0.5} fontSize="small" href="https://doi.org/10.1007/978-3-030-58380-4_7" />
<DescriptionIconLink pt={0.5} href="https://drive.google.com/file/d/1wBfvAzy9N8uChNxNj9Kd_hcvI0Qq3uQj/view?usp=sharing" />
<Typography color="text.secondary">Master Thesis @ WUT</Typography>
</Stack>
}>
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
src/components/pages/ProjectsPage/ProjectsPage.tsx
+34 -44
View File
@@ -22,13 +22,13 @@ const ProjectsPage = () => {
Software Engineer @ IIT
</Typography>
<VideoIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://www.linkedin.com/feed/update/urn:li:activity:7034480841569284096/"
sx={{ color: 'text.secondary' }}
/>
{/* <Typography color="text.secondary" display="inline-block"> */}
<Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
<Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
Software Engineer @ IIT
</Typography>
</>
@@ -49,9 +49,9 @@ const ProjectsPage = () => {
<Typography color="text.secondary" display={{ sm: 'none' }}>
Software Engineer @ IIT
</Typography>
<GitHubIconLink size="small" fontSize="small" href="https://github.com/ADVRHumanoids/modular_hhcm/" sx={{ color: 'text.secondary' }} />
<ExternalAppIconLink size="small" fontSize="small" href="https://modular.alberobotics.it" sx={{ color: 'text.secondary' }} />
<Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/ADVRHumanoids/modular_hhcm/" sx={{ color: 'text.secondary' }} />
<ExternalAppIconLink pt={0.5} fontSize="small" href="https://modular.alberobotics.it" sx={{ color: 'text.secondary' }} />
<Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
Software Engineer @ IIT
</Typography>
</>
@@ -70,14 +70,14 @@ const ProjectsPage = () => {
<Typography color="text.secondary" display={{ sm: 'none' }}>
Master Thesis @ WUT
</Typography>
<AcademyIconLink size="small" fontSize="small" href="https://doi.org/10.1007/978-3-030-58380-4_7" sx={{ color: 'text.secondary' }} />
<AcademyIconLink pt={0.5} fontSize="small" href="https://doi.org/10.1007/978-3-030-58380-4_7" sx={{ color: 'text.secondary' }} />
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/file/d/1wBfvAzy9N8uChNxNj9Kd_hcvI0Qq3uQj/view?usp=sharing"
sx={{ color: 'text.secondary' }}
/>
<Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
<Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
Master Thesis @ WUT
</Typography>
</>
@@ -94,9 +94,9 @@ const ProjectsPage = () => {
title="Recharging Electric Cars with a Mobile Robot"
subtitle={
<>
<GitHubIconLink size="small" fontSize="small" href="https://github.com/m-tartari/ekf_matlab" sx={{ color: 'text.secondary' }} />
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/ekf_matlab" sx={{ color: 'text.secondary' }} />
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/file/d/1BgPj-fgtYDDEsFHmDk2fGVm7DCPFWEeN/view?usp=sharing"
sx={{ color: 'text.secondary' }}
@@ -112,9 +112,9 @@ const ProjectsPage = () => {
title="Mobile Robot Self-Localization"
subtitle={
<>
<GitHubIconLink size="small" fontSize="small" href="https://github.com/m-tartari/firebot" sx={{ color: 'text.secondary' }} />
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/firebot" sx={{ color: 'text.secondary' }} />
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/open?id=1a_ZvgaQjzvedeo296zrDpdvNL_VJDWTX"
sx={{ color: 'text.secondary' }}
@@ -131,13 +131,13 @@ const ProjectsPage = () => {
subtitle={
<>
<GitHubIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://github.com/m-tartari/3RRR_planar_parallel_manipulator"
sx={{ color: 'text.secondary' }}
/>
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/open?id=11lCJM3EjVsua379BKD5NcEDHQLL4jdQn"
sx={{ color: 'text.secondary' }}
@@ -155,13 +155,13 @@ const ProjectsPage = () => {
<>
{/* */}
<GitHubIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://github.com/m-tartari/simple_trajectory_optimization"
sx={{ color: 'text.secondary' }}
/>
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/open?id=11m7r7fLda_jpDEZ-9qAWvnfRN2kLkhlA"
sx={{ color: 'text.secondary' }}
@@ -177,7 +177,7 @@ const ProjectsPage = () => {
title="3RRR Planar Parallel Manipulator"
subtitle={
<GitHubIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://github.com/m-tartari/3RRR_planar_parallel_manipulator"
sx={{ color: 'text.secondary' }}
@@ -189,7 +189,7 @@ const ProjectsPage = () => {
title="Simple Swarm"
subtitle={
<>
<GitHubIconLink size="small" fontSize="small" href="https://github.com/m-tartari/simple_swarm" sx={{ color: 'text.secondary' }} />
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/simple_swarm" sx={{ color: 'text.secondary' }} />
</>
}>
<Typography>
@@ -201,7 +201,7 @@ const ProjectsPage = () => {
subtitle={
<>
<GitHubIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://github.com/m-tartari/industrial_robot_programming"
sx={{ color: 'text.secondary' }}
@@ -215,7 +215,7 @@ const ProjectsPage = () => {
subtitle={
<>
<GitHubIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://github.com/m-tartari/modelling_and_control_of_manipulators"
sx={{ color: 'text.secondary' }}
@@ -240,13 +240,8 @@ const ProjectsPage = () => {
<Typography color="text.secondary" display={{ sm: 'none' }}>
Embedded Engineer @ IIT
</Typography>
<GitHubIconLink
size="small"
fontSize="small"
href="https://github.com/ADVRHumanoids/motor_calibration"
sx={{ color: 'text.secondary' }}
/>
<Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/ADVRHumanoids/motor_calibration" sx={{ color: 'text.secondary' }} />
<Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
Embedded Engineer @ IIT
</Typography>
</>
@@ -268,12 +263,12 @@ const ProjectsPage = () => {
Bachelor Thesis @ TONGJI
</Typography>
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/file/d/0B1z42QMR-0UtYzBYSVhRV3ZPWk0/view?usp=sharing"
sx={{ color: 'text.secondary' }}
/>
<Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
<Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
Bachelor Thesis @ TONGJI
</Typography>
</>
@@ -290,12 +285,12 @@ const ProjectsPage = () => {
Bachelor Thesis @ UNIBO
</Typography>
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/file/d/0B1z42QMR-0UtSkxRVzJPTk1IX0k/view?usp=sharing"
sx={{ color: 'text.secondary' }}
/>
<Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
<Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
Bachelor Thesis @ UNIBO
</Typography>
</>
@@ -309,13 +304,13 @@ const ProjectsPage = () => {
subtitle={
<>
<GitHubIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://github.com/m-tartari/modelling_and_control_of_manipulators"
sx={{ color: 'text.secondary' }}
/>
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/file/d/1TE3TWkXZjVq8OuBkLl497c_MQSs3MiLQ/view?usp=sharing"
sx={{ color: 'text.secondary' }}
@@ -330,14 +325,9 @@ const ProjectsPage = () => {
title="Multi-Body System's Kinematic Analysis"
subtitle={
<>
<GitHubIconLink
size="small"
fontSize="small"
href="https://github.com/m-tartari/multi-body-kinematics"
sx={{ color: 'text.secondary' }}
/>
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/multi-body-kinematics" sx={{ color: 'text.secondary' }} />
<DescriptionIconLink
size="small"
pt={0.5}
fontSize="small"
href="https://drive.google.com/file/d/15yrDU2blkb34Jy2GXkCIe4qNmDRmp31w/view?usp=sharing"
sx={{ color: 'text.secondary' }}
@@ -352,14 +342,14 @@ const ProjectsPage = () => {
<Project
title="Signal Processing"
subtitle={
<GitHubIconLink size="small" fontSize="small" href="https://github.com/m-tartari/signal_processing" sx={{ color: 'text.secondary' }} />
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/signal_processing" sx={{ color: 'text.secondary' }} />
}>
<Typography>Several Signal processing projects developed using MATLAB.</Typography>
</Project>
<Project
title="Real Time Systems"
subtitle={
<GitHubIconLink size="small" fontSize="small" href="https://github.com/m-tartari/real_time_systems" sx={{ color: 'text.secondary' }} />
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/real_time_systems" sx={{ color: 'text.secondary' }} />
}>
<Typography>Several real-time systems' projects developed using C++ and OIL, and run using Trampoline RTOS on a Teensy board.</Typography>
</Project>
@@ -373,7 +363,7 @@ const ProjectsPage = () => {
<Project
title="Medieval Furniture"
subtitle={
<GitHubIconLink size="small" fontSize="small" href="https://github.com/m-tartari/medieval_furniture" sx={{ color: 'text.secondary' }} />
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/medieval_furniture" sx={{ color: 'text.secondary' }} />
}>
<Typography>
A collection of pdf and CAD models to create late XIV century furniture and medieval camp equipment. These objects are being realized by{' '}
@@ -386,7 +376,7 @@ const ProjectsPage = () => {
<Project
title="Pinterest Pinner"
subtitle={
<GitHubIconLink size="small" fontSize="small" href="https://github.com/m-tartari/pinterest_pinner" sx={{ color: 'text.secondary' }} />
<GitHubIconLink pt={0.5} fontSize="small" href="https://github.com/m-tartari/pinterest_pinner" sx={{ color: 'text.secondary' }} />
}>
<Typography>
Publishes all photos from a{' '}