Refactor Photo component styles and layout for improved responsiveness and alignment

Author: Oleksandr Ratushnyi

src/app/globals.css

@@ -116,6 +116,9 @@ a, button {
 /* full size image */
 .medium-zoom-image--opened {
   cursor: zoom-out;
+  object-fit: contain !important;
+  height: 90vh !important;
+  width: 90vw !important;
 }
 
 .white {

src/app/page.module.css

@@ -56,6 +56,9 @@
 .section {
   padding-top: var(--SECTION_OFFSET);
 }
+.section-- {
+  padding-top: var(--SECTION_OFFSET);
+}
 
 .projectsList {
   list-style: none;
@@ -108,3 +111,7 @@
 .singleVerticalImage {
   max-width: 25%;
 }
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}

src/app/page.tsx

@@ -59,10 +59,11 @@ import photo6 from "../images/a00001.jpeg";
 import photo2 from "../images/a00002.jpeg";
 import photo4 from "../images/a00003.jpeg";
 import photo3 from "../images/a00004.jpeg";
-import photo5 from "../images/a00006.jpeg";
+import photo5 from "../images/IMG_3059.jpeg";
 import photo1 from "../images/a00008.jpg";
 import photo7 from "../images/IMG_2349.jpeg";
 import photo9 from "../images/IMG_3055.jpeg";
+import photo10 from "../images/IMG_3058.jpeg";
 import beetroot from "../images/beetroot.png";
 import cert1 from "../images/c1.png";
 import cert3 from "../images/c3.png";
@@ -302,14 +303,15 @@ export default function Home() {
           <Paragraph>
             At my home, there are three cats 🐈🐈🐈 and one dog 🦮.
           </Paragraph>
-          <Collage row>
-            <Photo src={photo9} vertical grid caption="Whole squad" />
-            <Photo src={photo5} vertical grid caption="I'm working with Platon" />
-            <Photo src={photo6} vertical grid caption="Lastick & Platon" />
-            <Photo src={photo7} vertical grid caption="Lapsi" />
+          <Collage className={styles['mb-0']}>
+            <Photo src={photo9} paddingHack={170} vertical grid caption="Whole squad" />
+            <Photo src={photo10} paddingHack={170} vertical grid caption="Lapsi and Luna" />
+            <Photo src={photo5} paddingHack={85} offset={{y: -20}} grid caption="Platon and Luna" />
+            <Photo src={photo7}  grid caption="Lapsi" />
+            <Photo src={photo6} paddingHack={100} offset={{y: -34}} grid caption="Lastick & Platon" />
           </Collage>
         </section>
-        <section id="my-work" className={styles.section}>
+        <section id="my-work">
           <h2 className={styles.heading}>my work 🗂️</h2>
           <Paragraph>
             I began my journey in web engineering in early 2018. Over the years,

src/components/Collage/Collage.module.css

@@ -89,26 +89,33 @@
   grid-row: 1 / 4;
 }
 
-/* variant 2 is mirror of variant 1 */
-.variant-2.s-4 { 
-  grid-template-columns: 1fr 2fr 1fr;
-  grid-template-rows: 1fr 2fr 1fr;
+.s-5 {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
 }
-.variant-2.s-4 > *:nth-child(1) {
+
+.s-5 > *:nth-child(1) {
   grid-column: 1 / 2;
-  grid-row: 1 / 4;
+  grid-row: 1 / 2;
 }
-.variant-2.s-4 > *:nth-child(2) {
+.s-5 > *:nth-child(2) {
   grid-column: 2 / 3;
-  grid-row: 3 / 4;
+  grid-row: 1 / 2;
 }
-.variant-2.s-4 > *:nth-child(3) {
-  grid-column: 3 / 4;
-  grid-row: 3 / 4;
+
+.s-5 > *:nth-child(3) {
+  grid-column: 1 / 3;
+  grid-row: 2 / 3;
 }
-.variant-2.s-4 > *:nth-child(4) {
-  grid-column: 2 / 4;
-  grid-row: 1 / 3;
+
+.s-5 > *:nth-child(4) {
+  grid-column: 3 / 5;
+  grid-row: 1 / 2;
+}
+
+.s-5 > *:nth-child(5) {
+  grid-column: 3 / 5;
+  grid-row: 2 / 3;
 }
 
 .row {

src/components/Photo/Photo.module.css

@@ -31,6 +31,6 @@
   color: var(--N400);
 }
 
-.vertical .image {
+.vertical:not(.paddingHack) .image {
   height: 100%;
 }

src/components/Photo/Photo.tsx

@@ -1,7 +1,7 @@
-import { StaticImport } from 'next/dist/shared/lib/get-img-props';
-import Image from 'next/image';
-import styles from './Photo.module.css';
-import clsx from 'clsx';
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+import Image from "next/image";
+import styles from "./Photo.module.css";
+import clsx from "clsx";
 
 export const getAlt = (text: string) => `Oleksandr Ratushnyi ${text}`;
 
@@ -14,8 +14,12 @@ interface IPhotoProps {
   test?: boolean;
   grid?: boolean;
   className?: string;
-  loading?: 'lazy' | 'eager';
+  loading?: "lazy" | "eager";
   priority?: boolean;
+  offset?: {
+    x?: number;
+    y?: number;
+  };
 }
 
 export const Photo = function Photo({
@@ -27,30 +31,40 @@ export const Photo = function Photo({
   test,
   grid,
   className,
-  loading = 'lazy',
-  priority
+  loading = "lazy",
+  priority,
+  offset = {
+    x: 0,
+    y: 0,
+  },
 }: IPhotoProps) {
   return (
     <figure
+      style={{
+        transform: `translate(${offset.x || 0}%, ${offset.y || 0}%)`,
+      }}
       className={clsx(
         styles.figure,
-        grid ? '' : styles.single,
-        vertical ? styles.vertical : '',
-        className,
+        grid ? "" : styles.single,
+        vertical ? styles.vertical : "",
+        {[styles.paddingHack]: paddingHack},
+        className
       )}
     >
       <div
         className={styles.image}
         style={{
-          paddingBottom: `${vertical ? paddingHack || 100 : paddingHack || 66.7}%`,
-          backgroundColor: test ? 'red' : 'transparent',
+          paddingBottom: `${
+            vertical ? paddingHack || 100 : paddingHack || 66.7
+          }%`,
+          backgroundColor: test ? "red" : "transparent",
         }}
       >
         <Image
           data-zoomable
           src={src}
           alt={getAlt(alt || caption)}
-          style={{ objectFit: 'cover', objectPosition: 'center' }}
+          style={{ objectFit: "cover", objectPosition: "center" }}
           fill
           placeholder="blur"
           loading={loading}