- add portfolio links to page

- need to work on responsiveness and resizing of iframe

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

components/content/carousel/index.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import Image from "next/image";
 import { StaticImport } from "next/dist/shared/lib/get-img-props";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronCircleLeft, faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
+import IframeResizer from "iframe-resizer-react";
 
 interface ContentCarouselProps {
     data: Array<{
@@ -19,13 +22,28 @@ const ContentCarousel = ({
 
     const portfolioData = data[currentPageIdx];
     return (
-        <div>
+        <div className="flex flex-row justify-between">
-            <div className="p-4 px-10 flex flex-col">
+            {(currentPageIdx > 0) && <span className="cursor-pointer" onClick={() => setCurrentPageIdx(currentPageIdx - 1)}><FontAwesomeIcon width={50} height={50} icon={faChevronCircleLeft} className="fas fa-chevron-circle-left" style={{ color: "white" }} /></span>}
+            <div className={`p-4 ${portfolioData.prototypeIframeURL ? '' : 'px-10'} flex flex-col`}>
                 <div className=" w-fit pb-1 mb-8 border-b-2 border-white">{portfolioData.title}</div>
                 {portfolioData.heroImgSrc && <div className="mb-8"><Image src={portfolioData.heroImgSrc} alt=""/></div>}
                 <div>{portfolioData.description}</div>
-                <div>{<iframe src={portfolioData.prototypeIframeURL} width="100%" height="100%" frameBorder= "0"></iframe>}</div>
+                {portfolioData.prototypeIframeURL && <div style={{height: 900, minHeight: '100%'}}>
+                    {<IframeResizer
+                        src={portfolioData.prototypeIframeURL}
+                        log
+                        style={{
+                            width: "100%",
+                            minWidth: "100%",
+                            minHeight: '100%',
+                            height: '1px'
+                        }}
+
+                        frameBorder= "0"
+                    />}
+                </div>}
             </div>
+            {(currentPageIdx < pageLength - 1) && <span className="cursor-pointer" onClick={() => setCurrentPageIdx(currentPageIdx + 1)}><FontAwesomeIcon width={25} height={50} icon={faChevronCircleRight} className="fas fa-chevron-circle-right" style={{ color: "white" }} /></span>}
         </div>
         
     );

components/content/index.tsx

@@ -17,7 +17,7 @@ const Content = ({
     return (
         <div className="p-4 px-10 flex flex-col">
             <div className=" w-fit pb-1 mb-8 border-b-2 border-white">{title}</div>
-            {heroImgSrc && <div className="mb-8"><Image src={heroImgSrc} alt=""/></div>}
+            {heroImgSrc && <div className="mb-8 h-1/2"><Image src={heroImgSrc} alt=""/></div>}
             <div>{description}</div>
             <div>{innerChildren}</div>
         </div>

package.json

@@ -12,6 +12,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "iframe-resizer-react": "^1.1.0",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest",

pages/index.tsx

@@ -64,13 +64,15 @@ export default function Home() {
         </div>
       </div>}
       {showModal && (
-        <div style={{height: '100vh'}} className="laptop:px-24 absolute z-10 p-10 overflow-y-auto flex flex-row justify-center">
+        <div style={{height: '100vh', width: '100vw'}} className='justify-center flex flex-row bg-black bg-opacity-40'>
-          <div className=' bg-black bg-opacity-40'>
+          <div style={{height: '100vh'}} className="laptop:px-24 absolute z-10 p-10 overflow-y-auto flex flex-row justify-center">
-            <div className=" laptop:w-1/2 z-20 bg-black bg-opacity-90 text-white rounded">
+            <div className='flex flex-row justify-center'>
-              <div className="w-full flex flex-row justify-end p-4">
+              <div className=" laptop:w-3/4 z-20 bg-black bg-opacity-90 text-white rounded">
-                <span className="cursor-pointer" onClick={() => setShowModal(false)}>X</span>
+                <div className="w-full flex flex-row justify-end p-4">
+                  <span className="cursor-pointer" onClick={() => setShowModal(false)}>X</span>
+                </div>
+                {modalData.content}
               </div>
-              {modalData.content}
             </div>
           </div>
         </div>

yarn.lock

@@ -1296,6 +1296,19 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+iframe-resizer-react@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/iframe-resizer-react/-/iframe-resizer-react-1.1.0.tgz#5009e019b7a5c7f1c009bff5bcdf0dbf33557465"
+  integrity sha512-FrytSq91AIJaDgE+6uK/Vdd6IR8CrwLoZ6eGmL2qQMPTzF0xlSV2jaSzRRUh5V2fttD7vzl21jvBl97bV40eBw==
+  dependencies:
+    iframe-resizer "^4.3.0"
+    warning "^4.0.3"
+
+iframe-resizer@^4.3.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.7.tgz#fd07ee14b7ecb4d49f63f5019c49e476b97d4416"
+  integrity sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q==
+
 ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"