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