import React, { FC, useContext, useState } from 'react'; import { DarkModeContext } from '../components/DarkMode'; import { useForm, ValidationError } from '@formspree/react'; import Head from 'next/head'; import styled from 'styled-components'; import Image from 'next/image'; import Input from '../components/Input'; import MDXButton from '../components/MDXButton'; const Wrapper = styled.div<{ dark: boolean }>` padding: 1rem 0rem; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; @media (max-width: 768px) { padding: 0rem; grid-template-columns: auto; column-gap: 0rem; row-gap: 1rem; } .photo { order: initial; @media (max-width: 768px) { order: -1; } } h1 { font-size: 1.7rem; } .content { display: flex; flex-direction: column; } .about, .contact { margin: 1rem 0rem; @media (max-width: 768px) { margin: 1rem 0rem; } } .success { color: #73d26b; align-self: center; font-weight: normal; } .contact { display: grid; grid-template-columns: auto; row-gap: 1.5rem; .error { color: #d75050; } @media (max-width: 768px) { row-gap: 0.5rem; } } `; const About: FC = () => { const { dark } = useContext(DarkModeContext); const [form, setForm] = useState<{ name: string; email: string; message: string }>({ name: '', email: '', message: '' }); const [state, Submit] = useForm('xoqpgyge'); const handleChange = (event: React.ChangeEvent) => { setForm({ ...form, [event.target.name]: event.target.value }); }; const handleSubmit = async (event: React.FormEvent) => { try { await Submit(event); } finally { setForm({ name: '', email: '', message: '' }); } }; return ( <> About | Hazem Krimi

About Me

I am a software developer and a student. I have experience as a full stack developer but I lean more to the front end and I have built a lot of web apps and some mobile apps. Also, I am always learning and experimenting with new technologies (currently learning about the ethereum blockchain) and other topics other than software engineering.

Contact Me{' '} {state.succeeded && state.submitting && ( Message sent ✔️ )}

); }; export default About;