Update website structure and styles

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 (
-		<Wrapper>
-			<div className='intro'>
-				<h2>Hi, I am Hazem</h2>
-				<h2>I Like Building Things</h2>
-				<h2 className='blue'>Software Developer</h2>
-				<h2 className='blue'>Life Long Learner</h2>
-			</div>
-			<div className='illustration'>
-				<Image
-					src={mode === 'dark' ? '/dark-illustration.svg' : '/light-illustration.svg'}
-					width='100%'
-					height='100%'
-					layout='responsive'
-				/>
-			</div>
-		</Wrapper>
-	);
-};
+const Hero: FC = () => (
+	<Wrapper>
+		<div className='intro'>
+			<h2>Hi, I am Hazem</h2>
+			<h2>I Like Building Things</h2>
+			<h2 className='blue'>Software Developer</h2>
+			<h2 className='blue'>Life Long Learner</h2>
+		</div>
+		<div className='photo'>
+			<Image src='/photo.jpg' width={515} height={535} objectFit='cover' />
+		</div>
+	</Wrapper>
+);
 
 export default Hero;

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};
 	}