diff --git a/pages/about.tsx b/pages/about.tsx index f9b9454..ddb561c 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -1,5 +1,6 @@ import { FC, useContext } from 'react'; import { DarkModeContext } from '../components/DarkMode'; +import Head from 'next/head'; import styled from 'styled-components'; import Image from 'next/image'; import IconButton from '../components/IconButton'; @@ -65,73 +66,96 @@ const About: FC = () => { const { dark } = useContext(DarkModeContext); return ( - -
-
-

About Me

-
-

- I am Hazem Krimi, a Full Stack JavaScript Developer helping companies and individuals - build modern web and mobile applications I am a student and a freelance full stack - developer.

I have a good experience building web and cross platform mobile - apps using various technologies like React, React Native, Node.js, MongoDB, Firebase - and I am constantly exploring and learning Software Engineering to make sure I get the - job done faster and easier. -

+ <> + + + + + + + + + + + About | Hazem Krimi + + +
+
+

About Me

+
+

+ I am Hazem Krimi, a Full Stack JavaScript Developer helping companies and + individuals build modern web and mobile applications I am a student and a freelance + full stack developer.

I have a good experience building web and cross + platform mobile apps using various technologies like React, React Native, Node.js, + MongoDB, Firebase and I am constantly exploring and learning Software Engineering to + make sure I get the job done faster and easier. +

+
+
+
+

Contact Me

+
+ window.open('mailto:me@hazemkrimi.tech', '_blank')} + /> + window.open('https://github.com/hazemKrimi', '_blank')} + /> + window.open('https://twitter.com/HazemKrimi', '_blank')} + /> + window.open('https://linkedin.com/in/hazemkrimi', '_blank')} + /> + window.open('https://codepen.io/hazemkrimi', '_blank')} + /> + window.open('https://dribbble.com/HazemKrimi', '_blank')} + /> + window.open('https://instagram.com/hazemkrimi', '_blank')} + /> +
-
-

Contact Me

