- wip: black background is now fitting content height

- pdf file is not loading into page
This commit is contained in:
oonyeje 2023-10-03 16:54:41 -04:00
parent 686ebe0c74
commit 01753b87b2
5 changed files with 6 additions and 9 deletions

View File

@ -24,11 +24,11 @@ const ContentCarousel = ({
return ( return (
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
{(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>} {(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 style={{width: '-webkit-fill-available'}} 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> <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>} {portfolioData.heroImgSrc && <div className="mb-8"><Image src={portfolioData.heroImgSrc} alt=""/></div>}
<div>{portfolioData.description}</div> <div>{portfolioData.description}</div>
{portfolioData.prototypeIframeURL && <div style={{height: 900, minHeight: '100%'}}> {portfolioData.prototypeIframeURL && <div style={{height: 1000, minHeight: '100%'}}>
{<IframeResizer {<IframeResizer
src={portfolioData.prototypeIframeURL} src={portfolioData.prototypeIframeURL}
log log

View File

@ -6,7 +6,7 @@ import contentValues from './content';
import portfolioValues from './portfolio'; import portfolioValues from './portfolio';
import { pdfjs, Document, Page } from 'react-pdf'; import { pdfjs, Document, Page } from 'react-pdf';
const resumePdf = '../assets/Okechi_Onyeje_Resume_Professional_2023.pdf' const resumePdf = '../public/assets/Okechi_Onyeje_Resume_Professional_2023.pdf'
export default [ export default [
{ {

View File

@ -1,13 +1,10 @@
import { Html, Head, Main, NextScript } from 'next/document' import { Html, Head, Main, NextScript } from 'next/document'
import path from 'node:path'; import path from 'node:path';
import fs from 'node:fs'; import { pdfjs } from 'react-pdf';
export default function Document() { export default function Document() {
const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.js');
fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.js');
return ( return (
<Html lang="en"> <Html lang="en">

View File

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