Skip to content

Commit

Permalink
working react app
Browse files Browse the repository at this point in the history
  • Loading branch information
edotau committed Jan 18, 2024
1 parent f4edc59 commit bf1deef
Show file tree
Hide file tree
Showing 71 changed files with 20,469 additions and 4 deletions.
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
32 changes: 32 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
}
8 changes: 4 additions & 4 deletions .github/workflows/gh-pages.deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ jobs:

- name: Install and Build
uses: actions/setup-node@v2
- run: npm install
- run: npm run build
- run: npm run export
- run: yarn install
- run: yarn build

env:
CI: true
- run: touch out/.nojekyll
Expand All @@ -33,5 +33,5 @@ jobs:
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: out
FOLDER: docs
CLEAN: true
Binary file added docs/2023-edotau.pdf
Binary file not shown.
128 changes: 128 additions & 0 deletions docs/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import React, { Component } from "react";
import { Provider as StyletronProvider, DebugEngine } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";
import { Anchor, Col, Div, Row, StyleReset, Text, ThemeProvider } from "atomize";
import Modal from './FullScreenModal';
const debug = process.env.NODE_ENV === "production" ? void 0 : new DebugEngine();
const engine = new Styletron();

const theme = {
colors: {
black900: "#1d1d1e",
greyLight: "#f2f3f4",
border: "#d1d1d1"
},
rounded: {
br1: "4px"
}
};
class App extends Component {
render() {
return (
<StyletronProvider value={engine} debug={debug} debugAfterHydration>

<ThemeProvider theme={theme}>
<StyleReset />
<Div
textColor="black900"
w="80%"
h="90%"
maxW="800px"
m={{ x: "auto", y: "2rem" }}
p={{ x: "2rem", y: "2rem" }}
border="1px solid"
borderColor="border"
rounded="br1"
shadow="3"
d="flex"
flexDir="column"
>

<Div
p={{ x: "1rem", y: "1rem" }}
border={{ b: "1px solid" }}
borderColor="border"
d="flex"
flexDir="column"
justify="center"
align="center"
>
<Text
tag="h1"
textSize="display1"
fontFamily="secondary"
textWeight="500"
p={{ x: "1rem", y: "1rem" }}
>
Welcome to my life
</Text>
<Div d="flex" justify="space-around" align="center" p={{ x: "1rem"}}>
<Row>
<Col size={{ xs: "auto" }}>
<Div p="1rem">
<Anchor href="https://www.linkedin.com/in/edotau/" target="https://www.linkedin.com/in/edotau/" textColor="info800" textDecor="none" hoverTextColor="info900">
Linkedin
</Anchor>
</Div>
</Col>
<Col size={{ xs: "auto" }}>
<Div p="1rem">
<Anchor href="https://github.com" target="https://github.com/edotau" textColor="info800" textDecor="none" hoverTextColor="info900">
Github
</Anchor>
</Div>
</Col>
<Col size={{ xs: "auto" }}>
<Div p="1rem">
<Anchor href="https://pinterest.com" target="https://www.pinterest.com/edotau/redefined/" textColor="info800" textDecor="none" hoverTextColor="info900">
Pinterest
</Anchor>
</Div>
</Col>
<Col size={{ xs: "auto" }}>
<Div p="1rem">
<Anchor href="https://instagram.com" target="https://www.instagram.com/_edotau/" textColor="info800" textDecor="none" hoverTextColor="info900">
Instagram
</Anchor>
</Div>
</Col>
</Row>
</Div>
</Div>
{
<Text
p={{ x: "1rem", y: "1rem" }}
>
Hi there! I'm a Software Engineer who studied Computer Science & Mathematics and knows more genetics than your average biologist. The curiosity I have for developmental biology and genomics inspired me to pursue a technical background in computer science and molecular genetics. It’s incredibly motivating looking back on the knowledge I've accumulated, to realize how my areas of expertise can work together and answer questions at the intersection of computer science and biotechnology.
</Text>
}
{
<Text
p={{ x: "1rem", y: "1rem" }}
>
When I am not thinking about recombinant DNA and/or deployments of full stack cloud applications, I enjoy blogging about fashion and lifesyle on Pinterest. I love playing and competing in sports, especially badminton, golf, power lifting, and skiing. I cheer for the Golden State Warriors and the San Francisco 49ers and absolutely love watching my favorite NBA and NFL teams competing head to head every week.
</Text>
}
{
<Text
p={{ x: "1rem", y: "1rem" }}
>
While the best chapters of my life are being written, I’m living my best life because life's too precious to spend even a single second unhappy. I hope being who I am will start redefining the boundaries of happiness, success and hard work.
</Text>
}
<Div
p={{ x: "1rem", y: "1rem" }}
align="left"
>
<Modal />
</Div>

</Div>

</ThemeProvider>
</StyletronProvider>
);
}
}

