Merge pull request #14 from waszkiewiczja/feature

added gallery
waszkiewiczja · Feb 11, 2024 · 922baae · 922baae
2 parents e712622 + 7fa869d
commit 922baae
Show file tree

Hide file tree

Showing 15 changed files with 184 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/mm1.jpg b/public/mm1.jpg
diff --git a/public/mm1.png b/public/mm1.png
diff --git a/public/mm2.jpg b/public/mm2.jpg
diff --git a/public/mm2.png b/public/mm2.png
diff --git a/src/components/main/Certificates.tsx b/src/components/main/Certificates.tsx
@@ -35,7 +35,7 @@ export const Certificates: React.FC = () => {
 
           return (
             <div key={src} className="cursor-pointer">
-              <p className="text-3xl font-bold mb-6 text-[#5BC0EB] text-start mt-12 md:text-4xl">
+              <p className="text-3xl font-bold mb-6 text-[#5BC0EB] text-start mt-14 md:text-4xl cursor-default">
                 {title}
               </p>
               <Item

diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
@@ -7,10 +7,7 @@ import { FirstScreen } from './FirstScreen';
 
 export const Main: React.FC = () => {
   return (
-    <main
-      className="text-center flex flex-col justify-center w-full p-8  "
-      data-testid="main"
-    >
+    <main className="text-center flex flex-col justify-center w-full p-8  ">
       <FirstScreen />
       <Certificates />
       <Projects />

diff --git a/src/components/main/Projects.tsx b/src/components/main/Projects.tsx
@@ -3,23 +3,15 @@ import { Abtests } from './projects/Abtests';
 import { Motorway } from './projects/Motorway';
 import { Memory } from './projects/Memory';
 import { Sp } from './projects/Sp';
+import { Title } from './projects/Title';
 
 export const Projects: React.FC = () => {
   return (
     <section
       data-testid="projects"
       className="text-center flex flex-col justify-center max-w-screen-lg mx-auto mt-24 md:mt-48"
     >
-      <p
-        className="text-4xl font-bold mb-10 text-white text-start md:text-6xl"
-        id="projects"
-      >
-        <span className="text-[#5BC0EB]">2. </span>
-        Projects
-      </p>
-      <p className="text-justify leading-8">
-        Short recap of some projects created by myself.
-      </p>
+      <Title />
       <Sp />
       <MyInvestment />
       <Abtests />

diff --git a/src/components/main/Ux.tsx b/src/components/main/Ux.tsx
@@ -1,3 +1,7 @@
+'use client';
+import 'photoswipe/dist/photoswipe.css';
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import Image from 'next/image';
 import { UxAnimation } from './UxAnimation';
 
 export const Ux: React.FC = () => {
@@ -24,7 +28,27 @@ export const Ux: React.FC = () => {
         cart&apos;, signing up for a service, filling out a form, or clicking on
         a link.
       </p>
-      <img src="google-ux.png" alt="Google C" />
+      <Gallery>
+        <Item
+          original="google-ux.png"
+          thumbnail="google-ux.png"
+          width="1600"
+          height="1250"
+        >
+          {({ ref, open }) => (
+            <Image
+              ref={ref}
+              onClick={open}
+              src="google-ux.png"
+              alt="UX/UI"
+              width={0}
+              height={0}
+              sizes="100vw"
+              className="cursor-pointer w-full h-fit"
+            ></Image>
+          )}
+        </Item>
+      </Gallery>
 
       <p className="text-3xl md:text-4xl font-bold mb-6 text-[#5BC0EB] text-start mt-12">
         What are AB tests?
@@ -82,7 +106,27 @@ export const Ux: React.FC = () => {
         people go to the cart from the second version, we have a 30% conversion.
       </p>
 
-      <img src="conversion.png" alt="Conversion" />
+      <Gallery>
+        <Item
+          original="conversion.png"
+          thumbnail="conversion.png"
+          width="1000"
+          height="600"
+        >
+          {({ ref, open }) => (
+            <Image
+              ref={ref}
+              onClick={open}
+              src="conversion.png"
+              alt="Conversion"
+              width={0}
+              height={0}
+              sizes="100vw"
+              className="cursor-pointer w-full h-fit"
+            ></Image>
+          )}
+        </Item>
+      </Gallery>
     </section>
   );
 };
diff --git a/src/components/main/projects/Abtests.tsx b/src/components/main/projects/Abtests.tsx
@@ -1,3 +1,8 @@
+'use client';
+import 'photoswipe/dist/photoswipe.css';
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import Image from 'next/image';
+
 export const Abtests: React.FC = () => {
   return (
     <div className="mt-10">
@@ -21,9 +26,38 @@ export const Abtests: React.FC = () => {
         page. Cookies remember which version was displayed to the user and
         display the same version again when they return to the website.
       </p>
-      <div className="flex flex-col justify-center items-center lg:justify-between lg:flex-row gap-4  ">
-        <img src="ab1.png" alt="AB1" width={500} />
-        <img src="ab2.png" alt="AB2" width={500} />
+
+      <div className="flex flex-col justify-center items-center lg:justify-between lg:flex-row gap-4 ">
+        <Gallery>
+          <Item original="ab1.png" thumbnail="ab1.png" width="800" height="800">
+            {({ ref, open }) => (
+              <Image
+                ref={ref}
+                onClick={open}
+                src="ab1.png"
+                alt="AB1"
+                width={500}
+                height={0}
+                sizes="100vw"
+                className="cursor-pointer h-fit"
+              ></Image>
+            )}
+          </Item>
+          <Item original="ab2.png" thumbnail="ab2.png" width="800" height="800">
+            {({ ref, open }) => (
+              <Image
+                ref={ref}
+                onClick={open}
+                src="ab2.png"
+                alt="AB2"
+                width={500}
+                height={0}
+                sizes="100vw"
+                className="cursor-pointer h-fit"
+              ></Image>
+            )}
+          </Item>
+        </Gallery>
       </div>
     </div>
   );

diff --git a/src/components/main/projects/Memory.tsx b/src/components/main/projects/Memory.tsx
@@ -65,33 +65,33 @@ export const Memory: React.FC = () => {
         </a>
       </p>
 
-      <div className="flex flex-col justify-center items-center lg:justify-between lg:flex-row gap-4 cursor-pointer ">
+      <div className="flex flex-col justify-center items-center lg:justify-between lg:flex-row gap-4 ">
         <Gallery>
-          <Item original="mm1.png" thumbnail="mm1.png" width="685" height="856">
+          <Item original="mm1.jpg" thumbnail="mm1.jpg" width="685" height="840">
             {({ ref, open }) => (
               <Image
                 ref={ref}
                 onClick={open}
-                src="mm1.png"
+                src="mm1.jpg"
                 alt="MM Start"
                 width={500}
                 height={0}
                 sizes="100vw"
-                style={{ height: 'auto' }}
+                className="cursor-pointer h-fit"
               ></Image>
             )}
           </Item>
-          <Item original="mm2.png" thumbnail="mm2.png" width="685" height="856">
+          <Item original="mm2.jpg" thumbnail="mm2.jpg" width="685" height="840">
             {({ ref, open }) => (
               <Image
                 ref={ref}
                 onClick={open}
-                src="mm2.png"
+                src="mm2.jpg"
                 alt="MM Play"
                 width={500}
                 height={0}
                 sizes="100vw"
-                style={{ height: 'auto' }}
+                className="cursor-pointer h-fit"
               ></Image>
             )}
           </Item>

diff --git a/src/components/main/projects/Motorway.tsx b/src/components/main/projects/Motorway.tsx
@@ -1,3 +1,8 @@
+'use client';
+import 'photoswipe/dist/photoswipe.css';
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import Image from 'next/image';
+
 export const Motorway: React.FC = () => {
   return (
     <div className="mt-10">
@@ -34,7 +39,22 @@ export const Motorway: React.FC = () => {
         Leaflet and OpenStreetMap libraries were used to create the map.
       </p>
 
-      <img src="map.png" alt="MotorwayMap" />
+      <Gallery>
+        <Item original="map.png" thumbnail="map.png" width="1900" height="950">
+          {({ ref, open }) => (
+            <Image
+              ref={ref}
+              onClick={open}
+              src="map.png"
+              alt="MotorwayMap"
+              width={0}
+              height={0}
+              sizes="100vw"
+              className="cursor-pointer w-full h-fit"
+            ></Image>
+          )}
+        </Item>
+      </Gallery>
     </div>
   );
 };
diff --git a/src/components/main/projects/MyInvestment.tsx b/src/components/main/projects/MyInvestment.tsx
@@ -1,3 +1,8 @@
+'use client';
+import 'photoswipe/dist/photoswipe.css';
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import Image from 'next/image';
+
 export const MyInvestment: React.FC = () => {
   return (
     <div>
@@ -29,7 +34,27 @@ export const MyInvestment: React.FC = () => {
         while the backend is handled by Django. The website is fully mobile and
         adapted to phones.
       </p>
-      <img src="investment1.png" alt="investment" />
+      <Gallery>
+        <Item
+          original="investment1.png"
+          thumbnail="investment1.png"
+          width="1900"
+          height="900"
+        >
+          {({ ref, open }) => (
+            <Image
+              ref={ref}
+              onClick={open}
+              src="investment1.png"
+              alt="Investment"
+              width={0}
+              height={0}
+              sizes="100vw"
+              className="cursor-pointer w-full h-fit"
+            ></Image>
+          )}
+        </Item>
+      </Gallery>
     </div>
   );
 };
diff --git a/src/components/main/projects/Sp.tsx b/src/components/main/projects/Sp.tsx
@@ -112,8 +112,6 @@ export const Sp: React.FC = () => {
           </Item>
         </Gallery>
       </div>
-
-      {/* <img src="sp.png" alt="S&P" /> */}
     </div>
   );
 };
diff --git a/src/components/main/projects/Title.tsx b/src/components/main/projects/Title.tsx
@@ -0,0 +1,16 @@
+export const Title: React.FC = () => {
+  return (
+    <>
+      <p
+        className="text-4xl font-bold mb-10 text-white text-start md:text-6xl"
+        id="projects"
+      >
+        <span className="text-[#5BC0EB]">2. </span>
+        Projects
+      </p>
+      <p className="text-justify leading-8">
+        Short recap of some projects created by myself.
+      </p>
+    </>
+  );
+};