diff --git a/src/components/WorkTile.tsx b/src/components/WorkTile.tsx index c125cdc..390ca58 100644 --- a/src/components/WorkTile.tsx +++ b/src/components/WorkTile.tsx @@ -1,8 +1,9 @@ import { clsx } from 'clsx' import { HTMLAttributes, ReactNode } from 'react' import Heading from './Heading' +import Paragraph from './Paragraph' -const WorkTile = ({ children, title, links, className }: WorkTileWrapperProps) => { +const WorkTile = ({ children, title, links, className, text }: WorkTileWrapperProps) => { return ( <div className={clsx('flex min-h-svh w-full flex-col gap-8 p-12', className)}> {title && ( @@ -10,7 +11,10 @@ const WorkTile = ({ children, title, links, className }: WorkTileWrapperProps) = {title} </Heading> )} - {children} + <div className="flex max-w-screen-lg flex-col gap-8"> + <Paragraph>{text}</Paragraph> + <div className="flex flex-col gap-4 md:flex-1">{children}</div> + </div> {links && <div className="flex flex-col gap-1">{links}</div>} </div> ) @@ -19,6 +23,7 @@ const WorkTile = ({ children, title, links, className }: WorkTileWrapperProps) = type WorkTileWrapperProps = { links?: ReactNode title?: string + text?: string } & HTMLAttributes<HTMLDivElement> export default WorkTile diff --git a/src/content/WorkAndy.tsx b/src/content/WorkAndy.tsx index 5e7eda7..40ba611 100644 --- a/src/content/WorkAndy.tsx +++ b/src/content/WorkAndy.tsx @@ -1,5 +1,5 @@ -import Paragraph from '@/components/Paragraph' import WorkTile from '@/components/WorkTile' +import MasonryWrapper from '@/partials/MasonryWrapper' import andyAlt from './images/andy-alt.png' import andyBadge from './images/andy-badge.jpg' import andyMain from './images/andy-main.png' @@ -7,20 +7,16 @@ import andyWall from './images/andy-wall.jpg' const WorkAndy = () => { return ( - <WorkTile title="Andy Warhol museum logo"> - <div className="flex flex-col gap-8 md:flex-row"> - <Paragraph className="h-fit md:sticky md:top-24 md:flex-1"> - This is me dipping toes into logo waters. Nobody actually asked for it, it just struck me, - after visiting the museum, that it should have a more solid identity, given the greatness - of the king of pop art. - </Paragraph> - <div className="flex flex-col gap-8 md:flex-1"> - <img src={andyMain} /> - <img src={andyAlt} /> - <img src={andyWall} /> - <img src={andyBadge} /> - </div> - </div> + <WorkTile + title="Andy Warhol museum logo" + text="This is me dipping toes into logo waters. Nobody actually asked for it, it just struck me, after visiting the museum, that it should have a more solid identity, given the greatness of the king of pop art." + > + <MasonryWrapper> + <img src={andyMain} /> + <img src={andyAlt} /> + <img src={andyWall} /> + <img src={andyBadge} /> + </MasonryWrapper> </WorkTile> ) } diff --git a/src/content/WorkComparator.tsx b/src/content/WorkComparator.tsx index 0a78b65..f8c5cfe 100644 --- a/src/content/WorkComparator.tsx +++ b/src/content/WorkComparator.tsx @@ -1,15 +1,13 @@ -import Paragraph from '@/components/Paragraph' import WorkTile from '@/components/WorkTile' import comparator from './images/comparator.mp4' const WorkComparator = () => { return ( - <WorkTile title="Photo comparator interface"> - <Paragraph> - A conceptual UI for an application dedicated to displaying before and after photographs of - various spaces and places within our cities and nature. - </Paragraph> - <div className="mt-4 max-w-3xl rounded-3xl border-2 border-zinc-600 bg-zinc-800 p-4 sm:p-6 md:p-8"> + <WorkTile + title="Photo comparator interface" + text="A conceptual UI for an application dedicated to displaying before and after photographs of various spaces and places within our cities and nature." + > + <div className="max-w-3xl rounded-3xl border-2 border-zinc-600 bg-zinc-800 p-4 sm:p-6 md:p-8"> <video loop autoPlay playsInline className="rounded-xl"> <source src={comparator} type="video/mp4"></source> </video>