diff --git a/public/images/people/albertino_della_muzzina.jpg b/public/images/people/albertino_della_muzzina.jpg new file mode 100644 index 0000000..cb1461e Binary files /dev/null and b/public/images/people/albertino_della_muzzina.jpg differ diff --git a/public/images/people/albertoV.jpg b/public/images/people/albertoV.jpg new file mode 100644 index 0000000..31db23f Binary files /dev/null and b/public/images/people/albertoV.jpg differ diff --git a/public/images/people/bartolomeo.jpg b/public/images/people/bartolomeo.jpg new file mode 100644 index 0000000..a5dc520 Binary files /dev/null and b/public/images/people/bartolomeo.jpg differ diff --git a/public/images/people/ferantino_di_zampalocha.jpg b/public/images/people/ferantino_di_zampalocha.jpg new file mode 100644 index 0000000..9db388e Binary files /dev/null and b/public/images/people/ferantino_di_zampalocha.jpg differ diff --git a/public/images/people/galacino_galaci.jpg b/public/images/people/galacino_galaci.jpg new file mode 100644 index 0000000..6b761b4 Binary files /dev/null and b/public/images/people/galacino_galaci.jpg differ diff --git a/public/images/people/gamberino_di_bergantino.jpg b/public/images/people/gamberino_di_bergantino.jpg new file mode 100644 index 0000000..2fa004f Binary files /dev/null and b/public/images/people/gamberino_di_bergantino.jpg differ diff --git a/public/images/people/ghisola_da_castrocaro.jpg b/public/images/people/ghisola_da_castrocaro.jpg new file mode 100644 index 0000000..58d66ad Binary files /dev/null and b/public/images/people/ghisola_da_castrocaro.jpg differ diff --git a/public/images/people/niccolo_degli_obizzi.jpg b/public/images/people/niccolo_degli_obizzi.jpg new file mode 100644 index 0000000..70ff73c Binary files /dev/null and b/public/images/people/niccolo_degli_obizzi.jpg differ diff --git a/public/images/people/zanbiancolin.jpg b/public/images/people/zanbiancolin.jpg new file mode 100644 index 0000000..3556571 Binary files /dev/null and b/public/images/people/zanbiancolin.jpg differ diff --git a/public/images/people/zannino_il_beccaio.jpg b/public/images/people/zannino_il_beccaio.jpg new file mode 100644 index 0000000..2244970 Binary files /dev/null and b/public/images/people/zannino_il_beccaio.jpg differ diff --git a/src/App.tsx b/src/App.tsx index 353daed..bb06aa2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import RootLayout from 'components/templates/RouteTracker/index.js' import Loading from 'components/molecules/LoadingScreen/index.js' const MainPage = React.lazy(() => import('components/pages/MainPage/index.js')) +const PeoplePage = React.lazy(() => import('components/pages/PeoplePage/index.js')) const ContactPage = React.lazy(() => import('components/pages/ContactPage/index.js')) const PrivacyPage = React.lazy(() => import('components/pages/PrivacyPage/index.js')) const BusinessCardPage = React.lazy(() => import('components/pages/BusinessCardPage/index.js')) @@ -24,6 +25,14 @@ const router = createBrowserRouter([ ), }, + { + path: 'people', + element: ( + }> + + + ), + }, { path: 'contacts', element: ( diff --git a/src/components/atoms/IconLinks/index.tsx b/src/components/atoms/IconLinks/index.tsx index 627e92e..8cad0f6 100644 --- a/src/components/atoms/IconLinks/index.tsx +++ b/src/components/atoms/IconLinks/index.tsx @@ -1,4 +1,4 @@ -import { Email, LinkedIn, GitHub, Description, OndemandVideo, School, OpenInNew, OpenInBrowser } from '@mui/icons-material' +import { Description, Email, Facebook, Instagram, OndemandVideo, School, OpenInNew, OpenInBrowser } from '@mui/icons-material' import { Badge, Link, LinkProps, SvgIcon } from '@mui/material' interface IconLinkProps extends LinkProps { @@ -55,8 +55,8 @@ const IconWrapper: React.FC = ({ index, fontSize, Icon, sx, .. export const DescriptionIconLink = (props: IconLinkProps) => export const EmailIconLink = (props: IconLinkProps) => -export const GitHubIconLink = (props: IconLinkProps) => -export const LinkedInIconLink = (props: IconLinkProps) => +export const InstagramIconLink = (props: IconLinkProps) => +export const FacebookIconLink = (props: IconLinkProps) => export const AcademyIconLink = (props: IconLinkProps) => export const VideoIconLink = (props: IconLinkProps) => export const ExternalIconLink = (props: IconLinkProps) => diff --git a/src/components/molecules/EmplyeeCard/index.tsx b/src/components/molecules/EmplyeeCard/index.tsx new file mode 100644 index 0000000..a467949 --- /dev/null +++ b/src/components/molecules/EmplyeeCard/index.tsx @@ -0,0 +1,28 @@ +import { Card, CardContent, CardMedia, CardProps, Typography } from '@mui/material' +import { FC } from 'react' + +export interface EmplyeeCardProps extends CardProps { + name: string + image: string + position?: string +} + +export const EmplyeeCard: FC = ({ name, position, image, sx, ...props }) => { + return ( + + + + + {name} + + {position && ( + + {position} + + )} + + + ) +} + +export default EmplyeeCard diff --git a/src/components/molecules/EmplyeeStack/index.tsx b/src/components/molecules/EmplyeeStack/index.tsx new file mode 100644 index 0000000..e90c2e7 --- /dev/null +++ b/src/components/molecules/EmplyeeStack/index.tsx @@ -0,0 +1,56 @@ +// src/components/StackedDeck.tsx +import { FC, useEffect, useState } from 'react' +import { Box } from '@mui/material' +import { EmplyeeCard, EmplyeeCardProps } from 'components/molecules/EmplyeeCard/index.js' + +interface Props { + items: EmplyeeCardProps[] + + // Visual offsets + offsetStep?: number // px shift per card + maxVisible?: number // how many cards we actually render (performance) +} + +const EmplyeeStack: FC = ({ + offsetStep = 10, // px shift per card + maxVisible = 6, // how many cards we actually render (performance) + items: initialItems, +}) => { + const [items, setItems] = useState(initialItems) + + useEffect(() => { + setItems(initialItems) + }, [initialItems]) + + const handleTopClick = () => { + if (items.length) { + setItems([...items.slice(1), items[0]]) + } + } + + return ( + + {items.slice(0, maxVisible).map((props, idx) => ( + + ))} + + ) +} + +export default EmplyeeStack diff --git a/src/components/pages/PeoplePage/PeoplePage.test.tsx b/src/components/pages/PeoplePage/PeoplePage.test.tsx new file mode 100644 index 0000000..02dc6b8 --- /dev/null +++ b/src/components/pages/PeoplePage/PeoplePage.test.tsx @@ -0,0 +1,28 @@ +import { screen } from '@testing-library/react' +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { useAnalytics } from 'use-analytics' + +import { renderWithRouter as render } from 'components/utils/tests/index.js' +import ProjectsPage from '.' + +// Mock the analytics module +vi.mock('use-analytics', () => ({ + useAnalytics: () => ({ plugins: { enable: vi.fn(), disable: vi.fn() } }), +})) + +vi.stubGlobal('open', vi.fn()) +describe('ProjectsPage component', () => { + test('renders without crashing and displays the correct project titles', () => { + render() + + // check the section titles + expect(screen.getByText('Robotics')).toBeInTheDocument() + expect(screen.getByText('Engineering')).toBeInTheDocument() + expect(screen.getByText('Hobbies')).toBeInTheDocument() + + // check some of the projects + expect(screen.getByText('LINFA: An Intuitive Block-Programming Interface for Reconfigurable Robots')).toBeInTheDocument() + expect(screen.getByText("Revamping HHCM's Modular: Swift Generation and Control of Modular Robot Models")).toBeInTheDocument() + expect(screen.getByText("Scuola d'arme")).toBeInTheDocument() + }) +}) diff --git a/src/components/pages/PeoplePage/index.tsx b/src/components/pages/PeoplePage/index.tsx new file mode 100644 index 0000000..4876d06 --- /dev/null +++ b/src/components/pages/PeoplePage/index.tsx @@ -0,0 +1,40 @@ +import { Box, Typography } from '@mui/material' + +import EmplyeeCard from 'components/molecules/EmplyeeCard/index.js' +import { Page } from 'components/templates/index.js' +import EmplyeeStack from '../../molecules/EmplyeeStack/index.js' + +const ProjectsPage = () => { + return ( + + + Tutti i Personaggi storici della Compagnia sono realmente vissuti ed esistono attendibili fonti bibliografiche. Il gruppo è suddiviso per + classi sociali: Uomini d'arme, Artigiani, Nobili Cavalieri, Nobildonne, uomini e donne del popolo; Ogni Personaggio, il suo ruolo e il suo + comportamento sono fondamentali alla ricostruzione di uno spaccato della vita di un campo d'arme del tardo XIV Secolo. + + + + + + + + + + + + + ) +} + +export default ProjectsPage diff --git a/src/components/pages/index.ts b/src/components/pages/index.ts index 52b0833..f3817f4 100644 --- a/src/components/pages/index.ts +++ b/src/components/pages/index.ts @@ -1,5 +1,6 @@ export { default as MainPage } from './MainPage' export { default as ContactPage } from './ContactPage' +export { default as ProjectsPage } from './PeoplePage' export { default as BusinessCardPage } from './BusinessCardPage' export { default as ErrorPage } from './ErrorPage'