DeKal · DeKal · Dec 2, 2019 · Nov 27, 2019 · Nov 27, 2019 · Dec 1, 2019
diff --git a/pages/index.js b/pages/index.js
@@ -3,7 +3,7 @@ import React, { Fragment } from 'react'
 import Head from '~views/components/Head'
 import Nav from '~/views/components/Navbar'
 import Home from '~/views/components/Home'
-// import About from '~/views/components/About'
+import About from '~/views/components/About'
 // import Service from '~/views/components/Service'
 // import Project from '~/views/components/Project'
 // import Certification from '~/views/components/Certification'
@@ -15,8 +15,8 @@ const HomePage = () => (
     <Head />
     <Nav />
     <Home />
-    {/*<About />
-    <Service />
+    <About />
+    {/*<Service />
     <Project />
     <Certification />
     <Contact /> */}

diff --git a/public/translations/en.json b/public/translations/en.json
@@ -7,5 +7,11 @@
   "Experiences": "Experiences",
   "Certifications": "Certifications",
   "Projects": "Projects",
-  "Contacts": "Contacts"
+  "Contacts": "Contacts",
+  "About me": "About me",
+  "About Me: Subtext": "Well skip it if you&apos;re bored!!",
+  "About me: Card Info Verse 1": "Exposing to problem solving at a very young age, I passionate with disentangling sticky situations that can be occured in software engineer as well as real life. My little hobby is to find solution for competitive problems using optimized algorithm. I also have great interest in software architecture, and always seek to learn new things. Down to earth, I am human. I do find it interested to go cycling, jogging, reading books, listen to music, and stuffs that a normal human being would love to do.",
+  "About me: Card Info Quote": "Where there&apos;s a will, there&apos;s a way",
+  "About me: Card Info Verse 2": "I have the believe that all the problems in the world will be solved as long as you keep the positive mental attitude and a cold head.",
+  "About me: Current status": "Available for Freelance job"
 }
diff --git a/public/translations/vn.json b/public/translations/vn.json
@@ -7,5 +7,11 @@
   "Experiences": "Kinh nghiệm",
   "Certifications": "Chứng chỉ",
   "Projects": "Dự án",
-  "Contacts": "Liên lạc"
+  "Contacts": "Liên lạc",
+  "About me": "Về mình",
+  "About Me: Subtext": "Bạn có thể bỏ qua nếu thích :P",
+  "About me: Card Info Verse 1": "Từ lớp 8 mình đã có cơ hội tiếp xúc nhiều với các ngôn ngữ lập trình, chẳng hạn như Pascal. Vì có xuất thân là dân chuyên tin nên thật sự mình rất thích việc lập trình giải thuật. Bây giờ thì mình không tiếp xúc nhiều với thuật toán nữa, mà hứng thú lớn nhất bây giờ là về Software Architect cùng với các công nghệ mới. Ngoài ra thì mình cũng như các bạn, thích coi manga, xem film, đọc truyện, đạp xe,...",
+  "About me: Card Info Quote": "Có chí thì nên",
+  "About me: Card Info Verse 2": "Mình xuất phát từ base số 0 (không biết gì về lập trình) cho tới khi đam mê nó, nên luôn tâm đắc 1 điều duy nhất này: có cố gắng thì sẽ nên chuyện.",
+  "About me: Current status": "Có Job gì hay thì hú mình nha !!!"
 }
diff --git a/styles/blocks/about.sass b/styles/blocks/about.sass
@@ -1,38 +1,6 @@
-// About section  - container for "about me" card
-.about-section
-	position: relative
-	margin-top: -200px
 
 // Card with content, half-positioned over hero image section
 .about-card
-	box-shadow: 2px 2px 4px -2px $color-dark
-	+gs-column(9)
-	float: none
-	margin: 0 auto;
-
+	+gs-column(9)	
 	@media screen and (max-width: 800px)
 		+gs-column(12)
-		float: none
-
-	&__header
-		padding: 20px
-		background-color: $color-accent
-		& h2, & h4
-			color: $color-light
-
-	&__info
-		padding: 20px
-		background-color: $color-light
-		& blockquote p
-			margin: 20px 0 20px 20px
-			font-family: $font-serif
-			font-style: italic
-
-		& &-status
-			margin-top: 20px
-			padding-top: 10px
-			font-weight: normal
-			border-top: 1px dashed $color-darken
-			& span
-				font-weight: bold
-				text-transform: uppercase
diff --git a/styles/helpers/variables.sass b/styles/helpers/variables.sass
@@ -1,5 +1,5 @@
 //Font variables
-$font-sans: 'Open Sans', Tahoma, Verdana, Arial, sans-serif
+$font-sans: 'open sans', Tahoma, Verdana, Arial, sans-serif
 $font-serif: Georgia, Times, "Times New Roman", serif
 $font-condensed: 'Open Sans Condensed', Tahoma, Verdana, Arial, sans-serif
 

diff --git a/views/components/About.js b/views/components/About.js
@@ -1,39 +1,25 @@
-import * as React from 'react'
+import React from 'react'
+import { ABOUT } from '~/consts/pages'
+import styled from 'styled-components/macro'
+import CardHeader from '~/views/components/about/CardHeader'
+import CardInfo from '~/views/components/about/CardInfo'
 
 const About = () => (
-  <section className="about-section" id="about">
-    <div className="container">
-      <div className="about-card">
-        <header className="about-card__header">
-          <h2>About me</h2>
-          <h5>Well skip it if you&apos;re bored!!</h5>
-        </header>
-        <div className="about-card__info">
-          <p>
-            Exposing to problem solving at a very young age, I passionate with
-            disentangling sticky situations that can be occured in software
-            engineer as well as real life. My little hobby is to find solution
-            for competitive problems using optimized algorithm. I also have
-            great interest in software architecture, and always seek to learn
-            new things. Down to earth, I am human. I do find it interested to go
-            cycling, jogging, reading books, listen to music, and stuffs that a
-            normal human being would love to do.
-          </p>
-          <blockquote>
-            <p>Where there&apos;s a will, there&apos;s a way</p>
-          </blockquote>
-          <p>
-            I have the believe that all the problems in the world will be solved
-            as long as you keep the positive mental attitude and a cold head.
-          </p>
-          <p className="about-card__info-status">
-            <span>Current status:</span>
-            Available for Freelance job
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
+  <Container id={ABOUT} className="container">
+    <Card className="about-card">
+      <CardHeader />
+      <CardInfo />
+    </Card>
+  </Container>
 )
 
+const Container = styled.section`
+  margin-top: -200px;
+`
+
+const Card = styled.div`
+  box-shadow: 2px 2px 4px -2px ${props => props.theme.colors.colorDark};
+  float: none;
+  margin: 0 auto;
+`
 export default About
diff --git a/views/components/Footer.js b/views/components/Footer.js
@@ -16,9 +16,7 @@ const Footer = () => (
 export default Footer
 
 const FooterContainer = styled.footer`
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  position: relative;
   z-index: 100;
   width: 100%;
   background-color: ${props => props.theme.colors.colorAccent};

diff --git a/views/components/__test__/About.spec.tsx b/views/components/__test__/About.spec.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { mountWithTheme } from '~/utils/withThemeProviders'
+import About from '~/views/components/About'
+
+describe('About', () => {
+
+  it('should render without throwing an error', function () {
+    const wrap = mountWithTheme(<About />)
+    expect(wrap).toMatchSnapshot()
+  })
+
+})