Update content, use grid instead of Masonry, rename projects

src/components/WorkPreviewTile.tsx

@@ -5,8 +5,8 @@ import Heading from './Heading'
 const WorkPreviewTile = ({ children, title, className, link }: WorkPreviewTileProps) => {
   return (
     <a href={link} className={clsx('w-full', className)}>
-      <div className="mb-4">{children}</div>
-      <Heading size={2} className="hover:underline">
+      {children}
+      <Heading size={2} className="mt-4 hover:underline">
         {title} &rarr;
       </Heading>
     </a>

src/content/WorkPhoto.tsx

@@ -1,5 +1,5 @@
 import WorkTile from '@/components/WorkTile'
-import MasonryWrapper from '@/partials/MasonryWrapper'
+import GridWrapper from '@/partials/GridWrapper'
 import photoFashion from './images/photo-fashion.jpg'
 import photoM from './images/photo-michaela.jpg'
 import photoS from './images/photo-stanka.jpg'
@@ -11,20 +11,20 @@ const WorkPhoto = () => {
       title="Portrait photography"
       text="I occasionally take portraits; mostly of family, friends, or friends of friends. It’s a great creative outlet, opportunity to work with people, and to experience something different."
     >
-      <MasonryWrapper>
-        <div className="mb-4 flex aspect-square items-center bg-neutral-200 p-9 dark:bg-neutral-700">
+      <GridWrapper>
+        <div className="flex aspect-square items-center bg-neutral-200 p-9 dark:bg-neutral-700">
           <img src={photoM} />
         </div>
-        <div className="mb-4 flex aspect-square items-center bg-neutral-200 p-9 dark:bg-neutral-700">
+        <div className="flex aspect-square items-center bg-neutral-200 p-9 dark:bg-neutral-700">
           <img src={photoS} />
         </div>
-        <div className="mb-4 flex aspect-square items-center justify-center bg-neutral-200 p-9 dark:bg-neutral-700">
+        <div className="flex aspect-square items-center justify-center bg-neutral-200 p-9 dark:bg-neutral-700">
           <img src={photoFashion} className="w-2/3" />
         </div>
-        <div className="mb-4 flex aspect-square items-center bg-neutral-200 p-9 dark:bg-neutral-700">
+        <div className="flex aspect-square items-center bg-neutral-200 p-9 dark:bg-neutral-700">
           <img src={photoT} />
         </div>
-      </MasonryWrapper>
+      </GridWrapper>
     </WorkTile>
   )
 }

src/content/WorkScrollDriven.tsx

@@ -1,6 +1,6 @@
 import Link from '@/components/Link'
 import WorkTile from '@/components/WorkTile'
-import MasonryWrapper from '@/partials/MasonryWrapper'
+import GridWrapper from '@/partials/GridWrapper'
 import scrollImage from './images/scroll-1.png'
 import scrollPreview3 from './images/scroll-3.mp4'
 import scrollMain from './images/scroll-main.mp4'
@@ -37,8 +37,8 @@ const WorkScrollDriven = () => {
         </div>
       }
     >
-      <MasonryWrapper>
-        <div className="mb-4 flex aspect-square items-center bg-slate-200 p-4 sm:p-6 md:p-8 dark:bg-slate-700">
+      <GridWrapper>
+        <div className="flex aspect-square items-center bg-slate-200 p-4 sm:p-6 md:p-8 dark:bg-slate-700">
           <div className="relative">
             <img src={mockWindow} alt="" />
             <div className="absolute bottom-[6%] left-[2.7%] right-[2.6%] top-[4.8%] overflow-hidden rounded-b-xl">
@@ -53,7 +53,7 @@ const WorkScrollDriven = () => {
             </video>
           </div>
         </div>
-      </MasonryWrapper>
+      </GridWrapper>
     </WorkTile>
   )
 }

src/content/andy/AndyPreview.tsx

