Update website structure and styles

components/Card/index.tsx

@@ -17,7 +17,7 @@ const Card: FC<Props> = ({ title, description, image, tags, href, target, onClic
 	return (
 		<Link href={href} passHref>
 			<StyledCard as='a' target={target} onClick={onClick} image={!!image}>
-				<div>
+				<div className='card-content'>
 					<h3>{title}</h3>
 					<p>{description}</p>
 					{tags && (
@@ -28,10 +28,10 @@ const Card: FC<Props> = ({ title, description, image, tags, href, target, onClic
 						</div>
 					)}
 				</div>
-				{image ? (
-					<Image src={image} width='100%' height='100%' layout='responsive' />
-				) : (
-					<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
+				{image && (
+					<div className='card-image'>
+						<Image src={image} layout='fill' objectFit='cover' />
+					</div>
 				)}
 			</StyledCard>
 		</Link>

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 {

components/Footer/index.tsx

@@ -37,13 +37,6 @@ const Footer: FC = () => {
 					href='https://codepen.io/hazemkrimi'
 					target='_blank'
 				/>
-				<IconButton
-					icon={mode === 'dark' ? '/icons/light-dribbble.svg' : '/icons/dark-dribbble.svg'}
-					width={16}
-					height={16}
-					href='https://dribbble.com/HazemKrimi'
-					target='_blank'
-				/>
 			</div>
 			<p>Hazem Krimi &copy; {new Date().getFullYear()}</p>
 		</StyledFooter>

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

components/MobileNav/index.tsx

@@ -47,11 +47,6 @@ const MobileNav: FC<Props> = ({ open, close }) => {
 					{mode === 'dark' ? 'Light Mode' : 'Dark Mode'}
 				</Button>
 			</div>
-			<div className='mobile-button-wrapper'>
-				<Button href='/about' onClick={() => close()}>
-					About
-				</Button>
-			</div>
 			<div className='mobile-button-wrapper'>
 				<Button href='/portfolio' onClick={() => close()}>
 					Portfolio
@@ -62,6 +57,11 @@ const MobileNav: FC<Props> = ({ open, close }) => {
 					Blog
 				</Button>
 			</div>
+			<div className='mobile-button-wrapper'>
+				<Button href='/contact' onClick={() => close()}>
+					Contact
+				</Button>
+			</div>
 		</Bar>
 	);
 };

components/Nav/index.tsx

@@ -30,9 +30,9 @@ const Nav: FC = () => {
 					icon={mode === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg'}
 					onClick={toggle}
 				/>
-				<Button href='/about'>About</Button>
 				<Button href='/portfolio'>Portfolio</Button>
 				<Button href='/blog'>Blog</Button>
+				<Button href='/contact'>Contact</Button>
 				<Button href='/resume.pdf' target='_blank' variant='outline'>
 					Resume
 				</Button>