Update meta image location and styles

pages/portfolio/[slug].tsx

@@ -13,6 +13,7 @@ import AllComponents from '../../components/All';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
+import Image from 'next/image';
 
 interface Props {
 	source: MdxRemote.Source;
@@ -40,20 +41,7 @@ const Wrapper = styled.div`
 		}
 
 		.image {
-			height: 0;
-			width: 100%;
-			overflow: hidden;
-			padding-top: calc(591.44 / 1127.34 * 100%);
-			position: relative;
-			margin-bottom: 1rem;
-
-			img {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-			}
+			margin: 1rem 0rem;
 		}
 
 		h1,
@@ -144,11 +132,6 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 			</Head>
 			<Wrapper>
 				<div className='meta' ref={metaRef}>
-					{frontMatter.image ? (
-						<div className='image'>
-							<img src={frontMatter.image} alt='portfolio project image' />
-						</div>
-					) : null}
 					<div className='back' onClick={() => router.back()}>
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
@@ -162,6 +145,11 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 							))}
 						</div>
 					) : null}
+					{frontMatter.image ? (
+						<div className='image'>
+							<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
+						</div>
+					) : null}
 					<hr />
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>