Refactor portfolio grid layout and image display

components/Home/Portfolio/Portfolio.tsx

@@ -12,18 +12,16 @@ const Portfolio: React.FC = () => (
  </div>
  </div>
  </div>
- <div className="container mx-auto py-2 lg:pt-12">
- <div className="-m-1 flex flex-wrap md:-m-2">
- <PortfolioImage imgName="gallery_image" alt="First Image" />
- <PortfolioImage imgName="p2" alt="Second Image" />
- <PortfolioImage imgName="p3" alt="Third Image" />
- <PortfolioVideo videoId="lUaMXm_DLJ4" />
- <PortfolioVideo videoId="GNFQ8WzHc1w" />
- <PortfolioVideo videoId="IB2v9tw7q_g" />
- <PortfolioVideo videoId="4eNeaim4VRQ" />
- <PortfolioVideo videoId="yDeH1W2eshQ" />
- <PortfolioVideo videoId="qSgojcFYJ1Q" />
- </div>
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 auto-rows-fr">
+ <PortfolioImage imgName="gallery_image" alt="First Image" />
+ <PortfolioImage imgName="p2" alt="Second Image" />
+ <PortfolioImage imgName="p3" alt="Third Image" />
+ <PortfolioVideo videoId="lUaMXm_DLJ4" />
+ <PortfolioVideo videoId="GNFQ8WzHc1w" />
+ <PortfolioVideo videoId="IB2v9tw7q_g" />
+ <PortfolioVideo videoId="4eNeaim4VRQ" />
+ <PortfolioVideo videoId="yDeH1W2eshQ" />
+ <PortfolioVideo videoId="qSgojcFYJ1Q" />
  </div>
  </div>
  </section>

components/Home/Portfolio/PortfolioImage.tsx

@@ -11,16 +11,16 @@ const PortfolioImage: React.FC<{ imgName: string; alt: string }> = ({
  imgName,
 }) => {
  return (
- <div className="flex w-full md:w-1/2 lg:w-1/3 flex-wrap group cursor-pointer p-[10px]">
- <div className="w-full p-1 md:p-2 overflow-hidden">
-  <Image
-  cloudName="dadaboom"
-  publicId={imgName}
-  className="img-responsive w-full transition-all duration-[0.6s] ease-[ease] group-hover:opacity-[0.8] group-hover:scale-[1.1]"
-  alt={alt}
-  >
-  <Transformation height="293" width="370" crop="scale" />
-  </Image>
+ <div className="group cursor-pointer">
+ <div className="overflow-hidden">
+ <Image
+ cloudName="dadaboom"
+ publicId={imgName}
+ className="img-responsive w-full transition-all duration-[0.6s] ease-[ease] group-hover:opacity-[0.8] group-hover:scale-[1.1]"
+ alt={alt}
+ >
+ <Transformation height="293" width="370" crop="scale" />
+ </Image>
  </div>
  </div>
  );

components/Home/Portfolio/PortfolioVideo.tsx

@@ -1,20 +1,8 @@
 import React from "react";
 import YouTube from "react-youtube";
-import { isMobile } from "react-device-detect";
 
 const PortfolioVideo: React.FC<{ videoId: string }> = ({ videoId }) => {
- const opts = {
- height: 'auto',
- width: '100%',
- };
- // if (isMobile) opts.width = window.innerWidth - 20;
- return (
- <div className="flex w-full md:w-1/2 lg:w-1/3 flex-wrap group cursor-pointer p-[10px]">
- <div className="w-full p-1 md:p-2 overflow-hidden">
- <YouTube videoId={videoId} opts={opts} />
- </div>
- </div>
- );
+ return <YouTube videoId={videoId} className="h-full" iframeClassName="h-full w-full" />;
 };
 
 export default PortfolioVideo;