diff --git a/_blog/sample.mdx b/_blog/sample.mdx deleted file mode 100644 index f846151..0000000 --- a/_blog/sample.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 'Sample Blog Post' -description: 'Sample description' -author: 'Hazem Krimi' -date: '2020-01-14' -tags: ['sample'] ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dignissim orci, a aliquet leo vehicula in. Proin accumsan, justo luctus tristique ornare, tortor eros sodales arcu, quis maximus nunc tellus eu erat. Proin nisl lorem, congue at dignissim tempor, condimentum nec augue. Duis vulputate, metus eu luctus facilisis, elit mauris cursus felis, ullamcorper tempor diam est vel felis. Sed scelerisque, risus quis semper consectetur, eros lectus ornare turpis, et accumsan turpis nisi et erat. Donec sit amet elementum nunc. Nam eget dolor quis dolor rhoncus molestie id ut nisi. Vivamus suscipit ligula in sem tempor, sit amet lacinia augue luctus. Ut quis urna varius, volutpat sem eget, tincidunt augue. Duis porta dui nec sem tincidunt, ac porttitor magna molestie. Pellentesque massa ligula, malesuada ut urna nec, blandit volutpat libero. Cras sed laoreet massa. - -Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas efficitur eros gravida turpis blandit suscipit. Nullam ante mauris, condimentum quis augue ut, convallis volutpat urna. Nulla ac quam orci. Proin at ligula volutpat, porttitor erat id, vestibulum quam. In scelerisque scelerisque arcu id ultricies. Suspendisse at lorem est. - -In eget dolor faucibus, condimentum lectus ac, maximus justo. Curabitur interdum commodo dapibus. Quisque ante lectus, aliquam vel nisl ac, accumsan posuere elit. Fusce magna sem, sagittis vitae cursus at, tincidunt sit amet eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum blandit id nisi et accumsan. Vestibulum fringilla sollicitudin purus, et vehicula eros accumsan ut. Quisque eget tortor ac libero scelerisque interdum. - -Curabitur tempor et lacus in tincidunt. Aliquam dolor ante, facilisis venenatis ante nec, congue bibendum elit. Nulla luctus condimentum sapien quis iaculis. Cras lorem leo, tristique ac neque in, tincidunt tincidunt lorem. Quisque consectetur, tellus sit amet dapibus convallis, ante dolor egestas sem, eget varius sapien nisi non elit. Maecenas elementum lacinia tellus eget placerat. Donec ac nulla neque. In felis nibh, aliquam a neque at, iaculis auctor risus. Donec rhoncus eu mi sit amet pretium. In hac habitasse platea dictumst. Donec laoreet porttitor blandit. - -Duis dapibus volutpat nisl, id tempus dolor mattis efficitur. Pellentesque bibendum nulla mattis sem aliquam euismod. Sed ut justo porttitor, dictum felis a, consectetur arcu. Mauris et ultricies nisl. Morbi id lorem vel nibh ornare rhoncus. Fusce egestas, elit at venenatis tincidunt, lacus elit auctor dui, vel lobortis enim lacus blandit ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin fringilla neque nisl, ut pulvinar tortor efficitur sed. Aliquam non turpis consectetur, fermentum orci sit amet, malesuada est. Etiam est dui, porttitor non erat eu, porttitor ultrices orci. Nam a dolor fermentum, vulputate tellus quis, cursus nunc. Sed placerat augue erat, ac lacinia risus accumsan et. In interdum placerat nisi. diff --git a/_portfolio/react-weather-app.mdx b/_portfolio/react-weather-app.mdx index 5151780..3ee0cb7 100644 --- a/_portfolio/react-weather-app.mdx +++ b/_portfolio/react-weather-app.mdx @@ -2,10 +2,9 @@ title: 'React Weather App' 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' +tags: ['react', 'typescript', 'openweathermap'] --- # About the project diff --git a/components/Card/index.tsx b/components/Card/index.tsx index a790be5..51061a4 100644 --- a/components/Card/index.tsx +++ b/components/Card/index.tsx @@ -17,7 +17,7 @@ const Card: FC = ({ title, description, image, tags, href, target, onClic return ( -
+

{title}

{description}

