Merge pull request #395 from DeKal/side-project-merge

Add new and modify side projects

modules/home/components/SideProjects.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import { getCompanies } from '~/modules/home/consts/sideProject'
+import { getProjects } from '~/modules/home/consts/sideProject'
 import Header from '~/modules/home/components/common/section/Header'
 import SectionContainer from '~/modules/home/components/common/section/Container'
 import List from '~/modules/home/components/sideProject/List'
 import Container from 'react-bootstrap/Container'
 import Row from 'react-bootstrap/Row'
 import { Translate } from 'react-localize-redux'
 
-const companyRows = getCompanies()
+const projectRows = getProjects()
 
 const SideProjects = () => (
   <SectionContainer>
@@ -20,7 +20,7 @@ const SideProjects = () => (
           <Translate id="SideProjects: SubTitle" />
         </h4>
       </Header>
-      {companyRows.map((companies, index) => (
+      {projectRows.map((companies, index) => (
         <Row key={index}>
           <List companies={companies} />
         </Row>

modules/home/components/sideProject/Dates.js

@@ -2,8 +2,7 @@ import styled from 'styled-components/macro'
 
 const Dates = styled.p`
   color: ${props => props.theme.colors.grey};
-  margin-left: 80px;
-  margin-bottom: 10px;
+  margin: 8px 0 10px 80px;
 
   @media screen and (max-width: 1000px) {
     margin-left: 0;

modules/home/components/sideProject/Item.js

@@ -8,36 +8,37 @@ import Dates from '~/modules/home/components/sideProject/Dates'
 import Bold from '~/modules/home/components/experiences/Bold'
 import { Translate } from 'react-localize-redux'
 
-const Item = ({ title, dates, description, skill }) => (
+const Item = ({ title, dates, description, skill, role }) => (
   <Container>
     <ExpIcon name="workexp" />
     <Title>
       <Translate id={title} />
     </Title>
     <Dates>
-      (<Translate id={dates} />)
+      <Translate id={role} /> (<Translate id={dates} />)
     </Dates>
-    <Description>
-      <Translate id={description} />
-    </Description>
     <Description>
       <Bold>
         <Translate id={skill} />
       </Bold>
     </Description>
+    <Description>
+      <Translate id={description} />
+    </Description>
   </Container>
 )
 
 Item.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
   skill: PropTypes.string,
-  dates: PropTypes.string
+  dates: PropTypes.string,
+  role: PropTypes.string
 }
 
 export default Item
 
-const Container = styled.li`
+const Container = styled.div`
   margin-bottom: 50px;
 
   @media screen and (max-width: 800px) {

modules/home/components/sideProject/List.js

@@ -10,6 +10,7 @@ const List = ({ companies }) =>
       <Container>
         <Item
           title={`Exp: ${company} Title`}
+          role={`Exp: ${company} Role`}
           dates={`Exp: ${company} Dates`}
           description={`Exp: ${company} Desc`}
           skill={`Exp: ${company} Skill`}
@@ -24,6 +25,6 @@ List.propTypes = {
 
 export default List
 
-const Container = styled.ul`
-  list-style-type: none;
+const Container = styled.div`
+  padding: 0 15px;
 `

modules/home/consts/experiences.js

@@ -1,8 +1,3 @@
-const row1 = ['Zalora', 'Dek']
-const row2 = ['GCS', 'GCS-intern']
-
-export const getCompanies = () => [row1, row2]
-
 export const COMPANIES = [
   { name: 'Zalora', icon: '/images/companies/zalora.png' },
   { name: 'Dek', icon: '/images/companies/dek.png' },

modules/home/consts/sideProject.js

@@ -1,4 +1,5 @@
-const row1 = ['Portfolio', 'LiveGuess']
-const row2 = ['SmartApp', 'Brand360']
+const row1 = ['BootCareer-FE', 'BootCareer-BE']
+const row2 = ['Portfolio-FE', 'Portfolio-BE']
+const row3 = ['Popswap', 'LiveGuess']
 
-export const getCompanies = () => [row1, row2]
+export const getProjects = () => [row1, row2, row3]

public/translations/en.json

@@ -42,44 +42,71 @@
   "Exp: Zalora Role": "Fullstack Software Engineer",
   "Exp: Zalora Desc": "Owning, maintaining and developing features for Zalora website on mobile devices in 6 countries. Working with state‐of‐the‐art search engine in order to ensure that every search query in Zalora delivering meaningful and helpful results for customers.",
   "Exp: Zalora Extra": "<p><strong>LITE (WEB MOBiLE)</strong></p><p><strong>Tech Stack: React CRA, Redux, Travis, DangerJS, BundleSize, Terraform, AWS</strong></p><p><ul><li><span>Optimized service worker so that it worked for 6 countries and for 3 environments (instance/staging/production) without conflicting</span></li><li> <span>Moved building process from Jenkins to AWS Codebuild and optimized building/deploying pipeline for releasing to production</span></li><li><span>Rewrited Proxy to enable easy development from any environments</span></li><li><span>Optimized/Filtered noise in error logs in Sentry</span></li><li><span>Optimized bundle size under 150KB for main and 32KB for other chunks</span></li><li><span>Added/Fixed proper eslint rule for the whole project</span></li><li><span>Built bot instance with AWS Lambda to help QA/Dev to deploy ticket easily to instance environment</span> </li></ul></p><p><strong>COSTA</strong></p><p><strong>Tech Stack: Golang, Docker, Solr, AWS ECS, Newrelic, Sentry, Grafana, AWS Cloudwatch</strong></p><p><ul><li><span>Supported A/B testing for Learning to Ranks with Solr, third party Datajet, and many other features</span></li><li><span>Reduced error rate on Newrelic to less than 1%</span></li><li><span>Helped to improve caching with in‐memory</span></li><li><span>Moved Costa architecture from in‐place deployment EC2 to ECS blue‐green deployment</span></li><li><span>Supported to refine errors and logging in Newrelic and Sentry</span></li></ul></p>",
-  "Exp: Zalora Skill": "Technical skills: ReactJS(CRA), Golang, Solr, Amazon Web Service, Terraform.",
+  "Exp: Zalora Skill": "Skills: ReactJS(CRA), Golang, Solr, Amazon Web Service, Terraform.",
   "Exp: Zalora Dates": "10/2019 – now",
   "Exp: Dek Title": "DEK Technologies",
   "Exp: Dek Role": "Fullstack Software Engineer",
   "Exp: Dek Desc": "At DEK, I’m in charge of developing an web application helping users to have a good visualization about the statistics of test cases executed by Jenkin. Also, I take the responsibility for investigating, fixing bugs and play a role of a Scrum Master in order to assist others completing their job.",
-  "Exp: Dek Skill": "Technical skills: Ymer, Nodejs, Docker, Kafka Confluence, EFK, Kubernetes, Jenkins, Cassandra",
+  "Exp: Dek Skill": "Skills: Ymer, Nodejs, Docker, Kafka Confluence, EFK, Kubernetes, Jenkins, Cassandra",
   "Exp: Dek Extra": "<p><strong>DaVis</strong></p><ul><li><span>Helped Scrum master to facilitate team, and came up with a solution to improve team performance</span></li><li><span>Maintained and developed feature for Davis, a visualization tool helping people to have a statistic view of test cases executed by Jenkins.</span></li><li><span>Launched and built Kafka connectors to actively pull the result from Jenkins using XPATH selectors and send the records to a Kafka cluster by interval.</span></li><li><span>Researched optimizing backend data query time using hadoop HDFS + Apache Hive and compared with Cassandra.</span></li><li><span>Deployed Kafka Confluence and Davis application (frontend + backend) to the provided Kubernetes cloud service.</span></li><li><span>Developed a Logging system from a local machine using EFK stack (Elasticsearch, FluentD, Kibana), deployed also in Kubernetes</span></li><li><span>Set up CI system using Jenkins and Gerrit and improve coverage of the source connector project to nearly 100% by refactoring project structure and adding Unit tests</span></li></ul>",
   "Exp: Dek Dates": "4/2018 – 10/2019",
   "Exp: GCS Title": "GCS - Industrial Printing",
   "Exp: GCS Role": "Fresher",
   "Exp: GCS Desc": "<ul><li>Maintained and developed new features for the desktop application project helping to operate industrial printing machines using Java Swing.</li><li>Drew a design diagram, writing test cases, fixed bugs on development tracks, and customer&rsquo;s requests.</li><li>Worked closely with SE,QA,PM to resolve issues raised by customers asap.</li></ul>",
-  "Exp: GCS Skill": "Technical skills: Java, Java Swing, UML Designs, Maintenance System",
+  "Exp: GCS Skill": "Skills: Java, Java Swing, UML Designs, Maintenance System",
   "Exp: GCS Dates": "7/2017 – 4/2018",
   "Exp: GCS-intern Role": "Intern",
   "Exp: GCS-intern Title": "GCS - Surveillance System",
   "Exp: GCS-intern Desc": "<ul><li>Developed the surveillance system using Spring MVC framework in combination with Hibernate and PostgreSQL. The system will display recorded images from the camera after running them through the CV algorithm.</li><li>Worked as the core member of the team and helped to build the project structure from the beginning.</li><li>Presented the demo of the project to stakeholders and clients by the end of each sprint.</li></ul>",
-  "Exp: GCS-intern Skill": "Technical skills: Spring MVC, Java, Hibernate, PostgreSQL, HTML/CSS, JQuery, JS, Thymeleaf.",
+  "Exp: GCS-intern Skill": "Skills: Spring MVC, Java, Hibernate, PostgreSQL, HTML/CSS, JQuery, JS, Thymeleaf.",
   "Exp: GCS-intern Dates": "6/2016 – 10/2016",
-  "SideProjects: Title": "Side Projects",
-  "SideProjects: SubTitle": "Side Project jobs",
-  "Exp: Portfolio Title": "Porfolio",
-  "Exp: Portfolio Desc": "As a web developer, everyone needs for himself a real portfolio for others to look into. In my free time, I decided to build my portfolio project from scratch using the technology that I know best ReactJS and Spring MVC. The project was designed with a front-end to show case my CV, and the back end was under-developing with Spring MVC.",
-  "Exp: Portfolio Skill": "Technical skills: ReactJS, NextJS, Spring MVC/ Gradle, DangerJS, CircleCI, Eslint, Now",
-  "Exp: Portfolio Dates": "11/2019 – now",
+  "SideProjects: Title": "Pet Projects",
+  "SideProjects: SubTitle": "Cool outside work stuff",
+  "Exp: Portfolio-FE Title": "Porfolio",
+  "Exp: Portfolio-FE Role": "Owner",
+  "Exp: Portfolio-FE Desc": "<ul><li><p>Built my portfolio project from scratch using the cutting‐edge framework Nextjs.</p></li><li><p>Configured app deployment with Vercel.</p></li><li><p>Configured CI/CD pipeline with Github, DangerJS, Vercel, CircleCI, and Scrutinizer</p></li><li><p>Configured performance CI tool with LightHouse. The performance test will run on opening/updating a pull request.</p></li><li><p>Adding simple release mechanism and CHANGLOG.md to track the versions.</p></li></ul>",
+  "Exp: Portfolio-FE Skill": "Skills: Nextjs, DangerJS, CircleCI, Vercel, Lighthouse, Scrutinizer",
+  "Exp: Portfolio-FE Dates": "11/2019 – now",
+  "Exp: Portfolio-BE Title": "Illuminati",
+  "Exp: Portfolio-BE Role": "Owner",
+  "Exp: Portfolio-BE Desc": "<ul><li><p>Built an api backend using Spring MVC Framework allows frontend to fetch neccessary configs and blogs from MongoDB.</p></li><li><p>Integrated a CMS frontend to allow users to easily do modifications/add/update data.</p></li><li><p>Built mechanism to include CMS frontend bundle from Reactjs into static resources to serve with Spring MVC.</p></li><li><p>Configured CI/CD pipeline with Github, DangerJS, CircleCI, Heroku, and Codecov.</p></li></ul>",
+  "Exp: Portfolio-BE Skill": "Skills: Spring MVC, Java, Heroku, Swagger, Codecov, Gradle, React CRA, Redux, MongoDB",
+  "Exp: Portfolio-BE Dates": "11/2019 – now",
+  "Exp: BootCareer-FE Title": "Jobseeker dashboard",
+  "Exp: BootCareer-FE Role": "Team Lead",
+  "Exp: BootCareer-FE Desc": "<ul><li><p>An application helps people from non‐traditional backgrounds and underrepresented communities to get jobs in tech</p></li><li><p>Re‐architect the old application with ReactJS and built a proper project structure based module and good global state management flow.</p></li><li><p>Broke down the design part by part and coordinated team members to do the task.</p></li><li><p>Setup CI/CD with Circle CI, Eslist, Netlify, and Storybook, to isolate components for independently development.</p></li><li><p>Built a release pipeline with CHANGLOG and github tags.</p></li></ul>",
+  "Exp: BootCareer-FE Skill": "Skills: React CRA, Redux Toolkit, Storybook, React Testing library, CircleCI, Netlify",
+  "Exp: BootCareer-FE Dates": "08/2020 – now",
+  "Exp: BootCareer-BE Title": "Jobseeker Userservice",
+  "Exp: BootCareer-BE Role": "Team lead",
+  "Exp: BootCareer-BE Desc": "<ul><li><p>A Nodejs Application to store data of candidate and user signing up to the system.</p></li><li><p>Re‐architect and convert the whole application built with Nodejs Express Framework from Javascript to Typescript.</p></li><li><p>Integrated Swagger with the backend service.</p></li><li><p>Setup CI/CD with Github action, Eslist, and Heroku pipeline.</p></li><li><p>Built a new project using terraform to manage the infrastructure of the whole organization (Infrastructure as Code).</p></li></ul>",
+  "Exp: BootCareer-BE Skill": "Skills: Typescript, Nodejs, Express, Toolkit, Eslint, Terraform, Github action, Heroku, MongoDB",
+  "Exp: BootCareer-BE Dates": "08/2020  – now",
+
   "Exp: LiveGuess Title": "Live Guess",
-  "Exp: LiveGuess Desc": "During my free time, I’m in charge of a freelance team to develop a Real-time Web Application using ReactJs + Webpack. The project was using pulling model, to pull data continuously from a back-end to give users a real-time experience. The application was delivered by Docker, and build into multiple platforms Android and IOS with Apache Cordova.",
-  "Exp: LiveGuess Skill": "Technical skills: React/Redux, Docker, NodeJS, Webpack, Apache Cordova.",
+  "Exp: LiveGuess Desc": "<ul><li><p>Built a system to allow users guessing based on events using ReactJS.</p></li><li><p>Use long‐polling to sync events continuously with the current time.</p></li><li><p>Create the UI with interactive timer and lively interaction.</p></li><li><p>Used Cordorva to build an application version based on the web mobile app for android</p></li><li><p>Built docker container to deploy directly on Client server</p></li></ul>",
+  "Exp: LiveGuess Skill": "Skills: React/Redux, Docker, NodeJS, Cordova.",
   "Exp: LiveGuess Dates": "3/2019 – 5/2019",
+  "Exp: LiveGuess Role": "Freelance",
+
+  "Exp: Popswap Title": "Popswap",
+  "Exp: Popswap Desc": "<ul><li><p>Maintained the application allowing people to swipe for swapping clothes and items like Tinder.</p></li><li><p>Refactored/redesigned the application with new looks.</p></li><li><p>Restructure the structure of the React Native application, adds new scripts to deploy, remove tricky hack of the old owner and create a smooth environment for development.</p></li><li><p>Removed old/stale features that existed in the application.</p></li><li><p>Added integration with swish bank and developed new premium features with Google and Apple store.</p></li></ul>",
+  "Exp: Popswap Dates": "06/2020 – 09/2020",
+  "Exp: Popswap Role": "Freelance",
+  "Exp: Popswap Skill": "Skills: React Native, Redux, Android, IOS",
+
+  "Project: Title": "Projects",
+  "Project: SubTitle": "Something cool to look back!!!",
+  "Blogs": "Blogs",
+  "See more": "See more",
+
+  "###!!!!!!!!Deprecated": "Bellow text are not used anymore",
   "Exp: SmartApp Title": "SmartApp Technology",
   "Exp: SmartApp Desc": "Working on the multi-platform framework Angular-JS, I handle the task of developing the application to summarize agency’s information from Masan company as the report for higher executive in the line to review and analyze.",
   "Exp: SmartApp Skill": "Technical skills: Angular-JS, HTML/CSS, JQuery.",
   "Exp: SmartApp Dates": "2/2017 – 5/2017",
   "Exp: Brand360 Title": "Brand360",
   "Exp: Brand360 Desc": "As a team leader, I operate the team to develop a web for Brand 360 company inorder to broadcast their images in Viet Nam. The idea is to use Wordpress template in order to have a fast and user-friendly web/admin UI.",
   "Exp: Brand360 Skill": "Technical skills: Wordpress template, HTML, CSS, JS.",
-  "Exp: Brand360 Dates": "2/2016 – 5/2016",
-  "Project: Title": "Projects",
-  "Project: SubTitle": "Something cool to look back!!!",
-  "Blogs": "Blogs",
-  "See more": "See more"
+  "Exp: Brand360 Dates": "2/2016 – 5/2016"
 }