diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 33140ac..0000000 --- a/.babelrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [ - [ - "styled-components", - { - "ssr": true - } - ] - ] -} diff --git a/.env.example b/.env.example deleted file mode 100644 index 65a3cf3..0000000 --- a/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -NEXT_PUBLIC_FORMSPREE_KEY=FORMSPREE_KEY -NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY=GOOGLE_ANALYTICS_KEY \ No newline at end of file diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 1437c53..0000000 --- a/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 22c8bbc..0000000 --- a/.prettierignore +++ /dev/null @@ -1,32 +0,0 @@ -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/_projects/astrobuild.mdx b/_projects/astrobuild.mdx deleted file mode 100644 index a2911b2..0000000 --- a/_projects/astrobuild.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'Astrobuild' -description: 'Prototype of a collaboration tool between stakeholders for building software projects' -date: '2023-06-11' -demo: 'https://astrobuild.vercel.app' -code: 'https://github.com/hazemKrimi/astrobuild' -tags: ['react', 'typescript', 'graphql', 'styled-components', 'apollographql', 'vite', 'react-flow'] ---- - -# Introduction - -This was my final year of studies projects where my collegue and I worked on a prototype for a project building solution for the agency we had an internship in called [Astrolab](https://astrolab-agency.com). -As there were lockdowns in Tunisia in 2020/2021 because of covid software agencies and clients could not have in person meetings to discuss a client's software project. -So the idea of Astrobuild is to reduce meetings and make the client participate with other stakeholders in the process of creating a software project by tracking and communicating with their associated product owner. - -# Features - -### Client - - Account management - - Project creation from choosing the templates, features and deliverables (Specification, design, MVP or full build) - - Project tracking - - Chat with associated product owner for tracking and support - - Payment (WIP) - -### Product Owner - - Account management - - Management of templates - - Review of projects and transferring deliverables - - Chat with clients on their projects - -### Developer - - Account management - - Features, categories and wireframes management - -### Admin - - Identity and access management (WIP) - -# Technologies Used -The frontend project is a [React](https://react.dev) application with [TypeScript](https://www.typescriptlang.org) which consumes a set of [GraphQL](https://graphql.org) APIs using [Apollo GraphQL](https://www.apollographql.com) and a some REST APIs. - -A small components library with a custom theme was made for this project using [Styled Components](https://styled-components.com) which can be viewed at the components folder. - -The prototyping feature was done using [React Flow](https://reactflow.dev) which is a library for creating and interacting with diagrams. - -To view the full architecture of the application go [here](https://github.com/MedAmineFouzai/astrobuild-api/blob/main/README.md). - -# Screenshots - -### Project page for the client -![Project](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/project.png?raw=true) - -### Template page for the product owner -![Template](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/template.png?raw=true) - -### Prototype page for the developer -![Prototype](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/prototype.png?raw=true) - -### Support page for the product owner -![Support](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/support.png?raw=true) - -### User editing page for the admin -![Admin](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/admin.png?raw=true) - -# Credits - -- Mohamed Amine Fouzai: [GitHub](https://github.com/MedAmineFouzai), [LinkedIn](https://www.linkedin.com/in/amine-fouzai) \ No newline at end of file diff --git a/_projects/react-weather-app.mdx b/_projects/react-weather-app.mdx deleted file mode 100644 index 3ee0cb7..0000000 --- a/_projects/react-weather-app.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: 'React Weather App' -description: 'Weather app made with React, TypeScript and OpenWeatherMap API' -date: '2021-09-19' -demo: 'https://hazemkrimi.github.io/react-weather-app' -code: 'https://github.com/hazemKrimi/react-weather-app' -tags: ['react', 'typescript', 'openweathermap'] ---- - -# About the project - -This is a project that I made as a step in the interview process for my final year internship. - -# Technologies - -- React -- TypeScript -- Styled Components -- OpenWeatherMap API - -# Screenshots - -![Desktop](https://res.cloudinary.com/dun9hhyz1/image/upload/v1643548378/personal-website/portfolio/react-weather-app/screenshot_ueu2a4.png) diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..00e77bd --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,6 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +draft: true +--- + diff --git a/components/Button/index.tsx b/components/Button/index.tsx deleted file mode 100644 index 7c0ff53..0000000 --- a/components/Button/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Props } from './types'; -import { StyledButton } from './styles'; - -const Button = ({ - variant = 'text', - href, - target, - onClick, - children, - className, -}: Props) => ( - - {children} - -); - -export default Button; diff --git a/components/Button/styles.tsx b/components/Button/styles.tsx deleted file mode 100644 index 640f9da..0000000 --- a/components/Button/styles.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import styled from 'styled-components'; -import Link from 'next/link'; -import { Props } from './types'; - -export const StyledButton = styled(Link)` - position: relative; - display: inline; - cursor: pointer; - background: none; - color: var(--text); - border: ${({ variant }) => - variant === 'outline' ? '2px solid var(--text)' : '2px solid transparent'}; - font-weight: bold; - text-transform: ${({ variant }) => - variant === 'outline' ? 'uppercase' : 'inherit'}; - padding: ${({ variant }) => (variant === 'outline' ? '.5rem 1rem' : '0rem')}; - text-align: left; - text-decoration: none; - transition: color 250ms ease-in-out, border 250ms ease-in-out; - z-index: 1; - - @media (max-width: 768px) { - padding: ${({ variant }) => - variant === 'outline' ? '.5rem .75rem' : '0rem'}; - } - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: -1; - background-color: ${({ variant }) => - variant === 'outline' ? 'var(--text)' : 'inherit'}; - transition: transform 250ms ease-in-out; - transform: scaleX(0); - transform-origin: left; - } - - &:hover { - color: ${({ variant }) => - variant === 'outline' ? 'var(--background)' : 'inherit'}; - border: 2px solid transparent; - } - - &:hover::before { - transform: scaleX(1); - } -`; diff --git a/components/Button/types.ts b/components/Button/types.ts deleted file mode 100644 index 30dc416..0000000 --- a/components/Button/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type Props = { - variant?: 'outline' | 'text'; - href: string; - target?: HTMLAnchorElement['target']; - onClick?: () => void; - children: React.ReactNode; - className?: string; -}; diff --git a/components/Card/index.tsx b/components/Card/index.tsx deleted file mode 100644 index bfeed71..0000000 --- a/components/Card/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import Image from 'next/image'; -import { StyledCard } from './styles'; -import { Props } from './types'; - -const Card = ({ - title, - description, - image, - tags, - href, - target, - onClick, -}: Props) => { - return ( - -
-

