mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-06-16 01:13:21 +02:00
49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import shortid from 'shortid'
|
|
import { useResume } from '../../../hooks/use-resume'
|
|
import Icon from '../../atoms/Icon'
|
|
import { title, description, contact, languagesList } from './Header.module.css'
|
|
|
|
export default function Header() {
|
|
const { basics, languages } = useResume()
|
|
const { name, label, email, website, location } = basics
|
|
|
|
return (
|
|
<>
|
|
<header>
|
|
<p>Résumé</p>
|
|
<h1 className={title}>{name}</h1>
|
|
<h2 className={description}>{label}</h2>
|
|
</header>
|
|
|
|
<div>
|
|
<ul className={contact}>
|
|
<li>
|
|
<a href={website}>
|
|
<Icon name="Compass" />
|
|
Portfolio
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<Icon name="Mail" />
|
|
<a href={`mailto:${email}`}>Email</a>
|
|
</li>
|
|
<li>
|
|
<Icon name="MapPin" />
|
|
{location.city}, {location.countryCode}
|
|
</li>
|
|
<li className={languagesList}>
|
|
<Icon name="Globe" />
|
|
{languages.map((item) => (
|
|
<p key={shortid.generate()}>
|
|
{item.language}
|
|
<span>{item.fluency}</span>
|
|
</p>
|
|
))}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|