Fix remaining warnings and remove leave necessary social links

This commit is contained in:
Hazem Krimi
2023-03-19 00:39:52 +01:00
parent c97cb80ce8
commit d8c97a2df5
15 changed files with 29 additions and 32 deletions
+1 -1
View File
@@ -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>
+3 -7
View File
@@ -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>
+1 -1
View File
@@ -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>
);
+4 -2
View File
@@ -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>
);
};
+1
View File
@@ -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}
/>
+2
View File
@@ -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)}
/>
+1 -1
View File
@@ -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>
-10
View File
@@ -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 />
+7
View File
@@ -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'
+2 -2
View File
@@ -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>
+1 -1
View File
@@ -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>
+2 -2
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -2
View File
@@ -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: {
+2 -2
View File
@@ -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;