@@ -3,7 +3,7 @@ import preview from './images/andy-home.jpg'
 
 const AndyPreview = () => {
   return (
-    <WorkPreviewTile title="Andy Warhol museum logo" link="/work/andy">
+    <WorkPreviewTile title="Andy Warhol museum" link="/work/andy">
       <img src={preview} />
     </WorkPreviewTile>
   )

src/content/andy/index.tsx

@@ -1,6 +1,6 @@
 import Paragraph from '@/components/Paragraph'
 import WorkTile from '@/components/WorkTile'
-import MasonryWrapper from '@/partials/MasonryWrapper'
+import GridWrapper from '@/partials/GridWrapper'
 import andyAlt from './images/andy-alt.jpg'
 import andyMain from './images/andy-main.jpg'
 import andyStreet from './images/andy-street.jpg'
@@ -17,15 +17,15 @@ const WorkAndy = () => {
   return (
     <WorkTile
       id="andy"
-      title="Andy Warhol museum logo"
+      title="Andy Warhol museum"
       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."
       top={<img src={andyStreet} />}
       more={<More />}
     >
-      <MasonryWrapper>
-        <img src={andyMain} className="mb-4" />
-        <img src={andyAlt} className="mb-4" />
-      </MasonryWrapper>
+      <GridWrapper>
+        <img src={andyMain} />
+        <img src={andyAlt} />
+      </GridWrapper>
     </WorkTile>
   )
 }

src/content/kolbord/KolbordPreview.tsx

@@ -3,7 +3,7 @@ import preview from './images/kolbord-home.png'
 
 const KolbordPreview = () => {
   return (
-    <WorkPreviewTile title="Kolbord: space booking" link="/work/kolbord">
+    <WorkPreviewTile title="Kolbord" link="/work/kolbord">
       <img src={preview} />
     </WorkPreviewTile>
   )

src/content/kolbord/index.tsx

@@ -1,7 +1,7 @@
 import Link from '@/components/Link'
 import Paragraph from '@/components/Paragraph'
 import WorkTile from '@/components/WorkTile'
-import MasonryWrapper from '@/partials/MasonryWrapper'
+import GridWrapper from '@/partials/GridWrapper'
 import kolbordFashion from './images/kolbord-fashion.jpg'
 import kolbordDemo from './images/kolbord-ipad.mp4'
 import kolbordMacbook from './images/kolbord-macbook.png'
@@ -43,12 +43,12 @@ const WorkKolbord = () => {
         </div>
       }
     >
-      <MasonryWrapper>
-        <img src={kolbordSidebar} className="mb-4" alt="" />
-        <img src={kolbordWatch} className="mb-4" alt="" />
-        <img src={kolbordFashion} className="mb-4" alt="" />
-        <img src={kolbordMacbook} className="mb-4" alt="" />
-      </MasonryWrapper>
+      <GridWrapper>
+        <img src={kolbordSidebar} alt="Kolbord sidebar" />
+        <img src={kolbordWatch} alt="Kolbord Apple Watch" />
+        <img src={kolbordFashion} alt="Kolbord t-shirt" />
+        <img src={kolbordMacbook} alt="Kolbord web" />
+      </GridWrapper>
     </WorkTile>
   )
 }

src/content/mhd/index.tsx

@@ -1,6 +1,6 @@
 import Paragraph from '@/components/Paragraph'
 import WorkTile from '@/components/WorkTile'
-import MasonryWrapper from '@/partials/MasonryWrapper'
+import GridWrapper from '@/partials/GridWrapper'
 import ReactBeforeSliderComponent from 'react-before-after-slider-component'
 import 'react-before-after-slider-component/dist/build.css'
 import mhdAfter from './images/mhd-after.jpg'
@@ -38,7 +38,7 @@ const WorkMHD = () => {
       top={<img src={mhdHome} />}
     >
       <img src={mhdTrio} />
-      <MasonryWrapper>
+      <GridWrapper>
         <div className="relative mx-auto max-w-screen-xl">
           <img src={mhdVideo} alt="" />
           <div className="absolute left-[34.3%] top-[16.3%] w-[31.6%] overflow-hidden">
@@ -55,7 +55,7 @@ const WorkMHD = () => {
             </video>
           </div>
         </div>
-      </MasonryWrapper>
+      </GridWrapper>
       <ReactBeforeSliderComponent
         currentPercentPosition={69}
         delimiterColor="#222"

src/content/thankful/ThankfulPreview.tsx

@@ -3,7 +3,7 @@ import preview from './images/thank-home.jpg'
 
 const ThankfulPreview = () => {
   return (
-    <WorkPreviewTile title="Gratitude journal" link="/work/thankful">
+    <WorkPreviewTile title="Thankful" link="/work/thankful">
       <img src={preview} />
     </WorkPreviewTile>
   )

src/content/thankful/index.tsx

@@ -1,23 +1,23 @@
 import WorkTile from '@/components/WorkTile'
-import MasonryWrapper from '@/partials/MasonryWrapper'
+import GridWrapper from '@/partials/GridWrapper'
 import thankfulMain from './images/thank-main.jpg'
 import thankfulVideo from './images/thank.mp4'
 
 const WorkThankful = () => {
   return (
     <WorkTile
       id="thankful"
-      title="Simple gratitude journal"
+      title="Thankful"
       text="This app concept aims to find a simple, lean, and nice gratitude journaling experience."
     >
-      <MasonryWrapper>
-        <img src={thankfulMain} className="mb-4" />
+      <GridWrapper>
+        <img src={thankfulMain} />
         <div className="overflow-hidden">
           <video loop autoPlay playsInline muted className="-mt-[2px]">
             <source src={thankfulVideo} type="video/mp4"></source>
           </video>
         </div>
-      </MasonryWrapper>
+      </GridWrapper>
     </WorkTile>
   )
 }

src/partials/GridWrapper.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react'
+
+const GridWrapper = ({ children }: PropsWithChildren) => {
+  return <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">{children}</div>
+}
+
+export default GridWrapper