old-ybbond

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

commit 710641b13087c94d6252ec13bea60749ece47480
parent 0663a9f73645bed1f9a27f3ffe08a146db99b512
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Mon,  9 Mar 2020 02:32:44 +0700

refactor(core): add font, use defined components

Diffstat:
M.gitignore | 1+
Mpublic/index.html | 6++++++
Msrc/App.js | 127++++++++++++++++++++++++++++++++++++++-----------------------------------------

3 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 build
+.DS_Store
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,12 @@
 <!DOCTYPE html>
 <html style="min-width: 100vw;min-height: 100vh;">
   <head>
+    <style>
+      @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,600&display=swap');
+      html {
+        font-family: 'IBM Plex Mono', monospace;
+      }
+    </style>
     <title>Yohanes Bandung Bond - Frontend Developer</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
diff --git a/src/App.js b/src/App.js
@@ -1,85 +1,80 @@
 // @flow
-import React, {Component} from 'react';
+import React from 'react';
 import styled, {ThemeProvider} from 'styled-components';
 import theme from 'styled-theming';
 
+import Button from './Components/Button';
+import Link from './Components/Link';
+import Text from './Components/Text';
 import Style from './Theme/Style';
+import {colors} from './Theme/colors';
 
 const backgroundColor = theme('mode', {
-  light: '#fdfdfd',
-  dark: '#1b1b1b',
+  light: colors.light,
+  dark: colors.dark,
 });
 
-const color = theme('mode', {
-  light: '#1b1b1b',
-  dark: '#fdfdfd',
-});
-
-const linkColor = theme('mode', {
-  light: '#2d2d2d',
-  dark: '#d8dcd5',
-});
-
-const Text = styled.p`
-  font-family: Trebuchet MS, Helvetica, sans-serif;
-`;
-
-const Wrapper = styled.div`
+const OuterWrapper = styled.div`
   min-height: calc(100vh - 2px);
   background-color: ${backgroundColor};
-  color: ${color};
   padding: 1px;
 `;
 
-const Link = styled.a`
-  color: ${linkColor};
+const InnerWrapper = styled.div`
+  margin: 0 auto;
+  max-width: 600px;
+
+  @media (max-width: 599px) {
+    padding: 0 10px;
+  }
 `;
 
-const darkmode = true;
+const App = () => {
+  const [dark, setDark] = React.useState(true);
+  const toggleDark = () => setDark(!dark);
 
-class App extends Component<{}> {
-  render() {
-    return (
-      <ThemeProvider theme={{mode: darkmode ? 'dark' : 'light'}}>
-        <Wrapper>
-          <Style dark={darkmode} />
-          <center>
-            <div style={{maxWidth: 600, textAlign: 'left'}}>
-              <Text as="h1">Yohanes Bandung Bondowoso</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>
-            </div>
-          </center>
-        </Wrapper>
-      </ThemeProvider>
-    );
-  }
-}
+  return (
+    <ThemeProvider theme={{mode: dark ? 'dark' : 'light'}}>
+      <Style dark={dark} />
+      <OuterWrapper>
+        <InnerWrapper>
+          <Text as="h1">
+            Yohanes Bandung Bondowoso{' '}
+            <Button aria-hidden="true" onClick={toggleDark}>
+              {dark ? '🌛' : '🌞'}
+            </Button>
+          </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>
+        </InnerWrapper>
+      </OuterWrapper>
+    </ThemeProvider>
+  );
+};
 
 export default App;