├── .gitignore ├── README.md ├── images └── codelayout.png ├── package.json ├── public ├── 404.jpg ├── favicon.ico ├── fonts │ ├── DancingScript-Regular.ttf │ └── DarkerGrotesque-Regular.ttf ├── index.html ├── logo.svg ├── logo192.png ├── logo512.png ├── m1.png ├── m2.png ├── m3.png ├── m4.png ├── manifest.json ├── media1.png ├── media2.png ├── media3.png ├── person.png ├── public-private-ssh.png └── robots.txt └── src ├── App.js ├── App.test.js ├── assets └── images │ ├── akn.png │ ├── bg1.png │ ├── bg2.png │ ├── bgforrent.jpg │ ├── bgforrent.png │ ├── bgforsale.png │ ├── forrentbg.jpg │ ├── forsale-background.png │ ├── forsalebg.jpg │ ├── home-banner-background.png │ ├── media1.png │ ├── yangon.jpg │ └── yangon1.jpg ├── classes ├── ChunkArray.js └── Database.js ├── components ├── Items │ ├── ListItem.jsx │ ├── ListItemSmall.jsx │ ├── MobileItem.jsx │ ├── RelatedItem.jsx │ └── index.jsx ├── config.jsx ├── down-arrow.svg ├── enflag.svg ├── icons │ ├── FontIcon.jsx │ ├── Icon.jsx │ └── index.jsx ├── logo.svg ├── logoonly.svg ├── mmflag.svg └── routers │ ├── RouteWithLayout.jsx │ └── index.jsx ├── index.css ├── index.js ├── layouts ├── index.jsx ├── login │ └── LoginLayout.jsx └── main │ ├── MainLayout.jsx │ ├── MainLayoutController.jsx │ ├── MainLayoutCss.css │ └── MainLayoutElement.jsx ├── logo.svg ├── pages ├── ItemsByCategory │ ├── ItemsByCategoryPage.jsx │ ├── ItemsByCategoryPageController.jsx │ └── ItemsByCategoryPageElement.jsx ├── article │ ├── Article.css │ ├── ArticlePage.jsx │ ├── ArticlePageController.jsx │ └── ArticlePageElement.jsx ├── error │ ├── NotFoundPage.jsx │ └── Particles.js ├── home │ ├── HomePage.jsx │ ├── HomePageController.jsx │ └── HomePageElement.jsx ├── index.jsx └── login │ └── LogInPage.jsx ├── reportWebVitals.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | node_modules 6 | 7 | /.pnp 8 | .pnp.js 9 | 10 | # testing 11 | /coverage 12 | package-lock.json 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | .DS_Store? 19 | yarn.lock 20 | package-lock.json 21 | .env.local 22 | .env.development.local 23 | .env.test.local 24 | .env.production.local 25 | 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react js frontend and api integration. 2 | 3 | This project is for my aungkyawnyunt.com. you can study reactjs frontend by walking through in this repo. 4 | 5 | ## Install moduels and Run the application 6 | 7 | ### Install modules(package) 8 | `nmp install` 9 | after installation you can start run the application 10 | ### Runn the application 11 | `nmp start` 12 | after app stared, you can visit to [localhost:8080](http://localhost:8080) 13 | 14 | ## Additional Modules 15 | [react-gist](https://www.npmjs.com/package/react-gist) 16 | to descripte code snippets on web page. especially i use it on article page. 17 | [styled-components](https://styled-components.com/) 18 | styled-components is for the html element and similar to react-native. 19 | I use styled-componets rather than pure html and style as the class. 20 | 21 | ## Code Flow 22 | ![alt text](https://github.com/helloakn/reactjs-frontend/blob/master/images/codelayout.png?raw=true) -------------------------------------------------------------------------------- /images/codelayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/images/codelayout.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dashboard", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^1.2.36", 7 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 8 | "@fortawesome/react-fontawesome": "^0.1.16", 9 | "@testing-library/jest-dom": "^5.11.4", 10 | "@testing-library/react": "^11.1.0", 11 | "@testing-library/user-event": "^12.1.10", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-gist": "^1.2.4", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "4.0.3", 17 | "styled-components": "^5.3.3", 18 | "web-vitals": "^1.0.1" 19 | }, 20 | "scripts": { 21 | "start": "PORT=8080 react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/404.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/DancingScript-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/fonts/DancingScript-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/DarkerGrotesque-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/fonts/DarkerGrotesque-Regular.ttf -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 21 | 27 | 28 | 32 | 33 | 42 | 47 | 48 | App 49 | 50 | 51 | 52 | 53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/logo512.png -------------------------------------------------------------------------------- /public/m1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/m1.png -------------------------------------------------------------------------------- /public/m2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/m2.png -------------------------------------------------------------------------------- /public/m3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/m3.png -------------------------------------------------------------------------------- /public/m4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/m4.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/media1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/media1.png -------------------------------------------------------------------------------- /public/media2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/media2.png -------------------------------------------------------------------------------- /public/media3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/media3.png -------------------------------------------------------------------------------- /public/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/person.png -------------------------------------------------------------------------------- /public/public-private-ssh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/public/public-private-ssh.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 2 | 3 | 4 | import {RouteWithLayout} from './components/routers'; 5 | import {MainLayout} from './layouts'; 6 | import { 7 | HomePage, 8 | ItemsByCategoryPage, 9 | ArticlePage, 10 | 11 | NotFoundPage 12 | } from './pages'; 13 | 14 | //ArticlePage 15 | function Dashboard(){ 16 | return( 17 | 18 | 19 | 20 | 27 | 28 | 35 | 36 | 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | 51 | function App() { 52 | return ( 53 | <> 54 | 55 | 56 | ); 57 | } 58 | 59 | export default App; 60 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/assets/images/akn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/akn.png -------------------------------------------------------------------------------- /src/assets/images/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/bg1.png -------------------------------------------------------------------------------- /src/assets/images/bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/bg2.png -------------------------------------------------------------------------------- /src/assets/images/bgforrent.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/bgforrent.jpg -------------------------------------------------------------------------------- /src/assets/images/bgforrent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/bgforrent.png -------------------------------------------------------------------------------- /src/assets/images/bgforsale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/bgforsale.png -------------------------------------------------------------------------------- /src/assets/images/forrentbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/forrentbg.jpg -------------------------------------------------------------------------------- /src/assets/images/forsale-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/forsale-background.png -------------------------------------------------------------------------------- /src/assets/images/forsalebg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/forsalebg.jpg -------------------------------------------------------------------------------- /src/assets/images/home-banner-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/home-banner-background.png -------------------------------------------------------------------------------- /src/assets/images/media1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/media1.png -------------------------------------------------------------------------------- /src/assets/images/yangon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/yangon.jpg -------------------------------------------------------------------------------- /src/assets/images/yangon1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/assets/images/yangon1.jpg -------------------------------------------------------------------------------- /src/classes/ChunkArray.js: -------------------------------------------------------------------------------- 1 | // function chunkArray(myArray, chunk_size){ 2 | // var results = []; 3 | 4 | // while (myArray.length) { 5 | // results.push(myArray.splice(0, chunk_size)); 6 | // } 7 | 8 | // return results; 9 | // } 10 | 11 | function chunkArray(arr, len) { 12 | var chunks = [], i = 0, n = arr.length; 13 | while (i < n) { 14 | chunks.push(arr.slice(i, i += len)); 15 | } 16 | return chunks; 17 | } 18 | 19 | export{ 20 | chunkArray 21 | } -------------------------------------------------------------------------------- /src/classes/Database.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/classes/Database.js -------------------------------------------------------------------------------- /src/components/Items/ListItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import styled from "styled-components"; 3 | 4 | import {Icon} from '../icons'; 5 | 6 | import { DefaultColor } from "../config"; 7 | 8 | export const MainContainer = styled.div` 9 | display:flex; 10 | flex-direction:column; 11 | justify-content:${props=>props.justifyContent?props.justifyContent:'flex-start'}; 12 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 13 | width:${props=>props.width?props.width:'47%'}; 14 | height:39vw; 15 | background-color:${props=>props.bgColor?props.bgColor:DefaultColor}; 16 | border: 1.01587px solid ${DefaultColor}; 17 | border-radius:10px; 18 | @media screen and (max-width: 400px) { 19 | & { 20 | display:flex; 21 | } 22 | } 23 | `; 24 | 25 | export const ImageContainer = styled.div` 26 | width:100%; 27 | height:50%; 28 | background-color:silver; 29 | border-top-right-radius:10px; 30 | border-top-left-radius:10px; 31 | background-color:#000000; 32 | overflow:hidden; 33 | `; 34 | export const BodyContainer = styled.div` 35 | width:100%; 36 | height:48%; 37 | background-color:#33333C; 38 | display:flex; 39 | flex-direction:row; 40 | justify-content:center; 41 | `; 42 | export const BodyContainerInner = styled.div` 43 | width:90%; 44 | height:100%; 45 | `; 46 | 47 | export const HeadContainer = styled.div` 48 | width:100%; 49 | height:24%; 50 | display:flex; 51 | flex-direction:row; 52 | `; 53 | const AButton = styled.a` 54 | font-family:"Cuprum"; 55 | font-size:16px; 56 | color:#ffffff; 57 | cursor:pointer; 58 | background-color:${DefaultColor}; 59 | padding:5px 10px 5px 10px; 60 | border-radius:50px; 61 | margin-left:${props=>props.marginLeft?props.marginLeft:0}; 62 | 63 | display:flex; 64 | flex-direction:row; 65 | justify-content:flex-start; 66 | align-items:center; 67 | 68 | &:hover{ 69 | color:${DefaultColor}; 70 | background-color:#ffffff; 71 | } 72 | `; 73 | const ALink = styled.a` 74 | font-family:"Cuprum"; 75 | font-size:20px; 76 | color:${DefaultColor}; 77 | cursor:pointer; 78 | &:hover{ 79 | color:#ffffff; 80 | } 81 | `; 82 | const Paragraph = styled.p` 83 | font-family:"Cuprum"; 84 | font-size:16px; 85 | color:#ffffff; 86 | `; 87 | const HeadContainerLeft = styled.div` 88 | width:70%; 89 | height:100%; 90 | display:flex; 91 | flex-direction:row; 92 | justify-content:flex-start; 93 | align-items:center; 94 | `; 95 | 96 | export const HeadContainerRight = styled.div` 97 | width:30%; 98 | height:100%; 99 | display:flex; 100 | flex-direction:row; 101 | justify-content:flex-end; 102 | align-items:center; 103 | `; 104 | export const ReleaseDate = styled.label` 105 | font-family:"Cutive"; 106 | font-size:14px; 107 | color:${DefaultColor}; 108 | `; 109 | export const TitleContainer = styled.div` 110 | width:100%; 111 | height:12%; 112 | display:flex; 113 | flex-direction:row; 114 | justify-content:flex-start; 115 | align-items:center; 116 | `; 117 | export const Contentontainer = styled.div` 118 | width:100%; 119 | height:39%; 120 | overflow:hidden; 121 | `; 122 | export const FooterContainer = styled.div` 123 | width:100%; 124 | height:24%; 125 | display:flex; 126 | flex-direction:row; 127 | justify-content:flex-end; 128 | align-items:center; 129 | `; 130 | 131 | export class ListItem extends Component{ 132 | 133 | constructor(props){ 134 | super(props); 135 | this.state ={ 136 | 137 | } 138 | } 139 | 140 | render(){ 141 | 142 | return ( 143 | 144 | 145 | media 146 | 147 | 148 | 149 | 150 | 151 | Docker 152 | DevOps 153 | Server 154 | 155 | 156 | March, 22, 2022 157 | 158 | 159 | 160 | Docker Tutorial from zero to advance 161 | 162 | 163 | 164 | Docker Desktop delivers the speed, choice and security you need for designing and delivering these containerized applications on your desktop. 165 | Docker is a container management service. The keywords of Docker ... 166 | 167 | 168 | 169 | Read   170 | 171 | 172 | 173 | 174 | ); 175 | } 176 | 177 | } -------------------------------------------------------------------------------- /src/components/Items/ListItemSmall.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import styled from "styled-components"; 3 | 4 | import {Icon} from '../icons'; 5 | 6 | import { DefaultColor,ImageUrl } from "../config"; 7 | 8 | export const MainContainer = styled.div` 9 | display:flex; 10 | flex-direction:column; 11 | justify-content:${props=>props.justifyContent?props.justifyContent:'flex-start'}; 12 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 13 | width:${props=>props.width?props.width:'30%'}; 14 | height:25vw; 15 | background-color:${props=>props.bgColor?props.bgColor:DefaultColor}; 16 | border: 1.01587px solid ${DefaultColor}; 17 | border-radius:10px; 18 | @media screen and (max-width: 400px) { 19 | & { 20 | display:flex; 21 | } 22 | } 23 | `; 24 | 25 | export const ImageContainer = styled.div` 26 | width:100%; 27 | height:50%; 28 | background-color:silver; 29 | border-top-right-radius:10px; 30 | border-top-left-radius:10px; 31 | background-color:#000000; 32 | 33 | overflow:hidden; 34 | `; 35 | export const BodyContainer = styled.div` 36 | width:100%; 37 | height:48%; 38 | background-color:#33333C; 39 | display:flex; 40 | flex-direction:row; 41 | justify-content:center; 42 | `; 43 | export const BodyContainerInner = styled.div` 44 | width:90%; 45 | height:100%; 46 | `; 47 | 48 | export const HeadContainer = styled.div` 49 | width:100%; 50 | height:24%; 51 | display:flex; 52 | flex-direction:row; 53 | 54 | justify-content:flex-start; 55 | align-items:center; 56 | 57 | `; 58 | 59 | 60 | const AButton = styled.a` 61 | font-family:"Cuprum"; 62 | font-size:16px; 63 | color:#ffffff; 64 | cursor:pointer; 65 | background-color:${DefaultColor}; 66 | padding:5px 10px 5px 10px; 67 | border-radius:50px; 68 | margin-left:${props=>props.marginLeft?props.marginLeft:0}; 69 | 70 | display:flex; 71 | flex-direction:row; 72 | justify-content:flex-start; 73 | align-items:center; 74 | 75 | text-decoration:none; 76 | &:hover{ 77 | color:${DefaultColor}; 78 | background-color:#ffffff; 79 | } 80 | &:hover .clsIcon{ 81 | color:${DefaultColor}; 82 | } 83 | `; 84 | const ALink = styled.a` 85 | font-family:"Cuprum"; 86 | font-size:16px; 87 | color:${DefaultColor}; 88 | cursor:pointer; 89 | &:hover{ 90 | color:#ffffff; 91 | } 92 | `; 93 | const Paragraph = styled.div` 94 | font-family:"Cuprum"; 95 | font-size:16px; 96 | color:#ffffff; 97 | `; 98 | 99 | 100 | export const HeadContainerRight = styled.div` 101 | width:30%; 102 | height:100%; 103 | display:flex; 104 | flex-direction:row; 105 | justify-content:flex-end; 106 | align-items:center; 107 | `; 108 | export const ReleaseDate = styled.label` 109 | font-family:"Cutive"; 110 | font-size:14px; 111 | color:${DefaultColor}; 112 | `; 113 | export const TitleContainer = styled.div` 114 | width:100%; 115 | height:12%; 116 | display:flex; 117 | flex-direction:row; 118 | justify-content:flex-start; 119 | align-items:center; 120 | `; 121 | export const Contentontainer = styled.div` 122 | width:100%; 123 | height:39%; 124 | overflow:hidden; 125 | `; 126 | export const FooterContainer = styled.div` 127 | width:100%; 128 | height:24%; 129 | display:flex; 130 | flex-direction:row; 131 | justify-content:space-between; 132 | align-items:center; 133 | `; 134 | 135 | export class ListItemSmall extends Component{ 136 | 137 | 138 | render(){ 139 | let item = this.props.item; 140 | // console.log(item); 141 | let categories = item.categories.map((element,index)=>{ 142 | return (index===0?{element.name}:{element.name}); 143 | }); 144 | return ( 145 | 146 | 147 | media 148 | 149 | 150 | 151 | 152 | {categories} 153 | 154 | 155 | {item.title} 156 | 157 | 158 | 163 | 164 | 165 | 166 | {item.created_at} 167 | Read   168 | 169 | 170 | 171 | 172 | ); 173 | } 174 | 175 | } -------------------------------------------------------------------------------- /src/components/Items/MobileItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | import { DefaultColor,ImageUrl } from "../config"; 5 | 6 | export const MainContainer = styled.div` 7 | display:flex; 8 | flex-direction:column; 9 | justify-content:${props=>props.justifyContent?props.justifyContent:'flex-start'}; 10 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 11 | width:${props=>props.width?props.width:'20vw'}; 12 | margin-left:${props=>props.marginLeft?props.marginLeft:'5px'}; 13 | flex:none; 14 | @media screen and (max-width: 400px) { 15 | & { 16 | display:flex; 17 | } 18 | } 19 | `; 20 | 21 | export const ImageContainer = styled.div` 22 | width:100%; 23 | height:50%; 24 | display:flex; 25 | justify-content:center; 26 | align-items:center; 27 | overflow:hidden; 28 | `; 29 | export const BodyContainer = styled.div` 30 | width:100%; 31 | display:flex; 32 | flex-direction:column; 33 | justify-content:center; 34 | `; 35 | export const BodyContainerInner = styled.div` 36 | width:90%; 37 | height:100%; 38 | `; 39 | 40 | export const HeadContainer = styled.div` 41 | width:100%; 42 | height:24%; 43 | display:flex; 44 | flex-direction:row; 45 | `; 46 | 47 | const ALink = styled.a` 48 | font-family:"Cuprum"; 49 | font-size:20px; 50 | color:${DefaultColor}; 51 | cursor:pointer; 52 | &:hover{ 53 | color:#ffffff; 54 | } 55 | `; 56 | const Paragraph = styled.p` 57 | font-family:"Cuprum"; 58 | font-size:16px; 59 | color:#ffffff; 60 | `; 61 | 62 | export const HeadContainerRight = styled.div` 63 | width:30%; 64 | height:100%; 65 | display:flex; 66 | flex-direction:row; 67 | justify-content:flex-end; 68 | align-items:center; 69 | `; 70 | export const ReleaseDate = styled.label` 71 | font-family:"Cutive"; 72 | font-size:14px; 73 | color:${DefaultColor}; 74 | `; 75 | export const TitleContainer = styled.div` 76 | width:100%; 77 | height:12%; 78 | display:flex; 79 | flex-direction:row; 80 | justify-content:flex-start; 81 | align-items:center; 82 | `; 83 | export const Contentontainer = styled.div` 84 | width:100%; 85 | height:39%; 86 | overflow:hidden; 87 | `; 88 | export const FooterContainer = styled.div` 89 | width:100%; 90 | height:24%; 91 | display:flex; 92 | flex-direction:row; 93 | justify-content:flex-end; 94 | align-items:center; 95 | `; 96 | 97 | export function MobileItem ({ 98 | ...props 99 | }) { 100 | let item = props.item; 101 | return ( 102 | 103 | 104 | media 105 | 106 | 107 |
108 | {item.title} 109 |
110 | 111 | {item.description} 112 | 113 |
114 |
Available On  
115 |
116 | Google PlayStore 117 |
118 |
119 | 120 | 121 | ); 122 | } -------------------------------------------------------------------------------- /src/components/Items/RelatedItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import styled from "styled-components"; 3 | 4 | import {Icon} from '../icons'; 5 | 6 | import { DefaultColor,ImageUrl } from "../config"; 7 | 8 | export const MainContainer = styled.div` 9 | display:flex; 10 | flex-direction:column; 11 | justify-content:${props=>props.justifyContent?props.justifyContent:'flex-start'}; 12 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 13 | width:${props=>props.width?props.width:'60%'}; 14 | height:25vw; 15 | background-color:${props=>props.bgColor?props.bgColor:DefaultColor}; 16 | border: 1.01587px solid ${DefaultColor}; 17 | border-radius:10px; 18 | margin-top:20px; 19 | margin-left:20px; 20 | @media screen and (max-width: 400px) { 21 | & { 22 | display:flex; 23 | } 24 | } 25 | `; 26 | 27 | export const ImageContainer = styled.div` 28 | width:100%; 29 | height:50%; 30 | background-color:silver; 31 | border-top-right-radius:10px; 32 | border-top-left-radius:10px; 33 | background-color:#000000; 34 | overflow:hidden; 35 | `; 36 | export const BodyContainer = styled.div` 37 | width:100%; 38 | height:48%; 39 | background-color:#33333C; 40 | display:flex; 41 | flex-direction:row; 42 | justify-content:center; 43 | `; 44 | export const BodyContainerInner = styled.div` 45 | width:90%; 46 | height:100%; 47 | `; 48 | 49 | export const HeadContainer = styled.div` 50 | width:100%; 51 | height:24%; 52 | display:flex; 53 | flex-direction:row; 54 | 55 | justify-content:flex-start; 56 | align-items:center; 57 | 58 | `; 59 | 60 | 61 | const AButton = styled.a` 62 | font-family:"Cuprum"; 63 | font-size:16px; 64 | color:#ffffff; 65 | cursor:pointer; 66 | background-color:${DefaultColor}; 67 | padding:5px 10px 5px 10px; 68 | border-radius:50px; 69 | margin-left:${props=>props.marginLeft?props.marginLeft:0}; 70 | 71 | display:flex; 72 | flex-direction:row; 73 | justify-content:flex-start; 74 | align-items:center; 75 | 76 | text-decoration:none; 77 | &:hover{ 78 | color:${DefaultColor}; 79 | background-color:#ffffff; 80 | } 81 | &:hover .clsIcon{ 82 | color:${DefaultColor}; 83 | } 84 | `; 85 | const ALink = styled.a` 86 | font-family:"Cuprum"; 87 | font-size:16px; 88 | color:${DefaultColor}; 89 | cursor:pointer; 90 | &:hover{ 91 | color:#ffffff; 92 | } 93 | `; 94 | const Paragraph = styled.p` 95 | font-family:"Cuprum"; 96 | font-size:16px; 97 | color:#ffffff; 98 | `; 99 | 100 | 101 | export const HeadContainerRight = styled.div` 102 | width:30%; 103 | height:100%; 104 | display:flex; 105 | flex-direction:row; 106 | justify-content:flex-end; 107 | align-items:center; 108 | `; 109 | export const ReleaseDate = styled.label` 110 | font-family:"Cutive"; 111 | font-size:14px; 112 | color:${DefaultColor}; 113 | `; 114 | export const TitleContainer = styled.div` 115 | width:100%; 116 | height:12%; 117 | display:flex; 118 | flex-direction:row; 119 | justify-content:flex-start; 120 | align-items:center; 121 | `; 122 | export const Contentontainer = styled.div` 123 | width:100%; 124 | height:39%; 125 | overflow:hidden; 126 | `; 127 | export const FooterContainer = styled.div` 128 | width:100%; 129 | height:24%; 130 | display:flex; 131 | flex-direction:row; 132 | justify-content:space-between; 133 | align-items:center; 134 | `; 135 | 136 | export class RelatedItem extends Component{ 137 | 138 | 139 | render(){ 140 | let item = this.props.item; 141 | // console.log(item); 142 | let categories = item.categories.map((element,index)=>{ 143 | return (index===0?{element.name}:{element.name}); 144 | }); 145 | return ( 146 | 147 | 148 | media 149 | 150 | 151 | 152 | 153 | {categories} 154 | 155 | 156 | {item.title} 157 | 158 | 159 | 160 | {item.intro} 161 | 162 | 163 | 164 | {item.created_at} 165 | Read   166 | 167 | 168 | 169 | 170 | ); 171 | } 172 | 173 | } -------------------------------------------------------------------------------- /src/components/Items/index.jsx: -------------------------------------------------------------------------------- 1 | import {ListItem} from './ListItem'; 2 | import {MobileItem} from './MobileItem'; 3 | import {ListItemSmall} from './ListItemSmall'; 4 | import {RelatedItem} from './RelatedItem'; 5 | 6 | export { 7 | ListItem, 8 | MobileItem, 9 | ListItemSmall, 10 | RelatedItem 11 | }; -------------------------------------------------------------------------------- /src/components/config.jsx: -------------------------------------------------------------------------------- 1 | //let OrangeColor = "#C35023"; 2 | //let BlueColor = "#416DDD"; 3 | let LightBlueColor = "#788EBA"; 4 | //let GreenColor = "#597D75"; 5 | export const DefaultColor = LightBlueColor; 6 | export const ImageUrl = "http://localhost:8080/"; -------------------------------------------------------------------------------- /src/components/down-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/enflag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/icons/FontIcon.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | example 3 | 4 | */ 5 | 6 | import styled from "styled-components"; 7 | 8 | export const MainContainer = styled.div.attrs(props => ({ 9 | 10 | }))` 11 | display:flex; 12 | flex-direction:column; 13 | width:100px; 14 | height:100px; 15 | justify-content:center; 16 | align-items:center; 17 | cursor:pointer; 18 | 19 | 20 | &:hover .something{ 21 | background-color:#6DAEC2; 22 | color:green; 23 | } 24 | &:hover .lab{ 25 | color:#ffffff; 26 | } 27 | &:hover .caption{ 28 | color:#1F3351; 29 | } 30 | `; 31 | export const Caption = styled.div` 32 | font-size:14px; 33 | font-family:Fjord; 34 | cursor:pointer; 35 | color:${props=>props.active?"#1F3351":"#6DAEC2"}; 36 | padding-top:10px; 37 | 38 | `; 39 | export const IconContainer = styled.div` 40 | display:flex; 41 | flex-direction:row; 42 | width:50%; 43 | height:50%; 44 | background-color:${props=>props.active?"#6DAEC2":"#F0F6F8"}; 45 | justify-content:center; 46 | align-items:center; 47 | border-radius: 10px; 48 | cursor:pointer; 49 | 50 | `; 51 | export const Ico = styled.i` 52 | color:${props=>props.active?"#ffffff":"#6DAEC2"}; 53 | font-size:20px; 54 | 55 | `; 56 | 57 | export function FontIcon({ 58 | ...props 59 | }) { 60 | return ( 61 | 62 | 63 | 64 | 65 | {props.caption} 66 | 67 | ); 68 | } -------------------------------------------------------------------------------- /src/components/icons/Icon.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | example 3 | 4 | */ 5 | import {DefaultColor} from '../config'; 6 | export function Icon({ 7 | ...props 8 | }) { 9 | return ( 10 | 11 | ); 12 | } -------------------------------------------------------------------------------- /src/components/icons/index.jsx: -------------------------------------------------------------------------------- 1 | import {FontIcon} from './FontIcon'; 2 | import {Icon} from './Icon'; 3 | 4 | export {FontIcon,Icon}; -------------------------------------------------------------------------------- /src/components/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/logoonly.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/mmflag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/routers/RouteWithLayout.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Route } from "react-router-dom"; 3 | 4 | // export function RouteWithLayout({ 5 | // component: Component, 6 | // layout: Layout, 7 | // ...properties 8 | // }) { 9 | // return ( 10 | // 11 | // 12 | // 13 | // 14 | // } /> 15 | // ); 16 | // } 17 | 18 | export function RouteWithLayout({ 19 | component: Component, 20 | layout: Layout, 21 | ...properties 22 | }) { 23 | return ( 24 | 25 | 26 | } /> 27 | ); 28 | } -------------------------------------------------------------------------------- /src/components/routers/index.jsx: -------------------------------------------------------------------------------- 1 | import {RouteWithLayout} from './RouteWithLayout'; 2 | export {RouteWithLayout}; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body { 4 | margin: 0; 5 | width:100vw; 6 | height:100vh; 7 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 8 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 9 | sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | //document.body 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /src/layouts/index.jsx: -------------------------------------------------------------------------------- 1 | import {LoginLayout} from './login/LoginLayout'; 2 | import {MainLayout} from './main/MainLayout'; 3 | export {LoginLayout, MainLayout}; -------------------------------------------------------------------------------- /src/layouts/login/LoginLayout.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class LoginLayout extends Component { 4 | state = { 5 | 6 | } 7 | 8 | render() { 9 | return ( 10 |
11 |

Войти

12 |
13 | 14 | 15 | 16 |
17 |
18 | ); 19 | } 20 | } 21 | 22 | export {LoginLayout}; -------------------------------------------------------------------------------- /src/layouts/main/MainLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import "./MainLayoutCss.css"; 4 | 5 | import {MainLayoutController} from './MainLayoutController'; 6 | import 7 | { 8 | DefaultColor, 9 | 10 | MainContainer, 11 | MenuContainer, 12 | MenuSmall, 13 | MenuInner,MenuFloat, 14 | MenuBig, 15 | MenuLine, 16 | Alink, 17 | MainBody,DivFloat, 18 | MainFooter, 19 | MainFooterInner, 20 | GetInTouchCaption, 21 | WebsiteLink 22 | } 23 | from './MainLayoutElement'; 24 | 25 | //import logo from '../../logo.svg'; 26 | import logo from '../../components/logo.svg'; 27 | import {Icon} from '../../components/icons'; 28 | 29 | // =============================== VARIABLE ================================== 30 | 31 | 32 | 33 | // =============================== END VARIABLE ============================== 34 | 35 | class MainLayout extends MainLayoutController { 36 | 37 | 38 | render(){ 39 | // alertconsole.log('main state'); 40 | // console.log(this.state); 41 | // console.log('end main state'); 42 | let menuData = this.state.menu.map((element,index)=>{ 43 | return ({element.name}); 44 | }); 45 | 46 | let Component = this.props.component; 47 | let props = this.props; 48 | return( 49 | 50 | 51 | 52 | 53 | 54 | GitHub 55 | UpWork 56 | Linkedin 57 | Facebook 58 | 59 | 60 | #Green 61 | #Orange 62 | #Blue 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | logo 71 | application.net 72 | 73 | 74 | 75 | Home 76 | {menuData} 77 | 78 | 79 | 80 | 81 | 82 | 83 | {/* --- Begin MainBody */} 84 | 85 | 86 | 87 | {/* --- End MainBody */} 88 | 89 | {/* --- Begin Footer */} 90 | 91 | 97 | 98 | 99 | logo 100 |
101 | © All right Reserved. Inspired Codes... 102 |
103 | 104 | 105 | 106 |
107 | Get In Touch
108 |
109 | 116 | 122 | 123 | 124 | 125 | 126 | 133 | 134 | 135 | +95 9763764572 136 | 137 | 138 | aungkyawnyunt2004@gmail.com 139 | 140 | 141 | Facebook , 142 | Twitter , 143 | Linkedin 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | {/* --- END Footer */} 153 | 154 | ) 155 | } 156 | } 157 | export {MainLayout}; 158 | -------------------------------------------------------------------------------- /src/layouts/main/MainLayoutController.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | 3 | class MainLayoutController extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | menu: [], 9 | } 10 | // Variables 11 | 12 | // end Variable 13 | 14 | this.setParentMenuCallBack = this.setParentMenuCallBack.bind(this); 15 | } 16 | 17 | 18 | 19 | 20 | setParentMenuCallBack = (childData) =>{ 21 | this.setState({menu: childData}) 22 | } 23 | 24 | } 25 | 26 | export {MainLayoutController}; -------------------------------------------------------------------------------- /src/layouts/main/MainLayoutCss.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helloakn/reactjs-frontend-SSG-with-NodeJs/d47eb49ea20eed692b5380328510a55b0b79dd7f/src/layouts/main/MainLayoutCss.css -------------------------------------------------------------------------------- /src/layouts/main/MainLayoutElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | 4 | import {DefaultColor} from '../../components/config'; 5 | export {DefaultColor}; 6 | export const MainContainer = styled.div` 7 | display:flex; 8 | flex-direction:column; 9 | justify-content:flex-start; 10 | align-items:center; 11 | width: 100%; 12 | overflow:auto; 13 | background-color:red; 14 | background-color:rgba(65, 81, 139, 0.54); 15 | background-color:#262628; 16 | @media screen and (max-width: 400px) { 17 | & { 18 | display:flex; 19 | } 20 | } 21 | `; 22 | export const MenuContainer = styled.div` 23 | display:flex; 24 | flex-direction:column; 25 | justify-content:flex-start; 26 | align-items:flex-start; 27 | width: 100%; 28 | height:100px; 29 | position:fixed; 30 | @media screen and (max-width: 400px) { 31 | & { 32 | display:flex; 33 | } 34 | } 35 | `; 36 | export const MenuSmall = styled.div` 37 | display:flex; 38 | flex-direction:row; 39 | justify-content:center; 40 | align-items:flex-start; 41 | width: 100%; 42 | height:30%; 43 | background-color:${DefaultColor}; 44 | @media screen and (max-width: 400px) { 45 | & { 46 | display:flex; 47 | } 48 | } 49 | `; 50 | export const MenuInner = styled.div` 51 | display:flex; 52 | flex-direction:row; 53 | justify-content:space-between; 54 | align-items:flex-start; 55 | width: 80%; 56 | height:100%; 57 | @media screen and (max-width: 400px) { 58 | & { 59 | display:flex; 60 | } 61 | } 62 | `; 63 | export const MenuFloat = styled.div` 64 | display:flex; 65 | flex-direction:row; 66 | justify-content:space-between; 67 | align-items:center; 68 | width: ${props=>props.width}; 69 | height:100%; 70 | background-color:${props=>props.bgColor}; 71 | @media screen and (max-width: 400px) { 72 | & { 73 | display:flex; 74 | } 75 | } 76 | `; 77 | export const MenuBig = styled.div` 78 | display:flex; 79 | flex-direction:row; 80 | justify-content:center; 81 | align-items:flex-start; 82 | width: 100%; 83 | height:65%;; 84 | background-color:rgba(38, 38, 40, 0.58); 85 | @media screen and (max-width: 400px) { 86 | & { 87 | display:flex; 88 | } 89 | } 90 | `; 91 | export const MenuLine = styled.div` 92 | display:flex; 93 | flex-direction:row; 94 | justify-content:flex-start; 95 | align-items:flex-start; 96 | width: 100%; 97 | height:5%; 98 | background: linear-gradient(90deg, ${DefaultColor} 0%, #000000 100%); 99 | 100 | @media screen and (max-width: 400px) { 101 | & { 102 | display:flex; 103 | } 104 | } 105 | `; 106 | 107 | export const Alink = styled.a` 108 | display:flex; 109 | flex-direction:row; 110 | justify-content:space-between; 111 | align-items:flex-start; 112 | color:#ffffff; 113 | font-family:"Eczar"; 114 | font-size:${props=>props.fontSize?props.fontSize:"12px"}; 115 | text-decoration:none; 116 | `; 117 | export const MainBody = styled.div` 118 | display:flex; 119 | flex-direction:row; 120 | justify-content:center; 121 | align-items:flex-start; 122 | width:100%; 123 | margin-top:100px; 124 | `; 125 | 126 | 127 | export const MainFooter = styled.div` 128 | display:flex; 129 | flex-direction:${props=>props.flexDirection?props.flexDirection:'row'};; 130 | justify-content:${props=>props.justifyContent?props.justifyContent:'space-between'}; 131 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 132 | width:${props=>props.width?props.width:'100%'}; 133 | margin-top:${props=>props.marginTop?props.marginTop:'0'}; 134 | margin-bottom:${props=>props.marginBottom?props.marginBottom:'0'}; 135 | background-color:${props=>props.bgColor}; 136 | 137 | justify-content:center; 138 | background-color:#262628; 139 | width:100%; 140 | height:200px; 141 | 142 | 143 | @media screen and (max-width: 400px) { 144 | & { 145 | display:flex; 146 | } 147 | } 148 | `; 149 | 150 | export const MainFooterInner = styled.div` 151 | display:flex; 152 | flex-direction:${props=>props.flexDirection?props.flexDirection:'row'};; 153 | justify-content:${props=>props.justifyContent?props.justifyContent:'space-between'}; 154 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 155 | width:${props=>props.width?props.width:'100%'}; 156 | margin-top:${props=>props.marginTop?props.marginTop:'0'}; 157 | margin-bottom:${props=>props.marginBottom?props.marginBottom:'0'}; 158 | background-color:${props=>props.bgColor}; 159 | 160 | justify-content:center; 161 | background-color:#262628; 162 | width:100%; 163 | height:200px; 164 | 165 | 166 | @media screen and (max-width: 400px) { 167 | & { 168 | display:flex; 169 | } 170 | } 171 | `; 172 | 173 | export const DivFloat = styled.div` 174 | display:flex; 175 | flex-direction:${props=>props.flexDirection?props.flexDirection:'row'};; 176 | justify-content:${props=>props.justifyContent?props.justifyContent:'space-between'}; 177 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 178 | width:${props=>props.width?props.width:'100%'}; 179 | height:${props=>props.height?props.height:'100%'}; 180 | margin-top:${props=>props.marginTop?props.marginTop:'0'}; 181 | margin-bottom:${props=>props.marginBottom?props.marginBottom:'0'}; 182 | background-color:${props=>props.bgColor}; 183 | @media screen and (max-width: 400px) { 184 | & { 185 | display:flex; 186 | } 187 | } 188 | `; 189 | 190 | export const GetInTouchCaption = styled.div` 191 | color:#FFFFFF; 192 | fontSize:20px; 193 | font-family:"Darker Grotesque"; 194 | display:flex; 195 | flex-direction:row; 196 | `; 197 | 198 | export const WebsiteLink = styled.div` 199 | color:#ffffff; 200 | font-family:"Eczar"; 201 | font-size:20px; 202 | `; -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/pages/ItemsByCategory/ItemsByCategoryPage.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | 4 | import {ItemsByCategoryPageController} from './ItemsByCategoryPageController'; 5 | import { 6 | DivMainContainer, 7 | DivFloat,Header,ListItemRow 8 | } 9 | from './ItemsByCategoryPageElement'; 10 | 11 | import {DefaultColor} from '../../components/config'; 12 | import {chunkArray} from '../../classes/ChunkArray'; 13 | import {ListItemSmall} from '../../components/Items'; 14 | 15 | 16 | class ItemsByCategoryPage extends ItemsByCategoryPageController { 17 | 18 | render() { 19 | let detail = this.state.detail; 20 | let articleData = chunkArray(this.state.articles,3); 21 | let datas = articleData.map((element,index)=>{ 22 | return ( 23 | { 24 | element.map((elm,i)=>{ 25 | return () 26 | }) 27 | } 28 | 29 | ); 30 | }); 31 | 32 | return ( 33 | 34 | 35 |
36 | 37 | 38 | 39 | 45 |

