update profile

htdangkhoa · Dec 20, 2019 · 4eed7f7 · 4eed7f7
1 parent 269ef76
commit 4eed7f7
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 77 deletions.
diff --git a/src/client/pages/Introduce/Projects/index.js b/src/client/pages/Introduce/Projects/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import chunk from 'lodash/chunk';
+
+import Layout from 'components/Layout';
+import MdViewer from 'components/MdViewer';
+
+import { projects } from '../profile';
+
+const projectsGrouped = chunk(projects, 2);
+
+const Projects = ({ route: { title } }) => {
+  return (
+    <Layout title={title} needLogin={false}>
+      <MdViewer source='# Projects' />
+
+      {projectsGrouped.map((group, i) => {
+        return (
+          <div className='row' key={i}>
+            {group.map((item, j) => {
+              return (
+                <div className='col col-12 col-md-6' key={j}>
+                  <MdViewer source={item.source.trim()} />
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </Layout>
+  );
+};
+
+export default Projects;
diff --git a/src/client/pages/Introduce/index.js b/src/client/pages/Introduce/index.js
@@ -1,15 +1,56 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import chunk from 'lodash/chunk';
+import take from 'lodash/take';
 
 import Layout from 'components/Layout';
 import MdViewer from 'components/MdViewer';
 
-import source from './profile';
+import './styles.scss';
+
+import { profile, projects } from './profile';
+
+const newest = take(projects, 3);
+
+if (projects.length > 3) newest.push(null);
+
+const projectsGrouped = chunk(newest, 2);
 
 const Introduce = ({ route: { title } }) => {
   return (
     <>
       <Layout title={title} needLogin={false}>
-        <MdViewer source={source} />
+        <MdViewer source={profile} />
+
+        <MdViewer source='## Projects' />
+
+        {projectsGrouped.map((group, i) => {
+          return (
+            <div className='row' key={i}>
+              {group.map((item, j) => {
+                if (!item) {
+                  return (
+                    <Link
+                      to='/introduce/projects'
+                      className='col col-12 col-md-6 btn__more'
+                      key={j}>
+                      <div className='text-center'>
+                        <i className='fas fa-ellipsis-h fa-lg'></i>
+                        <p>More</p>
+                      </div>
+                    </Link>
+                  );
+                }
+
+                return (
+                  <div className='col col-12 col-md-6' key={j}>
+                    <MdViewer source={item.source.trim()} />
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
       </Layout>
     </>
   );

diff --git a/src/client/pages/Introduce/profile.js b/src/client/pages/Introduce/profile.js
@@ -5,7 +5,7 @@ const site = (link: string, display?: string = 'Site') =>
 const download = (link: string, display?: string = 'Download') =>
   site(link, display);
 
-export default `
+export const profile = `
 # Introduce
 # **Huỳnh Trần Đăng Khoa**
 *[Steenify](https://steenify.com)* / *[Github](http://github.com/htdangkhoa)* / *[Linkedin](https://www.linkedin.com/in/khoa-đăng-7575a6136)*
@@ -54,78 +54,114 @@ GDG Vietnam Certificate of completion Android course.
 - Join to project, develop and maintenance.
 - Communicate with the customer to retrieve the request.
 - Develop, build & release application.
-
-## Recent Projects
-**TMWorld | Aug, 2019 - Nov, 2019 | ${site('https://tmworld.app')} | ${download(
-  'https://play.google.com/store/apps/details?id=com.tmworld.tmworld&hl=en',
-)}**
-\`Node.js\` / \`Javascript\` / \`ExpressJS\` / \`ES6\` / \`MongoDB\` / \`AWS\`
-Search for clubs easily. View club's upcoming meetings. Contact clubs in one click. Club visiting has never been so convenient. Never miss a meeting again.
-- Development
-- Review code
-- Optimize code
-- Bug Fixing
-
------
-
-**DreValet & DreFleet | Dec, 2018 - Sep, 2019 | ${download(
-  'https://play.google.com/store/apps/details?id=com.drevalet.dre&hl=en',
-  'Download DreValet',
-)} | ${download(
-  'https://play.google.com/store/apps/details?id=com.drevalet.drevalet',
-  'Download DreFleet',
-)}**
-\`Android\` / \`Kotlin\` / \`RxJava\` / \`RxAndroid\` / \`Firebase\` / \`Realm\`
-The app that gets you a trusted valet at the tap of a button! Enjoy your night out – we’ll get both you and your car home safely.
-- Development
-- Review code
-- Optimize code
-- Bug Fixing
-
------
-
-**MarineTime - MPA | Jul, 2018 - May, 2019 | ${download(
-  'https://play.google.com/store/apps/details?id=sg.gov.mpa.marsg&hl=en',
-)}**
-\`Android\` / \`RxJava\` / \`RxAndroid\`
-This is the app that helps people to keep track of vessel time.
-- Analysis
-- Development
-- Review code
-- Optimize code
-- Bug Fixing
-
------
-
-**EMA Components | Mar, 2018 - Apr, 2019**
-\`Android\`
-This project to provide component is customized.
-- Development
-- Review code
-- Optimize code
-- Bug Fixing
-
------
-
-**8days | Jun, 2017 - Jul, 2018 | ${download(
-  'https://play.google.com/store/apps/details?id=co.vn.the8days&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1',
-)}**
-\`Android\` / \`GraphQL\` / \`AES En-Decryption\` / \`AWS\`
-Application is a solution to help worker at factory can other food using QR Code technology.
-- Analysis
-- Development
-- Review code
-- Optimize code
-- Bug Fixing
-
------
-
-**Recpic | Apr, 2016 - May, 2017 | ${download(
-  'https://play.google.com/store/apps/details?id=com.codeatnite.recpic',
-)}**
-\`Ionic\` / \`Android\` / \`iOS\` / \`HTML\` / \`SCSS\` / \`Javascript\`
-This is the app that helps people to manage their spending.
-- Development
-- Optimize code
-- Bug Fixing
 `;
+
+export const projects = [
+  {
+    pinned: true,
+    source: `
+    **ERB - Express React boilerplate | Oct, 2019 - Dec, 2019 | ${site(
+      'https://htdangkhoa-erb.herokuapp.com',
+    )} | ${download('https://github.com/htdangkhoa/erb', 'Github')}**
+    \`Express\` / \`React\` / \`Node.js\` / \`ES6\` / \`Universal\`
+    :fire: This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
+    - Development
+    - Review code
+    - Optimize code
+    - Bug Fixing
+    - Deploy
+    `,
+  },
+  {
+    pinned: false,
+    source: `
+    **TMWorld | Aug, 2019 - Nov, 2019 | ${site(
+      'https://tmworld.app',
+    )} | ${download(
+      'https://play.google.com/store/apps/details?id=com.tmworld.tmworld&hl=en',
+    )}**
+    \`Node.js\` / \`Javascript\` / \`ExpressJS\` / \`ES6\` / \`MongoDB\` / \`AWS\`
+    Search for clubs easily. View club's upcoming meetings. Contact clubs in one click. Club visiting has never been so convenient. Never miss a meeting again.
+    - Development
+    - Review code
+    - Optimize code
+    - Bug Fixing
+    - Deploy
+    `,
+  },
+  {
+    pinned: false,
+    source: `
+    **DreValet & DreFleet | Dec, 2018 - Sep, 2019 | ${download(
+      'https://play.google.com/store/apps/details?id=com.drevalet.dre&hl=en',
+      'Download DreValet',
+    )} | ${download(
+      'https://play.google.com/store/apps/details?id=com.drevalet.drevalet',
+      'Download DreFleet',
+    )}**
+    \`Android\` / \`Kotlin\` / \`RxJava\` / \`RxAndroid\` / \`Firebase\` / \`Realm\`
+    The app that gets you a trusted valet at the tap of a button! Enjoy your night out – we’ll get both you and your car home safely.
+    - Development
+    - Review code
+    - Optimize code
+    - Bug Fixing
+    `,
+  },
+  {
+    pinned: false,
+    source: `
+    **MarineTime - MPA | Jul, 2018 - May, 2019 | ${download(
+      'https://play.google.com/store/apps/details?id=sg.gov.mpa.marsg&hl=en',
+    )}**
+    \`Android\` / \`RxJava\` / \`RxAndroid\`
+    This is the app that helps people to keep track of vessel time.
+    - Analysis
+    - Development
+    - Review code
+    - Optimize code
+    - Bug Fixing
+    `,
+  },
+  {
+    pinned: false,
+    source: `
+    **EMA Components | Mar, 2018 - Apr, 2019**
+    \`Android\`
+    This project to provide component is customized.
+    - Development
+    - Review code
+    - Optimize code
+    - Bug Fixing
+    `,
+  },
+  {
+    pinned: false,
+    source: `
+    **8days | Jun, 2017 - Jul, 2018 | ${download(
+      'https://play.google.com/store/apps/details?id=co.vn.the8days&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1',
+    )}**
+    \`Android\` / \`GraphQL\` / \`AES En-Decryption\` / \`AWS\`
+    Application is a solution to help worker at factory can other food using QR Code technology.
+    - Analysis
+    - Development
+    - Review code
+    - Optimize code
+    - Bug Fixing
+    `,
+  },
+  {
+    pinned: false,
+    source: `
+    **Recpic | Apr, 2016 - May, 2017 | ${download(
+      'https://play.google.com/store/apps/details?id=com.codeatnite.recpic',
+    )}**
+    \`Ionic\` / \`Android\` / \`iOS\` / \`HTML\` / \`SCSS\` / \`Javascript\`
+    This is the app that helps people to manage their spending.
+    - Development
+    - Optimize code
+    - Bug Fixing
+    `,
+  },
+].sort((a, b) => {
+  return Number(b.pinned) - Number(a.pinned);
+});
diff --git a/src/client/pages/Introduce/styles.scss b/src/client/pages/Introduce/styles.scss
@@ -0,0 +1,7 @@
+.btn__more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5em;
+  color: var(--primary__text);
+}
diff --git a/src/client/vendor/index.js b/src/client/vendor/index.js
@@ -2,3 +2,4 @@ import './bootstrap';
 import './fontawesome';
 import './react-toastify';
 import './react-mde';
+import '../themes/global.scss';
diff --git a/src/routes.js b/src/routes.js
@@ -9,6 +9,7 @@ import {
 } from 'pages/Post/PostDetail/action';
 import CreatePost from 'pages/Post/CreatePost';
 import Introduce from 'pages/Introduce';
+import Projects from 'pages/Introduce/Projects';
 import Contact from 'pages/Contact';
 import NotFound from 'pages/NotFound';
 import App from './client/app';
@@ -47,6 +48,11 @@ export default [
         component: Register,
         title: 'Register',
       },
+      {
+        path: '/introduce/projects',
+        component: Projects,
+        title: 'Projects',
+      },
       {
         path: '/introduce',
         component: Introduce,