Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update style #273

Merged
merged 7 commits into from
May 30, 2020
Merged

Update style #273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
df0175d
[#272] Adding dates to experiences
DeKal May 30, 2020
0748b2c
[#272] Restyle
DeKal May 30, 2020
69024e6
[#272] Restyle Home and Navigator
DeKal May 30, 2020
0be48cf
[#272] Restyle Home and background
DeKal May 30, 2020
5f07749
[#272] Restyle home and add mobile image
DeKal May 30, 2020
efe2c04
[#272] Change style of experience for mobile
DeKal May 30, 2020
517a682
[#272] Restyle Contact
DeKal May 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions modules/core/components/SlideIterator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import Fade from 'react-reveal/Fade'
import Slide from 'react-reveal/Slide'

const SlideIterator = ({ children }) => {
return (
<Fragment>
{children.map((element, index) => (
<Fade key={index} left={index % 2 == 0} right={index % 2 != 0}>
<Slide key={index} left>
{element}
</Fade>
</Slide>
))}
</Fragment>
)
Expand Down
26 changes: 10 additions & 16 deletions modules/core/components/__test__/__snapshots__/SlideIterator.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@

exports[`Slide should render without throwing an error 1`] = `
<SlideIterator>
<Fade
<Slide
key="0"
left={true}
right={false}
>
<RevealBase
fraction={0.2}
Expand Down Expand Up @@ -37,7 +36,6 @@ exports[`Slide should render without throwing an error 1`] = `
}
}
refProp="ref"
right={false}
>
<div
className="react-reveal"
Expand All @@ -50,11 +48,10 @@ exports[`Slide should render without throwing an error 1`] = `
1
</div>
</RevealBase>
</Fade>
<Fade
</Slide>
<Slide
key="1"
left={false}
right={true}
left={true}
>
<RevealBase
fraction={0.2}
Expand All @@ -65,28 +62,27 @@ exports[`Slide should render without throwing an error 1`] = `
"duration": 1000,
"forever": undefined,
"make": [Function],
"reverse": false,
"reverse": true,
"style": Object {
"animationFillMode": "both",
},
}
}
left={false}
left={true}
outEffect={
Object {
"count": 1,
"delay": 0,
"duration": 1000,
"forever": undefined,
"make": [Function],
"reverse": false,
"reverse": true,
"style": Object {
"animationFillMode": "both",
},
}
}
refProp="ref"
right={true}
>
<div
className="react-reveal"
Expand All @@ -99,11 +95,10 @@ exports[`Slide should render without throwing an error 1`] = `
2
</div>
</RevealBase>
</Fade>
<Fade
</Slide>
<Slide
key="2"
left={true}
right={false}
>
<RevealBase
fraction={0.2}
Expand Down Expand Up @@ -135,7 +130,6 @@ exports[`Slide should render without throwing an error 1`] = `
}
}
refProp="ref"
right={false}
>
<div
className="react-reveal"
Expand All @@ -148,6 +142,6 @@ exports[`Slide should render without throwing an error 1`] = `
3
</div>
</RevealBase>
</Fade>
</Slide>
</SlideIterator>
`;
26 changes: 16 additions & 10 deletions modules/core/theme/__test__/__snapshots__/ThemeProviderSelector.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for chri
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand Down Expand Up @@ -249,7 +249,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for chri
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand Down Expand Up @@ -326,7 +326,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for new
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand Down Expand Up @@ -400,7 +400,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for new
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand Down Expand Up @@ -453,6 +453,8 @@ exports[`Theme Provider Selector Selector fo normal theme should render for norm
"colorDark": "#2c3e50",
"colorDarken": "#bdc3c7",
"colorLight": "#ecf0f1",
"ghostWhite": "#f8f8ff ",
"grey": "#696969",
},
"defaultLineHeight": 1.57,
"extra": Object {
Expand All @@ -478,7 +480,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for norm
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand All @@ -493,10 +495,11 @@ exports[`Theme Provider Selector Selector fo normal theme should render for norm
},
"images": Object {
"background": "/images/bg.jpg",
"backgroundMobile": "/images/bg-mobile.jpg",
"bgPattern": "/images/bg-pattern.jpg",
"bgPatternOpacity": "1",
"overlay": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAAZSURBVHjaYmCAAGM0GjfHGEMGAAAA//8DACm0ATMe8beGAAAAAElFTkSuQmCC",
"overlayBgColor": "rgba(44, 62, 80, 0.3)",
"overlayBgColor": "rgba(44, 62, 80, 0.4)",
},
"navContentMinHeight": "80px",
"navHeaderHeight": "40px",
Expand Down Expand Up @@ -526,6 +529,8 @@ exports[`Theme Provider Selector Selector fo normal theme should render for norm
"colorDark": "#2c3e50",
"colorDarken": "#bdc3c7",
"colorLight": "#ecf0f1",
"ghostWhite": "#f8f8ff ",
"grey": "#696969",
},
"defaultLineHeight": 1.57,
"extra": Object {
Expand All @@ -551,7 +556,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for norm
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand All @@ -566,10 +571,11 @@ exports[`Theme Provider Selector Selector fo normal theme should render for norm
},
"images": Object {
"background": "/images/bg.jpg",
"backgroundMobile": "/images/bg-mobile.jpg",
"bgPattern": "/images/bg-pattern.jpg",
"bgPatternOpacity": "1",
"overlay": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAAZSURBVHjaYmCAAGM0GjfHGEMGAAAA//8DACm0ATMe8beGAAAAAElFTkSuQmCC",
"overlayBgColor": "rgba(44, 62, 80, 0.3)",
"overlayBgColor": "rgba(44, 62, 80, 0.4)",
},
"navContentMinHeight": "80px",
"navHeaderHeight": "40px",
Expand Down Expand Up @@ -628,7 +634,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for tet
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand Down Expand Up @@ -702,7 +708,7 @@ exports[`Theme Provider Selector Selector fo normal theme should render for tet
"fontTrebuchet": "Trebuchet MS, sans-serif",
},
"footerHeight": "50px",
"headerPadding": "200px 10px 400px",
"headerPadding": "200px 10px 250px",
"icons": Object {
"c": "C",
"fb": "\\\\e811",
Expand Down
9 changes: 6 additions & 3 deletions modules/core/theme/styleguide/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,25 @@ const theme = {
aboutMarginTop: '-200px',
colors: {
// Color variables
ghostWhite: '#f8f8ff ',
colorLight: '#ecf0f1',
colorDarken: '#bdc3c7',
colorDark: '#2c3e50',
colorAccent: '#FFA726',
bgColor: '#fff'
bgColor: '#fff',
grey: '#696969'
},
images: {
background: '/images/bg.jpg',
backgroundMobile: '/images/bg-mobile.jpg',
bgPattern: '/images/bg-pattern.jpg',
bgPatternOpacity: '1',
overlayBgColor: 'rgba(44, 62, 80, 0.3)',
overlayBgColor: 'rgba(44, 62, 80, 0.4)',
overlay:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAAZSURBVHjaYmCAAGM0GjfHGEMGAAAA//8DACm0ATMe8beGAAAAAElFTkSuQmCC'
},
productImageRatio: '143%',
headerPadding: '200px 10px 400px'
headerPadding: '200px 10px 250px'
}

const themeExtra = {
Expand Down
3 changes: 0 additions & 3 deletions modules/home/components/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import React from 'react'
import { ABOUT } from '~/modules/home/consts/pages'
import styled from 'styled-components/macro'
import Container from 'react-bootstrap/Container'
import CardHeader from '~/modules/home/components/about/CardHeader'
import CardInfo from '~/modules/home/components/about/CardInfo'
import Anchor from '~/modules/home/components/common/Anchor'

const About = () => (
<Section>
<Anchor id={ABOUT} top={-150} />
<Container>
<Card>
<CardHeader />
Expand Down
2 changes: 1 addition & 1 deletion modules/home/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const FooterContainer = styled.footer`
width: 100%;
background-color: ${props => props.theme.colors.colorAccent};
color: ${props => props.theme.colors.colorLight};
box-shadow: 0 -2px 2px -1px ${props => props.theme.colors.colorDark};
box-shadow: 0 -2px 2px -1px ${props => props.theme.colors.colorAccent};
height: ${props => props.theme.footerHeight};

&::before {
Expand Down
10 changes: 9 additions & 1 deletion modules/home/components/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const HomeSection = styled.section`
const TitleName = styled.h1`
margin-bottom: 10px;
font-size: 100px;
color: ${props => props.theme.colors.ghostWhite};
text-shadow: 1px 1px 1px ${props => props.theme.colors.colorDark};
width: fit-content;
background: ${props => props.theme.titleBgColor};
Expand All @@ -75,7 +76,7 @@ const TitleName = styled.h1`
const TitleJob = styled.h2`
width: fit-content;
background: ${props => props.theme.titleBgColor};
color: ${props => props.theme.colors.colorLight};
color: ${props => props.theme.colors.ghostWhite};
font-family: ${props => props.theme.fonts.fontTrebuchet};
text-shadow: 1px 1px 2px ${props => props.theme.colors.colorDark};
`
Expand All @@ -89,6 +90,13 @@ const Background = styled.div`
0 no-repeat;
background-attachment: fixed;
background-size: cover;

@media screen and (max-width: 800px) {
background: transparent url(${props => props.theme.images.backgroundMobile})
center 0 no-repeat;
background-size: cover;
background-position: center;
}
`

const Overlay = styled.div`
Expand Down
4 changes: 2 additions & 2 deletions modules/home/components/WhyMe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ const Inner = styled.div`

&::before {
left: 15px;
border-left: 10px solid ${props => props.theme.colors.colorAccent};
border-left: 5px solid ${props => props.theme.colors.colorAccent};
}

&::after {
left: -15px;
border-right: 10px solid ${props => props.theme.colors.colorAccent};
border-right: 5px solid ${props => props.theme.colors.colorAccent};
width: 100%;
}

Expand Down
13 changes: 2 additions & 11 deletions modules/home/components/__test__/__snapshots__/About.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,6 @@ exports[`About should render without throwing an error 1`] = `
<section
className="About__Section-sc-1u748j1-0 BwGRD"
>
<Anchor
id="About"
top={-150}
>
<span
className="Anchor-sc-1axmo0z-0 kTNmeg"
id="About"
/>
</Anchor>
<Container
fluid={false}
>
Expand Down Expand Up @@ -71,7 +62,7 @@ exports[`About should render without throwing an error 1`] = `
</CardHeader__MainText>
<CardHeader__SubText>
<h4
className="CardHeader__SubText-r5umbs-2 kXiaxV"
className="CardHeader__SubText-r5umbs-2 hWGYTf"
>
<Translate
id="About Me: Subtext"
Expand Down Expand Up @@ -115,7 +106,7 @@ exports[`About should render without throwing an error 1`] = `
>
<CardInfo__Container>
<div
className="CardInfo__Container-sc-11lu4r3-0 cKibHh"
className="CardInfo__Container-sc-11lu4r3-0 giOaaz"
>
<p>
<Translate
Expand Down
8 changes: 4 additions & 4 deletions modules/home/components/__test__/__snapshots__/Certification.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ exports[`Certification should render without throwing an error 1`] = `
id={1}
>
<li
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 dVRdAa"
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 dzwzjn"
id={1}
>
<Title>
Expand Down Expand Up @@ -414,7 +414,7 @@ exports[`Certification should render without throwing an error 1`] = `
id={2}
>
<li
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 dKPDKC"
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 douZtP"
id={2}
>
<Title>
Expand Down Expand Up @@ -510,7 +510,7 @@ exports[`Certification should render without throwing an error 1`] = `
id={3}
>
<li
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 dQqpQK"
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 dDIRbX"
id={3}
>
<Title>
Expand Down Expand Up @@ -606,7 +606,7 @@ exports[`Certification should render without throwing an error 1`] = `
id={4}
>
<li
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 cRdcPK"
className="Info-kxijpf-0 CertInfo__ListInfo-sc-1xe9lwl-0 ejxVfD"
id={4}
>
<Title>
Expand Down
Loading