Fix remaining warnings and remove leave necessary social links

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>

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>

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

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

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

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)}
 				/>

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>

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 />

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'

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>

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>

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>

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>

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: {

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;