From 27c66e1578ccabdb8d3384bc4cc6b8ad5422c027 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Fri, 12 Feb 2021 00:53:34 +0100
Subject: [PATCH] Update text alignment to the left

---
 components/Hero.tsx        | 26 ++++++-----
 pages/blog/[slug].tsx      | 89 ++++++++++++++++++++------------------
 pages/portfolio/[slug].tsx | 88 ++++++++++++++++++++-----------------
 3 files changed, 111 insertions(+), 92 deletions(-)

diff --git a/components/Hero.tsx b/components/Hero.tsx
index 0c63ab4..19c91e2 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,13 +1,13 @@
-import { FC } from 'react';
-import styled from 'styled-components';
-import Typing from 'react-typing-animation';
+import { FC } from "react";
+import styled from "styled-components";
+import Typing from "react-typing-animation";
 
 const Wrapper = styled.div`
 	min-height: 45vh;
 	display: grid;
 	align-items: center;
 	height: auto;
-	text-align: center;
+	text-align: left;
 
 	@media (max-width: 768px) {
 		min-height: 65vh;
@@ -41,17 +41,19 @@ const Hero: FC = () => {
 			<Typing speed={15} hideCursor={true} loop={false}>
 				<h2>Hi</h2>
 				<h2>I Like Building Things</h2>
-				<h2 className='green'>
-					Software Developer ✔️<span className='small'>check</span>
+				<h2 className="green">
+					Software Developer ✔️<span className="small">check</span>
 				</h2>
-				<h2 className='red'>
-					Designer 🛑<span className='small'>error: need more practise and feedback</span>
+				<h2 className="red">
+					Designer 🛑
+					<span className="small">error: need more practise and feedback</span>
 				</h2>
-				<h2 className='orange'>
-					Hard Working ⚠️<span className='small'>warning: not always the case</span>
+				<h2 className="orange">
+					Hard Working ⚠️
+					<span className="small">warning: not always the case</span>
 				</h2>
-				<h2 className='green'>
-					Life Long Learner ✔️<span className='small'>check</span>
+				<h2 className="green">
+					Life Long Learner ✔️<span className="small">check</span>
 				</h2>
 			</Typing>
 		</Wrapper>
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index c7ff19e..7b03cf9 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -1,18 +1,18 @@
-import { FC, useEffect } from 'react';
-import { getBlogPostsSlugs, getBlogPostdata } from '../../lib/blog';
-import { useRouter } from 'next/router';
-import { MdxRemote } from 'next-mdx-remote/types';
-import { MDXProvider } from '@mdx-js/react';
-import { MDXEmbedProvider } from 'mdx-embed';
-import { GetStaticPaths, GetStaticProps } from 'next';
-import renderToString from 'next-mdx-remote/render-to-string';
-import hydrate from 'next-mdx-remote/hydrate';
-import styled from 'styled-components';
-import matter from 'gray-matter';
-import AllComponents from '../../components/All';
-import Head from 'next/head';
-import IconButton from '../../components/IconButton';
-import CodeBlock from '../../components/CodeBlock';
+import { FC, useEffect } from "react";
+import { getBlogPostsSlugs, getBlogPostdata } from "../../lib/blog";
+import { useRouter } from "next/router";
+import { MdxRemote } from "next-mdx-remote/types";
+import { MDXProvider } from "@mdx-js/react";
+import { MDXEmbedProvider } from "mdx-embed";
+import { GetStaticPaths, GetStaticProps } from "next";
+import renderToString from "next-mdx-remote/render-to-string";
+import hydrate from "next-mdx-remote/hydrate";
+import styled from "styled-components";
+import matter from "gray-matter";
+import AllComponents from "../../components/All";
+import Head from "next/head";
+import IconButton from "../../components/IconButton";
+import CodeBlock from "../../components/CodeBlock";
 
 interface Props {
 	source: MdxRemote.Source;
@@ -31,8 +31,6 @@ const Wrapper = styled.div`
 	}
 
 	.meta {
-		text-align: center;
-
 		.back {
 			cursor: pointer;
 			text-align: left;
@@ -41,9 +39,16 @@ const Wrapper = styled.div`
 			align-items: center;
 		}
 
+		h1,
+		p,
+		.tags-wrapper {
+			text-align: left;
+			width: 85%;
+			margin: 0.5rem auto;
+		}
+
 		h1 {
 			font-size: 2rem;
-			margin: 0.5rem 0rem;
 		}
 
 		h2 {
@@ -53,7 +58,6 @@ const Wrapper = styled.div`
 		.tags-wrapper {
 			display: flex;
 			flex-direction: row;
-			justify-content: center;
 			align-items: center;
 			flex-wrap: wrap;
 		}
@@ -115,42 +119,45 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
 	return (
 		<>
 			<Head>
-				<meta name='viewport' content='width=device-width, initial-scale=1.0' />
-				<meta name='author' content='Hazem Krimi' />
+				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+				<meta name="author" content="Hazem Krimi" />
 				<meta
-					name='description'
+					name="description"
 					content={
 						frontMatter.description
 							? frontMatter.description
-							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
+							: "Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast"
 					}
 				/>
-				<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
-				<link rel='canonical' href='https://hazemkrimi.tech' />
-				<meta property='og:image' content='/logo.jpg' />
+				<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+				<link rel="canonical" href="https://hazemkrimi.tech" />
+				<meta property="og:image" content="/logo.jpg" />
 				<meta
-					property='og:description'
+					property="og:description"
 					content={
 						frontMatter.description
 							? frontMatter.description
-							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
+							: "Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast"
 					}
 				/>
-				<meta property='og:title' content={`${frontMatter.title} | Hazem Krimi`} />
 				<meta
-					name='keywords'
+					property="og:title"
+					content={`${frontMatter.title} | Hazem Krimi`}
+				/>
+				<meta
+					name="keywords"
 					content={
 						frontMatter.tags
-							? frontMatter.tags.join(' ')
-							: 'Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News'
+							? frontMatter.tags.join(" ")
+							: "Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News"
 					}
 				/>
 				<title>{frontMatter.title} | Hazem Krimi</title>
 			</Head>
 			<Wrapper>
-				<div className='meta'>
-					<div className='back' onClick={() => router.back()}>
-						<IconButton icon='/icons/arrow-left.svg' />
+				<div className="meta">
+					<div className="back" onClick={() => router.back()}>
+						<IconButton icon="/icons/arrow-left.svg" />
 						<span>Back</span>
 					</div>
 					<h1>{frontMatter.title}</h1>
@@ -159,7 +166,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
 						Written by <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b>
 					</p>
 					{frontMatter.tags && (
-						<div className='tags-wrapper'>
+						<div className="tags-wrapper">
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
@@ -169,7 +176,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>
 					<MDXEmbedProvider>
-						<div className='content'>{content}</div>
+						<div className="content">{content}</div>
 					</MDXEmbedProvider>
 				</MDXProvider>
 			</Wrapper>
@@ -183,7 +190,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 	const paths = getBlogPostsSlugs();
 	return {
 		paths,
-		fallback: false
+		fallback: false,
 	};
 };
 export const getStaticProps: GetStaticProps = async ({ params }: any) => {
@@ -191,13 +198,13 @@ export const getStaticProps: GetStaticProps = async ({ params }: any) => {
 	const { data, content } = matter(blogPostContent);
 	const mdxSource = await renderToString(content, {
 		components,
-		scope: data
+		scope: data,
 	});
 
 	return {
 		props: {
 			source: mdxSource,
-			frontMatter: data
-		}
+			frontMatter: data,
+		},
 	};
 };
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx
index cc8e84d..d6f2162 100644
--- a/pages/portfolio/[slug].tsx
+++ b/pages/portfolio/[slug].tsx
@@ -1,18 +1,21 @@
-import { FC, useEffect } from 'react';
-import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../lib/portfolio';
-import { useRouter } from 'next/router';
-import { MdxRemote } from 'next-mdx-remote/types';
-import { MDXProvider } from '@mdx-js/react';
-import { MDXEmbedProvider } from 'mdx-embed';
-import { GetStaticPaths, GetStaticProps } from 'next';
-import renderToString from 'next-mdx-remote/render-to-string';
-import hydrate from 'next-mdx-remote/hydrate';
-import styled from 'styled-components';
-import matter from 'gray-matter';
-import AllComponents from '../../components/All';
-import Head from 'next/head';
-import IconButton from '../../components/IconButton';
-import CodeBlock from '../../components/CodeBlock';
+import { FC, useEffect } from "react";
+import {
+	getPortfolioPorjectsSlugs,
+	getPortfolioProjectdata,
+} from "../../lib/portfolio";
+import { useRouter } from "next/router";
+import { MdxRemote } from "next-mdx-remote/types";
+import { MDXProvider } from "@mdx-js/react";
+import { MDXEmbedProvider } from "mdx-embed";
+import { GetStaticPaths, GetStaticProps } from "next";
+import renderToString from "next-mdx-remote/render-to-string";
+import hydrate from "next-mdx-remote/hydrate";
+import styled from "styled-components";
+import matter from "gray-matter";
+import AllComponents from "../../components/All";
+import Head from "next/head";
+import IconButton from "../../components/IconButton";
+import CodeBlock from "../../components/CodeBlock";
 
 interface Props {
 	source: MdxRemote.Source;
@@ -31,8 +34,6 @@ const Wrapper = styled.div`
 	}
 
 	.meta {
-		text-align: center;
-
 		.back {
 			cursor: pointer;
 			text-align: left;
@@ -41,9 +42,15 @@ const Wrapper = styled.div`
 			align-items: center;
 		}
 
+		h1,
+		p {
+			text-align: left;
+			width: 85%;
+			margin: 0.5rem auto;
+		}
+
 		h1 {
 			font-size: 2rem;
-			margin: 0.5rem 0rem;
 		}
 
 		h2 {
@@ -106,44 +113,47 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 	return (
 		<>
 			<Head>
-				<meta name='viewport' content='width=device-width, initial-scale=1.0' />
-				<meta name='author' content='Hazem Krimi' />
+				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+				<meta name="author" content="Hazem Krimi" />
 				<meta
-					name='description'
+					name="description"
 					content={
 						frontMatter.description
 							? frontMatter.description
-							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
+							: "Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast"
 					}
 				/>
-				<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
-				<link rel='canonical' href='https://hazemkrimi.tech' />
-				<meta property='og:image' content='/logo.jpg' />
+				<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+				<link rel="canonical" href="https://hazemkrimi.tech" />
+				<meta property="og:image" content="/logo.jpg" />
 				<meta
-					property='og:description'
+					property="og:description"
 					content={
 						frontMatter.description
 							? frontMatter.description
-							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
+							: "Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast"
 					}
 				/>
-				<meta property='og:title' content={`${frontMatter.title} | Hazem Krimi`} />
 				<meta
-					name='keywords'
-					content='Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News'
+					property="og:title"
+					content={`${frontMatter.title} | Hazem Krimi`}
+				/>
+				<meta
+					name="keywords"
+					content="Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News"
 				/>
 				<title>{frontMatter.title} | Hazem Krimi</title>
 			</Head>
 			<Wrapper>
-				<div className='meta'>
-					<div className='back' onClick={() => router.back()}>
-						<IconButton icon='/icons/arrow-left.svg' />
+				<div className="meta">
+					<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 && (
-						<div className='tags-wrapper'>
+						<div className="tags-wrapper">
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
@@ -153,7 +163,7 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 				</div>
 				<MDXProvider components={{ code: CodeBlock }}>
 					<MDXEmbedProvider>
-						<div className='content'>{content}</div>
+						<div className="content">{content}</div>
 					</MDXEmbedProvider>
 				</MDXProvider>
 			</Wrapper>
@@ -167,7 +177,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 	const paths = getPortfolioPorjectsSlugs();
 	return {
 		paths,
-		fallback: false
+		fallback: false,
 	};
 };
 export const getStaticProps: GetStaticProps = async ({ params }: any) => {
@@ -175,13 +185,13 @@ export const getStaticProps: GetStaticProps = async ({ params }: any) => {
 	const { data, content } = matter(blogPostContent);
 	const mdxSource = await renderToString(content, {
 		components,
-		scope: data
+		scope: data,
 	});
 
 	return {
 		props: {
 			source: mdxSource,
-			frontMatter: data
-		}
+			frontMatter: data,
+		},
 	};
 };