Andy WIP

src/components/WorkTile.tsx

@@ -4,7 +4,7 @@ import Heading from './Heading'
 
 const WorkTile = ({ children, title, links, className }: WorkTileWrapperProps) => {
   return (
-    <div className={clsx('flex min-h-svh w-full flex-col gap-12 p-12', className)}>
+    <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}

src/content/WorkAndy.tsx

@@ -0,0 +1,28 @@
+import Paragraph from '@/components/Paragraph'
+import WorkTile from '@/components/WorkTile'
+import andyAlt from './images/andy-alt.png'
+import andyBadge from './images/andy-badge.jpg'
+import andyMain from './images/andy-main.png'
+
+const WorkAndy = () => {
+  return (
+    <WorkTile title="Andy Warhol museum logo">
+      <Paragraph>
+        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="grid grid-flow-row-dense grid-cols-2 gap-4">
+        <img src={andyMain} className="w-full" />
+        <img src={andyAlt} className="w-full" />
+        <img src={andyBadge} className="w-full" />
+      </div>
+      <div className="flex flex-col gap-4 md:flex-row">
+        <div className="md:flex-[2]"></div>
+        <div className="md:flex-1"></div>
+      </div>
+    </WorkTile>
+  )
+}
+
+export default WorkAndy

src/content/WorkKolbord.tsx

@@ -18,6 +18,13 @@ const WorkKolbord = () => {
         Opinionated, free to use, and open source app for two-click reservation of anything.
         Prototyped in Figma, coded in React, Payload CMS, with user management in Clerk.
       </Paragraph>
+      <div className="flex flex-col gap-8 md:flex-row">
+        <div className="aspect-[4_/_3] bg-red-100 md:flex-[2]">h</div>
+        <div className="flex flex-col gap-8 md:flex-1">
+          <div className="aspect-square bg-red-200"></div>
+          <div className="aspect-square bg-red-200"></div>
+        </div>
+      </div>
     </WorkTile>
   )
 }

src/pages/Home.tsx

@@ -2,6 +2,7 @@ import AboutMe from '@/content/AboutMe'
 import Chart from '@/content/Chart'
 import Footer from '@/content/Footer'
 import Intro from '@/content/Intro'
+import WorkAndy from '@/content/WorkAndy'
 import WorkKolbord from '@/content/WorkKolbord'
 import WorkScrollDriven from '@/content/WorkScrollDriven'
 import WorkScrollDrivenShowcase from '@/content/WorkScrolldrivenShowcase'
@@ -15,6 +16,7 @@ const Home = () => {
       <WorkKolbord />
       <WorkScrollDriven />
       <WorkScrollDrivenShowcase />
+      <WorkAndy />
       <WorkWebUmenia />
       <AboutMe />
       <Footer />