test

.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends": ["plugin:react/jsx-runtime"]
+  }

.travis.yml

@@ -4,8 +4,6 @@ node_js:
   node
 before_script:
   npm run build
-script:
-  npm test
 deploy:
   provider: pages
   skip_cleanup: true
@@ -15,4 +13,4 @@ deploy:
   on:
     branch: release
 notifications:
-  email: false
+  email: false

package.json

@@ -1,15 +1,13 @@
 {
   "name": "mrtuvn",
-  "version": "4.0.0",
-  "description": "My personal homepage",
+  "version": "1.1.0",
+  "private": true,
+  "description": "My personal portfolio",
   "main": "index.js",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
-  "config": {
-    "port": 3000
-  },
   "author": "Tu Nguyen [email protected] https://mrtuvn.github.io",
   "license": "MIT",
   "homepage": "http://mrtuvn.github.io",
@@ -22,17 +20,26 @@
   },
   "dependencies": {
     "classnames": "2.2.6",
-    "jquery": "3.4.1",
     "local-storage-parser": "1.1.0",
-    "lodash-es": "4.17.11",
+    "lodash-es": "4.17.21",
     "magnific-popup": "1.1.0",
     "no-sheet-reset": "2.0.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-router-dom": "5.0.0",
     "react-scripts": "3.0.1"
   },
   "devDependencies": {
     "@types/react": "16.8.17"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }

src/components/contact/index.jsx

