old-ybbond

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

commit 882d94b367a5ce380ea74d5ac52ac162f1741774
parent 06d6f63fc6141ea38fb70a1a7b3d5b4132ee1b93
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Tue, 10 Mar 2020 02:44:21 +0700

refactor(core): header and footer :)

Diffstat:
Msrc/App.js | 42++++++++++++++++++++++++++++++++++++------

1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
@@ -19,6 +19,11 @@ const backgroundColor = theme('mode', {
   dark: colors.dark,
 });
 
+const borderColor = theme('mode', {
+  light: colors.dark,
+  dark: colors.light,
+});
+
 const OuterWrapper = styled.div`
   min-height: calc(100vh - 2px);
   background-color: ${backgroundColor};
@@ -34,6 +39,16 @@ const InnerWrapper = styled.div`
   }
 `;
 
+const Header = styled.header`
+  margin-bottom: 30px;
+`;
+
+const Footer = styled.footer`
+  margin-top: 70px;
+  padding: 20px 0;
+  border-top: 2px dashed ${borderColor};
+`;
+
 const App = () => {
   const [dark, setDark] = React.useState(true);
 
@@ -53,16 +68,18 @@ const App = () => {
       <Style dark={dark} />
       <OuterWrapper>
         <InnerWrapper>
-          <Text as="h1">
-            Yohanes Bandung Bondowoso{' '}
-            <Button aria-hidden="true" onClick={toggleDark}>
-              {dark ? '🌛' : '🌞'}
-            </Button>
-          </Text>
+          <Header>
+            <Text as="h1">
+              Yohanes Bandung Bondowoso{' '}
+              <Button aria-hidden="true" onClick={toggleDark}>
+                {dark ? '🌛' : '🌞'}
+              </Button>
+            </Text>
             <Text>
               <Link to="/">CV</Link> - <Link to="/uses">Uses</Link> -{' '}
               <Link to="/about">About</Link>
             </Text>
+          </Header>
           <Switch>
             <Route exact path="/">
               <CVPage />
@@ -77,6 +94,19 @@ const App = () => {
               <NotFoundPage />
             </Route>
           </Switch>
+          <Footer>
+            <Text>See you sooner :)</Text>
+            <Text>
+              Contact:{' '}
+              <Link to="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev">
+                bandungpenting@gmail.com
+              </Link>
+            </Text>
+            <Text>
+              Other site:{' '}
+              <Link to="https://reason.ybbond.dev">reason.ybbond.dev</Link>
+            </Text>
+          </Footer>
         </InnerWrapper>
       </OuterWrapper>
     </ThemeProvider>