Add masonry, update layouts

src/components/WorkTile.tsx

@@ -1,16 +1,20 @@
 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 && (
         <Heading size={2} className="sticky top-8">
           {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

src/content/WorkAndy.tsx

@@ -1,26 +1,22 @@
-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'
 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>
   )
 }

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>