{title}

-

{description}

- {tags && ( -
- {tags.map((tag, index) => ( - #{tag}  - ))} -
- )} -
- {image && ( -
- {title} -
- )} - - ); -}; - -export default Card; diff --git a/components/Card/styles.tsx b/components/Card/styles.tsx deleted file mode 100644 index bed96bc..0000000 --- a/components/Card/styles.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import styled from 'styled-components'; -import Link from 'next/link'; - -export const StyledCard = styled(Link)<{ image?: boolean }>` - cursor: pointer; - width: 100%; - display: grid; - grid-template-columns: ${({ image }) => (image ? 'auto 9.375rem' : 'auto')}; - align-items: stretch; - transition: color 0ms ease-in-out; - text-decoration: none; - color: var(--text); - - @media (max-width: 320px) { - grid-template-columns: ${({ image }) => (image ? 'auto 7.813rem' : 'auto')}; - } - - @media (min-width: 1440px) { - grid-template-columns: ${({ image }) => - image ? 'auto 15.625rem' : 'auto'}; - } - - &:hover { - & > div { - background: ${({ theme }) => theme.colors.blue}; - - * { - color: ${({ theme }) => theme.colors.dark.text} !important; - } - } - - img { - filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')}; - } - } - - .card-content { - padding: 1rem 0rem; - background: var(--secondary-background); - display: grid; - row-gap: 0.5rem; - - @media (max-width: 768px) { - padding: 0.75rem 0rem; - } - } - - .card-image { - position: relative; - width: 100%; - } - - h3, - p, - .tags-wrapper { - padding: 0rem 1rem; - - @media (max-width: 768px) { - padding: 0rem 0.5rem; - } - } - - h3 { - font-size: 1.3rem; - } - - .tags-wrapper { - display: flex; - flex-direction: row; - align-content: center; - flex-wrap: wrap; - } - - span { - font-size: 0.7rem; - } -`; diff --git a/components/Card/types.ts b/components/Card/types.ts deleted file mode 100644 index 2b8e27e..0000000 --- a/components/Card/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface Props { - title: string; - description: string; - image?: string; - tags?: string[]; - href: string; - target?: HTMLAnchorElement['target']; - onClick?: () => void; -} diff --git a/components/CodeBlock/index.tsx b/components/CodeBlock/index.tsx deleted file mode 100644 index be5d7ed..0000000 --- a/components/CodeBlock/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import Highlight, { defaultProps, Language } from 'prism-react-renderer'; -import theme from 'prism-react-renderer/themes/vsDark'; -import { Props } from './types'; -import { Line, LineContent, LineNo, Pre } from './styles'; - -const CodeBlock = ({ children, className }: Props) => { - const language = className.replace(/language-/, '') as Language; - - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-          {tokens.map((line, i) => (
-            
-              {i + 1}
-              
-                {line.map((token, key) => (
-                  
-                ))}
-              
-            
-          ))}
-
- )} - - ); -}; - -export default CodeBlock; diff --git a/components/CodeBlock/styles.tsx b/components/CodeBlock/styles.tsx deleted file mode 100644 index 502a527..0000000 --- a/components/CodeBlock/styles.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'styled-components'; - -export const Pre = styled.pre` - text-align: left; - margin: 1em 0; - padding: 0.5em; - overflow: scroll; -`; - -export const Line = styled.div` - display: table-row; -`; - -export const LineNo = styled.span` - display: table-cell; - text-align: right; - padding-right: 1em; - user-select: none; - opacity: 0.5; -`; - -export const LineContent = styled.span` - display: table-cell; -`; diff --git a/components/CodeBlock/types.ts b/components/CodeBlock/types.ts deleted file mode 100644 index eff76be..0000000 --- a/components/CodeBlock/types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface Props { - className: string; - children: React.ReactNode; -} diff --git a/components/Container.tsx b/components/Container.tsx deleted file mode 100644 index 058450c..0000000 --- a/components/Container.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; - -const Container = styled.div` - width: 85%; - margin: auto; - - @media (max-width: 768px) { - width: 95%; - } -`; - -export default Container; diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx deleted file mode 100644 index 4462214..0000000 --- a/components/Footer/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useContext } from 'react'; -import { ThemeContext } from '../../styles/theme'; -import { StyledFooter } from './styles'; -import IconButton from '../IconButton'; - -const Footer = () => { - const { mode } = useContext(ThemeContext); - - return ( - -
- - - -
-

Hazem Krimi © {new Date().getFullYear()}

- - ); -}; - -export default Footer; diff --git a/components/Footer/styles.tsx b/components/Footer/styles.tsx deleted file mode 100644 index 735753c..0000000 --- a/components/Footer/styles.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import styled from 'styled-components'; - -export const StyledFooter = styled.footer` - position: absolute; - bottom: 0; - min-height: 100px; - width: 85%; - margin: auto; - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 2rem; - justify-content: flex-end; - align-content: center; - padding: 1rem 0rem; - - @media (max-width: 768px) { - width: 95%; - } - - .contact { - display: grid; - grid-template-columns: repeat(auto-fill, 16px); - column-gap: 1rem; - align-items: center; - justify-content: flex-start; - - * { - user-select: none; - } - - @media (max-width: 768px) { - column-gap: 0.5rem; - } - } - - p { - display: inline; - text-align: right; - font-weight: bold; - } -`; diff --git a/components/GlobalStyles.tsx b/components/GlobalStyles.tsx deleted file mode 100644 index dc0cb4d..0000000 --- a/components/GlobalStyles.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { createGlobalStyle } from 'styled-components'; - -const GlobalStyles = createGlobalStyle` - * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Source Code Pro', monospace; - font-size: 16px; - line-height: 1.5; - outline: none; - user-select: text; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - - @media(max-width: 768px) { - overflow-x: scroll; - } - - &::-webkit-scrollbar { - width: 0; - height: 0; - background: transparent; - } - - &::-webkit-scrollbar-thumb { - background: transparent; - } - - &::selection { - background: var(--text); - color: var(--background); - } - } - - html { - position: relative; - min-height: 100%; - background: var(--background) !important; - } - - * { - color: var(--text); - } - - ul, ol { - margin-inline-start: 1.9rem; - } - - body { - margin: 0 0 100px; - transition: color 250ms ease-in-out, background 250ms ease-in-out; - scroll-behavior: smooth; - - #nprogress .bar { - background: var(--text) !important; - } - - #nprogress .peg { - box-shadow: 0 0 10px var(--text), 0 0 5px var(--text) !important; - } - } - - body::-webkit-scrollbar { - width: 0.5rem !important; - } - - body::-webkit-scrollbar-thumb { - background-color: var(--text) !important; - } -`; - -export default GlobalStyles; diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx deleted file mode 100644 index ce2853f..0000000 --- a/components/Hero/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Wrapper } from './styles'; -import Image from 'next/image'; - -const Hero = () => ( - -
-

Hi, I am Hazem

-

I Like Building Software

-

Full Stack TypeScript Developer

-

Life Long Learner

-
-
- Hazem Krimi -
- -); - -export default Hero; diff --git a/components/Hero/styles.tsx b/components/Hero/styles.tsx deleted file mode 100644 index a4183ff..0000000 --- a/components/Hero/styles.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import styled from 'styled-components'; - -export const Wrapper = styled.div` - min-height: 45vh; - display: grid; - grid-template-columns: 1fr 32.188rem; - align-items: center; - height: auto; - text-align: left; - - @media (max-width: 1024px) { - min-height: 35vh; - grid-template-columns: 1fr; - - .photo { - display: none; - } - } - - h2 { - font-size: 1.5rem; - - @media (min-width: 1440px) { - font-size: 2rem; - } - - @media (min-width: 2560px) { - font-size: 3.5rem; - } - } - - .blue { - color: ${({ theme }) => theme.colors.blue}; - } -`; diff --git a/components/IconButton/index.tsx b/components/IconButton/index.tsx deleted file mode 100644 index 390d037..0000000 --- a/components/IconButton/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import Image from 'next/image'; -import { Props } from './types'; -import { StyledButton, StyledLink } from './styles'; - -const IconButton = ({ - alt, - icon, - href, - target, - onClick, - className, - width = 24, - height = 24, -}: Props) => - href ? ( - - {alt} - - ) : ( - - {alt} - - ); - -export default IconButton; diff --git a/components/IconButton/styles.tsx b/components/IconButton/styles.tsx deleted file mode 100644 index f75a111..0000000 --- a/components/IconButton/styles.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import styled, { css } from 'styled-components'; -import Link from 'next/link'; - -const sharedStyles = css` - cursor: pointer; - background: none; - border: none; - display: inline-flex; - align-items: center; -`; - -export const StyledLink = styled(Link)` - ${sharedStyles} -`; - -export const StyledButton = styled.button` - ${sharedStyles} -`; diff --git a/components/IconButton/types.ts b/components/IconButton/types.ts deleted file mode 100644 index 9dc87cd..0000000 --- a/components/IconButton/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -export interface Props { - alt: string; - icon: string; - width?: number; - height?: number; - href?: string; - target?: HTMLAnchorElement['target']; - onClick?: () => void; - className?: string; -} diff --git a/components/Input/index.tsx b/components/Input/index.tsx deleted file mode 100644 index c1b2287..0000000 --- a/components/Input/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { BigField, SmallField } from './styles'; -import { Props } from './types'; - -const Input = ({ - type = 'text', - variant = 'small', - name, - value, - required, - placeholder, - className, - onChange, -}: Props) => { - return variant === 'small' ? ( - - ) : ( - - ); -}; - -export default Input; diff --git a/components/Input/styles.tsx b/components/Input/styles.tsx deleted file mode 100644 index 08ec3e8..0000000 --- a/components/Input/styles.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components'; - -export const SmallField = styled.input` - border: none; - padding: 1rem; - background: var(--secondary-background); - color: var(--text); -`; - -export const BigField = styled.textarea` - resize: none; - border: none; - padding: 1rem; - background: var(--secondary-background); - color: var(--text); -`; diff --git a/components/Input/types.ts b/components/Input/types.ts deleted file mode 100644 index 51fab22..0000000 --- a/components/Input/types.ts +++ /dev/null @@ -1,12 +0,0 @@ -export interface Props { - placeholder?: string; - type: 'text' | 'email'; - variant: 'small' | 'big'; - name: string; - value: string; - required?: boolean; - onChange?: ( - event: React.ChangeEvent - ) => void; - className?: string; -} diff --git a/components/MDXButton/index.tsx b/components/MDXButton/index.tsx deleted file mode 100644 index afaaffb..0000000 --- a/components/MDXButton/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { useContext } from 'react'; -import { ThemeContext } from '../../styles/theme'; -import { Props } from './types'; -import { StyledLink, StyledButton } from './styles'; - -const MDXButton = ({ - variant = 'text', - type = 'button', - link, - target, - children, - disabled, - className, -}: Props) => { - const { mode } = useContext(ThemeContext); - - return link ? ( - - {children} - - ) : ( - - {children} - - ); -}; - -export default MDXButton; diff --git a/components/MDXButton/styles.tsx b/components/MDXButton/styles.tsx deleted file mode 100644 index 6be80bf..0000000 --- a/components/MDXButton/styles.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import Link from 'next/link'; -import styled, { css } from 'styled-components'; -import { Props } from './types'; - -export const sharedStyles = css` - cursor: pointer; - display: ${({ variant }) => - ['action', 'outline'].includes(variant as string) ? 'block' : 'inline'}; - width: ${({ variant }) => - ['action', 'outline'].includes(variant as string) ? '100%' : 'auto'}; - 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'}; - text-transform: ${({ variant }) => - ['action', 'outline'].includes(variant as string) - ? 'uppercase' - : 'inherit'}; - padding: ${({ variant }) => - ['action', 'outline'].includes(variant as string) ? '.5rem 1rem' : '0rem'}; - text-align: ${({ variant }) => - ['action', 'outline'].includes(variant as string) ? 'center' : 'left'}; - text-decoration: none; - transition: color 250ms ease-in-out; - - ${({ disabled }) => - disabled && - ` - background: gray; - cursor: default; - `} - - @media (max-width: 768px) { - padding: ${({ variant }) => - ['action', 'outline'].includes(variant as string) - ? '.5rem .75rem' - : '0rem'}; - } -`; - -export const StyledLink = styled(Link)` - ${sharedStyles} -`; - -export const StyledButton = styled.button>` - ${sharedStyles} -`; diff --git a/components/MDXButton/types.ts b/components/MDXButton/types.ts deleted file mode 100644 index 5bc3947..0000000 --- a/components/MDXButton/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -export type Props = { - variant?: 'outline' | 'text' | 'action'; - type?: 'button' | 'submit'; - link?: string; - target?: HTMLAnchorElement['target']; - mode?: string; - disabled?: boolean; - className?: string; - children: React.ReactNode; -}; diff --git a/components/MobileNav/index.tsx b/components/MobileNav/index.tsx deleted file mode 100644 index 6b7df81..0000000 --- a/components/MobileNav/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { useContext, useRef, useEffect } from 'react'; -import { ThemeContext } from '../../styles/theme'; -import { Props } from './types'; -import { Bar } from './styles'; -import IconButton from '../IconButton'; -import Button from '../Button'; - -const MobileNav = ({ open, close }: Props) => { - const { mode, toggle } = useContext(ThemeContext); - const ref = useRef(null); - - useEffect(() => { - document.addEventListener('mousedown', (event: MouseEvent) => { - if (ref.current && ref.current.contains(event.target as Node)) { - document.addEventListener('mouseup', (event) => { - if (ref.current && !ref.current.contains(event.target as Node)) - return; - }); - } else { - document.addEventListener('mouseup', (event) => { - if (ref.current && !ref.current.contains(event.target as Node)) - close(); - }); - } - }); - - return () => { - document.removeEventListener('mousedown', () => {}); - document.removeEventListener('mouseup', () => {}); - }; - }); - - return ( - -
- -
-
- -
-
- -
-
- -
-
- -
- - ); -}; - -export default MobileNav; diff --git a/components/MobileNav/styles.tsx b/components/MobileNav/styles.tsx deleted file mode 100644 index 380ca0f..0000000 --- a/components/MobileNav/styles.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components'; -import { StyledProps } from './types'; - -export const Bar = styled.nav` - position: fixed; - z-index: 2; - top: 0; - right: 0; - transform-origin: right; - transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')}; - width: 80%; - height: 100vh; - background: var(--text); - transition: transform 250ms ease-in-out; - display: grid; - grid-template-rows: 30% repeat(4, 50px); - padding: 1rem 1rem 5rem 1rem; - - @media (orientation: landscape) { - grid-template-rows: auto; - } - - .close { - justify-self: flex-end; - align-self: flex-start; - margin-top: 0.5rem; - } - - .mobile-button-wrapper { - display: flex; - margin: 0rem 1rem; - - a { - color: var(--text-inverted) !important; - } - } -`; diff --git a/components/MobileNav/types.ts b/components/MobileNav/types.ts deleted file mode 100644 index d677fb7..0000000 --- a/components/MobileNav/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type Props = { - open: boolean; - close: () => void; -}; - -export type StyledProps = { - open: boolean; -}; diff --git a/components/Nav/index.tsx b/components/Nav/index.tsx deleted file mode 100644 index d20dfd2..0000000 --- a/components/Nav/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { useContext, useState } from 'react'; -import { ThemeContext } from '../../styles/theme'; -import { Bar } from './styles'; -import Link from 'next/link'; -import Image from 'next/image'; -import Button from '../Button'; -import IconButton from '../IconButton'; -import MobileNav from '../MobileNav'; - -const Nav = () => { - const [mobileNavOpen, setMobileNavOpen] = useState(false); - const { mode, toggle } = useContext(ThemeContext); - - return ( - - - Logo Image -

