commit 5632a45fd4990d33b5eca7ae22286d2e3a0b9650 parent be811ece59f0b7a9fc585edf553a53a17c7f21ca Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Tue, 10 Mar 2020 01:06:34 +0700 refactor(CV): change content, tweak Link component Diffstat:
| M | src/Components/Link.js | | | 40 | +++++++++++++++++++++++++++------------- |
| M | src/Pages/CVPage.js | | | 82 | +++++++++++++++++++++++++++++++++++++++++++++---------------------------------- |
| M | src/Theme/colors.js | | | 1 | + |
3 files changed, 75 insertions(+), 48 deletions(-)
diff --git a/src/Components/Link.js b/src/Components/Link.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import {useHistory} from 'react-router'; +import {useHistory, useRouteMatch} from 'react-router'; import styled, {type StyledComponent} from 'styled-components'; import theme from 'styled-theming'; @@ -11,31 +11,45 @@ const linkColor = theme('mode', { dark: colors.linkLight, }); +const linkHoverColor = theme('mode', { + light: colors.brown, + dark: colors.orange, +}); + type LinkProps = {to: string, children: React$Node}; -const LinkBase: StyledComponent<{}, {}, {}> = styled.a` - color: ${linkColor}; +const LinkBase: StyledComponent<{isCurrentRoute?: boolean}, {}, {}> = styled.a` + color: ${({isCurrentRoute}) => (isCurrentRoute ? linkHoverColor : linkColor)}; cursor: pointer; - text-decoration: underline solid ${linkColor}; + text-decoration: none; &:hover { - color: ${colors.orange}; - text-decoration: underline solid ${colors.orange}; + color: ${linkHoverColor}; + text-decoration: underline solid ${linkHoverColor}; } `; const Link = ({children, to, ...props}: LinkProps) => { - const history = useHistory(); const isExternal = to[0] !== '/'; + if (isExternal) { + return ( + <LinkBase {...props} target="_blank" rel="noopener noreferrer" href={to}> + {children} + </LinkBase> + ); + } + const {isExact = false} = useRouteMatch(to) || {}; + const history = useHistory(); const handleClick = () => { history.push(to); }; - return isExternal ? ( - <LinkBase {...props} target="_blank" rel="noopener noreferrer" href={to}> - {children} - </LinkBase> - ) : ( - <LinkBase as="span" onClick={handleClick}> + return ( + <LinkBase + {...props} + as="span" + onClick={handleClick} + isCurrentRoute={isExact} + > {children} </LinkBase> ); diff --git a/src/Pages/CVPage.js b/src/Pages/CVPage.js @@ -1,47 +1,59 @@ // @flow import React from 'react'; -import {useHistory} from 'react-router'; import Link from '../Components/Link'; +import List from '../Components/List'; import Text from '../Components/Text'; const CVPage = () => { - let history = useHistory(); - - const handleClick = () => { - history.push('/uses'); - }; - return ( <React.Fragment> - <Text onClick={handleClick}>hehe</Text> - <Text> - Currently work as Frontend Engineer of kumparan.com in Jakarta, - Indonesia. Building it with React, React Native for Android and iOS. - <br /> - <br /> - Eager to learn. - <br /> - Hardships. - <br /> - I cannot say that I am humble, but I learn from experience that each - individuals, their own excellences. - <br /> - I try to learn from everyone, and everything. - <br /> - <br /> - Contact:{' '} - <Link - href="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev" - target="_top" - > - bandungpenting@gmail.com - </Link> - </Text> - <Text> - Other site:{' '} - <Link href="https://reason.ybbond.dev">reason.ybbond.dev</Link> - </Text> + <Text as="h2">Quests</Text> + <List> + <List as="li"> + <date dateTime="2014">2014</date> + <br /> + Design Intern <Link to="https://www.xg.co.id/">@X-Graphic</Link> + </List> + <List as="li"> + <date dateTime="2016">2016</date> - <date dateTime="2018">2018</date> + <br /> + Quality Assurance{' '} + <Link to="https://www.touchten.com/">@Touchten Games</Link> + </List> + <List as="li"> + <date dateTime="2018">2018</date> - <date dateTime="2019">2019</date> + <br /> + Frontend Engineer <Link to="https://vospay.id/">@Vospay</Link> + </List> + <List as="li"> + <date dateTime="2019">2019</date> - + <br /> + Frontend Engineer <Link to="https://kumparan.com/">@kumparan</Link> + </List> + </List> + <Text as="h2">Good to Know</Text> + <List> + <List as="li">Studied CS in Binus, never finish</List> + <List as="li">Drinks coffee</List> + <List as="li">Vim user</List> + <List as="li">Loves moshing at indie band gigs</List> + <List as="li">from Jakarta, Indonesia</List> + </List> + <Text as="h2">Find Me</Text> + <List> + <List as="li">everywhere: ybbond or bandungpenting</List> + <List as="li"> + <Link to="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"> + bandungpenting@gmail.com + </Link> + </List> + <List as="li"> + <Link to="https://github.com/ybbond">Github</Link>,{' '} + <Link to="https://www.instagram.com/ybbond">Instagram</Link>,{' '} + <Link to="https://twitter.com/bandungpenting">Twitter</Link> + </List> + </List> </React.Fragment> ); }; diff --git a/src/Theme/colors.js b/src/Theme/colors.js @@ -11,6 +11,7 @@ const colors = { green: '#79d688', darkGreen: '#257933', orange: '#f9690e', + brown: '#ce5000', }; export {colors};