Refactor portfolio layout and styling for responsiveness

rafpaz · May 1, 2023 · 5b6c691 · 5b6c691
1 parent 7cc02a6
commit 5b6c691
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/components/Home/Portfolio/Portfolio.tsx b/components/Home/Portfolio/Portfolio.tsx
@@ -12,16 +12,18 @@ const Portfolio: React.FC = () => (
  </div>
  </div>
  </div>
- <div className="grid grid-cols-3 grid-rows-3 gap-4">
- <PortfolioImage imgName="gallery_image" alt="First Image" />
- <PortfolioImage imgName="p2" alt="Second Image" />
- <PortfolioImage imgName="p3" alt="Third Image" />
- <PortfolioVideo videoId="lUaMXm_DLJ4" />
+ <div className="container mx-auto px-5 py-2 lg:px-32 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>
  </div>
  </section>

diff --git a/components/Home/Portfolio/PortfolioImage.tsx b/components/Home/Portfolio/PortfolioImage.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 // @ts-ignore
 import { Image, Transformation } from "cloudinary-react";
 import cloudinary from "cloudinary-core";
@@ -12,17 +11,17 @@ const PortfolioImage: React.FC<{ imgName: string; alt: string }> = ({
  imgName,
 }) => {
  return (
- <div className="p-[10px] overflow-hidden h-[255px]">
- <a href={cloudinaryCore.url(imgName)} className="">
- <Image
- cloudName="dadaboom"
- publicId={imgName}
- className="img-responsive"
- alt={alt}
- >
- <Transformation height="293" width="370" crop="scale" />
- </Image>
- </a>
+ <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>
  </div>
  );
 };

diff --git a/components/Home/Portfolio/PortfolioVideo.tsx b/components/Home/Portfolio/PortfolioVideo.tsx
@@ -4,13 +4,15 @@ import { isMobile } from "react-device-detect";
 
 const PortfolioVideo: React.FC<{ videoId: string }> = ({ videoId }) => {
  const opts = {
- height: 247,
- width: 360,
+ height: 'auto',
+ width: '100%',
  };
- if (isMobile) opts.width = window.innerWidth - 20;
+ // if (isMobile) opts.width = window.innerWidth - 20;
  return (
- <div className="p-[10px] overflow-hidden h-[255px]">
- <YouTube videoId={videoId} opts={opts} />
+ <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>
  );
 };

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,12 @@
 module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./slices/**/*.{js,ts,jsx,tsx}"],
  theme: {
+ screens: {
+ sm: '576px',
+ md: '768px',
+ lg: '992px',
+ xl: '1200px',
+ },
  fontFamily: {
  sans: "Lato, sans-serif",
  serif: "'Libre Baskerville', sans-serif",