m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-11-15 01:25:25 +01:00
Code Releases Activity

fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-11-19 23:25:49 +01:00
parent 7e391bffa0
commit d680dd5545
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 127 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Layout.jsx
View File

@ -28,7 +28,8 @@ export default function Layout({ children, location }) {
const isHomepage =
location.pathname === '/' ||
location.pathname === '/offline-plugin-app-shell-fallback/'
const isResume = location.pathname === '/resume'
const isResume =
location.pathname === '/resume' || location.pathname === '/resume/'
return (
<>
@ -41,7 +42,7 @@ export default function Layout({ children, location }) {
delay={timeout}
delayChildren={timeout}
>
<Header minimal={!isHomepage} isResume={isResume} />
<Header minimal={!isHomepage} hide={isResume} />
<main className={styles.screen}>{children}</main>
</RoutesContainer>
</PoseGroup>

8
src/components/organisms/Header.jsx
View File

@ -9,18 +9,18 @@ import { useMeta } from '../../hooks/use-meta'
Header.propTypes = {
minimal: PropTypes.bool,
isResume: PropTypes.bool
hide: PropTypes.bool
}
export default function Header({ minimal, isResume }) {
export default function Header({ minimal, hide }) {
const { availability } = useMeta()
return (
<header className={minimal ? styles.minimal : styles.header}>
<ThemeSwitch />
{!isResume && (
{!hide && (
<>
<LogoUnit minimal={minimal} isResume={isResume} />
<LogoUnit minimal={minimal} />
<Networks hide={minimal} />
<Availability hide={minimal && !availability.status} />
</>

48
src/pages/resume/Header.jsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react'
import shortid from 'shortid'
import { useResume } from '../../hooks/use-resume'
import Icon from '../../components/atoms/Icon'
import styles from './Header.module.scss'
export default function Header() {
const { basics, languages } = useResume()
const { name, label, email, website, location } = basics
return (
<>
<header>
<p>Résumé</p>
<h1 className={styles.title}>{name}</h1>
<h2 className={styles.label}>{label}</h2>
</header>
<div>
<ul className={styles.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={styles.languages}>
<Icon name="Globe" />
{languages.map(item => (
<p key={shortid.generate()}>
{item.language}
<span>{item.fluency}</span>
</p>
))}
</li>
</ul>
</div>
</>
)
}

69
src/pages/resume/Header.module.scss Normal file
View File

@ -0,0 +1,69 @@
@import 'variables';
.title {
font-size: $font-size-h2;
margin-bottom: $spacer / 4;
@media print {
margin-bottom: 0;
}
}
.label {
font-size: $font-size-h3;
color: $brand-grey-light;
margin-bottom: 0;
:global(.dark) & {
color: $brand-grey-dimmed;
}
}
.contact {
list-style: none;
padding: 0;
li,
p {
margin-bottom: $spacer / 4;
}
svg {
stroke: $brand-grey-light;
margin-right: $spacer / 4;
margin-bottom: -0.1rem;
:global(.dark) & {
stroke: $brand-grey;
}
}
@media (min-width: $screen-md) {
margin-top: $spacer * 2.25;
}
}
.languages {
svg {
display: inline-block;
}
p {
margin-left: $spacer / 1.1;
&:first-of-type {
margin-left: 0;
display: inline-block;
}
}
span {
font-size: $font-size-small;
margin-left: $spacer / 4;
color: $brand-grey-light;
:global(.dark) & {
color: $brand-grey;
}
}
}

38
src/pages/resume/index.jsx
View File

@ -4,50 +4,18 @@ import SEO from '../../components/atoms/SEO'
import Icon from '../../components/atoms/Icon'
import { useResume } from '../../hooks/use-resume'
import styles from './index.module.scss'
import Header from './Header'
import ResumeItem from './ResumeItem'
export default function Resume() {
const { basics, education, languages, work, awards } = useResume()
const { name, label, email, website, location } = basics
const { education, work, awards } = useResume()
return (
<>
<SEO />
<div className={styles.resume}>
<header>
<p>Résumé</p>
<h1 className={styles.title}>{name}</h1>
<h2 className={styles.label}>{label}</h2>
</header>
<div>
<ul className={styles.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={styles.languages}>
<Icon name="Globe" />
{languages.map(item => (
<p key={shortid.generate()}>
{item.language}
<span>{item.fluency}</span>
</p>
))}
</li>
</ul>
</div>
<Header />
<div>
<h3 className={styles.subTitle}>

68
src/pages/resume/index.module.scss
View File

@ -14,45 +14,6 @@
}
}
.title {
font-size: $font-size-h2;
margin-bottom: $spacer / 4;
}
.label {
font-size: $font-size-h3;
color: $brand-grey-light;
margin-bottom: 0;
:global(.dark) & {
color: $brand-grey-dimmed;
}
}
.contact {
list-style: none;
padding: 0;
li,
p {
margin-bottom: $spacer / 4;
}
svg {
stroke: $brand-grey-light;
margin-right: $spacer / 4;
margin-bottom: -0.1rem;
:global(.dark) & {
stroke: $brand-grey;
}
}
@media (min-width: $screen-md) {
margin-top: $spacer * 2.25;
}
}
.subTitle {
font-size: $font-size-h3;
margin-bottom: 0;
@ -66,31 +27,6 @@
}
}
.languages {
svg {
display: inline-block;
}
p {
margin-left: $spacer / 1.1;
&:first-of-type {
margin-left: 0;
display: inline-block;
}
}
span {
font-size: $font-size-small;
margin-left: $spacer / 4;
color: $brand-grey-light;
:global(.dark) & {
color: $brand-grey;
}
}
}
@media print {
:global(html) {
font-size: 8pt;
@ -105,10 +41,6 @@
color: silver;
}
.title {
margin-bottom: 0;
}
.resume {
grid-template-columns: 1fr;
}