old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README

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:
Msrc/Components/Link.js | 40+++++++++++++++++++++++++++-------------
Msrc/Pages/CVPage.js | 82+++++++++++++++++++++++++++++++++++++++++++++----------------------------------
Msrc/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};