{tags && ( @@ -28,10 +28,10 @@ const Card: FC = ({ title, description, image, tags, href, target, onClic
)}
- {image ? ( - - ) : ( - + {image && ( +
+ +
)} diff --git a/components/Card/styles.tsx b/components/Card/styles.tsx index a19a466..165d376 100644 --- a/components/Card/styles.tsx +++ b/components/Card/styles.tsx @@ -4,12 +4,20 @@ export const StyledCard = styled.div<{ image: boolean }>` cursor: pointer; width: 100%; display: grid; - grid-template-columns: auto 150px; + grid-template-columns: ${({ image }) => (image ? 'auto 9.375rem' : 'auto')}; align-items: stretch; transition: color 0ms ease-in-out; text-decoration: none; color: var(--text); + @media (max-width: 320px) { + grid-template-columns: ${({ image }) => (image ? 'auto 7.813rem' : 'auto')}; + } + + @media (min-width: 1440px) { + grid-template-columns: ${({ image }) => (image ? 'auto 15.625rem' : 'auto')}; + } + &:hover { & > div { background: ${({ theme }) => theme.colors.blue}; @@ -24,7 +32,7 @@ export const StyledCard = styled.div<{ image: boolean }>` } } - & > div { + .card-content { padding: 1rem 0rem; background: var(--secondary-background); display: grid; @@ -35,6 +43,11 @@ export const StyledCard = styled.div<{ image: boolean }>` } } + .card-image { + position: relative; + width: 100%; + } + h3, p, .tags-wrapper { diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx index 10a5dc5..2ac41f8 100644 --- a/components/Footer/index.tsx +++ b/components/Footer/index.tsx @@ -37,13 +37,6 @@ const Footer: FC = () => { href='https://codepen.io/hazemkrimi' target='_blank' /> -

Hazem Krimi © {new Date().getFullYear()}

diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx index c4ead8f..a8cbe8d 100644 --- a/components/Hero/index.tsx +++ b/components/Hero/index.tsx @@ -1,29 +1,19 @@ -import { FC, useContext } from 'react'; -import { ThemeContext } from '../../styles/theme'; +import { FC } from 'react'; import { Wrapper } from './styles'; import Image from 'next/image'; -const Hero: FC = () => { - const { mode } = useContext(ThemeContext); - - return ( - -
-

Hi, I am Hazem

-

I Like Building Things

-

Software Developer

-

Life Long Learner

-
-
- -
- - ); -}; +const Hero: FC = () => ( + +
+

Hi, I am Hazem

+

I Like Building Things

+

Software Developer

+

Life Long Learner

+
+
+ +
+ +); export default Hero; diff --git a/components/Hero/styles.tsx b/components/Hero/styles.tsx index e1ca111..6065721 100644 --- a/components/Hero/styles.tsx +++ b/components/Hero/styles.tsx @@ -3,16 +3,16 @@ import styled from 'styled-components'; export const Wrapper = styled.div` min-height: 45vh; display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: 1fr 32.188rem; align-items: center; height: auto; text-align: left; - @media (max-width: 425px) { - min-height: 65vh; - grid-template-columns: auto; + @media (max-width: 1024px) { + min-height: 35vh; + grid-template-columns: 1fr; - .illustration { + .photo { display: none; } } @@ -29,15 +29,6 @@ export const Wrapper = styled.div` } } - .small { - font-size: 1rem; - font-weight: normal; - - @media (min-width: 1440px) { - font-size: 1.5rem; - } - } - .blue { color: ${({ theme }) => theme.colors.blue}; } diff --git a/components/MobileNav/index.tsx b/components/MobileNav/index.tsx index 169d8e7..b34e920 100644 --- a/components/MobileNav/index.tsx +++ b/components/MobileNav/index.tsx @@ -47,11 +47,6 @@ const MobileNav: FC = ({ open, close }) => { {mode === 'dark' ? 'Light Mode' : 'Dark Mode'} -
- -
+
+ +
); }; diff --git a/components/Nav/index.tsx b/components/Nav/index.tsx index 0831506..2304f25 100644 --- a/components/Nav/index.tsx +++ b/components/Nav/index.tsx @@ -30,9 +30,9 @@ const Nav: FC = () => { icon={mode === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg'} onClick={toggle} /> - + diff --git a/pages/about.tsx b/pages/contact.tsx similarity index 78% rename from pages/about.tsx rename to pages/contact.tsx index f4321c5..31aa7ae 100644 --- a/pages/about.tsx +++ b/pages/contact.tsx @@ -1,14 +1,11 @@ -import React, { FC, useContext, useState } from 'react'; -import { ThemeContext } from '../styles/theme'; +import React, { FC, useState } from 'react'; import { useForm, ValidationError } from '@formspree/react'; import Head from 'next/head'; import { Wrapper } from '../styles/about'; -import Image from 'next/image'; import Input from '../components/Input'; import MDXButton from '../components/MDXButton'; const About: FC = () => { - const { mode } = useContext(ThemeContext); const [form, setForm] = useState<{ name: string; email: string; message: string }>({ name: '', email: '', @@ -51,22 +48,10 @@ const About: FC = () => { 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' /> - About | Hazem Krimi + Contact | Hazem Krimi
-
-

About Me

-
-

- I am a software developer and a student. I have experience as a full stack developer - but I lean more to the front end and I have built a lot of web apps and some mobile - apps. Also, I am always learning and experimenting with new technologies (currently - learning about the ethereum blockchain) and other topics other than software - engineering. -

-
-

Contact Me {submitted && Message sent ✔️}

@@ -116,9 +101,6 @@ const About: FC = () => {
-
- -
); diff --git a/pages/index.tsx b/pages/index.tsx index 5458daf..baedbe0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -52,38 +52,45 @@ const Index: FC = ({ blogPosts, portfolioProjects }) => {
-

Portfolio

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

About me

+
+

+ I am a software developer. I have experience as a full stack developer but I lean more + to the front end and I have built a lot of web apps and some mobile apps. Also, I am + always learning and experimenting with new technologies (currently learning about the + ethereum blockchain) and other topics other than software engineering. +

+
+ {portfolioProjects.length !== 0 && ( + <> +

Portfolio

+ +
+
+ {portfolioProjects.slice(0, 3).map(({ slug, ...rest }) => ( - )) - ) : ( -

Nothing for now

- )} -
-
-

Blog

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

Nothing for now

- )} -
-
+ ))} +
+
+ + )} + {blogPosts.length !== 0 && ( + <> +

Blog

+ +
+
+ {blogPosts.slice(0, 3).map(({ slug, ...rest }) => ( + + ))} +
+
+ + )}
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx index 3085dd5..2d35801 100644 --- a/pages/portfolio/[slug].tsx +++ b/pages/portfolio/[slug].tsx @@ -88,7 +88,6 @@ const PortfolioProject: FC = ({ source, frontMatter }) => { Demo - Source Code diff --git a/public/icons/dark-dribbble.svg b/public/icons/dark-dribbble.svg deleted file mode 100644 index f6fb6be..0000000 --- a/public/icons/dark-dribbble.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/icons/light-dribbble.svg b/public/icons/light-dribbble.svg deleted file mode 100644 index 265e5a0..0000000 --- a/public/icons/light-dribbble.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/no-image.png b/public/no-image.png deleted file mode 100644 index 8b4b36d..0000000 Binary files a/public/no-image.png and /dev/null differ diff --git a/public/picture.jpg b/public/photo.jpg similarity index 100% rename from public/picture.jpg rename to public/photo.jpg diff --git a/styles/about.tsx b/styles/about.tsx index b2eff32..ee98da2 100644 --- a/styles/about.tsx +++ b/styles/about.tsx @@ -2,9 +2,6 @@ import styled from 'styled-components'; export const Wrapper = styled.div` padding: 1rem 0rem; - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 2rem; @media (max-width: 768px) { padding: 0rem; @@ -13,14 +10,6 @@ export const Wrapper = styled.div` row-gap: 1rem; } - .photo { - order: initial; - - @media (max-width: 768px) { - order: -1; - } - } - h1 { font-size: 1.7rem; } @@ -30,7 +19,6 @@ export const Wrapper = styled.div` flex-direction: column; } - .about, .contact { margin: 1rem 0rem; diff --git a/styles/blog/index.tsx b/styles/blog/index.tsx index 8da20ff..5c7242c 100644 --- a/styles/blog/index.tsx +++ b/styles/blog/index.tsx @@ -29,8 +29,8 @@ export const Wrapper = styled.div` .articles-wrapper { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-auto-rows: minmax(100px, auto); + grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); + grid-auto-rows: minmax(6.25rem, auto); align-items: stretch; justify-items: center; gap: 1rem; diff --git a/styles/home.tsx b/styles/home.tsx index b9537a8..a0c5b9f 100644 --- a/styles/home.tsx +++ b/styles/home.tsx @@ -27,6 +27,7 @@ export const Wrapper = styled.div` } } + .about, .portfolio, .blog { margin: 1rem 0rem; @@ -39,8 +40,8 @@ export const Wrapper = styled.div` .projects-wrapper, .articles-wrapper { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-auto-rows: minmax(100px, auto); + grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); + grid-auto-rows: minmax(6.25rem, auto); align-items: stretch; justify-items: center; gap: 1rem; diff --git a/styles/portfolio/index.tsx b/styles/portfolio/index.tsx index 69da456..fef17d8 100644 --- a/styles/portfolio/index.tsx +++ b/styles/portfolio/index.tsx @@ -29,8 +29,8 @@ export const Wrapper = styled.div` .projects-wrapper { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-auto-rows: minmax(100px, auto); + grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); + grid-auto-rows: minmax(6.25rem, auto); align-items: stretch; justify-items: center; gap: 1rem;