Update card and content pages layout

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[];