hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update project structure

Browse Source
This commit is contained in:
Hazem Krimi
2022-01-08 19:06:43 +01:00
parent 574f0b4d63
commit 79279e4706
20 changed files with 78 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Button/index.tsx
+2 -11
View File
@@ -1,5 +1,5 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../../components/DarkMode';
import { ThemeContext } from '../../styles/theme';
import { Props } from './types';
import { Btn } from './styles';
import Link from 'next/link';
@@ -12,18 +12,9 @@ const Button: FC<Props & { className?: string }> = ({
children,
className
}) => {
const { dark } = useContext(DarkModeContext);
return (
<Link href={href} passHref>
<Btn
as='a'
target={target}
variant={variant}
dark={dark}
onClick={onClick}
className={className}
>
<Btn as='a' target={target} variant={variant} onClick={onClick} className={className}>
{children}
</Btn>
</Link>
components/Button/types.ts
-1
View File
@@ -3,5 +3,4 @@ export type Props = {
href: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
dark?: boolean;
};
components/Card/index.tsx
+2 -5
View File
@@ -1,5 +1,4 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../../components/DarkMode';
import { FC } from 'react';
import { StyledCard } from './styles';
import Image from 'next/image';
import Link from 'next/link';
@@ -15,11 +14,9 @@ interface Props {
}
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}>
<StyledCard as='a' target={target} onClick={onClick} image={!!image}>
<div>
<h3>{title}</h3>
<p>{description}</p>
components/Card/styles.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import styled from 'styled-components';
export const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
export const StyledCard = styled.div<{ image: boolean }>`
cursor: pointer;
width: 100%;
display: grid;
components/Footer/index.tsx
+7 -7
View File
@@ -1,44 +1,44 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../../components/DarkMode';
import { ThemeContext } from '../../styles/theme';
import { StyledFooter } from './styles';
import IconButton from '../../components/IconButton';
const Footer: FC = () => {
const { dark } = useContext(DarkModeContext);
const { mode } = useContext(ThemeContext);
return (
<StyledFooter>
<div className='contact'>
<IconButton
icon={dark ? '/icons/light-github.svg' : '/icons/dark-github.svg'}
icon={mode === 'dark' ? '/icons/light-github.svg' : '/icons/dark-github.svg'}
width={16}
height={16}
href='https://github.com/hazemKrimi'
target='_blank'
/>
<IconButton
icon={dark ? '/icons/light-twitter.svg' : '/icons/dark-twitter.svg'}
icon={mode === 'dark' ? '/icons/light-twitter.svg' : '/icons/dark-twitter.svg'}
width={16}
height={16}
href='https://twitter.com/HazemKrimi'
target='_blank'
/>
<IconButton
icon={dark ? '/icons/light-linkedin.svg' : '/icons/dark-linkedin.svg'}
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={dark ? '/icons/light-codepen.svg' : '/icons/dark-codepen.svg'}
icon={mode === 'dark' ? '/icons/light-codepen.svg' : '/icons/dark-codepen.svg'}
width={16}
height={16}
href='https://codepen.io/hazemkrimi'
target='_blank'
/>
<IconButton
icon={dark ? '/icons/light-dribbble.svg' : '/icons/dark-dribbble.svg'}
icon={mode === 'dark' ? '/icons/light-dribbble.svg' : '/icons/dark-dribbble.svg'}
width={16}
height={16}
href='https://dribbble.com/HazemKrimi'
components/GlobalStyles.tsx
+1 -12
View File
@@ -1,11 +1,6 @@
import { FC, useContext } from 'react';
import { createGlobalStyle } from 'styled-components';
import { DarkModeContext } from '../components/DarkMode';
interface Props {
dark: boolean;
}
const Global = createGlobalStyle<Props>`
const GlobalStyles = createGlobalStyle`
* {
margin: 0;
padding: 0;
@@ -71,10 +66,4 @@ const Global = createGlobalStyle<Props>`
}
`;
const GlobalStyles: FC = () => {
const { dark } = useContext(DarkModeContext);
return <Global dark={dark} />;
};
export default GlobalStyles;
components/Hero/index.tsx
+3 -3
View File
@@ -1,10 +1,10 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../../components/DarkMode';
import { ThemeContext } from '../../styles/theme';
import { Wrapper } from './styles';
import Image from 'next/image';
const Hero: FC = () => {
const { dark } = useContext(DarkModeContext);
const { mode } = useContext(ThemeContext);
return (
<Wrapper>
@@ -16,7 +16,7 @@ const Hero: FC = () => {
</div>
<div className='illustration'>
<Image
src={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
src={mode === 'dark' ? '/dark-illustration.svg' : '/light-illustration.svg'}
width='100%'
height='100%'
layout='responsive'
components/Input.tsx
+3 -8
View File
@@ -1,5 +1,4 @@
import React, { FC, useContext } from 'react';
import { DarkModeContext } from '../components/DarkMode';
import React, { FC } from 'react';
import styled from 'styled-components';
interface Props {
@@ -12,14 +11,14 @@ interface Props {
onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
}
const SmallField = styled.input<{ dark: boolean }>`
const SmallField = styled.input`
border: none;
padding: 1rem;
background: var(--secondary-background);
color: var(--text);
`;
const BigField = styled.textarea<{ dark: boolean }>`
const BigField = styled.textarea`
resize: none;
border: none;
padding: 1rem;
@@ -37,11 +36,8 @@ const Input: FC<Props & { className?: string }> = ({
className,
onChange
}) => {
const { dark } = useContext(DarkModeContext);
return variant === 'small' ? (
<SmallField
dark={dark}
type={type}
name={name}
value={value}
@@ -52,7 +48,6 @@ const Input: FC<Props & { className?: string }> = ({
/>
) : (
<BigField
dark={dark}
name={name}
value={value}
required={required}
components/MDXButton/index.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../../components/DarkMode';
import { ThemeContext } from '../../styles/theme';
import { Props } from './types';
import { Btn } from './styles';
import Link from 'next/link';
@@ -13,7 +13,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
disabled,
className
}) => {
const { dark } = useContext(DarkModeContext);
const { mode } = useContext(ThemeContext);
return link ? (
<Link href={link} passHref>
@@ -22,7 +22,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
target={target}
variant={variant}
type={type}
dark={dark}
mode={mode}
disabled={disabled}
className={className}
>
@@ -30,7 +30,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
</Btn>
</Link>
) : (
<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
<Btn variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
{children}
</Btn>
);
components/MDXButton/styles.tsx
+5 -4
View File
@@ -7,10 +7,11 @@ export const Btn = styled.button<Props>`
['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
/* TODO: fix theme blue color problem */
background: ${({ variant, theme }) => (variant === 'action' ? '#1573CA' : 'none')};
color: ${({ variant, dark }) => (variant === 'action' ? 'white' : dark ? 'white' : 'black')};
border: ${({ variant, dark }) =>
variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
color: ${({ variant, mode }) =>
variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
border: ${({ variant, mode }) =>
variant === 'outline' ? `2px solid ${mode === 'dark' ? 'white' : 'black'}` : 'none'};
font-weight: bold;
font-size: ${({ variant }) =>
['action', 'outline'].includes(variant as string) ? '1.05rem' : 'inherit'};
components/MDXButton/types.ts
+1 -1
View File
@@ -3,6 +3,6 @@ export type Props = {
type?: 'button' | 'submit';
link?: string;
target?: HTMLAnchorElement['target'];
dark?: boolean;
mode?: string;
disabled?: boolean;
};
components/MobileNav/index.tsx
+5 -5
View File
@@ -1,12 +1,12 @@
import { FC, useContext, useRef, useEffect } from 'react';
import { DarkModeContext } from '../DarkMode';
import { ThemeContext } from '../../styles/theme';
import { Props } from './types';
import { Bar } from './styles';
import IconButton from '../IconButton';
import Button from '../Button';
const MobileNav: FC<Props> = ({ open, close }) => {
const { dark, toggle } = useContext(DarkModeContext);
const { mode, toggle } = useContext(ThemeContext);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
@@ -29,16 +29,16 @@ const MobileNav: FC<Props> = ({ open, close }) => {
});
return (
<Bar dark={dark} open={open} ref={ref}>
<Bar open={open} ref={ref}>
<div className='close'>
<IconButton
icon={dark ? '/icons/dark-close.svg' : '/icons/light-close.svg'}
icon={mode === 'dark' ? '/icons/dark-close.svg' : '/icons/light-close.svg'}
onClick={close}
/>
</div>
<div className='mobile-button-wrapper'>
<Button href='#' onClick={() => toggle()}>
{dark ? 'Light Mode' : 'Dark Mode'}
{mode === 'dark' ? 'Light Mode' : 'Dark Mode'}
</Button>
</div>
<div className='mobile-button-wrapper'>
components/MobileNav/types.ts
-1
View File
@@ -4,6 +4,5 @@ export type Props = {
};
export type StyledProps = {
dark: boolean;
open: boolean;
};
components/Nav/index.tsx
+8 -5
View File
@@ -1,5 +1,5 @@
import { FC, useContext, useState } from 'react';
import { DarkModeContext } from '../DarkMode';
import { ThemeContext } from '../../styles/theme';
import { Bar } from './styles';
import Link from 'next/link';
import Image from 'next/image';
@@ -9,7 +9,7 @@ import MobileNav from '../MobileNav';
const Nav: FC = () => {
const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
const { dark, toggle } = useContext(DarkModeContext);
const { mode, toggle } = useContext(ThemeContext);
return (
<Bar>
@@ -17,7 +17,7 @@ const Nav: FC = () => {
<a className='logo'>
<Image
className='logo-image'
src={dark ? '/light-logo.svg' : '/dark-logo.svg'}
src={mode === 'dark' ? '/light-logo.svg' : '/dark-logo.svg'}
alt='Logo Image'
width={48}
height={48}
@@ -26,7 +26,10 @@ const Nav: FC = () => {
</a>
</Link>
<div className='buttons'>
<IconButton icon={dark ? '/icons/sun.svg' : '/icons/moon.svg'} onClick={toggle} />
<IconButton
icon={mode === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg'}
onClick={toggle}
/>
<Button href='/about'>About</Button>
<Button href='/portfolio'>Portfolio</Button>
<Button href='/blog'>Blog</Button>
@@ -39,7 +42,7 @@ const Nav: FC = () => {
Resume
</Button>
<IconButton
icon={dark ? '/icons/light-menu.svg' : '/icons/dark-menu.svg'}
icon={mode === 'dark' ? '/icons/light-menu.svg' : '/icons/dark-menu.svg'}
onClick={() => setMobileNavOpen(true)}
/>
</div>
pages/_app.tsx
+6 -6
View File
@@ -5,10 +5,10 @@ import Head from 'next/head';
import { useRouter } from 'next/router';
import Nav from '../components/Nav';
import DarkMode from '../components/DarkMode';
import Theme from '../styles/theme';
import Container from '../components/Container';
import GlobalStyles from '../components/GlobalStyles';
import Theme from '../components/Theme';
import SharedStyles from '../styles/shared';
import Footer from '../components/Footer';
import NProgress from 'nprogress';
@@ -42,16 +42,16 @@ const App = ({ Component, pageProps }: AppProps) => {
rel='stylesheet'
/>
</Head>
<DarkMode>
<Theme>
<Theme>
<SharedStyles>
<GlobalStyles />
<Container>
<Nav />
<Component {...pageProps} />
<Footer />
</Container>
</Theme>
</DarkMode>
</SharedStyles>
</Theme>
</>
);
};
pages/_document.tsx
+9 -9
View File
@@ -48,8 +48,8 @@ class Doc extends Document {
<script
dangerouslySetInnerHTML={{
__html: `
function getInitialTheme() {
const persistedColorPreference = window.localStorage.getItem('theme');
function getInitialThemeMode() {
const persistedColorPreference = window.localStorage.getItem('mode');
const hasPersistedPreference = typeof persistedColorPreference === 'string';
if (hasPersistedPreference) {
@@ -67,29 +67,29 @@ class Doc extends Document {
}
(() => {
const theme = getInitialTheme();
const mode = getInitialThemeMode();
const root = document.documentElement;
const lightFavicon = document.querySelector('link#light-favicon');
const darkFavicon = document.querySelector('link#dark-favicon');
root.style.setProperty('--theme', theme);
root.style.setProperty('--mode', mode);
root.style.setProperty(
'--background',
theme === 'light' ? '#F9F9F9' : '#262626'
mode === 'light' ? '#F9F9F9' : '#262626'
);
root.style.setProperty(
'--secondary-background',
theme === 'light' ? 'white' : '#2F2F2F'
mode === 'light' ? 'white' : '#2F2F2F'
);
root.style.setProperty(
'--text',
theme === 'light' ? 'black' : 'white'
mode === 'light' ? 'black' : 'white'
);
root.style.setProperty(
'--text-inverted',
theme === 'light' ? 'white' : 'black'
mode === 'light' ? 'white' : 'black'
);
document.head.append(theme === 'light' ? darkFavicon : lightFavicon);
document.head.append(mode === 'light' ? darkFavicon : lightFavicon);
})();
`
}}
pages/about.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import React, { FC, useContext, useState } from 'react';
import { DarkModeContext } from '../components/DarkMode';
import { ThemeContext } from '../styles/theme';
import { useForm, ValidationError } from '@formspree/react';
import Head from 'next/head';
import { Wrapper } from '../styles/about';
@@ -8,7 +8,7 @@ import Input from '../components/Input';
import MDXButton from '../components/MDXButton';
const About: FC = () => {
const { dark } = useContext(DarkModeContext);
const { mode } = useContext(ThemeContext);
const [form, setForm] = useState<{ name: string; email: string; message: string }>({
name: '',
email: '',
@@ -53,7 +53,7 @@ const About: FC = () => {
/>
<title>About | Hazem Krimi</title>
</Head>
<Wrapper dark={dark}>
<Wrapper>
<div className='content'>
<div>
<h1>About Me</h1>
styles/about.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import styled from 'styled-components';
export const Wrapper = styled.div<{ dark: boolean }>`
export const Wrapper = styled.div`
padding: 1rem 0rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
components/Theme.tsx → styles/shared.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { FC } from 'react';
import { ThemeProvider, DefaultTheme } from 'styled-components';
const Theme: FC = ({ children }) => {
const Shared: FC = ({ children }) => {
const theme: DefaultTheme = {
colors: {
dark: {
@@ -19,4 +19,4 @@ const Theme: FC = ({ children }) => {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};
export default Theme;
export default Shared;
components/DarkMode.tsx → styles/theme.tsx
+15 -15
View File
@@ -1,39 +1,39 @@
import { FC, useReducer, useEffect, createContext } from 'react';
export const DarkModeContext = createContext<{ dark: boolean; toggle: () => void }>({
dark: false,
export const ThemeContext = createContext<{ mode: string; toggle: () => void }>({
mode: 'light',
toggle: () => {}
});
const reducer = (state: boolean, action: { type: string }) => {
const reducer = (state: string, action: { type: string }) => {
switch (action.type) {
case 'TOGGLE':
return !state;
return state === 'light' ? 'dark' : 'light';
case 'DARK':
return true;
return 'dark';
case 'LIGHT':
return false;
return 'light';
default:
return state;
}
};
const DarkMode: FC = ({ children }) => {
const [dark, dispatch] = useReducer(reducer, false);
const Theme: FC = ({ children }) => {
const [mode, dispatch] = useReducer(reducer, 'light');
const toggle = () => {
const root = window.document.documentElement;
const lightFavicon = document.querySelector('link#light-favicon')!;
const darkFavicon = document.querySelector('link#dark-favicon')!;
if (dark) {
window.localStorage.setItem('theme', 'light');
if (mode === 'dark') {
window.localStorage.setItem('mode', 'light');
root.style.setProperty('--background', '#F9F9F9');
root.style.setProperty('--secondary-background', 'white');
root.style.setProperty('--text', 'black');
root.style.setProperty('--text-inverted', 'white');
document.head.append(darkFavicon);
} else {
window.localStorage.setItem('theme', 'dark');
window.localStorage.setItem('mode', 'dark');
root.style.setProperty('--background', '#262626');
root.style.setProperty('--secondary-background', '#2F2F2F');
root.style.setProperty('--text', 'white');
@@ -46,12 +46,12 @@ const DarkMode: FC = ({ children }) => {
useEffect(() => {
const root = window.document.documentElement;
const initialTheme = root.style.getPropertyValue('--theme');
const initialThemeMode = root.style.getPropertyValue('--mode');
dispatch({ type: initialTheme === 'dark' ? 'DARK' : 'LIGHT' });
dispatch({ type: initialThemeMode === 'dark' ? 'DARK' : 'LIGHT' });
}, []);
return <DarkModeContext.Provider value={{ dark, toggle }}>{children}</DarkModeContext.Provider>;
return <ThemeContext.Provider value={{ mode, toggle }}>{children}</ThemeContext.Provider>;
};
export default DarkMode;
export default Theme;