Improve content styles

_portfolio/react-weather-app.mdx

@@ -1,9 +1,11 @@
 ---
 title: 'React Weather App'
-description: 'Weather app made with React and OpenWeatherMap API'
+description: 'Weather app made with React, TypeScript and OpenWeatherMap API'
 date: '2021-09-19'
 image: 'https://res.cloudinary.com/dun9hhyz1/image/upload/v1632077200/personal-website/portfolio/react-weather-app/tuxpi.com.1632076521_a0wxsq_hw299g.jpg'
 hideImage: true
+demo: 'https://hazemkrimi.github.io/react-weather-app'
+code: 'https://github.com/hazemKrimi/react-weather-app'
 ---
 
 # About the project
@@ -17,12 +19,6 @@ This is a project that I made as a step in the interview process for my final ye
 - Styled Components
 - OpenWeatherMap API
 
-# Showcase
+# Screenshots
 
-<Button variant='action' link='https://hazemkrimi.github.io/react-weather-app' target='_blank'>
-	Demo
-</Button>
-
-<Button variant='outline' link='https://github.com/hazemKrimi/react-weather-app' target='_blank'>
-	Source Code
-</Button>
+![Desktop](https://res.cloudinary.com/dun9hhyz1/image/upload/v1643548378/personal-website/portfolio/react-weather-app/screenshot_ueu2a4.png)

pages/portfolio/[slug].tsx

@@ -12,6 +12,7 @@ import { Wrapper } from '../../styles/portfolio/slug';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
+import MDXButton from '../../components/MDXButton';
 import Image from 'next/image';
 
 interface Props {
@@ -82,6 +83,16 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 					<MDXEmbedProvider>
 						<div className='content'>
 							<MDXRemote {...source} components={components} />
+							<h1>Showcase</h1>
+							<div className='showcase-buttons'>
+								<MDXButton variant='action' link={frontMatter.demo} target='_blank'>
+									Demo
+								</MDXButton>
+
+								<MDXButton variant='outline' link={frontMatter.code} target='_blank'>
+									Source Code
+								</MDXButton>
+							</div>
 						</div>
 					</MDXEmbedProvider>
 				</MDXProvider>

styles/portfolio/slug.tsx

@@ -75,7 +75,17 @@ export const Wrapper = styled.div`
 
 		ul,
 		ol {
-			margin-left: 1.5rem;
+			margin-inline-start: 0.5rem;
+			list-style-position: inside;
+		}
+
+		.showcase-buttons {
+			width: 100%;
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 1rem;
+			justify-content: space-between;
+			align-items: center;
 		}
 	}
 `;