From b5b33699f6fe258388646b8fbcd4e40acd68baa1 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 30 Jan 2022 15:47:53 +0100
Subject: [PATCH] Improve content styles

---
 _portfolio/react-weather-app.mdx | 14 +++++---------
 pages/portfolio/[slug].tsx       | 11 +++++++++++
 styles/portfolio/slug.tsx        | 12 +++++++++++-
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/_portfolio/react-weather-app.mdx b/_portfolio/react-weather-app.mdx
index 7721740..5151780 100644
--- a/_portfolio/react-weather-app.mdx
+++ b/_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)
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx
index 1093093..3085dd5 100644
--- a/pages/portfolio/[slug].tsx
+++ b/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>
diff --git a/styles/portfolio/slug.tsx b/styles/portfolio/slug.tsx
index 440e33d..b7683c8 100644
--- a/styles/portfolio/slug.tsx
+++ b/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;
 		}
 	}
 `;