export default App;
60 changes: 60 additions & 0 deletions docs/Drawer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// Basic Sidedrawer
import React from 'react';

import { Div, Button, SideDrawer, Icon, Text } from "atomize";

const BasicSideDrawer = ({ isOpen, onClose }) => {
return (
<SideDrawer duration={10} isOpen={isOpen} onClose={onClose}>
<Div d="flex" m={{ b: '4rem' }}>
<Icon name="AlertSolid" color="warning700" />
<Text p={{ l: '0.5rem', t: '0.25rem' }}>This is the modal</Text>
</Div>
<Div d="flex" justify="flex-end">
<Button
onClick={onClose}
bg="gray200"
textColor="medium"
m={{ r: '1rem' }}>
Cancel
</Button>
<Button onClick={onClose} bg="info700">
Submit
</Button>
</Div>
</SideDrawer>
);
};

class Drawer extends React.Component {
constructor(props) {
super(props);

this.state = {
showSideDrawer: false
};
}

render() {
const { showSideDrawer } = this.state;

return (
<>
<Button
bg="info700"
hoverBg="info600"
m={{ r: '0.5rem' }}
onClick={() => this.setState({ showSideDrawer: true })}>
Show Basic Sidedrawer
</Button>
<BasicSideDrawer
transition="modal_custom"
isOpen={showSideDrawer}
onClose={() => this.setState({ showSideDrawer: false })}
/>
</>
);
}
}

export default Drawer;
70 changes: 70 additions & 0 deletions docs/FullScreenModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React from 'react';
import { Div, Button, Modal, Icon, Text } from "atomize";

const ModalSize = ({ isOpen, onClose }) => {
return (
<Modal
isOpen={isOpen}
onClose={onClose}
rounded="0"
maxW="90vw"
transition="custom"
m="0"
h="100vh">
<Icon
name="Cross"
pos="absolute"
top="1rem"
right="1rem"
size="30px"
onClick={onClose}
cursor="pointer"
/>

<Div
m={{ x: "auto", y: "1rem" }}
p={{ x: "1rem", y: "1rem" }}
h="90%"
d="flex"
flexDir="column"
justify="center"
align="center"
>
<embed src="./2023-edotau.pdf" width="500px" height="100%" />

</Div>
</Modal>
);
};

class FullScreenModal extends React.Component {
constructor(props) {
super(props);

this.state = {
showModal: false
};
}

render() {
const { showModal } = this.state;

return (
<>
<Button
bg="info900"
hoverBg="info800"
m={{ r: '0.5rem' }}
onClick={() => this.setState({ showModal: true })}>
About Me
</Button>
<ModalSize
isOpen={showModal}
onClose={() => this.setState({ showModal: false })}
/>
</>
);
}
}

export default FullScreenModal;
5 changes: 5 additions & 0 deletions docs/entry.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from "react";
import { render } from "react-dom";
import App from "./App";

render(<App />, document.querySelector("#app"));
12 changes: 12 additions & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta charset="utf-8" />
<title>Eric H Au</title>
</head>
<body>
<div id="app"></div>
<script text="text/javascript" src="bundle.js"></script>
</body>
</html>
38 changes: 38 additions & 0 deletions gh-pages.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
name: Build and Deploy
on:
push:
branches:
- gh-pages # assuming you want to deploy from the main branch
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
persist-credentials: true # typically should be true for deployments

- name: Cache node modules
uses: actions/cache@v3
with:
path: |
node_modules
.yarn
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

- name: Install Dependencies
uses: actions/setup-node@v4
with:
node-version: '14' # specify your node version
cache: 'yarn'

- name: Install and Build
run: |
yarn install
yarn build # ensure this builds to the 'build' directory
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: gh-pages # target branch to deploy to
folder: build # folder to deploy
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("./dist");
Loading

0 comments on commit bf1deef

Please sign in to comment.