From d8c97a2df52d6a9342da429c43325eb7cb2e7271 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 19 Mar 2023 00:39:52 +0100
Subject: [PATCH] Fix remaining warnings and remove leave necessary social
 links

---
 components/Card/index.tsx      |  2 +-
 components/Footer/index.tsx    | 10 +++-------
 components/Hero/index.tsx      |  2 +-
 components/IconButton.tsx      |  6 ++++--
 components/MobileNav/index.tsx |  1 +
 components/Nav/index.tsx       |  2 ++
 pages/404.tsx                  |  2 +-
 pages/_app.tsx                 | 10 ----------
 pages/_document.tsx            |  7 +++++++
 pages/blog/[slug].tsx          |  4 ++--
 pages/blog/index.tsx           |  2 +-
 pages/portfolio/[slug].tsx     |  4 ++--
 pages/portfolio/index.tsx      |  2 +-
 styles/shared.tsx              |  3 +--
 styles/theme.tsx               |  4 ++--
 15 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/components/Card/index.tsx b/components/Card/index.tsx
index d0485ff..835e033 100644
--- a/components/Card/index.tsx
+++ b/components/Card/index.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
 	return (
-		<StyledCard href={href} onClick={onClick} image={!!image} target={target}>
+		<StyledCard href={href} onClick={onClick} image={Boolean(image)} target={target}>
 			<div className='card-content'>
 				<h3>{title}</h3>
 				<p>{description}</p>
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index 2ac41f8..fd6d59c 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -10,6 +10,7 @@ const Footer: FC = () => {
 		<StyledFooter>
 			<div className='contact'>
 				<IconButton
+					alt='GitHub'
 					icon={mode === 'dark' ? '/icons/light-github.svg' : '/icons/dark-github.svg'}
 					width={16}
 					height={16}
@@ -17,6 +18,7 @@ const Footer: FC = () => {
 					target='_blank'
 				/>
 				<IconButton
+					alt='Twitter'
 					icon={mode === 'dark' ? '/icons/light-twitter.svg' : '/icons/dark-twitter.svg'}
 					width={16}
 					height={16}
@@ -24,19 +26,13 @@ const Footer: FC = () => {
 					target='_blank'
 				/>
 				<IconButton
+					alt='LinkedIn'
 					icon={mode === 'dark' ? '/icons/light-linkedin.svg' : '/icons/dark-linkedin.svg'}
 					width={16}
 					height={16}
 					href='https://linkedin.com/in/hazemkrimi'
 					target='_blank'
 				/>
-				<IconButton
-					icon={mode === 'dark' ? '/icons/light-codepen.svg' : '/icons/dark-codepen.svg'}
-					width={16}
-					height={16}
-					href='https://codepen.io/hazemkrimi'
-					target='_blank'
-				/>
 			</div>
 			<p>Hazem Krimi &copy; {new Date().getFullYear()}</p>
 		</StyledFooter>
diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx
index a8cbe8d..3516ffe 100644
--- a/components/Hero/index.tsx
+++ b/components/Hero/index.tsx
@@ -11,7 +11,7 @@ const Hero: FC = () => (
 			<h2 className='blue'>Life Long Learner</h2>
 		</div>
 		<div className='photo'>
-			<Image src='/photo.jpg' width={515} height={535} objectFit='cover' />
+			<Image alt='Hazem Krimi' src='/photo.jpg' width={515} height={535} />
 		</div>
 	</Wrapper>
 );
diff --git a/components/IconButton.tsx b/components/IconButton.tsx
index 0c60646..ab24cc4 100644
--- a/components/IconButton.tsx
+++ b/components/IconButton.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 interface Props {
+	alt: string;
 	icon: string;
 	width?: number;
 	height?: number;
@@ -21,6 +22,7 @@ const Btn = styled(Link)`
 `;
 
 const IconButton: FC<Props & { className?: string }> = ({
+	alt,
 	icon,
 	href,
 	target,
@@ -31,11 +33,11 @@ const IconButton: FC<Props & { className?: string }> = ({
 }) => {
 	return !href ? (
 		<Btn href='#' onClick={onClick} className={className}>
-			<Image alt='' src={icon} width={width} height={height} />
+			<Image alt={alt} src={icon} width={width} height={height} />
 		</Btn>
 	) : (
 		<Btn href={href} target={target} onClick={onClick} className={className}>
-			<Image alt='' src={icon} width={width} height={height} />
+			<Image alt={alt} src={icon} width={width} height={height} />
 		</Btn>
 	);
 };
diff --git a/components/MobileNav/index.tsx b/components/MobileNav/index.tsx
index b34e920..43df7f5 100644
--- a/components/MobileNav/index.tsx
+++ b/components/MobileNav/index.tsx
@@ -32,6 +32,7 @@ const MobileNav: FC<Props> = ({ open, close }) => {
 		<Bar open={open} ref={ref}>
 			<div className='close'>
 				<IconButton
+					alt='Theme toggler'
 					icon={mode === 'dark' ? '/icons/dark-close.svg' : '/icons/light-close.svg'}
 					onClick={close}
 				/>
diff --git a/components/Nav/index.tsx b/components/Nav/index.tsx
index e9798eb..52593ed 100644
--- a/components/Nav/index.tsx
+++ b/components/Nav/index.tsx
@@ -25,6 +25,7 @@ const Nav: FC = () => {
 			</Link>
 			<div className='buttons'>
 				<IconButton
+					alt='Theme toggler'
 					icon={mode === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg'}
 					onClick={toggle}
 				/>
@@ -40,6 +41,7 @@ const Nav: FC = () => {
 					Resume
 				</Button>
 				<IconButton
+					alt='Theme toggler'
 					icon={mode === 'dark' ? '/icons/light-menu.svg' : '/icons/dark-menu.svg'}
 					onClick={() => setMobileNavOpen(true)}
 				/>
diff --git a/pages/404.tsx b/pages/404.tsx
index 00d242f..89f7afe 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -32,7 +32,7 @@ const NotFound: FC = () => {
 			<Wrapper>
 				<h1>404: This page could not be found</h1>
 				<div className='back' onClick={() => router.push('/')}>
-					<IconButton icon='/icons/arrow-left.svg' />
+					<IconButton alt='Back' icon='/icons/arrow-left.svg' />
 					<span>Go Home</span>
 				</div>
 			</Wrapper>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 45a3ea0..7e54954 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import type { AppProps } from 'next/app';
-import Head from 'next/head';
 import Script from 'next/script';
 import { useRouter } from 'next/router';
 
@@ -53,15 +52,6 @@ const App = ({ Component, pageProps }: AppProps) => {
 					__html: initStyles()
 				}}
 			/>
-			<Head>
-				<link rel='shortcut icon' href='light-favicon.png' id='light-favicon'></link>
-				<link rel='shortcut icon' href='dark-favicon.png' id='dark-favicon'></link>
-				<link rel='preconnect' href='https://fonts.gstatic.com' />
-				<link
-					href='https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap'
-					rel='stylesheet'
-				/>
-			</Head>
 			<Theme>
 				<SharedStyles>
 					<GlobalStyles />
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 1c7ecad..2f038f5 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -35,6 +35,13 @@ class Doc extends Document {
 		return (
 			<Html>
 				<Head>
+					<link rel='shortcut icon' href='/light-favicon.png' id='light-favicon'></link>
+					<link rel='shortcut icon' href='/dark-favicon.png' id='dark-favicon'></link>
+					<link rel='preconnect' href='https://fonts.gstatic.com' />
+					<link
+						href='https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap'
+						rel='stylesheet'
+					/>
 					<script src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_KEY}`} />
 					<script
 						id='analytics-init'
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index 4242521..0f18b8f 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -62,12 +62,12 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 							: 'Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News'
 					}
 				/>
-				<title>{frontMatter?.title} | Hazem Krimi</title>
+				<title>{`${frontMatter?.title} | Hazem Krimi`}</title>
 			</Head>
 			<Wrapper>
 				<div className='meta'>
 					<div className='back' onClick={() => router.back()}>
-						<IconButton icon='/icons/arrow-left.svg' />
+						<IconButton alt='Back' icon='/icons/arrow-left.svg' />
 						<span>Back</span>
 					</div>
 					<h1>{frontMatter?.title}</h1>
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
index 50ec76b..82fce7e 100644
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -45,7 +45,7 @@ const Index: FC<Props> = ({ blogPosts }) => {
 			</Head>
 			<Wrapper>
 				<div className='back' onClick={() => router.back()}>
-					<IconButton icon='/icons/arrow-left.svg' />
+					<IconButton alt='Back' icon='/icons/arrow-left.svg' />
 					<span>Back</span>
 				</div>
 				<h1>Blog</h1>
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx
index 1e73b92..8dcb432 100644
--- a/pages/portfolio/[slug].tsx
+++ b/pages/portfolio/[slug].tsx
@@ -59,12 +59,12 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 							: 'Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News'
 					}
 				/>
-				<title>{frontMatter?.title} | Hazem Krimi</title>
+				<title>{`${frontMatter?.title} | Hazem Krimi`}</title>
 			</Head>
 			<Wrapper>
 				<div className='meta'>
 					<div className='back' onClick={() => router.back()}>
-						<IconButton icon='/icons/arrow-left.svg' />
+						<IconButton alt='Back' icon='/icons/arrow-left.svg' />
 						<span>Back</span>
 					</div>
 					<h1>{frontMatter?.title}</h1>
diff --git a/pages/portfolio/index.tsx b/pages/portfolio/index.tsx
index e3306fb..4f37de4 100644
--- a/pages/portfolio/index.tsx
+++ b/pages/portfolio/index.tsx
@@ -44,7 +44,7 @@ const Index: FC<Props> = ({ portfolioProjects }) => {
 			</Head>
 			<Wrapper>
 				<div className='back' onClick={() => router.back()}>
-					<IconButton icon='/icons/arrow-left.svg' />
+					<IconButton alt='Back' icon='/icons/arrow-left.svg' />
 					<span>Back</span>
 				</div>
 				<h1>Portfolio</h1>
diff --git a/styles/shared.tsx b/styles/shared.tsx
index 16f7726..a30322c 100644
--- a/styles/shared.tsx
+++ b/styles/shared.tsx
@@ -1,7 +1,6 @@
-import { FC } from 'react';
 import { ThemeProvider, DefaultTheme } from 'styled-components';
 
-const Shared: FC = ({ children }) => {
+const Shared = ({ children }: { children: React.ReactNode }) => {
 	const theme: DefaultTheme = {
 		colors: {
 			dark: {
diff --git a/styles/theme.tsx b/styles/theme.tsx
index 2c55f3b..f271bf7 100644
--- a/styles/theme.tsx
+++ b/styles/theme.tsx
@@ -1,4 +1,4 @@
-import { FC, useReducer, useEffect, createContext } from 'react';
+import { useReducer, useEffect, createContext } from 'react';
 
 export const ThemeContext = createContext<{ mode: string; toggle: () => void }>({
 	mode: 'light',
@@ -18,7 +18,7 @@ const reducer = (state: string, action: { type: string }) => {
 	}
 };
 
-const Theme: FC = ({ children }) => {
+const Theme = ({ children }: { children: React.ReactNode }) => {
 	const [mode, dispatch] = useReducer(reducer, 'light');
 	const toggle = () => {
 		const root = window.document.documentElement;