@@ -8,7 +8,7 @@ const imgSrc = require.context('./../../img/pictures', true);
 
 const Contacts = () => {
 	const {ga} = window;
-	const MAIL_NAME = 'ladiesman9x@gmail.com';
+	const MAIL_NAME = 'tuna9x.it@gmail.com';
 	const SKYPE_USERNAME = 'tunguyenanhvn';
 	const GITHUB_USERNAME = 'mrtuvn';
 	const LINKEDIN_USERNAME = 'mrtuvn';
@@ -47,7 +47,7 @@ const Contacts = () => {
 							iconName="gmail"
 							size={14}
 							title={MAIL_NAME}
-							text={['', <span className="link-text--non-accent">ladiesman9x</span>, '@gmail.com' ]}
+							text={['', <span className="link-text--non-accent">tuna9x.it</span>, '@gmail.com' ]}
 						/>
 					</div>
 					<div className="contact-section M6 L4">
@@ -62,7 +62,7 @@ const Contacts = () => {
 									iconName="gmail"
 									size={14}
 									title={MAIL_NAME}
-									text={['', <span className="link-text--non-accent">ladiesman9x</span>, '@gmail.com' ]}
+									text={['', <span className="link-text--non-accent">tuna9x.it</span>, '@gmail.com' ]}
 								/>
 							</div>
 							<h3 className="contact-section-title font-family--emphasis X12">

src/components/footer/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
  import './index.css';
 
- const logoSrc = require('./../../img/logo/scythe-and-spade.svg');
+ import logoSrc from './../../img/logo/scythe-and-spade.svg';
 
  const Index = () => {
     const {ga} = window;
@@ -32,7 +32,7 @@ import React from 'react';
             <p className="footer-copyright none-to-S">
 				<span className="text-size--xs">
 					Made with&nbsp;
-					<a 
+					<a
 						className="link"
                         href={LOVE_URL}
                         onClick={ga.bind(null, 'send', 'event', 'footer', 'click_love', {transport: 'beacon'})}
@@ -59,4 +59,4 @@ import React from 'react';
     );
 };
 
- export default Index
+ export default Index

src/components/header/index.jsx

@@ -1,16 +1,22 @@
 import React from 'react';
-
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+    Link
+} from "react-router-dom";
 import './index.css';
 
+import Projects from '../projects/index.jsx';
 import Logo from '../logo/index.jsx';
 
-//const imgSrc = require.context('./../../img/pictures', true);
-
 const dates = {
 	now: new Date(),
 	birthday: new Date(1991, 9, 21),
 };
 
+const realAge = timePassed(dates.birthday);
+
 function timePassed(date) {
 	const currentMonth = dates.now.getMonth();
 	const dateMonth = date.getMonth();
@@ -31,10 +37,10 @@ const getRandomArbitrary = (min, max) => {
 };
 
 class Header extends React.Component {
-	text = `Hey there! My name is Tu. I'm Frontend Engineer. Preach and practice automation. 
-	Staying up to date with rapidly changeable web development. 
-	Involvement in sharing ideas, sketches of prototyping, complex architecture, continuous integration and design is awesome. 
-	I'm living in Hanoi. Have ${timePassed(dates.birthday)} of life behind my back.`;
+	text = `Hey there! My name is Tu. I'm Frontend Engineer. Preach and practice automation.
+	Staying up to date with rapidly changeable web development.
+	Involvement in sharing ideas, sketches of prototyping, complex architecture, continuous integration and design is awesome.
+	I'm living in Hanoi. Have ${realAge} of life behind my back.`;
 
     state = {
         finished: false,
@@ -113,28 +119,36 @@ class Header extends React.Component {
 								</h2>
 							</div>
 							<div className="nav-wrap">
-								<nav className="nav">
-									<a
-										className="action action--active nav-link"
-										onClick={ga.bind(null, 'send', 'event', GA.navigation, 'click_home')}
-										rel="noopener noreferrer"
-										href="/"
-									>Home</a>
-									<a
-										className="action nav-link"
-										href="https:/mrtuvn.blogspot.com"
-										onClick={ga.bind(null, 'send', 'event', GA.navigation, 'click_blog', {transport: 'beacon'})}
-										rel="noopener noreferrer"
-										target="_blank"
-									>Blog</a>
-									<a
-										className="action nav-link"
-										onClick={ga.bind(null, 'send', 'event', GA.navigation, 'click_projects', {transport: 'beacon'})}
-										rel="noopener noreferrer"
-										href="https://github.com/mrtuvn?tab=repositories"
-										target="_blank"
-									>Projects</a>
-								</nav>
+                                <Router>
+                                    <nav className="nav">
+                                        <Link
+                                            className="action action--active nav-link"
+                                            onClick={ga.bind(null, 'send', 'event', GA.navigation, 'click_home')}
+                                            rel="noopener noreferrer"
+                                            to="/"
+                                        >Home</Link>
+                                        <Link
+                                            className="action nav-link"
+                                            to="https:/mrtuvn.blogspot.com"
+                                            onClick={ga.bind(null, 'send', 'event', GA.navigation, 'click_blog', {transport: 'beacon'})}
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                        >Blog</Link>
+                                        <Link
+                                            className="action nav-link"
+                                            onClick={ga.bind(null, 'send', 'event', GA.navigation, 'click_projects', {transport: 'beacon'})}
+                                            rel="noopener noreferrer"
+                                            to="/projects"
+                                            target="_blank"
+                                        >Projects</Link>
+                                    </nav>
+
+                                    <Switch>
+                                        <Route path="/projects">
+                                            <Projects />
+                                        </Route>
+                                    </Switch>
+                                </Router>
 							</div>
 						</div>
 					</div>
@@ -162,7 +176,7 @@ class Header extends React.Component {
 								onClick={ga.bind(null, 'send', 'event', GA.header, 'click_hanoi', {transport: 'beacon'})}
 								target="blank"
 							>Hanoi</a>
-							{`. Have ${timePassed(dates.birthday)} of life behind my back`}
+							{`. Have ${realAge} of life behind my back`}
 							<br/>
 						</p>
 					</div>}

src/components/logo/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import './index.css';
 
-const logoSrc = require('./../../img/logo/scythe-and-spade.svg');
+import logoSrc from './../../img/logo/scythe-and-spade.svg';
 
 const gags = [
 	'If you know what I mean',
@@ -19,7 +19,8 @@ const gags = [
 	'If you know what I mean',
 	'Nope',
 	'Yes!',
-	'Fuck it, Dude, let\'s go bowling'
+	'Fuck it, Dude, let\'s go bowling',
+    'Let do this!'
 ];
 
 const {ga} = window;
@@ -75,4 +76,4 @@ export default class Logo extends React.Component {
 			</span>
 		);
 	}
-}
+}

src/components/projects/index.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Projects = ({ props }) => {
+    return (
+        <>
+            <p>This is Project page</p>
+        </>
+    )
+}
+
+export default Projects

src/components/skills/index.jsx

@@ -32,7 +32,6 @@ export default class Skills extends React.Component {
         import('./skills.json')
             .then(
                 ({default: data}) => {
-                    console.log();
                     const name = localStorageParser.get(LS_NAME).name;
                     let skill = data[0]; // set default value to first occurrence
 

src/components/skills/partials/skills-card.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import Stars from '../partials/skills-card/skills-card-stars.jsx';
 import Description from '../partials/skills-card/skills-card-description.jsx';
 
+// Import all images in image folder
+
 const imgSrc = require.context('../logos', true);
 
 const SkillsCard = ({ skill }) => (

src/components/skills/skills.json

@@ -2,8 +2,8 @@
 	{
 		"name": "HTML5",
 		"level": 5,
-		"description": "In a good old relationship. Started with XHTML and HTML4 a long time ago I was excited when HTML5 arrived, simpler and purer, more semantic with a wide API.",
-		"status": "Well... Always work with it",
+		"description": "In a good old relationship. Started with XHTML and HTML4 a long time ago I was excited when HTML5 arrived, simpler and purer, more semantic with a wide API. It's foundation of every website nowaday",
+		"status": "Always work with it",
 		"image": "html5.svg",
 		"categories": ["languages", "client", "templates"]
 	},
@@ -26,14 +26,14 @@
 	{
 		"name": "CSS",
 		"level": 4,
-		"description": "Hate when people say \"CSS is simple\". CSS is a mess. One big object of mess with different browser interpretations. Usually. Unless you are using bem/smacss, preprocessors, postprocessors and scalable, modular architecture. In right hands CSS can be light, clean, fast & beautifull.",
-		"status": "In love",
+		"description": "Hate when people say \"CSS is simple\". CSS is a mess. One big object of mess with different browser interpretations. Usually. Unless you are using bem/smacss, preprocessors, postprocessors and scalable, modular architecture. In right hands CSS can be light, clean, fast & beautifull. Write it with care",
+		"status": "Loved",
 		"image": "css3.svg",
     "categories": ["languages", "client", "styles"]
 	},
   {
     "name": "Sass",
-    "level": 3,
+    "level": 4,
     "description": "Libsass, .scss, mixins, functions, extends,  placeholders, default vars, var overrides, maps - if you do not use all of this, you are strange.",
     "status": "Robust. Interesting",
     "image": "sass.svg",
@@ -81,15 +81,15 @@
   },
 	{
 		"name": "JavaScript",
-		"level": 3,
-		"description": "It's very difficult to evaluate knowledge of this language, specially if mix to vanilla understanding libs & frameworks. Good I guess.",
-		"status": "Most Interesting",
+		"level": 4,
+		"description": "It's very difficult to evaluate knowledge of this language, specially if mix to vanilla understanding libs & frameworks. Good I guess. Javascript now used everywhere",
+		"status": "In Love",
 		"image": "javascript.svg",
     "categories": ["languages", "javascript", "client"]
 	},
   {
     "name": "jQuery",
-    "level": 4,
+    "level": 3,
     "description": "Hard to imagine site without this lib. Third major version relased & still actual. Spent a lot of time with it. Hate it for callback hell, love it for simple & clean architecture.",
     "status": "In good relationships",
     "image": "jquery.svg",
@@ -122,7 +122,7 @@
   {
     "name": "Require.js",
     "level": 4,
-    "description": "Too obsolote nowadays, but still widely used. Version 2+ was huge speed jump, but better to setup webpack.",
+    "description": "Too obsolote nowadays, but still widely used. Version 2+ was huge speed jump, but better to setup webpack. Used a lot while work with magento 2",
     "status": "Not especially interesting",
     "image": "requirejs.svg",
     "categories": ["tools", "building", "javascript"]
@@ -144,10 +144,10 @@
     "categories": ["frameworks", "javascript"]
   },
 	{
-		"name": "Angular.js",
+		"name": "Angular",
 		"level": 2,
-		"description": "Previous version of this site was written on Angular. It was kinda easy to do, but the size, blinking & performance issues made bad experience. Angular 2 was promising, but no. Better use React.js or if you don't like shadow DOM vue.js",
-		"status": "Not interesting",
+		"description": "Angular 9 was promising, Well-writen by good architecture",
+		"status": "Interesting",
 		"image": "angular.svg",
     "categories": ["frameworks", "javascript"]
 	},
@@ -185,7 +185,7 @@
 	},
   {
     "name": "Node.js",
-    "level": 1,
+    "level": 2,
     "description": "Probably Node.js should occupy one of the highest priorities. But not at the moment. Widely use it infrastructure, but not writing on it.",
     "status": "Interesting",
     "image": "nodejs.svg",
@@ -338,7 +338,7 @@
 	{
 		"name": "Sublime Text",
 		"level": 5,
-		"description": "JetBrains IDE is like business class car, but why you need it if you are going to buy milk? Pick this moto and go.",
+		"description": "JetBrains IDE is like business class car, but why you need it if you are going to buy milk? Pick this moto and go. Most fast IDE available. Everything so smooth",
 		"status": "When you are lazy to open phpStorm",
 		"image": "sublimetext.png",
     "categories": ["IDE"]