Hazem Krimi

- -
- - - - - -
-
- - setMobileNavOpen(true)} - /> -
- setMobileNavOpen(false)} /> - - ); -}; - -export default Nav; diff --git a/components/Nav/styles.tsx b/components/Nav/styles.tsx deleted file mode 100644 index 16efd84..0000000 --- a/components/Nav/styles.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import styled from 'styled-components'; - -export const Bar = styled.nav` - width: 100%; - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - padding: 1rem 0rem; - - * { - user-select: none; - } - - h1 { - font-size: 1.7rem; - - @media (max-width: 768px) { - font-size: 1rem; - } - } - - div, - a.logo { - display: grid; - align-items: center; - column-gap: 1rem; - - @media (max-width: 768px) { - column-gap: 0.5rem; - } - } - - a.logo { - text-decoration: none; - color: var(--text); - cursor: pointer; - grid-template-columns: repeat(2, auto); - justify-content: flex-start; - } - - .buttons { - grid-template-columns: repeat(5, auto); - justify-content: flex-end; - - @media (max-width: 768px) { - display: none; - } - } - - .mobile-buttons { - display: none; - - @media (max-width: 768px) { - display: grid; - grid-template-columns: repeat(2, auto); - justify-content: flex-end; - } - } -`; diff --git a/hugo.toml b/hugo.toml new file mode 100644 index 0000000..ab90034 --- /dev/null +++ b/hugo.toml @@ -0,0 +1,3 @@ +baseURL = 'http://hazemkrimi.tech/' +languageCode = 'en-us' +title = 'Hazem Krimi' diff --git a/mdx.d.ts b/mdx.d.ts deleted file mode 100644 index aeb22ac..0000000 --- a/mdx.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -declare module '@mdx-js/react' { - import * as React from 'react'; - - export type Components = { - [key]?: React.ComponentType; - }; - - export interface MDXProviderProps { - children: React.ReactNode; - components?: Components; - } - - export class MDXProvider extends React.Component {} -} diff --git a/next-env.d.ts b/next-env.d.ts deleted file mode 100644 index 4f11a03..0000000 --- a/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js deleted file mode 100644 index 911d3af..0000000 --- a/next.config.js +++ /dev/null @@ -1,13 +0,0 @@ -const withMDX = require('@next/mdx')({ - extension: /\.mdx?$/, - options: { - providerImportSource: '@mdx-js/react', - }, -}); - -module.exports = withMDX({ - pageExtensions: ['ts', 'tsx', 'md', 'mdx'], - images: { - domains: ['res.cloudinary.com'], - }, -}); diff --git a/package.json b/package.json deleted file mode 100644 index 6cd83f9..0000000 --- a/package.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "name": "personal-website", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "format": "prettier --write ./**/*.{js,jsx,ts,tsx}" - }, - "dependencies": { - "@formspree/react": "^2.4.1", - "@mdx-js/loader": "^2.3.0", - "@next/mdx": "^13.2.4", - "gray-matter": "^4.0.3", - "next": "^13.2.4", - "next-mdx-remote": "^4.4.1", - "nprogress": "^0.2.0", - "prism-react-renderer": "^1.3.5", - "react": "18.2.0", - "react-dom": "18.2.0", - "reading-time": "^1.5.0", - "styled-components": "^5.3.9" - }, - "devDependencies": { - "@types/node": "^18.15.3", - "@types/nprogress": "^0.2.0", - "@types/react": "^18.0.28", - "@types/styled-components": "^5.1.26", - "babel-plugin-styled-components": "^2.0.7", - "babel-runtime": "^6.26.0", - "prettier": "^2.8.8", - "typescript": "^5.0.2" - }, - "engines": { - "node": ">=14.x" - } -} diff --git a/pages/404.tsx b/pages/404.tsx deleted file mode 100644 index 226905b..0000000 --- a/pages/404.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useRouter } from 'next/router'; -import Head from 'next/head'; -import IconButton from '../components/IconButton'; -import { Wrapper } from '../styles/404'; - -const NotFound = () => { - const router = useRouter(); - - return ( - <> - - - - - - - - - - 404 Not Found | Hazem Krimi - - -

404: This page could not be found

-
router.push('/')}> - - Go Home -
- - - ); -}; - -export default NotFound; diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index aed57d0..0000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useEffect } from 'react'; - -import type { AppProps } from 'next/app'; -import Script from 'next/script'; -import { useRouter } from 'next/router'; - -import Nav from '../components/Nav'; -import Theme from '../styles/theme'; -import Container from '../components/Container'; -import GlobalStyles from '../components/GlobalStyles'; -import SharedStyles from '../styles/shared'; -import Footer from '../components/Footer'; - -import NProgress from 'nprogress'; -import 'nprogress/nprogress.css'; - -import { pageview } from '../utils/gtag'; -import { initStyles } from '../utils/styles'; - -NProgress.configure({ showSpinner: false }); - -const App = ({ Component, pageProps }: AppProps) => { - const router = useRouter(); - - useEffect(() => { - router.events.on('routeChangeStart', () => { - NProgress.start(); - }); - - router.events.on('routeChangeComplete', (url) => { - NProgress.done(); - pageview(url); - }); - - router.events.on('routeChangeError', () => { - NProgress.done(); - }); - - return () => { - router.events.off('routeChangeComplete', (url) => { - pageview(url); - }); - }; - }, [router.events]); - - return ( - <> -