1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-16 01:13:21 +02:00
portfolio/src/components/pages/Resume/Header.jsx

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>
</>
)
}