-
- window.open('mailto:krimihazem1@gmail.com', '_blank')} - /> - window.open('https://github.com/hazemKrimi', '_blank')} - /> - window.open('https://twitter.com/HazemKrimi', '_blank')} - /> - window.open('https://linkedin.com/in/hazemkrimi', '_blank')} - /> - window.open('https://codepen.io/hazemkrimi', '_blank')} - /> - window.open('https://dribbble.com/HazemKrimi', '_blank')} - /> - window.open('https://instagram.com/hazemkrimi', '_blank')} - /> -
+
+
-
-
- -
- + + ); }; diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx index 982d641..a7266ae 100644 --- a/pages/blog/[slug].tsx +++ b/pages/blog/[slug].tsx @@ -1,6 +1,9 @@ import { FC } from 'react'; import { getBlogPostsSlugs, getBlogPostdata } from '../../lib/blog'; import { useRouter } from 'next/router'; +import { MdxRemote } from 'next-mdx-remote/types'; +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'; @@ -10,7 +13,7 @@ import Head from 'next/head'; import IconButton from '../../components/IconButton'; interface Props { - source: any; + source: MdxRemote.Source; frontMatter: any; } @@ -89,9 +92,15 @@ const Wrapper = styled.div` p, h1, h2, - h3 { + h3, + button { margin: 0.5rem 0rem; } + + p * { + width: 100%; + height: auto; + } } `; @@ -104,7 +113,37 @@ const BlogPost: FC = ({ source, frontMatter }) => { return ( <> - {frontMatter.title} + + + + + + + + + + {frontMatter.title} | Hazem Krimi
@@ -125,7 +164,9 @@ const BlogPost: FC = ({ source, frontMatter }) => { )}
-
{content}
+ +
{content}
+ ); @@ -133,14 +174,14 @@ const BlogPost: FC = ({ source, frontMatter }) => { export default BlogPost; -export async function getStaticPaths() { +export const getStaticPaths: GetStaticPaths = async () => { const paths = getBlogPostsSlugs(); return { paths, fallback: false }; -} -export async function getStaticProps({ params }: any) { +}; +export const getStaticProps: GetStaticProps = async ({ params }: any) => { const blogPostContent = await getBlogPostdata(params.slug); const { data, content } = matter(blogPostContent); const mdxSource = await renderToString(content, { @@ -154,4 +195,4 @@ export async function getStaticProps({ params }: any) { frontMatter: data } }; -} +}; diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index 74cf551..d2be3b2 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -4,6 +4,7 @@ import { getBlogPosts } from '../../lib/blog'; import styled from 'styled-components'; import Card from '../../components/Card'; import IconButton from '../../components/IconButton'; +import Head from 'next/head'; interface Props { blogPosts: { @@ -54,22 +55,45 @@ const Index: FC = ({ blogPosts }) => { const router = useRouter(); return ( - -
router.back()}> - - Back -
-

Blog

-
- {blogPosts.length !== 0 ? ( - blogPosts.map(({ slug, ...rest }) => ( - router.push(`/blog/${slug}`)} /> - )) - ) : ( -

Nothing for now

- )} -
- + <> + + + + + + + + + + + Blog | Hazem Krimi + + +
router.back()}> + + Back +
+

Blog

+
+ {blogPosts.length !== 0 ? ( + blogPosts.map(({ slug, ...rest }) => ( + router.push(`/blog/${slug}`)} /> + )) + ) : ( +

Nothing for now

+ )} +
+ + ); }; diff --git a/pages/index.tsx b/pages/index.tsx index 2faa1ad..23dedc9 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,10 +2,12 @@ import { FC } from 'react'; import { useRouter } from 'next/router'; import { getPortfolioProjects } from '../lib/portfolio'; import { getBlogPosts } from '../lib/blog'; +import { GetStaticProps } from 'next'; import styled from 'styled-components'; import Hero from '../components/Hero'; import Button from '../components/Button'; import Card from '../components/Card'; +import Head from 'next/head'; interface Props { blogPosts: { @@ -72,47 +74,70 @@ const Index: FC = ({ blogPosts, portfolioProjects }) => { const router = useRouter(); return ( - - -
-

Portfolio

- -
-
- {portfolioProjects.length !== 0 ? ( - portfolioProjects.map(({ slug, ...rest }) => ( - router.push(`/portfolio/${slug}`)} /> - )) - ) : ( -

Nothing for now

- )} + <> + + + + + + + + + + + Hazem Krimi + + + +
+

Portfolio

+ +
+
+ {portfolioProjects.length !== 0 ? ( + portfolioProjects.map(({ slug, ...rest }) => ( + router.push(`/portfolio/${slug}`)} /> + )) + ) : ( +

Nothing for now

+ )} +
+
+

Blog

+ +
+
+ {blogPosts.length !== 0 ? ( + blogPosts.map(({ slug, ...rest }) => ( + router.push(`/blog/${slug}`)} /> + )) + ) : ( +

Nothing for now

+ )} +
-

Blog

- -
-
- {blogPosts.length !== 0 ? ( - blogPosts.map(({ slug, ...rest }) => ( - router.push(`/blog/${slug}`)} /> - )) - ) : ( -

Nothing for now

- )} -
-
-
- + + ); }; export default Index; -export async function getStaticProps() { +export const getStaticProps: GetStaticProps = async () => { const blogPosts = getBlogPosts(); const portfolioProjects = getPortfolioProjects(); return { @@ -121,4 +146,4 @@ export async function getStaticProps() { portfolioProjects } }; -} +}; diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx index 3ef45d1..9ab4c6d 100644 --- a/pages/portfolio/[slug].tsx +++ b/pages/portfolio/[slug].tsx @@ -1,6 +1,9 @@ import { FC } from 'react'; import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../lib/portfolio'; import { useRouter } from 'next/router'; +import { MdxRemote } from 'next-mdx-remote/types'; +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'; @@ -10,7 +13,7 @@ import Head from 'next/head'; import IconButton from '../../components/IconButton'; interface Props { - source: any; + source: MdxRemote.Source; frontMatter: any; } @@ -80,9 +83,15 @@ const Wrapper = styled.div` p, h1, h2, - h3 { + h3, + button { margin: 0.5rem 0rem; } + + p * { + width: 100%; + height: auto; + } } `; @@ -95,7 +104,33 @@ const PortfolioProject: FC = ({ source, frontMatter }) => { return ( <> - {frontMatter.title} + + + + + + + + + + {frontMatter.title} | Hazem Krimi
@@ -107,7 +142,9 @@ const PortfolioProject: FC = ({ source, frontMatter }) => {

{frontMatter.description}

-
{content}
+ +
{content}
+ ); @@ -115,14 +152,14 @@ const PortfolioProject: FC = ({ source, frontMatter }) => { export default PortfolioProject; -export async function getStaticPaths() { +export const getStaticPaths: GetStaticPaths = async () => { const paths = getPortfolioPorjectsSlugs(); return { paths, fallback: false }; -} -export async function getStaticProps({ params }: any) { +}; +export const getStaticProps: GetStaticProps = async ({ params }: any) => { const blogPostContent = await getPortfolioProjectdata(params.slug); const { data, content } = matter(blogPostContent); const mdxSource = await renderToString(content, { @@ -136,4 +173,4 @@ export async function getStaticProps({ params }: any) { frontMatter: data } }; -} +}; diff --git a/pages/portfolio/index.tsx b/pages/portfolio/index.tsx index 53144aa..94b6fc0 100644 --- a/pages/portfolio/index.tsx +++ b/pages/portfolio/index.tsx @@ -4,6 +4,7 @@ import { useRouter } from 'next/router'; import styled from 'styled-components'; import Card from '../../components/Card'; import IconButton from '../../components/IconButton'; +import Head from 'next/head'; interface Props { portfolioProjects: { @@ -53,22 +54,45 @@ const Index: FC = ({ portfolioProjects }) => { const router = useRouter(); return ( - -
router.back()}> - - Back -
-

Portfolio

-
- {portfolioProjects.length !== 0 ? ( - portfolioProjects.map(({ slug, ...rest }) => ( - router.push(`/portfolio/${slug}`)} /> - )) - ) : ( -

Nothing for now

- )} -
- + <> + + + + + + + + + + + Portfolio | Hazem Krimi + + +
router.back()}> + + Back +
+

Portfolio

+
+ {portfolioProjects.length !== 0 ? ( + portfolioProjects.map(({ slug, ...rest }) => ( + router.push(`/portfolio/${slug}`)} /> + )) + ) : ( +

Nothing for now

+ )} +
+ + ); };