diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx index ad01230..f25aed6 100644 --- a/components/Hero/index.tsx +++ b/components/Hero/index.tsx @@ -5,8 +5,8 @@ const Hero = () => (

Hi, I am Hazem

-

I Like Building Things

-

Software Developer

+

I Like Building Software

+

Full Stack TypeScript Developer

Life Long Learner

diff --git a/components/MobileNav/index.tsx b/components/MobileNav/index.tsx index 813a8f96..a9dda7c 100644 --- a/components/MobileNav/index.tsx +++ b/components/MobileNav/index.tsx @@ -49,8 +49,8 @@ const MobileNav = ({ open, close }: Props) => {
-
diff --git a/components/Nav/index.tsx b/components/Nav/index.tsx index 5f38349..f996e25 100644 --- a/components/Nav/index.tsx +++ b/components/Nav/index.tsx @@ -29,7 +29,7 @@ const Nav = () => { icon={mode === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg'} onClick={toggle} /> - + -
+
- {portfolioProjects.slice(0, 3).map(({ slug, ...rest }) => ( - + {projects.slice(0, 3).map(({ slug, ...rest }) => ( + ))}
@@ -100,11 +103,11 @@ export default Index; export const getStaticProps: GetStaticProps = async () => { const blogPosts = getBlogPosts(); - const portfolioProjects = getPortfolioProjects(); + const projects = getProjects(); return { props: { blogPosts, - portfolioProjects + projects } }; }; diff --git a/pages/portfolio/index.tsx b/pages/portfolio/index.tsx deleted file mode 100644 index 63c7e08..0000000 --- a/pages/portfolio/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { getPortfolioProjects } from '../../utils/portfolio'; -import { useRouter } from 'next/router'; -import { Wrapper } from '../../styles/portfolio'; -import Card from '../../components/Card'; -import IconButton from '../../components/IconButton'; -import Head from 'next/head'; - -interface Props { - portfolioProjects: { - title: string; - description: string; - image?: string; - slug: string; - date: string; - tags?: string[]; - }[]; -} - -const Index = ({ portfolioProjects }: Props) => { - const router = useRouter(); - - return ( - <> - - - - - - - - - - Portfolio | Hazem Krimi - - -
router.back()}> - - Back -
-

Portfolio

-
- {portfolioProjects.length !== 0 ? ( - portfolioProjects.map(({ slug, ...rest }) => ( - - )) - ) : ( -

Nothing for now

- )} -
- - - ); -}; - -export default Index; - -export const getStaticProps = async () => { - const portfolioProjects = getPortfolioProjects(); - return { - props: { - portfolioProjects - } - }; -}; diff --git a/pages/portfolio/[slug].tsx b/pages/projects/[slug].tsx similarity index 71% rename from pages/portfolio/[slug].tsx rename to pages/projects/[slug].tsx index 18e6dc6..48f257f 100644 --- a/pages/portfolio/[slug].tsx +++ b/pages/projects/[slug].tsx @@ -1,12 +1,12 @@ import { useEffect } from 'react'; -import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../utils/portfolio'; +import { getPorjectsSlugs, getProjectdata } from '../../utils/projects'; import { useRouter } from 'next/router'; import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'; import { MDXProvider } from '@mdx-js/react'; import { GetStaticPaths, GetStaticProps } from 'next'; import { serialize } from 'next-mdx-remote/serialize'; import matter from 'gray-matter'; -import { Wrapper } from '../../styles/portfolio/slug'; +import { Wrapper } from '../../styles/projects/slug'; import Head from 'next/head'; import IconButton from '../../components/IconButton'; import CodeBlock from '../../components/CodeBlock'; @@ -18,7 +18,7 @@ interface Props { frontMatter: any; } -const PortfolioProject = ({ source, frontMatter }: Props) => { +const Project = ({ source, frontMatter }: Props) => { const router = useRouter(); const htmlOverrides = { code: CodeBlock }; const mdxComponents = { Button: MDXButton }; @@ -37,7 +37,10 @@ const PortfolioProject = ({ source, frontMatter }: Props) => { content={ frontMatter?.description ? frontMatter.description - : 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' + : `Hazem Krimi is an experienced Full Stack developer with a focus on building user-friendly + web and cross-platform mobile applications using cutting-edge + technologies. Passionate about ongoing learning and staying up-to-date + with the latest trends in software engineering.` } /> @@ -47,7 +50,10 @@ const PortfolioProject = ({ source, frontMatter }: Props) => { content={ frontMatter?.description ? frontMatter.description - : 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' + : `Hazem Krimi is an experienced Full Stack developer with a focus on building user-friendly + web and cross-platform mobile applications using cutting-edge + technologies. Passionate about ongoing learning and staying up-to-date + with the latest trends in software engineering.` } /> @@ -56,7 +62,7 @@ const PortfolioProject = ({ source, frontMatter }: Props) => { 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' + : `Hazem, Krimi, Hazem Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, TypeScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News, Software Developer, Software Engineer, Full Stack TypeScript Developer, Next.js` } /> {`${frontMatter?.title} | Hazem Krimi`} @@ -102,19 +108,19 @@ const PortfolioProject = ({ source, frontMatter }: Props) => { ); }; -export default PortfolioProject; +export default Project; export const getStaticPaths: GetStaticPaths = async () => { - const paths = getPortfolioPorjectsSlugs(); + const paths = getPorjectsSlugs(); return { paths, fallback: false }; }; export const getStaticProps: GetStaticProps = async ({ params }: any) => { - const portfolioProjectContent = await getPortfolioProjectdata(params.slug); + const projectContent = await getProjectdata(params.slug); - if (!portfolioProjectContent) + if (!projectContent) return { props: { source: undefined, @@ -122,7 +128,7 @@ export const getStaticProps: GetStaticProps = async ({ params }: any) => { } }; - const { data, content } = matter(portfolioProjectContent); + const { data, content } = matter(projectContent); const mdxSource = await serialize(content, { scope: data }); diff --git a/pages/projects/index.tsx b/pages/projects/index.tsx new file mode 100644 index 0000000..6f9dbfb --- /dev/null +++ b/pages/projects/index.tsx @@ -0,0 +1,79 @@ +import { getProjects } from '../../utils/projects'; +import { useRouter } from 'next/router'; +import { Wrapper } from '../../styles/projects'; +import Card from '../../components/Card'; +import IconButton from '../../components/IconButton'; +import Head from 'next/head'; + +interface Props { + projects: { + title: string; + description: string; + image?: string; + slug: string; + date: string; + tags?: string[]; + }[]; +} + +const Index = ({ projects }: Props) => { + const router = useRouter(); + + return ( + <> + + + + + + + + + + Projects | Hazem Krimi + + +
router.back()}> + + Back +
+

Projects

+
+ {projects.length !== 0 ? ( + projects.map(({ slug, ...rest }) => ( + + )) + ) : ( +

Nothing for now

+ )} +
+ + + ); +}; + +export default Index; + +export const getStaticProps = async () => { + const projects = getProjects(); + return { + props: { + projects + } + }; +}; diff --git a/styles/home.tsx b/styles/home.tsx index a0c5b9f..28fac92 100644 --- a/styles/home.tsx +++ b/styles/home.tsx @@ -28,12 +28,12 @@ export const Wrapper = styled.div` } .about, - .portfolio, + .projects, .blog { margin: 1rem 0rem; } - .portfolio { + .projects { margin-bottom: 3rem; } diff --git a/styles/portfolio/index.tsx b/styles/projects/index.tsx similarity index 100% rename from styles/portfolio/index.tsx rename to styles/projects/index.tsx diff --git a/styles/portfolio/slug.tsx b/styles/projects/slug.tsx similarity index 100% rename from styles/portfolio/slug.tsx rename to styles/projects/slug.tsx diff --git a/utils/portfolio.ts b/utils/projects.ts similarity index 71% rename from utils/portfolio.ts rename to utils/projects.ts index 3e7395b..1e5129b 100644 --- a/utils/portfolio.ts +++ b/utils/projects.ts @@ -2,18 +2,18 @@ import fs from 'fs'; import path from 'path'; import matter from 'gray-matter'; -const portfolioProjects = path.join(process.cwd(), '_portfolio'); +const projects = path.join(process.cwd(), '_portfolio'); -export const getPortfolioProjects = () => { +export const getProjects = () => { try { - const fileNames = fs.readdirSync(portfolioProjects); + const fileNames = fs.readdirSync(projects); if (!fileNames) return []; const allPortfolioProjectsData = fileNames.map(filename => { const slug = filename.replace('.mdx', ''); - const fullPath = path.join(portfolioProjects, filename); + const fullPath = path.join(projects, filename); const fileContents = fs.readFileSync(fullPath, 'utf8'); const { data } = matter(fileContents); @@ -43,9 +43,9 @@ export const getPortfolioProjects = () => { } }; -export const getPortfolioPorjectsSlugs = () => { +export const getPorjectsSlugs = () => { try { - const fileNames = fs.readdirSync(portfolioProjects); + const fileNames = fs.readdirSync(projects); if (!fileNames) return []; @@ -61,9 +61,9 @@ export const getPortfolioPorjectsSlugs = () => { } }; -export const getPortfolioProjectdata = async (slug: string) => { +export const getProjectdata = async (slug: string) => { try { - const fullPath = path.join(portfolioProjects, `${slug}.mdx`); + const fullPath = path.join(projects, `${slug}.mdx`); const postContent = fs.readFileSync(fullPath, 'utf8'); if (!postContent) return undefined;