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 = () => {

Hi

I Like Building Things

-

- Software Developer ✔️check +

+ Software Developer ✔️check

-

- Designer 🛑error: need more practise and feedback +

+ Designer 🛑 + error: need more practise and feedback

-

- Hard Working ⚠️warning: not always the case +

+ Hard Working ⚠️ + warning: not always the case

-

- Life Long Learner ✔️check +

+ Life Long Learner ✔️check

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 = ({ source, frontMatter }) => { return ( <> - - + + - - - + + + - + {frontMatter.title} | Hazem Krimi -
-
router.back()}> - +
+
router.back()}> + Back

{frontMatter.title}

@@ -159,7 +166,7 @@ const BlogPost: FC = ({ source, frontMatter }) => { Written by {frontMatter.author} on {frontMatter.date}

{frontMatter.tags && ( -
+
{frontMatter.tags.map((tag: string, index: number) => ( #{tag}  ))} @@ -169,7 +176,7 @@ const BlogPost: FC = ({ source, frontMatter }) => {
-
{content}
+
{content}
 @@ -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 = ({ source, frontMatter }) => { return ( <> - - + + - - - + + + - + {frontMatter.title} | Hazem Krimi -
-
router.back()}> - +
+
router.back()}> + Back

{frontMatter.title}

{frontMatter.description}

{frontMatter.tags && ( -
+
{frontMatter.tags.map((tag: string, index: number) => ( #{tag}  ))} @@ -153,7 +163,7 @@ const PortfolioProject: FC = ({ source, frontMatter }) => {
-
{content}
+
{content}
 @@ -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, + }, }; };