Update folder structure for pages and some components

components/Button/index.tsx

@@ -0,0 +1,33 @@
+import { FC, useContext } from 'react';
+import { DarkModeContext } from '../../components/DarkMode';
+import { Props } from './types';
+import { Btn } from './styles';
+import Link from 'next/link';
+
+const Button: FC<Props & { className?: string }> = ({
+	variant = 'text',
+	href,
+	target,
+	onClick,
+	children,
+	className
+}) => {
+	const { dark } = useContext(DarkModeContext);
+
+	return (
+		<Link href={href} passHref>
+			<Btn
+				as='a'
+				target={target}
+				variant={variant}
+				dark={dark}
+				onClick={onClick}
+				className={className}
+			>
+				{children}
+			</Btn>
+		</Link>
+	);
+};
+
+export default Button;

components/Button/styles.tsx

@@ -1,17 +1,7 @@
-import { FC, useContext } from 'react';
-import { DarkModeContext } from '../components/DarkMode';
 import styled from 'styled-components';
-import Link from 'next/link';
+import { Props } from './types';
 
-interface Props {
+export const Btn = styled.button<Omit<Props, 'href'>>`
-	variant?: 'outline' | 'text';
-	href: string;
-	target?: HTMLAnchorElement['target'];
-	onClick?: () => void;
-	dark?: boolean;
-}
-
-const Btn = styled.button<Omit<Props, 'href'>>`
 	position: relative;
 	display: inline;
 	cursor: pointer;
@@ -53,31 +43,3 @@ const Btn = styled.button<Omit<Props, 'href'>>`
 		transform: scaleX(1);
 	}
 `;
-
-const Button: FC<Props & { className?: string }> = ({
-	variant = 'text',
-	href,
-	target,
-	onClick,
-	children,
-	className
-}) => {
-	const { dark } = useContext(DarkModeContext);
-
-	return (
-		<Link href={href} passHref>
-			<Btn
-				as='a'
-				target={target}
-				variant={variant}
-				dark={dark}
-				onClick={onClick}
-				className={className}
-			>
-				{children}
-			</Btn>
-		</Link>
-	);
-};
-
-export default Button;

components/Button/types.ts

@@ -0,0 +1,7 @@
+export type Props = {
+	variant?: 'outline' | 'text';
+	href: string;
+	target?: HTMLAnchorElement['target'];
+	onClick?: () => void;
+	dark?: boolean;
+};

components/Card.tsx

@@ -1,102 +0,0 @@
-import { FC, useContext } from 'react';
-import { DarkModeContext } from '../components/DarkMode';
-import styled from 'styled-components';
-import Image from 'next/image';
-import Link from 'next/link';
-
-interface Props {
-	title: string;
-	description: string;
-	image?: string;
-	tags?: string[];
-	href: string;
-	target?: HTMLAnchorElement['target'];
-	onClick?: () => void;
-}
-
-const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
-	cursor: pointer;
-	width: 100%;
-	display: grid;
-	grid-template-columns: auto 150px;
-	align-items: stretch;
-	transition: color 0ms ease-in-out;
-	text-decoration: none;
-	color: var(--text);
-
-	&:hover {
-		& > div {
-			background: ${({ theme }) => theme.colors.blue};
-			color: ${({ theme }) => theme.colors.dark.text};
-		}
-
-		img {
-			filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
-		}
-	}
-
-	& > div {
-		padding: 1rem 0rem;
-		background: var(--secondary-background);
-		display: grid;
-		row-gap: 0.5rem;
-
-		@media (max-width: 768px) {
-			padding: 0.75rem 0rem;
-		}
-	}
-
-	h3,
-	p,
-	.tags-wrapper {
-		padding: 0rem 1rem;
-
-		@media (max-width: 768px) {
-			padding: 0rem 0.5rem;
-		}
-	}
-
-	h3 {
-		font-size: 1.3rem;
-	}
-
-	.tags-wrapper {
-		display: flex;
-		flex-direction: row;
-		align-content: center;
-		flex-wrap: wrap;
-	}
-
-	span {
-		font-size: 0.7rem;
-	}
-`;
-
-const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
-	const { dark } = useContext(DarkModeContext);
-
-	return (
-		<Link href={href} passHref>
-			<StyledCard as='a' target={target} dark={dark} onClick={onClick} image={!!image}>
-				<div>
-					<h3>{title}</h3>
-					<p>{description}</p>
-					{tags && (
-						<div className='tags-wrapper'>
-							{tags.map((tag, index) => (
-								<span key={index}>#{tag}&nbsp;</span>
-							))}
-						</div>
-					)}
-				</div>
-				{image ? (
-					<Image src={image} width='100%' height='100%' layout='responsive' />
-				) : (
-					<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
-				)}
-			</StyledCard>
-		</Link>
-	);
-};
-
-export default Card;

components/Card/index.tsx

@@ -0,0 +1,44 @@
+import { FC, useContext } from 'react';
+import { DarkModeContext } from '../../components/DarkMode';
+import { StyledCard } from './styles';
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface Props {
+	title: string;
+	description: string;
+	image?: string;
+	tags?: string[];
+	href: string;
+	target?: HTMLAnchorElement['target'];
+	onClick?: () => void;
+}
+
+const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
+	const { dark } = useContext(DarkModeContext);
+
+	return (
+		<Link href={href} passHref>
+			<StyledCard as='a' target={target} dark={dark} onClick={onClick} image={!!image}>
+				<div>
+					<h3>{title}</h3>
+					<p>{description}</p>
+					{tags && (
+						<div className='tags-wrapper'>
+							{tags.map((tag, index) => (
+								<span key={index}>#{tag}&nbsp;</span>
+							))}
+						</div>
+					)}
+				</div>
+				{image ? (
+					<Image src={image} width='100%' height='100%' layout='responsive' />
+				) : (
+					<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
+				)}
+			</StyledCard>
+		</Link>
+	);
+};
+
+export default Card;

components/Card/styles.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
+	cursor: pointer;
+	width: 100%;
+	display: grid;
+	grid-template-columns: auto 150px;
+	align-items: stretch;
+	transition: color 0ms ease-in-out;
+	text-decoration: none;
+	color: var(--text);
+
+	&:hover {
+		& > div {
+			background: ${({ theme }) => theme.colors.blue};
+			color: ${({ theme }) => theme.colors.dark.text};
+		}
+
+		img {
+			filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
+		}
+	}
+
+	& > div {
+		padding: 1rem 0rem;
+		background: var(--secondary-background);
+		display: grid;
+		row-gap: 0.5rem;
+
+		@media (max-width: 768px) {
+			padding: 0.75rem 0rem;
+		}
+	}
+
+	h3,
+	p,
+	.tags-wrapper {
+		padding: 0rem 1rem;
+
+		@media (max-width: 768px) {
+			padding: 0rem 0.5rem;
+		}
+	}
+
+	h3 {
+		font-size: 1.3rem;
+	}
+
+	.tags-wrapper {
+		display: flex;
+		flex-direction: row;
+		align-content: center;
+		flex-wrap: wrap;
+	}
+
+	span {
+		font-size: 0.7rem;
+	}
+`;

components/CodeBlock/index.tsx

@@ -1,30 +1,7 @@
 import { FC } from 'react';
-import styled from 'styled-components';
 import Highlight, { defaultProps, Language } from 'prism-react-renderer';
 import theme from 'prism-react-renderer/themes/vsDark';
-
+import { Line, LineContent, LineNo, Pre } from './styles';
-const Pre = styled.pre`
-	text-align: left;
-	margin: 1em 0;
-	padding: 0.5em;
-	overflow: scroll;
-`;
-
-const Line = styled.div`
-	display: table-row;
-`;
-
-const LineNo = styled.span`
-	display: table-cell;
-	text-align: right;
-	padding-right: 1em;
-	user-select: none;
-	opacity: 0.5;
-`;
-
-const LineContent = styled.span`
-	display: table-cell;
-`;
 
 const CodeBlock: FC<{ className: string }> = ({ children, className }) => {
 	const language = className.replace(/language-/, '') as Language;

components/CodeBlock/styles.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const Pre = styled.pre`
+	text-align: left;
+	margin: 1em 0;
+	padding: 0.5em;
+	overflow: scroll;
+`;
+
+export const Line = styled.div`
+	display: table-row;
+`;
+
+export const LineNo = styled.span`
+	display: table-cell;
+	text-align: right;
+	padding-right: 1em;
+	user-select: none;
+	opacity: 0.5;
+`;
+
+export const LineContent = styled.span`
+	display: table-cell;
+`;

components/Footer/index.tsx

@@ -1,47 +1,7 @@
 import { FC, useContext } from 'react';
-import { DarkModeContext } from '../components/DarkMode';
+import { DarkModeContext } from '../../components/DarkMode';
-import styled from 'styled-components';
+import { StyledFooter } from './styles';
-import IconButton from '../components/IconButton';
+import IconButton from '../../components/IconButton';
-
-const StyledFooter = styled.footer`
-	position: absolute;
-	bottom: 0;
-	min-height: 100px;
-	width: 85%;
-	margin: auto;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	column-gap: 2rem;
-	justify-content: flex-end;
-	align-content: center;
-	padding: 1rem 0rem;
-
-	@media (max-width: 768px) {
-		width: 95%;
-	}
-
-	.contact {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, 16px);
-		column-gap: 1rem;
-		align-items: center;
-		justify-content: flex-start;
-
-		* {
-			user-select: none;
-		}
-
-		@media (max-width: 768px) {
-			column-gap: 0.5rem;
-		}
-	}
-
-	p {
-		display: inline;
-		text-align: right;
-		font-weight: bold;
-	}
-`;
 
 const Footer: FC = () => {
 	const { dark } = useContext(DarkModeContext);

components/Footer/styles.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const StyledFooter = styled.footer`
+	position: absolute;
+	bottom: 0;
+	min-height: 100px;
+	width: 85%;
+	margin: auto;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	column-gap: 2rem;
+	justify-content: flex-end;
+	align-content: center;
+	padding: 1rem 0rem;
+
+	@media (max-width: 768px) {
+		width: 95%;
+	}
+
+	.contact {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, 16px);
+		column-gap: 1rem;
+		align-items: center;
+		justify-content: flex-start;
+
+		* {
+			user-select: none;
+		}
+
+		@media (max-width: 768px) {
+			column-gap: 0.5rem;
+		}
+	}
+
+	p {
+		display: inline;
+		text-align: right;
+		font-weight: bold;
+	}
+`;

components/Hero.tsx

@@ -1,72 +0,0 @@
-import { FC, useContext } from 'react';
-import { DarkModeContext } from '../components/DarkMode';
-import styled from 'styled-components';
-import Image from 'next/image';
-
-const Wrapper = styled.div`
-	min-height: 45vh;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	align-items: center;
-	height: auto;
-	text-align: left;
-
-	@media (max-width: 425px) {
-		min-height: 65vh;
-		grid-template-columns: auto;
-
-		.illustration {
-			display: none;
-		}
-	}
-
-	h2 {
-		font-size: 1.5rem;
-
-		@media (min-width: 1440px) {
-			font-size: 2rem;
-		}
-
-		@media (min-width: 2560px) {
-			font-size: 3.5rem;
-		}
-	}
-
-	.small {
-		font-size: 1rem;
-		font-weight: normal;
-
-		@media (min-width: 1440px) {
-			font-size: 1.5rem;
-		}
-	}
-
-	.blue {
-		color: ${({ theme }) => theme.colors.blue};
-	}
-`;
-
-const Hero: FC = () => {
-	const { dark } = useContext(DarkModeContext);
-
-	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={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
-					width='100%'
-					height='100%'
-					layout='responsive'
-				/>
-			</div>
-		</Wrapper>
-	);
-};
-
-export default Hero;

components/Hero/index.tsx

@@ -0,0 +1,29 @@
+import { FC, useContext } from 'react';
+import { DarkModeContext } from '../../components/DarkMode';
+import { Wrapper } from './styles';
+import Image from 'next/image';
+
+const Hero: FC = () => {
+	const { dark } = useContext(DarkModeContext);
+
+	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={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
+					width='100%'
+					height='100%'
+					layout='responsive'
+				/>
+			</div>
+		</Wrapper>
+	);
+};
+
+export default Hero;

components/Hero/styles.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	min-height: 45vh;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	align-items: center;
+	height: auto;
+	text-align: left;
+
+	@media (max-width: 425px) {
+		min-height: 65vh;
+		grid-template-columns: auto;
+
+		.illustration {
+			display: none;
+		}
+	}
+
+	h2 {
+		font-size: 1.5rem;
+
+		@media (min-width: 1440px) {
+			font-size: 2rem;
+		}
+
+		@media (min-width: 2560px) {
+			font-size: 3.5rem;
+		}
+	}
+
+	.small {
+		font-size: 1rem;
+		font-weight: normal;
+
+		@media (min-width: 1440px) {
+			font-size: 1.5rem;
+		}
+	}
+
+	.blue {
+		color: ${({ theme }) => theme.colors.blue};
+	}
+`;

components/MDXButton/index.tsx

@@ -0,0 +1,39 @@
+import { FC, useContext } from 'react';
+import { DarkModeContext } from '../../components/DarkMode';
+import { Props } from './types';
+import { Btn } from './styles';
+import Link from 'next/link';
+
+const MDXButton: FC<Props & { className?: string }> = ({
+	variant = 'text',
+	type = 'button',
+	link,
+	target,
+	children,
+	disabled,
+	className
+}) => {
+	const { dark } = useContext(DarkModeContext);
+
+	return link ? (
+		<Link href={link} passHref>
+			<Btn
+				as='a'
+				target={target}
+				variant={variant}
+				type={type}
+				dark={dark}
+				disabled={disabled}
+				className={className}
+			>
+				{children}
+			</Btn>
+		</Link>
+	) : (
+		<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
+			{children}
+		</Btn>
+	);
+};
+
+export default MDXButton;

components/MDXButton/styles.tsx

@@ -1,18 +1,7 @@
-import { FC, useContext } from 'react';
-import { DarkModeContext } from '../components/DarkMode';
-import Link from 'next/link';
 import styled from 'styled-components';
+import { Props } from './types';
 
-interface Props {
+export const Btn = styled.button<Props>`
-	variant?: 'outline' | 'text' | 'action';
-	type?: 'button' | 'submit';
-	link?: string;
-	target?: HTMLAnchorElement['target'];
-	dark?: boolean;
-	disabled?: boolean;
-}
-
-const Btn = styled.button<Props>`
 	cursor: pointer;
 	display: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
@@ -46,37 +35,3 @@ const Btn = styled.button<Props>`
 			['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
 	}
 `;
-
-const MDXButton: FC<Props & { className?: string }> = ({
-	variant = 'text',
-	type = 'button',
-	link,
-	target,
-	children,
-	disabled,
-	className
-}) => {
-	const { dark } = useContext(DarkModeContext);
-
-	return link ? (
-		<Link href={link} passHref>
-			<Btn
-				as='a'
-				target={target}
-				variant={variant}
-				type={type}
-				dark={dark}
-				disabled={disabled}
-				className={className}
-			>
-				{children}
-			</Btn>
-		</Link>
-	) : (
-		<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
-			{children}
-		</Btn>
-	);
-};
-
-export default MDXButton;

components/MDXButton/types.ts

@@ -0,0 +1,8 @@
+export type Props = {
+	variant?: 'outline' | 'text' | 'action';
+	type?: 'button' | 'submit';
+	link?: string;
+	target?: HTMLAnchorElement['target'];
+	dark?: boolean;
+	disabled?: boolean;
+};

components/MobileNav/index.tsx

@@ -1,53 +1,9 @@
 import { FC, useContext, useRef, useEffect } from 'react';
-import { DarkModeContext } from './DarkMode';
+import { DarkModeContext } from '../DarkMode';
-import styled from 'styled-components';
+import { Props } from './types';
-import IconButton from './IconButton';
+import { Bar } from './styles';
-import Button from './Button';
+import IconButton from '../IconButton';
-
+import Button from '../Button';
-interface Props {
-	open: boolean;
-	close: () => void;
-}
-
-interface StyledProps {
-	dark: boolean;
-	open: boolean;
-}
-
-const Bar = styled.nav<StyledProps>`
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	right: 0;
-	transform-origin: right;
-	transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
-	width: 80%;
-	height: 100vh;
-	background: var(--text);
-	transition: transform 250ms ease-in-out;
-	display: grid;
-	grid-template-rows: 30% repeat(4, 50px);
-	padding: 1rem 1rem 5rem 1rem;
-
-	@media (orientation: landscape) {
-		grid-template-rows: auto;
-	}
-
-	.close {
-		justify-self: flex-end;
-		align-self: flex-start;
-		margin-top: 0.5rem;
-	}
-
-	.mobile-button-wrapper {
-		display: flex;
-		margin: 0rem 1rem;
-
-		a {
-			color: var(--text-inverted) !important;
-		}
-	}
-`;
 
 const MobileNav: FC<Props> = ({ open, close }) => {
 	const { dark, toggle } = useContext(DarkModeContext);

components/MobileNav/styles.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { StyledProps } from './types';
+
+export const Bar = styled.nav<StyledProps>`
+	position: fixed;
+	z-index: 2;
+	top: 0;
+	right: 0;
+	transform-origin: right;
+	transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
+	width: 80%;
+	height: 100vh;
+	background: var(--text);
+	transition: transform 250ms ease-in-out;
+	display: grid;
+	grid-template-rows: 30% repeat(4, 50px);
+	padding: 1rem 1rem 5rem 1rem;
+
+	@media (orientation: landscape) {
+		grid-template-rows: auto;
+	}
+
+	.close {
+		justify-self: flex-end;
+		align-self: flex-start;
+		margin-top: 0.5rem;
+	}
+
+	.mobile-button-wrapper {
+		display: flex;
+		margin: 0rem 1rem;
+
+		a {
+			color: var(--text-inverted) !important;
+		}
+	}
+`;

components/MobileNav/types.ts

@@ -0,0 +1,9 @@
+export type Props = {
+	open: boolean;
+	close: () => void;
+};
+
+export type StyledProps = {
+	dark: boolean;
+	open: boolean;
+};

components/Nav/index.tsx

@@ -1,69 +1,11 @@
 import { FC, useContext, useState } from 'react';
-import { DarkModeContext } from './DarkMode';
+import { DarkModeContext } from '../DarkMode';
-import styled from 'styled-components';
+import { Bar } from './styles';
 import Link from 'next/link';
 import Image from 'next/image';
-import Button from './Button';
+import Button from '../Button';
-import IconButton from './IconButton';
+import IconButton from '../IconButton';
-import MobileNav from './MobileNav';
+import MobileNav from '../MobileNav';
-
-const Bar = styled.nav`
-	width: 100%;
-	display: grid;
-	grid-template-columns: auto 1fr;
-	align-items: center;
-	padding: 1rem 0rem;
-
-	* {
-		user-select: none;
-	}
-
-	h1 {
-		font-size: 1.7rem;
-
-		@media (max-width: 768px) {
-			font-size: 1rem;
-		}
-	}
-
-	div,
-	a.logo {
-		display: grid;
-		align-items: center;
-		column-gap: 1rem;
-
-		@media (max-width: 768px) {
-			column-gap: 0.5rem;
-		}
-	}
-
-	a.logo {
-		text-decoration: none;
-		color: var(--text);
-		cursor: pointer;
-		grid-template-columns: repeat(2, auto);
-		justify-content: flex-start;
-	}
-
-	.buttons {
-		grid-template-columns: repeat(5, auto);
-		justify-content: flex-end;
-
-		@media (max-width: 768px) {
-			display: none;
-		}
-	}
-
-	.mobile-buttons {
-		display: none;
-
-		@media (max-width: 768px) {
-			display: grid;
-			grid-template-columns: repeat(2, auto);
-			justify-content: flex-end;
-		}
-	}
-`;
 
 const Nav: FC = () => {
 	const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);

components/Nav/styles.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const Bar = styled.nav`
+	width: 100%;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	align-items: center;
+	padding: 1rem 0rem;
+
+	* {
+		user-select: none;
+	}
+
+	h1 {
+		font-size: 1.7rem;
+
+		@media (max-width: 768px) {
+			font-size: 1rem;
+		}
+	}
+
+	div,
+	a.logo {
+		display: grid;
+		align-items: center;
+		column-gap: 1rem;
+
+		@media (max-width: 768px) {
+			column-gap: 0.5rem;
+		}
+	}
+
+	a.logo {
+		text-decoration: none;
+		color: var(--text);
+		cursor: pointer;
+		grid-template-columns: repeat(2, auto);
+		justify-content: flex-start;
+	}
+
+	.buttons {
+		grid-template-columns: repeat(5, auto);
+		justify-content: flex-end;
+
+		@media (max-width: 768px) {
+			display: none;
+		}
+	}
+
+	.mobile-buttons {
+		display: none;
+
+		@media (max-width: 768px) {
+			display: grid;
+			grid-template-columns: repeat(2, auto);
+			justify-content: flex-end;
+		}
+	}
+`;

components/index.ts

@@ -2,7 +2,7 @@ import { CodePen, Gist, YouTube, CodeSandbox, Vimeo, Tweet } from 'mdx-embed';
 import Image from 'next/image';
 import MDXButton from './MDXButton';
 
-const All = {
+export default {
 	Button: MDXButton,
 	Image,
 	CodePen,
@@ -12,5 +12,3 @@ const All = {
 	Tweet,
 	YouTube
 };
-
-export default All;

pages/404.tsx

@@ -1,32 +1,8 @@
 import { FC } from 'react';
 import { useRouter } from 'next/router';
-import styled from 'styled-components';
 import Head from 'next/head';
 import IconButton from '../components/IconButton';
-
+import { Wrapper } from './styles/404';
-const Wrapper = styled.div`
-	min-height: 75vh;
-	display: grid;
-	justify-items: center;
-	text-align: center;
-
-	@media (max-width: 768px) {
-		min-height: 65vh;
-	}
-
-	h1 {
-		font-size: 1.7rem;
-		align-self: flex-end;
-	}
-
-	.back {
-		cursor: pointer;
-		color: #3f9aee;
-		display: flex;
-		align-items: center;
-		align-self: flex-start;
-	}
-`;
 
 const NotFound: FC = () => {
 	const router = useRouter();

pages/about.tsx

@@ -2,71 +2,11 @@ import React, { FC, useContext, useState } from 'react';
 import { DarkModeContext } from '../components/DarkMode';
 import { useForm, ValidationError } from '@formspree/react';
 import Head from 'next/head';
-import styled from 'styled-components';
+import { Wrapper } from './styles/about';
 import Image from 'next/image';
 import Input from '../components/Input';
 import MDXButton from '../components/MDXButton';
 
-const Wrapper = styled.div<{ dark: boolean }>`
-	padding: 1rem 0rem;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	column-gap: 2rem;
-
-	@media (max-width: 768px) {
-		padding: 0rem;
-		grid-template-columns: auto;
-		column-gap: 0rem;
-		row-gap: 1rem;
-	}
-
-	.photo {
-		order: initial;
-
-		@media (max-width: 768px) {
-			order: -1;
-		}
-	}
-
-	h1 {
-		font-size: 1.7rem;
-	}
-
-	.content {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.about,
-	.contact {
-		margin: 1rem 0rem;
-
-		@media (max-width: 768px) {
-			margin: 1rem 0rem;
-		}
-	}
-
-	.success {
-		color: #73d26b;
-		align-self: center;
-		font-weight: normal;
-	}
-
-	.contact {
-		display: grid;
-		grid-template-columns: auto;
-		row-gap: 1.5rem;
-
-		.error {
-			color: #d75050;
-		}
-
-		@media (max-width: 768px) {
-			row-gap: 0.5rem;
-		}
-	}
-`;
-
 const About: FC = () => {
 	const { dark } = useContext(DarkModeContext);
 	const [form, setForm] = useState<{ name: string; email: string; message: string }>({

pages/blog/[slug].tsx

@@ -7,9 +7,9 @@ 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';
+import { Wrapper } from '../styles/blog/slug';
 import matter from 'gray-matter';
-import AllComponents from '../../components/All';
+import components from '../../components';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
@@ -22,97 +22,6 @@ interface Props {
 	text: string;
 }
 
-const Wrapper = styled.div`
-	min-height: 75vh;
-	padding: 1rem 0rem;
-	display: grid;
-	grid-template-rows: auto 1fr;
-	row-gap: 2rem;
-
-	@media (max-width: 768px) {
-		row-gap: 1rem;
-	}
-
-	.meta {
-		.back {
-			cursor: pointer;
-			text-align: left;
-			color: #3f9aee;
-			display: inline-flex;
-			align-items: center;
-		}
-
-		.image {
-			margin: 1rem 0rem;
-		}
-
-		h1,
-		p,
-		.tags-wrapper {
-			text-align: left;
-		}
-
-		h1 {
-			font-size: 2rem;
-		}
-
-		h2 {
-			font-size: 1.2rem;
-		}
-
-		.tags-wrapper {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			flex-wrap: wrap;
-		}
-	}
-
-	hr {
-		height: 0.1rem;
-		opacity: 0.3;
-		margin: 1rem auto 0rem auto;
-
-		@media (max-width: 768px) {
-			margin: 1rem auto 0rem auto;
-		}
-	}
-
-	.content {
-		h1 {
-			font-size: 1.5rem;
-		}
-
-		h2 {
-			font-size: 1.3rem;
-		}
-
-		h3 {
-			font-size: 1.1rem;
-		}
-
-		& > * {
-			margin: 0.5rem 0rem;
-		}
-
-		button {
-			margin: 1rem 0rem;
-		}
-
-		p * {
-			width: 100%;
-			height: auto;
-		}
-
-		ul,
-		ol {
-			margin-left: 1.5rem;
-		}
-	}
-`;
-
-const components = AllComponents;
-
 const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 	const content = hydrate(source, { components });
 	const router = useRouter();

pages/blog/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { useRouter } from 'next/router';
 import { getBlogPosts } from '../../utils/blog';
-import styled from 'styled-components';
+import { Wrapper } from '../styles/blog';
 import Card from '../../components/Card';
 import IconButton from '../../components/IconButton';
 import Head from 'next/head';
@@ -18,40 +18,6 @@ interface Props {
 	}[];
 }
 
-const Wrapper = styled.div`
-	min-height: 75vh;
-	padding: 1rem 0rem;
-
-	.back {
-		cursor: pointer;
-		text-align: left;
-		color: #3f9aee;
-		display: inline-flex;
-		align-items: center;
-	}
-
-	h1 {
-		font-size: 1.7rem;
-		margin-bottom: 1rem;
-	}
-
-	h4 {
-		font-size: 1.3rem;
-		grid-column: 1 / -1;
-		align-self: center;
-		justify-self: center;
-	}
-
-	.articles-wrapper {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		grid-auto-rows: minmax(100px, auto);
-		align-items: stretch;
-		justify-items: center;
-		gap: 1rem;
-	}
-`;
-
 const Index: FC<Props> = ({ blogPosts }) => {
 	const router = useRouter();
 

pages/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { getPortfolioProjects } from '../utils/portfolio';
 import { getBlogPosts } from '../utils/blog';
 import { GetStaticProps } from 'next';
-import styled from 'styled-components';
+import { Wrapper } from './styles/home';
 import Hero from '../components/Hero';
 import Button from '../components/Button';
 import Card from '../components/Card';
@@ -26,53 +26,6 @@ interface Props {
 	}[];
 }
 
-const Wrapper = styled.div`
-	padding: 1rem 0rem;
-	display: grid;
-	grid-template-columns: auto;
-	row-gap: 1rem;
-
-	h1 {
-		display: inline;
-		font-size: 1.7rem;
-		margin-right: 1rem;
-	}
-
-	h4 {
-		font-size: 1.3rem;
-		grid-column: 1 / -1;
-		align-self: center;
-		justify-self: center;
-	}
-
-	.blue {
-		color: ${({ theme }) => theme.colors.blue};
-
-		@media (max-width: 768px) {
-			margin-top: 0.5rem;
-		}
-	}
-
-	.portfolio,
-	.blog {
-		margin: 1rem 0rem;
-	}
-
-	.portfolio {
-		margin-bottom: 3rem;
-	}
-
-	.projects-wrapper,
-	.articles-wrapper {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		grid-auto-rows: minmax(100px, auto);
-		align-items: stretch;
-		justify-items: center;
-		gap: 1rem;
-	}
-`;
-
 const Index: FC<Props> = ({ blogPosts, portfolioProjects }) => {
 	return (
 		<>

pages/portfolio/[slug].tsx

@@ -7,9 +7,9 @@ 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';
 import matter from 'gray-matter';
-import AllComponents from '../../components/All';
+import components from '../../components';
+import { Wrapper } from '../styles/portfolio/slug';
 import Head from 'next/head';
 import IconButton from '../../components/IconButton';
 import CodeBlock from '../../components/CodeBlock';
@@ -20,85 +20,6 @@ interface Props {
 	frontMatter: any;
 }
 
-const Wrapper = styled.div`
-	min-height: 75vh;
-	padding: 1rem 0rem;
-	display: grid;
-	grid-template-rows: auto 1fr;
-	row-gap: 2rem;
-
-	@media (max-width: 768px) {
-		row-gap: 1rem;
-	}
-
-	.meta {
-		.back {
-			cursor: pointer;
-			text-align: left;
-			color: #3f9aee;
-			display: inline-flex;
-			align-items: center;
-		}
-
-		.image {
-			margin: 1rem 0rem;
-		}
-
-		h1,
-		p {
-			text-align: left;
-		}
-
-		h1 {
-			font-size: 2rem;
-		}
-
-		h2 {
-			font-size: 1.2rem;
-		}
-	}
-
-	hr {
-		height: 0.1rem;
-		opacity: 0.3;
-		margin: 1rem auto 0rem auto;
-	}
-
-	.content {
-		h1 {
-			font-size: 1.5rem;
-		}
-
-		h2 {
-			font-size: 1.3rem;
-		}
-
-		h3 {
-			font-size: 1.1rem;
-		}
-
-		& > * {
-			margin: 0.5rem 0rem;
-		}
-
-		button {
-			margin: 1rem 0rem;
-		}
-
-		p * {
-			width: 100%;
-			height: auto;
-		}
-
-		ul,
-		ol {
-			margin-left: 1.5rem;
-		}
-	}
-`;
-
-const components = AllComponents;
-
 const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 	const content = hydrate(source, { components });
 	const router = useRouter();

pages/portfolio/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { getPortfolioProjects } from '../../utils/portfolio';
 import { useRouter } from 'next/router';
-import styled from 'styled-components';
+import { Wrapper } from '../styles/portfolio';
 import Card from '../../components/Card';
 import IconButton from '../../components/IconButton';
 import Head from 'next/head';
@@ -17,40 +17,6 @@ interface Props {
 	}[];
 }
 
-const Wrapper = styled.div`
-	min-height: 75vh;
-	padding: 1rem 0rem;
-
-	.back {
-		cursor: pointer;
-		text-align: left;
-		color: #3f9aee;
-		display: inline-flex;
-		align-items: center;
-	}
-
-	h1 {
-		font-size: 1.7rem;
-		margin-bottom: 1rem;
-	}
-
-	h4 {
-		font-size: 1.3rem;
-		grid-column: 1 / -1;
-		align-self: center;
-		justify-self: center;
-	}
-
-	.projects-wrapper {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		grid-auto-rows: minmax(100px, auto);
-		align-items: stretch;
-		justify-items: center;
-		gap: 1rem;
-	}
-`;
-
 const Index: FC<Props> = ({ portfolioProjects }) => {
 	const router = useRouter();
 

pages/styles/404.tsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	min-height: 75vh;
+	display: grid;
+	justify-items: center;
+	text-align: center;
+
+	@media (max-width: 768px) {
+		min-height: 65vh;
+	}
+
+	h1 {
+		font-size: 1.7rem;
+		align-self: flex-end;
+	}
+
+	.back {
+		cursor: pointer;
+		color: #3f9aee;
+		display: flex;
+		align-items: center;
+		align-self: flex-start;
+	}
+`;

pages/styles/about.tsx

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div<{ dark: boolean }>`
+	padding: 1rem 0rem;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	column-gap: 2rem;
+
+	@media (max-width: 768px) {
+		padding: 0rem;
+		grid-template-columns: auto;
+		column-gap: 0rem;
+		row-gap: 1rem;
+	}
+
+	.photo {
+		order: initial;
+
+		@media (max-width: 768px) {
+			order: -1;
+		}
+	}
+
+	h1 {
+		font-size: 1.7rem;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.about,
+	.contact {
+		margin: 1rem 0rem;
+
+		@media (max-width: 768px) {
+			margin: 1rem 0rem;
+		}
+	}
+
+	.success {
+		color: #73d26b;
+		align-self: center;
+		font-weight: normal;
+	}
+
+	.contact {
+		display: grid;
+		grid-template-columns: auto;
+		row-gap: 1.5rem;
+
+		.error {
+			color: #d75050;
+		}
+
+		@media (max-width: 768px) {
+			row-gap: 0.5rem;
+		}
+	}
+`;

pages/styles/blog/index.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	min-height: 75vh;
+	padding: 1rem 0rem;
+
+	.back {
+		cursor: pointer;
+		text-align: left;
+		color: #3f9aee;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	h1 {
+		font-size: 1.7rem;
+		margin-bottom: 1rem;
+	}
+
+	h4 {
+		font-size: 1.3rem;
+		grid-column: 1 / -1;
+		align-self: center;
+		justify-self: center;
+	}
+
+	.articles-wrapper {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		grid-auto-rows: minmax(100px, auto);
+		align-items: stretch;
+		justify-items: center;
+		gap: 1rem;
+	}
+`;

pages/styles/blog/slug.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	min-height: 75vh;
+	padding: 1rem 0rem;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	row-gap: 2rem;
+
+	@media (max-width: 768px) {
+		row-gap: 1rem;
+	}
+
+	.meta {
+		.back {
+			cursor: pointer;
+			text-align: left;
+			color: #3f9aee;
+			display: inline-flex;
+			align-items: center;
+		}
+
+		.image {
+			margin: 1rem 0rem;
+		}
+
+		h1,
+		p,
+		.tags-wrapper {
+			text-align: left;
+		}
+
+		h1 {
+			font-size: 2rem;
+		}
+
+		h2 {
+			font-size: 1.2rem;
+		}
+
+		.tags-wrapper {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex-wrap: wrap;
+		}
+	}
+
+	hr {
+		height: 0.1rem;
+		opacity: 0.3;
+		margin: 1rem auto 0rem auto;
+
+		@media (max-width: 768px) {
+			margin: 1rem auto 0rem auto;
+		}
+	}
+
+	.content {
+		h1 {
+			font-size: 1.5rem;
+		}
+
+		h2 {
+			font-size: 1.3rem;
+		}
+
+		h3 {
+			font-size: 1.1rem;
+		}
+
+		& > * {
+			margin: 0.5rem 0rem;
+		}
+
+		button {
+			margin: 1rem 0rem;
+		}
+
+		p * {
+			width: 100%;
+			height: auto;
+		}
+
+		ul,
+		ol {
+			margin-left: 1.5rem;
+		}
+	}
+`;

pages/styles/home.tsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	padding: 1rem 0rem;
+	display: grid;
+	grid-template-columns: auto;
+	row-gap: 1rem;
+
+	h1 {
+		display: inline;
+		font-size: 1.7rem;
+		margin-right: 1rem;
+	}
+
+	h4 {
+		font-size: 1.3rem;
+		grid-column: 1 / -1;
+		align-self: center;
+		justify-self: center;
+	}
+
+	.blue {
+		color: ${({ theme }) => theme.colors.blue};
+
+		@media (max-width: 768px) {
+			margin-top: 0.5rem;
+		}
+	}
+
+	.portfolio,
+	.blog {
+		margin: 1rem 0rem;
+	}
+
+	.portfolio {
+		margin-bottom: 3rem;
+	}
+
+	.projects-wrapper,
+	.articles-wrapper {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		grid-auto-rows: minmax(100px, auto);
+		align-items: stretch;
+		justify-items: center;
+		gap: 1rem;
+	}
+`;

pages/styles/portfolio/index.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	min-height: 75vh;
+	padding: 1rem 0rem;
+
+	.back {
+		cursor: pointer;
+		text-align: left;
+		color: #3f9aee;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	h1 {
+		font-size: 1.7rem;
+		margin-bottom: 1rem;
+	}
+
+	h4 {
+		font-size: 1.3rem;
+		grid-column: 1 / -1;
+		align-self: center;
+		justify-self: center;
+	}
+
+	.projects-wrapper {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		grid-auto-rows: minmax(100px, auto);
+		align-items: stretch;
+		justify-items: center;
+		gap: 1rem;
+	}
+`;

pages/styles/portfolio/slug.tsx

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	min-height: 75vh;
+	padding: 1rem 0rem;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	row-gap: 2rem;
+
+	@media (max-width: 768px) {
+		row-gap: 1rem;
+	}
+
+	.meta {
+		.back {
+			cursor: pointer;
+			text-align: left;
+			color: #3f9aee;
+			display: inline-flex;
+			align-items: center;
+		}
+
+		.image {
+			margin: 1rem 0rem;
+		}
+
+		h1,
+		p {
+			text-align: left;
+		}
+
+		h1 {
+			font-size: 2rem;
+		}
+
+		h2 {
+			font-size: 1.2rem;
+		}
+	}
+
+	hr {
+		height: 0.1rem;
+		opacity: 0.3;
+		margin: 1rem auto 0rem auto;
+	}
+
+	.content {
+		h1 {
+			font-size: 1.5rem;
+		}
+
+		h2 {
+			font-size: 1.3rem;
+		}
+
+		h3 {
+			font-size: 1.1rem;
+		}
+
+		& > * {
+			margin: 0.5rem 0rem;
+		}
+
+		button {
+			margin: 1rem 0rem;
+		}
+
+		p * {
+			width: 100%;
+			height: auto;
+		}
+
+		ul,
+		ol {
+			margin-left: 1.5rem;
+		}
+	}
+`;