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 hero text and add illustrations

Browse Source
This commit is contained in:
Hazem Krimi
2021-03-17 23:59:37 +01:00
parent ff45e233fe
commit 5d8a9b677d
1 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Hero.tsx
+33 -23
View File
@@ -1,16 +1,24 @@
import { FC } from "react"; import { FC, useContext } from 'react';
import styled from "styled-components"; import { DarkModeContext } from '../components/DarkMode';
import Typing from "react-typing-animation"; import styled from 'styled-components';
import Image from 'next/image';
import Typing from 'react-typing-animation';
const Wrapper = styled.div` const Wrapper = styled.div`
min-height: 45vh; min-height: 45vh;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center; align-items: center;
height: auto; height: auto;
text-align: left; text-align: left;
@media (max-width: 768px) { @media (max-width: 768px) {
min-height: 65vh; min-height: 65vh;
grid-template-columns: auto;
.illustration {
display: none;
}
} }
h2 { h2 {
@@ -25,37 +33,39 @@ const Wrapper = styled.div`
.green { .green {
color: #73d26b; color: #73d26b;
} }
.orange {
color: #d6a356;
}
.red {
color: #d75050;
}
`; `;
const Hero: FC = () => { const Hero: FC = () => {
const { dark } = useContext(DarkModeContext);
return ( return (
<Wrapper> <Wrapper>
<Typing speed={15} hideCursor={true} loop={false}> <Typing speed={15} hideCursor={true} loop={false} className='intro'>
<h2>Hi</h2> <h2>Hi, I am Hazem</h2>
<h2>I Like Building Things</h2> <h2>I Like Building Things</h2>
<h2 className="green"> <h2 className='green'>
Software Developer ✔️<span className="small">check</span> Software Developer ✔️<span className='small'>check</span>
</h2> </h2>
<h2 className="red"> <h2 className='green'>
Designer 🛑 Designer ✔️
<span className="small">error: need more practise and feedback</span> <span className='small'>check</span>
</h2> </h2>
<h2 className="orange"> <h2 className='green'>
Hard Working ⚠️ Hard Working ✔️
<span className="small">warning: not always the case</span> <span className='small'>check</span>
</h2> </h2>
<h2 className="green"> <h2 className='green'>
Life Long Learner ✔️<span className="small">check</span> Life Long Learner ✔️<span className='small'>check</span>
</h2> </h2>
</Typing> </Typing>
<div className='illustration'>
<Image
src={dark ? '/light-illustration.svg' : '/dark-illustration.svg'}
width='auto'
height='auto'
layout='responsive'
/>
</div>
</Wrapper> </Wrapper>
); );
}; };