46 |
49 | {detail.name} Tutorials
50 |
51 | 52 |
55 | {detail.description} 56 |

57 | 58 |
59 | 65 | {datas} 66 | 67 | 68 | 69 | 70 | ); 71 | } 72 | } 73 | 74 | 75 | 76 | export {ItemsByCategoryPage}; -------------------------------------------------------------------------------- /src/pages/ItemsByCategory/ItemsByCategoryPageController.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | 3 | // import img1 from '../../assets/images/property/img1.jpg'; 4 | // import img2 from '../../assets/images/property/img2.jpg'; 5 | // import img3 from '../../assets/images/property/img3.jpg'; 6 | 7 | class ItemsByCategoryPageController extends Component { 8 | constructor(props) { 9 | super(props); 10 | this.state ={ 11 | detail:{ 12 | id:"1", 13 | name:"name", 14 | description:"description", 15 | image:"image", 16 | created_at:"created_at", 17 | }, 18 | articles : [ 19 | 20 | ], 21 | categoryLink:this.props.match.params.categorylink, 22 | }; 23 | 24 | // Variables 25 | 26 | // end Variable 27 | document.title = "Application Library"; 28 | 29 | 30 | } 31 | componentDidMount() { 32 | let categoryLink = "http://localhost:8000/www/getcategorydetail/" + this.state.categoryLink; 33 | fetch(categoryLink) 34 | .then(res => res.json()) 35 | .then( 36 | (result) => { 37 | //me.setState({ 38 | // "latestArticles":result.data.latestArticles 39 | // }); 40 | this.setState({ 41 | "detail" : result.data.categoryDetail, 42 | "articles":result.data.articles 43 | }); 44 | this.props.parentmenucallback(result.data.category); 45 | }, 46 | // Note: it's important to handle errors here 47 | // instead of a catch() block so that we don't swallow 48 | // exceptions from actual bugs in components. 49 | (error) => { 50 | this.setState({ 51 | isLoaded: true, 52 | }); 53 | } 54 | ) 55 | } 56 | 57 | } 58 | 59 | export {ItemsByCategoryPageController}; -------------------------------------------------------------------------------- /src/pages/ItemsByCategory/ItemsByCategoryPageElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | 4 | import latestArticle from '../../assets/images/bg1.png'; 5 | 6 | import {DefaultColor} from '../../components/config'; 7 | 8 | export const DivMainContainer = styled.div` 9 | display:flex; 10 | flex-direction:column; 11 | width: 100%; 12 | justify-content:center; 13 | align-items:center; 14 | background-image:url(${latestArticle}); 15 | background-position:fixed; 16 | background-size: cover; 17 | background-attachment: fixed !important; 18 | background-color:red; 19 | `; 20 | 21 | export const DivFloat = styled.div` 22 | display:flex; 23 | flex-direction:${props=>props.flexDirection?props.flexDirection:'row'};; 24 | justify-content:${props=>props.justifyContent?props.justifyContent:'space-between'}; 25 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 26 | width:${props=>props.width?props.width:'100%'}; 27 | height:${props=>props.height?props.height:'100%'}; 28 | margin-top:${props=>props.marginTop?props.marginTop:'0'}; 29 | margin-bottom:${props=>props.marginBottom?props.marginBottom:'0'}; 30 | background-color:${props=>props.bgColor}; 31 | @media screen and (max-width: 400px) { 32 | & { 33 | display:flex; 34 | } 35 | } 36 | `; 37 | 38 | export const Header = styled.div` 39 | 40 | background-color:#2A2A32; 41 | width:100%; 42 | height:100%; 43 | display:flex; 44 | justify-content:center; 45 | `; 46 | 47 | 48 | /** 49 | * color:#ffffff; 50 | font-family:"Darker Grotesque"; 51 | font-size:16px; 52 | */ 53 | export const ULContainer = styled.ul` 54 | list-style: none; 55 | `; 56 | export const LIElement = styled.li` 57 | color:#ffffff; 58 | padding:5px; 59 | font-family:"Darker Grotesque"; 60 | font-size:16px; 61 | &::before{ 62 | content: "♥"; 63 | color:${DefaultColor}; 64 | font-weight: bold; 65 | display: inline-block; 66 | width: 1em; 67 | margin-left: -45px; 68 | } 69 | `; 70 | 71 | export const Alink = styled.a` 72 | color:${DefaultColor}; 73 | cursor:pointer; 74 | &:hover{ 75 | color:#ffffff; 76 | } 77 | `; 78 | 79 | export const HorizonalScrollContainer = styled.div` 80 | width:100%; 81 | display:flex; 82 | marginTop:50; 83 | marginBottom:20; 84 | overflow-x: auto; 85 | `; 86 | 87 | 88 | export const ListItemRow = styled.div` 89 | width:100%; 90 | display:flex; 91 | flex-direction:row; 92 | justify-content:space-between; 93 | align-items:flex-start; 94 | margin-top:50px; 95 | margin-bottom:20px; 96 | `; 97 | 98 | -------------------------------------------------------------------------------- /src/pages/article/Article.css: -------------------------------------------------------------------------------- 1 | .divContent{ 2 | display:flex; 3 | flex-direction:column; 4 | } 5 | .divContent div{ 6 | width:100%; 7 | } 8 | .divContent code{ 9 | padding:10px; 10 | margin-top:5px; 11 | margin-bottom:5px; 12 | background-color:#ffffff; 13 | color:#2B2847; 14 | width:90%; 15 | overflow-x:auto; 16 | } 17 | .divContent pre{ 18 | padding:10px; 19 | margin-top:5px; 20 | margin-bottom:5px; 21 | background-color:#ffffff; 22 | color:#2B2847; 23 | width:90%; 24 | overflow-x:auto; 25 | } -------------------------------------------------------------------------------- /src/pages/article/ArticlePage.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | 4 | import './Article.css'; 5 | import {ArticlePageController} from './ArticlePageController'; 6 | import { 7 | DivMainContainer, 8 | DivMainContainerInner, 9 | DivMainBody, 10 | DivMainLeft,DivMainLeftInner, 11 | DivMainRight, 12 | Header,HeaderImage,HeaderContent, 13 | DivAuthorContainer,DivAuthorImage,DivAuthorInfo,ReleaseDate, 14 | 15 | Title,Caption, 16 | CategoryContainer, 17 | AButton, 18 | 19 | DivMainContainerBody, 20 | DivCodeContainer, 21 | DivCode 22 | 23 | } 24 | from './ArticlePageElement'; 25 | 26 | import {RelatedItem} from '../../components/Items'; 27 | 28 | import Gist from "react-gist"; 29 | 30 | const ArticleDetailElements=(props)=>{ 31 | let _element = props.element; 32 | let _key = props.keyid; 33 | /* 34 | _element.type => 35 | 1 for image, 36 | 2 for code, 37 | 3 for single code. 38 | 4 for text, 39 | 5 for movie. 40 | 41 | */ 42 | //console.log('ArticleDetailElements'); 43 | //console.log(_element); 44 | // console.log(_key); 45 | switch(_element.type){ 46 | case '1': // image 47 | return ( 48 |
49 | {_element.title} 50 | article Detail 51 |
52 | ); 53 | case '2': // gist code 54 | return ( 55 |
56 | {_element.title} 57 | 58 |
59 | 60 | ); 61 | case '3': // single code 62 | return ( 63 | 64 | {_element.title} 65 | 68 | 69 | 70 | ); 71 | case '4': // text 72 | return ( 73 |
74 | {_element.title} 75 |
78 |
79 |
80 | ); 81 | 82 | default : 83 | return 84 | } 85 | 86 | } 87 | class ArticlePage extends ArticlePageController { 88 | 89 | render() { 90 | 91 | let article = this.state.article; 92 | let categories = article.categories.map((element,index)=>{ 93 | return (index===0?{element.name}:{element.name}); 94 | }); 95 | 96 | let latestArticles = this.state.latestArticles.map((element,i)=>{ 97 | return (); 98 | }); 99 | 100 | let articleDetails = this.state.articleDetail.map((element,i)=>{ 101 | // type => 1 for image, 2 for code, 3 for text, 4 for movie. 102 | return (); 103 | }); 104 | 105 | return ( 106 | 107 | 108 |
109 | 110 | Article Cover 111 | 112 | 113 | {article.title} 114 | 115 | {categories} 116 | 117 | 118 | 119 | Author 120 | 121 | 122 | 123 | {article.created_at} 124 | 125 | 126 | 127 |
128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 139 |
142 |
143 | 144 | 148 | {articleDetails} 149 | 150 | 151 | 152 | {latestArticles}
153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | ); 161 | } 162 | } 163 | 164 | 165 | 166 | export {ArticlePage}; -------------------------------------------------------------------------------- /src/pages/article/ArticlePageController.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Component } from 'react'; 4 | 5 | // import img1 from '../../assets/images/property/img1.jpg'; 6 | // import img2 from '../../assets/images/property/img2.jpg'; 7 | // import img3 from '../../assets/images/property/img3.jpg'; 8 | 9 | class ArticlePageController extends Component { 10 | constructor(props) { 11 | super(props); 12 | this.state ={ 13 | article : { 14 | id:1, 15 | title:'this is title', 16 | image:'this is image', 17 | intro:'this is intro', 18 | link:'this is link', 19 | description:'this is description', 20 | categories:[] 21 | }, 22 | articleDetail :[], 23 | articlelink:this.props.match.params.articlelink, 24 | latestArticles : [], 25 | categories : [] 26 | }; 27 | 28 | // Variables 29 | 30 | // end Variable 31 | document.title = "Application Library"; 32 | 33 | } 34 | 35 | componentDidMount() { 36 | let articlelink = "http://localhost:8000/www/getarticledetail/" + this.state.articlelink; 37 | fetch(articlelink) 38 | .then(res => res.json()) 39 | .then( 40 | (result) => { 41 | // console.log(result.data.latestArticles); 42 | //me.setState({ 43 | // "latestArticles":result.data.latestArticles 44 | // }); 45 | this.setState({ 46 | detail:result.data.detail, 47 | "article":result.data.article, 48 | "articleDetail":result.data.articleDetail, 49 | "latestArticles" : result.data.latestArticles, 50 | "categories" : result.data.category, 51 | }); 52 | this.props.parentmenucallback(result.data.category); 53 | }, 54 | // Note: it's important to handle errors here 55 | // instead of a catch() block so that we don't swallow 56 | // exceptions from actual bugs in components. 57 | (error) => { 58 | this.setState({ 59 | isLoaded: true, 60 | }); 61 | } 62 | ) 63 | } 64 | } 65 | 66 | export {ArticlePageController}; -------------------------------------------------------------------------------- /src/pages/article/ArticlePageElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | 4 | import latestArticle from '../../assets/images/bg1.png'; 5 | 6 | import {DefaultColor} from '../../components/config'; 7 | 8 | export const DivMainContainer = styled.div` 9 | display:flex; 10 | flex-direction:column; 11 | width: 100%; 12 | justify-content:center; 13 | align-items:center; 14 | 15 | `; 16 | export const DivMainContainerInner = styled.div` 17 | display:flex; 18 | flex-direction:column; 19 | justify-content:center; 20 | align-items:center; 21 | width: 100%; 22 | background-image:url(${latestArticle}); 23 | background-position:fixed; 24 | background-size: cover; 25 | background-attachment: fixed !important; 26 | 27 | `; 28 | 29 | 30 | 31 | export const Header = styled.div` 32 | width:80%; 33 | 34 | display:flex; 35 | flex-direction:row; 36 | justify-content:space-between; 37 | align-items:center; 38 | margin-top:30px; 39 | margin-bottom:30px; 40 | `; 41 | 42 | export const HeaderImage = styled.div` 43 | width:50%; 44 | display:flex; 45 | flex-direction:row; 46 | justify-content:center; 47 | align-items:center; 48 | margin-bottom:10px; 49 | `; 50 | 51 | export const HeaderContent = styled.div` 52 | width:45%; 53 | display:flex; 54 | flex-direction:column; 55 | justify-content:flex-start; 56 | 57 | `; 58 | 59 | export const DivAuthorContainer = styled.div` 60 | width:100%; 61 | margin-top:10px; 62 | display:flex; 63 | flex-direction:row; 64 | justify-content:flex-start; 65 | 66 | `; 67 | export const DivAuthorImage = styled.div` 68 | width:100px; 69 | height:100px; 70 | `; 71 | export const DivAuthorInfo = styled.div` 72 | display:flex; 73 | flex-direction:column; 74 | justify-content:space-around; 75 | margin-left:20px; 76 | color:#788EBA; 77 | `; 78 | export const ReleaseDate = styled.label` 79 | 80 | `; 81 | /** 82 | * color:#ffffff; 83 | font-family:"Darker Grotesque"; 84 | font-size:16px; 85 | */ 86 | export const Title = styled.h1` 87 | font-family:"Cuprum"; 88 | font-size:30px; 89 | color:#788EBA; 90 | ` 91 | export const Caption = styled.h2` 92 | font-family:"Cuprum"; 93 | font-size:20px; 94 | color:#788EBA; 95 | ` 96 | 97 | export const CategoryContainer = styled.div` 98 | width:100%; 99 | display:flex; 100 | flex-direction:row; 101 | margin-bottom:10px; 102 | ` 103 | 104 | export const Alink = styled.a` 105 | color:${DefaultColor}; 106 | cursor:pointer; 107 | &:hover{ 108 | color:#ffffff; 109 | } 110 | `; 111 | 112 | export const AButton = styled.a` 113 | font-family:"Cuprum"; 114 | font-size:16px; 115 | color:#ffffff; 116 | cursor:pointer; 117 | background-color:${DefaultColor}; 118 | padding:5px 10px 5px 10px; 119 | border-radius:50px; 120 | margin-left:${props=>props.marginLeft?props.marginLeft:0}; 121 | 122 | display:flex; 123 | flex-direction:row; 124 | justify-content:flex-start; 125 | align-items:center; 126 | 127 | text-decoration:none; 128 | 129 | &:hover{ 130 | color:${DefaultColor}; 131 | background-color:#ffffff; 132 | } 133 | &:hover .clsIcon{ 134 | color:${DefaultColor}; 135 | } 136 | `; 137 | 138 | export const HorizonalScrollContainer = styled.div` 139 | width:100%; 140 | display:flex; 141 | marginTop:50; 142 | marginBottom:20; 143 | overflow-x: auto; 144 | `; 145 | 146 | 147 | export const ListItemRow = styled.div` 148 | width:100%; 149 | display:flex; 150 | flex-direction:row; 151 | justify-content:space-between; 152 | align-items:flex-start; 153 | margin-top:50px; 154 | margin-bottom:20px; 155 | `; 156 | 157 | 158 | export const DivMainContainerBody = styled.div` 159 | width:100%; 160 | display:flex; 161 | flex-direction:row; 162 | justify-content:center; 163 | align-items:flex-start; 164 | background-color:#3A3D46; 165 | `; 166 | 167 | 168 | export const DivMainBody = styled.div` 169 | width:100%; 170 | display:flex; 171 | flex-direction:row; 172 | `; 173 | export const DivMainLeft = styled.div` 174 | width:65%; 175 | background-color:#3A3D46; 176 | display:flex; 177 | flex-direction:column; 178 | justify-content:flex-start; 179 | align-items:flex-end; 180 | `; 181 | export const DivMainLeftInner = styled.div` 182 | width:83%; 183 | margin-right:2%; 184 | color:#ffffff; 185 | font-family:"Darker Grotesque"; 186 | font-size:20px; 187 | margin-top:20px; 188 | `; 189 | export const DivMainRight = styled.div` 190 | width:35%; 191 | background-color:#43454D; 192 | `; 193 | 194 | export const DivCodeContainer = styled.div` 195 | display:flex; 196 | flex-direction:column; 197 | justify-content:flex-start; 198 | align-items:flex-start; 199 | margin-bottom:5px; 200 | `; 201 | 202 | export const DivCode = styled.div` 203 | display:flex; 204 | flex-direction:row; 205 | background-color:#EAEBF0; 206 | font-family:"ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace"; 207 | font-size:14px; 208 | font-weight:bold; 209 | color:#24292f; 210 | padding:10px; 211 | width:90% !important; 212 | border-radius:5px; 213 | `; -------------------------------------------------------------------------------- /src/pages/error/NotFoundPage.jsx: -------------------------------------------------------------------------------- 1 | 2 | import styled from "styled-components"; 3 | 4 | export const DivMainContainer = styled.div` 5 | display:flex; 6 | flex-direction:column; 7 | width: 100%; 8 | height:100vh; 9 | background-color:#3c3c3c; 10 | justify-content:center; 11 | align-items:center; 12 | color:#788EBA; 13 | 14 | font-family:"Cuprum"; 15 | font-size:30px; 16 | & h1{ 17 | color:#ffffff; 18 | } 19 | & label{ 20 | font-size:20px; 21 | } 22 | & a{ 23 | color:gray; 24 | cursor:pointer; 25 | } 26 | & a:hover{ 27 | color:#ffffff; 28 | } 29 | `; 30 | 31 | export const DivMsg = styled.div` 32 | 33 | font-size:30px; 34 | 35 | `; 36 | 37 | 38 | 39 | function NotFoundPage (){ 40 | 41 | return ( 42 | 43 | 44 | 404 page 45 |

