Update card and content pages layout

pages/404.tsx

@@ -56,9 +56,9 @@ const NotFound: FC = () => {
 			</Head>
 			<Wrapper>
 				<h1>404: This page could not be found</h1>
-				<div className='back' onClick={() => router.back()}>
+				<div className='back' onClick={() => router.push('/')}>
 					<IconButton icon='/icons/arrow-left.svg' />
-					<span>Go Back</span>
+					<span>Go Home</span>
 				</div>
 			</Wrapper>
 		</>

pages/blog/[slug].tsx

@@ -41,6 +41,23 @@ const Wrapper = styled.div`
 			align-items: center;
 		}
 
+		.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%;
+			}
+		}
+
 		h1,
 		p,
 		.tags-wrapper {
@@ -145,6 +162,11 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 			</Head>
 			<Wrapper>
 				<div className='meta'>
+					{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>
@@ -154,13 +176,13 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 					<p>
 						By <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b> ({stats.text})
 					</p>
-					{frontMatter.tags && (
+					{frontMatter.tags ? (
 						<div className='tags-wrapper'>
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
 						</div>
-					)}
+					) : null}
 					<hr />
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>

pages/blog/index.tsx

@@ -11,6 +11,7 @@ interface Props {
 		title: string;
 		author: string;
 		description: string;
+		image?: string;
 		slug: string;
 		date: string;
 		tags?: string[];

pages/portfolio/[slug].tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../utils/portfolio';
 import { useRouter } from 'next/router';
 import { MdxRemote } from 'next-mdx-remote/types';
@@ -39,6 +39,23 @@ const Wrapper = styled.div`
 			align-items: center;
 		}
 
+		.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%;
+			}
+		}
+
 		h1,
 		p {
 			text-align: left;
@@ -88,6 +105,7 @@ const components = AllComponents;
 const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 	const content = hydrate(source, { components });
 	const router = useRouter();
+	const metaRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -125,20 +143,25 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 				<title>{frontMatter.title} | Hazem Krimi</title>
 			</Head>
 			<Wrapper>
-				<div className='meta'>
+				<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>
 					</div>
 					<h1>{frontMatter.title}</h1>
 					<p>{frontMatter.description}</p>
-					{frontMatter.tags && (
+					{frontMatter.tags ? (
 						<div className='tags-wrapper'>
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
 						</div>
-					)}
+					) : null}
 					<hr />
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>

pages/portfolio/index.tsx

@@ -10,6 +10,7 @@ interface Props {
 	portfolioProjects: {
 		title: string;
 		description: string;
+		image?: string;
 		slug: string;
 		date: string;
 		tags?: string[];