move to firebase
Seto Elkahfi committed
Feb 21, 2019 at 23:31 UTC
8f292105f9da5be5ac296e08125ebd41aa84eb68
21 files changed
+398
-116
.firebase/hosting.YnVpbGQ.cache
new
+15
@@ -0,0 +1,15 @@
1
+asset-manifest.json,1550775623208,42a84d4480c886cbc5cdd5f3328093033720287c32c50365706d29bd8e17ed2b
2
+favicon.ico,499162500000,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
3
+index.html,1550775623208,55b994e74635f2d068af8f6f94f4d309e69dc867325f1d72ef159f8163795b52
4
+precache-manifest.1f7cd86a927e38fadda9ede832b18379.js,1550775623208,a5ae87ce7af84854921fbc60cf7e83dfc116351a4f5b0fc266aa2b2618ee5e69
5
+service-worker.js,1550775623208,9a889e88c07e144f3d32375d740a5a39ff4387f1d9cf9d4751a60c5a7f8f05ae
6
+static/css/main.47abdc83.chunk.css,1550775623209,1e150b977e937e6a586f318bf45b28297d317a972de6bb9583f3f3a03377c875
7
+static/css/main.47abdc83.chunk.css.map,1550775623212,5ef86a5df29807e5b4d174a6ea7171159f6d4dec4f14321c6fd80042dbec992f
8
+static/js/main.fa159366.chunk.js,1550775623212,9bf986269748867390871d604cd9a8996f540e0a70fb32501ba705b902abe587
9
+static/js/runtime~main.fdfcfda2.js,1550775623212,a98f099106e478773adc01f15f58f2f6ebe0f2e84233f7b37d118f90685dee40
10
+static/js/main.fa159366.chunk.js.map,1550775623212,7bc8bdd30a891e1c23e4ad299fb7fc5011380b9eae77505f967c7ab27eaa397a
11
+static/js/runtime~main.fdfcfda2.js.map,1550775623212,16648a77266513083ee7168e4552050ef50476172bcf27485998ef99f2dc848b
12
+static/media/logo.5d5d9eef.svg,1550775623212,45e3776da5a899185aa64ba11c8a59406f29a2de1d14efd166c59ff758019c9a
13
+manifest.json,499162500000,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
14
+static/js/2.5bf9b2cd.chunk.js,1550775623212,6f0e09e497d1da7c4617c12b50a60ce4d4a73314b550aa16853ba500c40be5b1
15
+static/js/2.5bf9b2cd.chunk.js.map,1550775623212,fdbe2b3d34b8464ac7253abea9ba232e8194685b77aca6fbafdfa3d7a8a0b96d
.firebaserc
new
+5
@@ -0,0 +1,5 @@
1
+{
2
+ "projects": {
3
+ "default": "blazing-fire-5965"
4
+ }
5
+}
firebase.json
new
+16
@@ -0,0 +1,16 @@
1
+{
2
+ "hosting": {
3
+ "public": "build",
4
+ "ignore": [
5
+ "firebase.json",
6
+ "**/.*",
7
+ "**/node_modules/**"
8
+ ],
9
+ "rewrites": [
10
+ {
11
+ "source": "**",
12
+ "destination": "/index.html"
13
+ }
14
+ ]
15
+ }
16
+}
package-lock.json
+101
@@ -3305,6 +3305,11 @@
3305
}
3306
}
3307
},
3308
+ "classnames": {
3309
+ "version": "2.2.6",
3310
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
3311
+ "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
3312
+ },
3313
"clean-css": {
3314
"version": "4.2.1",
3315
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -6887,6 +6892,28 @@
6892
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
6893
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
6894
},
6895
+ "history": {
6896
+ "version": "4.7.2",
6897
+ "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
6898
+ "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
6899
+ "requires": {
6900
+ "invariant": "^2.2.1",
6901
+ "loose-envify": "^1.2.0",
6902
+ "resolve-pathname": "^2.2.0",
6903
+ "value-equal": "^0.4.0",
6904
+ "warning": "^3.0.0"
6905
+ },
6906
+ "dependencies": {
6907
+ "warning": {
6908
+ "version": "3.0.0",
6909
+ "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
6910
+ "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
6911
+ "requires": {
6912
+ "loose-envify": "^1.0.0"
6913
+ }
6914
+ }
6915
+ }
6916
+ },
6917
"hmac-drbg": {
6918
"version": "1.0.1",
6919
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6902,6 +6929,11 @@
6929
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
6930
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
6931
},
6932
+ "hoist-non-react-statics": {
6933
+ "version": "2.5.5",
6934
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
6935
+ "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
6936
+ },
6937
"home-or-tmp": {
6938
"version": "2.0.0",
6939
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -12580,6 +12612,57 @@
12612
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
12613
"integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA=="
12614
},
12615
+ "react-rotating-text": {
12616
+ "version": "1.2.1",
12617
+ "resolved": "https://registry.npmjs.org/react-rotating-text/-/react-rotating-text-1.2.1.tgz",
12618
+ "integrity": "sha1-Cg7Fw9u45dsBRgVtLxjbsr02Avk=",
12619
+ "requires": {
12620
+ "classnames": "^2.1.2",
12621
+ "prop-types": "^15.5.10"
12622
+ }
12623
+ },
12624
+ "react-router": {
12625
+ "version": "4.3.1",
12626
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
12627
+ "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
12628
+ "requires": {
12629
+ "history": "^4.7.2",
12630
+ "hoist-non-react-statics": "^2.5.0",
12631
+ "invariant": "^2.2.4",
12632
+ "loose-envify": "^1.3.1",
12633
+ "path-to-regexp": "^1.7.0",
12634
+ "prop-types": "^15.6.1",
12635
+ "warning": "^4.0.1"
12636
+ },
12637
+ "dependencies": {
12638
+ "isarray": {
12639
+ "version": "0.0.1",
12640
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
12641
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
12642
+ },
12643
+ "path-to-regexp": {
12644
+ "version": "1.7.0",
12645
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
12646
+ "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
12647
+ "requires": {
12648
+ "isarray": "0.0.1"
12649
+ }
12650
+ }
12651
+ }
12652
+ },
12653
+ "react-router-dom": {
12654
+ "version": "4.3.1",
12655
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
12656
+ "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
12657
+ "requires": {
12658
+ "history": "^4.7.2",
12659
+ "invariant": "^2.2.4",
12660
+ "loose-envify": "^1.3.1",
12661
+ "prop-types": "^15.6.1",
12662
+ "react-router": "^4.3.1",
12663
+ "warning": "^4.0.1"
12664
+ }
12665
+ },
12666
"react-scripts": {
12667
"version": "2.1.5",
12668
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.5.tgz",
@@ -13241,6 +13324,11 @@
13324
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
13325
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
13326
},
13327
+ "resolve-pathname": {
13328
+ "version": "2.2.0",
13329
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
13330
+ "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
13331
+ },
13332
"resolve-url": {
13333
"version": "0.2.1",
13334
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -15088,6 +15176,11 @@
15176
"spdx-expression-parse": "^3.0.0"
15177
}
15178
},
15179
+ "value-equal": {
15180
+ "version": "0.4.0",
15181
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
15182
+ "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
15183
+ },
15184
"vary": {
15185
"version": "1.1.2",
15186
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -15151,6 +15244,14 @@
15244
"makeerror": "1.0.x"
15245
}
15246
},
15247
+ "warning": {
15248
+ "version": "4.0.3",
15249
+ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
15250
+ "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
15251
+ "requires": {
15252
+ "loose-envify": "^1.0.0"
15253
+ }
15254
+ },
15255
"watch": {
15256
"version": "0.18.0",
15257
"resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",
package.json
+2
@@ -5,6 +5,8 @@
5
"dependencies": {
6
"react": "^16.8.3",
7
"react-dom": "^16.8.3",
8
+ "react-rotating-text": "^1.2.1",
9
+ "react-router-dom": "^4.3.1",
10
"react-scripts": "2.1.5"
11
},
12
"scripts": {
public/favicon.ico
Binary files a/public/favicon.ico and b/public/favicon.ico differ
public/index.html
+6
-28
@@ -3,39 +3,17 @@
3
<head>
4
<meta charset="utf-8" />
5
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6
- <meta
7
- name="viewport"
8
- content="width=device-width, initial-scale=1, shrink-to-fit=no"
9
- />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
7
<meta name="theme-color" content="#000000" />
11
- <!--
12
- manifest.json provides metadata used when your web app is installed on a
13
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14
- -->
8
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16
- <!--
17
- Notice the use of %PUBLIC_URL% in the tags above.
18
- It will be replaced with the URL of the `public` folder during the build.
19
- Only files inside the `public` folder can be referenced from the HTML.
20
-
21
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22
- work correctly both with client-side routing and a non-root public URL.
23
- Learn how to configure a non-root public URL by running `npm run build`.
24
- -->
25
- <title>React App</title>
9
+ <title>Seto Elkahfi</title>
10
+ <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.supersized/3.2.7/core/css/supersized.core.css">
11
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
12
+ <script src="http://cdn.jsdelivr.net/jquery.supersized/3.2.7/core/js/supersized.core.3.2.1.min.js"></script>
13
+ <script type="text/javascript">$(function(e){e.supersized({start_slide:0,new_window:1,image_protect:1,min_width:0,min_height:0,vertical_center:1,horizontal_center:1,fit_always:0,fit_portrait:1,fit_landscape:0,slides:[{image:"http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg",title:"Image Credit: Maria Kazvan"},{image:"http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg",title:"Image Credit: Maria Kazvan"},{image:"http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg",title:"Image Credit: Maria Kazvan"},{image:"http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg",title:"Image Credit: Colin Wojno"},{image:"http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg",title:"Image Credit: Colin Wojno"},{image:"http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg",title:"Image Credit: Colin Wojno"}]})});</script>
14
</head>
15
<body>
16
<noscript>You need to enable JavaScript to run this app.</noscript>
17
<div id="root"></div>
30
- <!--
31
- This HTML file is a template.
32
- If you open it directly in the browser, you will see an empty page.
33
-
34
- You can add webfonts, meta tags, or analytics to this file.
35
- The build step will place the bundled scripts into the <body> tag.
36
-
37
- To begin the development, run `npm start` or `yarn start`.
38
- To create a production bundle, use `npm run build` or `yarn build`.
39
- -->
18
</body>
19
</html>
public/manifest.json
+2
-2
@@ -1,6 +1,6 @@
1
{
2
- "short_name": "React App",
3
- "name": "Create React App Sample",
2
+ "short_name": "Seto Elkahfi",
3
+ "name": "Seto Elkahfi Personal Page",
4
"icons": [
5
{
6
"src": "favicon.ico",
src/App.css
deleted
-33
@@ -1,33 +0,0 @@
1
-.App {
2
- text-align: center;
3
-}
4
-
5
-.App-logo {
6
- animation: App-logo-spin infinite 20s linear;
7
- height: 40vmin;
8
- pointer-events: none;
9
-}
10
-
11
-.App-header {
12
- background-color: #282c34;
13
- min-height: 100vh;
14
- display: flex;
15
- flex-direction: column;
16
- align-items: center;
17
- justify-content: center;
18
- font-size: calc(10px + 2vmin);
19
- color: white;
20
-}
21
-
22
-.App-link {
23
- color: #61dafb;
24
-}
25
-
26
-@keyframes App-logo-spin {
27
- from {
28
- transform: rotate(0deg);
29
- }
30
- to {
31
- transform: rotate(360deg);
32
- }
33
-}
src/App.js
deleted
-28
@@ -1,28 +0,0 @@
1
-import React, { Component } from 'react';
2
-import logo from './logo.svg';
3
-import './App.css';
4
-
5
-class App extends Component {
6
- render() {
7
- return (
8
- <div className="App">
9
- <header className="App-header">
10
- <img src={logo} className="App-logo" alt="logo" />
11
- <p>
12
- Edit <code>src/App.js</code> and save to reload.
13
- </p>
14
- <a
15
- className="App-link"
16
- href="https://reactjs.org"
17
- target="_blank"
18
- rel="noopener noreferrer"
19
- >
20
- Learn React
21
- </a>
22
- </header>
23
- </div>
24
- );
25
- }
26
-}
27
-
28
-export default App;
src/components/About.js
new
+14
@@ -0,0 +1,14 @@
1
+import React from 'react';
2
+
3
+const About = () => (
4
+ <div>
5
+ <h1>About</h1>
6
+ <p style={{lineHeight: "150%"}}>iOS developer with experience in AR, web development (PHP, Rails, JavaScript), and Android development.</p>
7
+ <h2 style={{marginTop: 8}}>Skills</h2>
8
+ <p style={{lineHeight: "150%"}}>Objective-C, Swift (iOS, Vapor), Ruby (Ruby on Rails), PHP (CodeIgniter), JavaScript (ReactJS, jQuery), Java (Android)</p>
9
+ <p style={{lineHeight: "150%"}}>MacOS, Linux, Windows</p>
10
+ <p style={{lineHeight: "150%"}}>iMovie, Adobe Premiere Pro, Adobe Photoshop, Adobe Audition</p>
11
+ </div>
12
+);
13
+
14
+export default About;
src/components/App.js
new
+23
@@ -0,0 +1,23 @@
1
+import React from 'react';
2
+import Header from './Header';
3
+import Main from './Main';
4
+import FooterLinks from './FooterLinks';
5
+
6
+const mainStyle = {
7
+ position: 'absolute',
8
+ top: 50,
9
+ left: 50,
10
+ background: 'rgba(0,0,0,0.65)',
11
+ width: 300,
12
+ textAlign: 'left',
13
+ padding: 10
14
+};
15
+
16
+const App = () =>
17
+ <div style={mainStyle}>
18
+ <Header />
19
+ <Main />
20
+ <FooterLinks />
21
+ </div>;
22
+
23
+export default App;
src/components/Contact.js
new
+11
@@ -0,0 +1,11 @@
1
+import React from 'react';
2
+
3
+const Contact = () => (
4
+ <div>
5
+ <h1>Contact</h1>
6
+ <p style={{lineHeight: "150%"}}>Contact me via email: setoelkahfi[at]gmail[dot]com.</p>
7
+ <p style={{lineHeight: "150%"}}>or reach me directly via my social channel.</p>
8
+ </div>
9
+);
10
+
11
+export default Contact;
src/components/Cv.js
new
+29
@@ -0,0 +1,29 @@
1
+import React from 'react';
2
+
3
+const linkStyle = {
4
+ display: 'inline-block',
5
+ margin: 4,
6
+ fontSize: '10pt',
7
+ textDecoration: 'none',
8
+ outline: 'none',
9
+ color: '#fff',
10
+ background: '#222',
11
+ borderTop: '1px solid #333',
12
+ padding: '5px 8px',
13
+ MozBorderRadius: '3px',
14
+ WebkitBorderRadius: '3px',
15
+ borderRadius: '3px',
16
+ MozBoxShadow: '0px 1px 1px #000',
17
+ WebkitBoxShadow: '0px 1px 1px #000',
18
+ boxShadow: '0px 1px 1px #000'
19
+};
20
+
21
+const Cv = () => (
22
+ <div>
23
+ <h1>CV</h1>
24
+ <p style={{lineHeight: "150%"}}><a style={linkStyle} href="https://docs.google.com/document/d/1O2NgIv8DIJIlH6H6Py71qQSi8T6Y9YNfa8TaTlUdywc/edit?usp=sharing" alt="Latest CV" target="_blank" rel="noopener noreferrer" >latest</a></p>
25
+ <p style={{lineHeight: "150%"}}>or just visit my LinkedIn profile</p>
26
+ </div>
27
+);
28
+
29
+export default Cv;
\ No newline at end of file
src/components/FooterLinks.js
new
+43
@@ -0,0 +1,43 @@
1
+import React from 'react';
2
+
3
+const footerStyle = {
4
+ padding: '0 30 30 30',
5
+ color: '#fff',
6
+ font: '11pt "Helvetica Neue", "Helvetica", Arial, sans-serif',
7
+ textShadow: '#000 0px 1px 0px',
8
+ lineHeight: '200%'
9
+};
10
+
11
+const linkStyle = {
12
+ display: 'inline-block',
13
+ margin: 4,
14
+ fontSize: '10pt',
15
+ textDecoration: 'none',
16
+ outline: 'none',
17
+ color: '#ddd',
18
+ background: '#222',
19
+ borderTop: '1px solid #333',
20
+ padding: '5px 8px',
21
+ MozBorderRadius: '3px',
22
+ WebkitBorderRadius: '3px',
23
+ borderRadius: '3px',
24
+ MozBoxShadow: '0px 1px 1px #000',
25
+ WebkitBoxShadow: '0px 1px 1px #000',
26
+ boxShadow: '0px 1px 1px #000'
27
+};
28
+
29
+const FooterLinks = () => (
30
+ <footer style={footerStyle}>
31
+ <a style={linkStyle} href="https://github.com/setoelkahfi" alt="GitHub" target="_blank" rel="noopener noreferrer">github</a>
32
+ <a style={linkStyle} href="https://id.linkedin.com/in/setoelkahfi" alt="LinkedIn" target="_blank" rel="noopener noreferrer">linkedin</a>
33
+ <a style={linkStyle} href="https://stackoverflow.com/users/1137814/seto" alt="StackOverflow" target="_blank" rel="noopener noreferrer">stackoverflow</a>
34
+ <a style={linkStyle} href="https://www.quora.com/profile/Seto-Elkahfi" alt="Quora" target="_blank" rel="noopener noreferrer">quora</a>
35
+ <a style={linkStyle} href="http://blog.setoelkahfi.web.id" alt="Blog" target="_blank" rel="noopener noreferrer">blog</a>
36
+ <a style={linkStyle} href="https://www.youtube.com/user/setoelkahfi?sub_confirmation=1" alt="YouTube" target="_blank" rel="noopener noreferrer">youtube</a>
37
+ <a style={linkStyle} href="https://fb.com/setoelkahfi" alt="Facebook" target="_blank" rel="noopener noreferrer">facebook</a>
38
+ <a style={linkStyle} href="https://www.instagram.com/setoelkahfi/" alt="Instagram" target="_blank" rel="noopener noreferrer">instagram</a>
39
+ <a style={linkStyle} href="https://twitter.com/setoelkahfi" alt="Twitter" target="_blank" rel="noopener noreferrer">twitter</a>
40
+ </footer>
41
+);
42
+
43
+export default FooterLinks;
\ No newline at end of file
src/components/Header.js
new
+27
@@ -0,0 +1,27 @@
1
+import React from 'react';
2
+import { Link } from 'react-router-dom';
3
+
4
+const linkStyle = {
5
+ color: '#fff',
6
+ font: '11pt "Helvetica Neue", "Helvetica", Arial, sans-serif',
7
+}
8
+
9
+const listStyle = {
10
+ display: 'inline',
11
+ margin: 4
12
+}
13
+
14
+const Header = () => (
15
+ <header>
16
+ <nav>
17
+ <ul>
18
+ <li style={listStyle}><Link to='/' style={linkStyle}>Home</Link></li>
19
+ <li style={listStyle}><Link to='/about' style={linkStyle}>About</Link></li>
20
+ <li style={listStyle}><Link to='/cv' style={linkStyle}>CV</Link></li>
21
+ <li style={listStyle}><Link to='/contact' style={linkStyle}>Contact</Link></li>
22
+ </ul>
23
+ </nav>
24
+ </header>
25
+);
26
+
27
+export default Header;
\ No newline at end of file
src/components/Home.js
new
+67
@@ -0,0 +1,67 @@
1
+import React from 'react';
2
+import ReactRotatingText from 'react-rotating-text';
3
+
4
+const pStyle = {
5
+ lineHeight: '32pt',
6
+ marginTop: '10pt',
7
+ fontSize: '20pt',
8
+ textDecoration: 'none',
9
+ outline: 'none',
10
+};
11
+const wordStyle = {
12
+ color: '#FECD01',
13
+ background: '#006BA8',
14
+ padding: '5px 8px',
15
+ MozBoxShadow: '0px 1px 1px #000',
16
+ WebkitBoxShadow: '0px 1px 1px #000',
17
+ boxShadow: '0px 1px 1px #000'
18
+};
19
+
20
+function shuffle(array) {
21
+ var currentIndex = array.length, temporaryValue, randomIndex;
22
+
23
+ // While there remain elements to shuffle...
24
+ while (0 !== currentIndex) {
25
+
26
+ // Pick a remaining element...
27
+ randomIndex = Math.floor(Math.random() * currentIndex);
28
+ currentIndex -= 1;
29
+
30
+ // And swap it with the current element.
31
+ temporaryValue = array[currentIndex];
32
+ array[currentIndex] = array[randomIndex];
33
+ array[randomIndex] = temporaryValue;
34
+ }
35
+
36
+ return array;
37
+}
38
+
39
+var alterEgos = [
40
+ 'an Android developer',
41
+ 'an iOS developer',
42
+ 'a vlogger',
43
+ 'a guitarist',
44
+ 'a public speaker',
45
+ 'an LPDP awardee',
46
+ 'a Darwinian',
47
+ 'funny (sometimes)',
48
+ 'a language enthusiast',
49
+ 'a Javanese',
50
+ 'an Indonesian',
51
+ 'in love with you',
52
+ 'a bassist',
53
+ 'a man with vision',
54
+ 'a man with mission',
55
+ 'a gamelan player',
56
+ 'living in Stockholm'
57
+];
58
+alterEgos = shuffle(alterEgos);
59
+
60
+const Home = () => (
61
+ <div>
62
+ <h1>Hello, my name is Seto Elkahfi.</h1>
63
+ <p style={pStyle}>I am <ReactRotatingText style={wordStyle } items={alterEgos}/></p>
64
+ </div>
65
+);
66
+
67
+export default Home;
src/components/Main.js
new
+29
@@ -0,0 +1,29 @@
1
+import React from 'react';
2
+import { Switch, Route } from 'react-router-dom';
3
+import Home from './Home';
4
+import About from './About';
5
+import Cv from './Cv';
6
+import Contact from './Contact';
7
+
8
+const mainStyle = {
9
+ minHeight: 500,
10
+ marginTop: 20,
11
+ marginBottom: 20,
12
+ marginLeft: 5,
13
+ marginRight: 5,
14
+ color: '#fff',
15
+ font: '11pt "Helvetica Neue", "Helvetica", Arial, sans-serif',
16
+};
17
+
18
+const Main = () => (
19
+ <main style={mainStyle}>
20
+ <Switch>
21
+ <Route exact path='/' component={Home} />
22
+ <Route path='/about' component={About} />
23
+ <Route path='/cv' component={Cv} />
24
+ <Route path='/contact' component={Contact} />
25
+ </Switch>
26
+ </main>
27
+);
28
+
29
+export default Main;
\ No newline at end of file
src/index.css
deleted
-14
@@ -1,14 +0,0 @@
1
-body {
2
- margin: 0;
3
- padding: 0;
4
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6
- sans-serif;
7
- -webkit-font-smoothing: antialiased;
8
- -moz-osx-font-smoothing: grayscale;
9
-}
10
-
11
-code {
12
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13
- monospace;
14
-}
src/index.js
+8
-4
@@ -1,10 +1,14 @@
1
import React from 'react';
2
-import ReactDOM from 'react-dom';
3
-import './index.css';
4
-import App from './App';
2
+import { render } from 'react-dom';
3
+import App from './components/App';
4
import * as serviceWorker from './serviceWorker';
5
+import { BrowserRouter } from 'react-router-dom';
6
7
-ReactDOM.render(<App />, document.getElementById('root'));
7
+render((
8
+ <BrowserRouter>
9
+ <App />
10
+ </BrowserRouter>
11
+), document.getElementById('root'));
12
13
// If you want your app to work offline and load faster, you can change
14
// unregister() to register() below. Note this comes with some pitfalls.
src/logo.svg
deleted
-7
@@ -1,7 +0,0 @@
1
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2
- <g fill="#61DAFB">
3
- <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4
- <circle cx="420.9" cy="296.5" r="45.7"/>
5
- <path d="M520.5 78.1z"/>
6
- </g>
7
-</svg>