4 zero 4


46 | What you're looking for may have been misplaced in long Term Memory!
47 |
48 | SO, Let's go to the home! 49 | 50 | 51 | ); 52 | } 53 | 54 | 55 | 56 | export {NotFoundPage}; -------------------------------------------------------------------------------- /src/pages/error/Particles.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Particles from "react-particles-js"; 3 | 4 | class Canvas extends Component { 5 | state = { width: "100vh", height: "100vh" }; 6 | 7 | render() { 8 | const { width, height } = this.state; 9 | console.log(width, height); 10 | return ( 11 | 34 | ); 35 | } 36 | } 37 | 38 | export default Canvas; 39 | -------------------------------------------------------------------------------- /src/pages/home/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {HomePageController} from './HomePageController'; 4 | import { 5 | DivMainContainer, 6 | DivFloat,DivFloatBgImage, 7 | ULContainer, 8 | LIElement, 9 | HorizonalScrollContainer, 10 | ListItemContainer, 11 | ListItemRow, 12 | 13 | BannerContainer,BannerContainerLeft, 14 | DivMessage,DivAboutMe, 15 | ALink 16 | } 17 | from './HomePageElement'; 18 | 19 | import {Icon} from '../../components/icons'; 20 | 21 | import akn from '../../assets/images/akn.png'; 22 | import logo from '../../components/logo.svg'; 23 | import {DefaultColor} from '../../components/config'; 24 | 25 | import {ListItemSmall} from '../../components/Items'; 26 | import {MobileItem} from '../../components/Items'; 27 | 28 | import {chunkArray} from '../../classes/ChunkArray'; 29 | 30 | class HomePage extends HomePageController { 31 | 32 | render() { 33 | let articleData = chunkArray(this.state.articles,3); 34 | 35 | let datas = articleData.map((element,index)=>{ 36 | return ( 37 | { 38 | element.map((elm,i)=>{ 39 | return () 40 | }) 41 | } 42 | ); 43 | }); 44 | // let articles = this.state.articles; 45 | // //articles = chunkArray(articles,3); 46 | // let datas = articles.map((element,index)=>{ 47 | // return(); 48 | // }); 49 | 50 | let mobileApplicationsElements = this.state.mobileApplications.map((element,index)=>{ 51 | return( index===0? : ); 52 | }); 53 | 54 | return ( 55 | 56 | 57 | 58 | 59 | 66 | {//comments 67 | /* 68 | left 69 | */ 70 | } 71 | 77 | 78 | 79 | 85 |
88 | Hello!
89 |
90 |
93 | I’m Aung Kyaw Nyunt ( AKN ).
94 |
97 | Software Engineer, DevOps/DevSecOps Engineer,
98 | Cloud Solution Architect as a freelancer. 99 |
100 | 101 | 102 | 103 | 110 | {//comments 111 | /* 112 | contact information 113 | */ 114 | } 115 | 121 | 122 | 123 | 124 | 125 | 126 | 132 |
135 | No(26), Than Lan Street, Hlaing Township,Yangon City, Myanmar. 136 |
137 |
140 | +95 9763764572 141 |
142 |
145 | aungkyawnyunt2004@gmail.com 146 |
147 |
150 | https://www.applix.net 151 |
152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 166 | {//comments 167 | /* 168 | left 169 | */ 170 | } 171 | 177 | 178 | 179 | 185 | 191 | 194 | Download CV 195 | 196 | 201 | Hire Me 202 | 203 | 204 | 205 |
208 | My attitude is to deliver high quality work by honest for either small or huge. 209 |
210 | 211 | 212 | 213 | 214 | 220 | logo 221 | 222 | 223 | 224 | 225 | 226 | 227 |
228 | About Me 229 |
230 |

231 | I'm a Software Engineer, DevOps Engineer, Cloud Solution Architect as a freelancer. 232 |
AWS Cloud Services and a background as above Project Management with over 5 years of intensive work experience in an Agile environment and worked the Senior Engineer level with over 10 yers. 233 | Before my journey of freelance, I worked in Zote By Focus Innovation as Chief Technology Office position. 234 | In my free time, I write article for my . 235 |

236 | 237 | 238 |
239 | My Mission Statement 240 |

241 |
I Would ...
242 | 243 |    Provide Schedule and Delivery On Time. 244 |    Provide Impact Analystic (To provide "Pros and Cons") 245 |    Provide Option ( example: I will provide two examples and give you the suggestions as well as "Pros and Cons", so you will have the right choice.) 246 |    Provide Documentation. ( PDF format from me you provide me confluence something ...) 247 |    I would provide future support for free. (depend on projects) 248 | 249 | 250 | 251 | 252 | 253 | 254 | 261 | 262 | 263 | 264 | 272 |
273 | 274 | logo 275 |
276 |
277 | Latest 278 |
279 |
280 |  Article 281 |
282 | 283 | 284 | {datas} 285 | 286 | 287 | 288 | 289 | 290 | 299 |
300 | logo 301 |
302 |
303 | Mobile 304 |
305 |
306 |  Applications 307 |
308 | 309 | 310 | 317 | 320 | {mobileApplicationsElements} 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | ); 331 | } 332 | } 333 | 334 | 335 | 336 | export {HomePage}; -------------------------------------------------------------------------------- /src/pages/home/HomePageController.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | 3 | 4 | class HomePageController extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state ={ 8 | isOpenSlider:true, 9 | activeBannerTab : 'forsale', 10 | articles : [ 11 | 12 | ], 13 | mobileApplications : [ 14 | 15 | ], 16 | }; 17 | 18 | // Variables 19 | 20 | // end Variable 21 | document.title = "Application Library"; 22 | 23 | 24 | 25 | } 26 | 27 | componentDidMount() { 28 | fetch("http://localhost:8000/www/gethomedata/") 29 | .then(res => res.json()) 30 | .then( 31 | (result) => { 32 | //me.setState({ 33 | // "latestArticles":result.data.latestArticles 34 | // }); 35 | this.setState({ 36 | "articles":result.data.latestArticles, 37 | "mobileApplications":result.data.mobileAppLists 38 | }); 39 | this.props.parentmenucallback(result.data.category); 40 | }, 41 | // Note: it's important to handle errors here 42 | // instead of a catch() block so that we don't swallow 43 | // exceptions from actual bugs in components. 44 | (error) => { 45 | this.setState({ 46 | isLoaded: true, 47 | }); 48 | } 49 | ) 50 | } 51 | 52 | 53 | } 54 | 55 | export {HomePageController}; -------------------------------------------------------------------------------- /src/pages/home/HomePageElement.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | 4 | import latestArticle from '../../assets/images/bg1.png'; 5 | import mobileAppImg from '../../assets/images/bg2.png'; 6 | 7 | import {DefaultColor} from '../../components/config'; 8 | 9 | export const DivMainContainer = styled.div` 10 | display:flex; 11 | flex-direction:column; 12 | width: 100%; 13 | justify-content:center; 14 | align-items:center; 15 | background-color:#2A2A32; 16 | background-attachment: fixed !important; 17 | 18 | `; 19 | 20 | export const BannerContainer = styled.div` 21 | display:flex; 22 | justify-content:center; 23 | background-color:#2A2A32; 24 | width:80%; 25 | height:100%; 26 | 27 | padding-top:50px; 28 | @media screen and (max-width: 400px) { 29 | & { 30 | display:flex; 31 | } 32 | } 33 | `; 34 | 35 | export const BannerContainerLeft = styled.div` 36 | display:flex; 37 | flex-direction:column; 38 | justify-content:center; 39 | align-items:flex-start; 40 | width:60%; 41 | @media screen and (max-width: 400px) { 42 | & { 43 | display:flex; 44 | } 45 | } 46 | `; 47 | 48 | export const DivMessage = styled.div` 49 | display:flex; 50 | flex-direction:column; 51 | justify-content:center; 52 | align-items:center; 53 | width:100%; 54 | 55 | background-image:url(${mobileAppImg}); 56 | background-position:fixed; 57 | background-size: contain; 58 | background-attachment: fixed !important; 59 | 60 | @media screen and (max-width: 400px) { 61 | & { 62 | display:flex; 63 | } 64 | } 65 | `; 66 | 67 | export const DivAboutMe = styled.div` 68 | display:flex; 69 | flex-direction:column; 70 | justify-content:center; 71 | align-items:flex-start; 72 | width:80%; 73 | @media screen and (max-width: 400px) { 74 | & { 75 | display:flex; 76 | } 77 | } 78 | `; 79 | 80 | export const DivFloat = styled.div` 81 | display:flex; 82 | flex-direction:${props=>props.flexDirection?props.flexDirection:'row'};; 83 | justify-content:${props=>props.justifyContent?props.justifyContent:'space-between'}; 84 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 85 | width:${props=>props.width?props.width:'100%'}; 86 | height:${props=>props.height?props.height:'100%'}; 87 | margin-top:${props=>props.marginTop?props.marginTop:'0'}; 88 | margin-bottom:${props=>props.marginBottom?props.marginBottom:'0'}; 89 | background-color:${props=>props.bgColor}; 90 | @media screen and (max-width: 400px) { 91 | & { 92 | display:flex; 93 | } 94 | } 95 | `; 96 | 97 | export const DivFloatBgImage = styled.div` 98 | display:flex; 99 | flex-direction:${props=>props.flexDirection?props.flexDirection:'row'};; 100 | justify-content:${props=>props.justifyContent?props.justifyContent:'space-between'}; 101 | align-items:${props=>props.alignItems?props.alignItems:'center'}; 102 | width:${props=>props.width?props.width:'100%'}; 103 | height:${props=>props.height?props.height:'100%'}; 104 | background-color:${props=>props.bgColor}; 105 | 106 | background-image:url(${latestArticle}); 107 | background-position:fixed; 108 | background-size: contain; 109 | background-attachment: fixed !important; 110 | 111 | `; 112 | 113 | export const ULContainer = styled.ul` 114 | list-style: none; 115 | `; 116 | 117 | export const LIElement = styled.li` 118 | color:#ffffff; 119 | padding:5px; 120 | font-family:"Darker Grotesque"; 121 | font-size:16px; 122 | &::before{ 123 | content: "♥"; 124 | color:${DefaultColor}; 125 | font-weight: bold; 126 | display: inline-block; 127 | width: 1em; 128 | margin-left: -45px; 129 | } 130 | `; 131 | 132 | export const HorizonalScrollContainer = styled.div` 133 | width:100%; 134 | display:flex; 135 | marginTop:50; 136 | marginBottom:20; 137 | overflow-x: auto; 138 | `; 139 | 140 | export const ListItemContainer = styled.div` 141 | display:flex; 142 | flex-direction:column; 143 | justify-content:flex-start; 144 | align-items:flex-start; 145 | width:80%; 146 | `; 147 | 148 | export const ListItemRow = styled.div` 149 | width:100%; 150 | display:flex; 151 | flex-direction:row; 152 | justify-content:space-between; 153 | align-items:flex-start; 154 | margin-top:50px; 155 | margin-bottom:20px; 156 | `; 157 | 158 | export const ALink = styled.a` 159 | background-color:${props=>props.bgColor?props.bgColor:"#000000"}; 160 | border:1px solid ${props=>props.borderColor?props.borderColor:DefaultColor}; 161 | color:#ffffff; 162 | padding:10px; 163 | border-radius:10px; 164 | text-decoration:none; 165 | `; 166 | 167 | 168 | -------------------------------------------------------------------------------- /src/pages/index.jsx: -------------------------------------------------------------------------------- 1 | import {HomePage} from './home/HomePage'; 2 | import {ItemsByCategoryPage} from './ItemsByCategory/ItemsByCategoryPage'; 3 | import {ArticlePage} from './article/ArticlePage'; 4 | 5 | // ### ### ### ### Error pages 6 | import {NotFoundPage} from './error/NotFoundPage'; 7 | 8 | export { 9 | HomePage, 10 | ItemsByCategoryPage, 11 | 12 | ArticlePage, 13 | 14 | 15 | NotFoundPage 16 | } -------------------------------------------------------------------------------- /src/pages/login/LogInPage.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | class LogInPage extends Component { 3 | state = { 4 | 5 | } 6 | 7 | render() { 8 | return ( 9 |
this is login page
10 | ); 11 | } 12 | } 13 | 14 | 15 | 16 | export {LogInPage}; -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------