From c89b9317c8882d236b6ac631d2051aa3b321a06c Mon Sep 17 00:00:00 2001
From: Felipe <felipe@fabricadecodigo.com>
Date: Tue, 24 Mar 2020 18:23:41 -0300
Subject: [PATCH 1/6] projetos

---
 src/components/projects.js          | 67 +++++++++++++++++++++++++++++
 src/components/projects.module.scss | 39 +++++++++++++++++
 src/pages/index.js                  |  4 +-
 src/styles/styles.scss              |  7 ++-
 4 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 src/components/projects.js
 create mode 100644 src/components/projects.module.scss

diff --git a/src/components/projects.js b/src/components/projects.js
new file mode 100644
index 0000000..11a1da2
--- /dev/null
+++ b/src/components/projects.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import Section from './section';
+import styles from './projects.module.scss'
+
+export default () =>
+    <Section id="sobre" className="bg-gray-100" title="Projetos pessoais que trabalhei">
+
+        {/* Projeto */}
+        <div className={styles.projectContainer}>
+            {/* Imagem */}
+            <div className={styles.projectImageContainer}>
+                <img src="http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-todo-com-ionic-ogd6rpbwgkg8mbyll61x8ez2zohiqvp8xbg4eysni8.png" />
+            </div>
+            {/* Info */}
+            <div className={styles.projectInfoContainer}>
+                <h3 className={styles.title}>Nome do projeto</h3>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus urna ac lectus maximus, nec hendrerit turpis consequat.
+                    Aenean porta tincidunt neque a vulputate. Nullam at sapien mollis, pellentesque sapien sed, porta ex. Nam vitae ultrices ligula.
+                    Vivamus justo nulla, ullamcorper ac fermentum eget, convallis nec ligula. In elementum laoreet tempor. Vivamus convallis nibh
+                    et vulputate efficitur. Nam pellentesque ex in feugiat molestie.
+                </p>
+                <ul className={styles.technologies}>
+                    <li>Ionic</li>
+                    <li>Html</li>
+                    <li>CSS</li>
+                    <li>JavaScript</li>
+                    <li>JavaScript</li>
+                    <li>CSS</li>
+                    <li>Html</li>
+                    <li>Ionic</li>
+                </ul>
+            </div>
+        </div>
+
+        {/* Projeto */}
+        <div className={styles.projectContainer}>
+            {/* Imagem */}
+            <div className={styles.projectImageContainer}>
+                <img src="http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-todo-com-ionic-ogd6rpbwgkg8mbyll61x8ez2zohiqvp8xbg4eysni8.png" />
+            </div>
+            {/* Info */}
+            <div className={styles.projectInfoContainer}>
+                <h3 className={styles.title}>Nome do projeto</h3>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus urna ac lectus maximus, nec hendrerit turpis consequat.
+                    Aenean porta tincidunt neque a vulputate. Nullam at sapien mollis, pellentesque sapien sed, porta ex. Nam vitae ultrices ligula.
+                    Vivamus justo nulla, ullamcorper ac fermentum eget, convallis nec ligula. In elementum laoreet tempor. Vivamus convallis nibh
+                    et vulputate efficitur. Nam pellentesque ex in feugiat molestie.
+                </p>
+                <ul className={styles.technologies}>
+                    <li>Ionic</li>
+                    <li>Html</li>
+                    <li>CSS</li>
+                    <li>JavaScript</li>
+                    <li>JavaScript</li>
+                    <li>CSS</li>
+                    <li>Html</li>
+                    <li>Ionic</li>
+                </ul>
+            </div>
+        </div>
+
+        <div className="text-center">
+            <a href="#" className="btn btn-primary">Ver todos</a>
+        </div>
+    </Section>
\ No newline at end of file
diff --git a/src/components/projects.module.scss b/src/components/projects.module.scss
new file mode 100644
index 0000000..341cfb9
--- /dev/null
+++ b/src/components/projects.module.scss
@@ -0,0 +1,39 @@
+.project-container {
+  @apply bg-white border border-gray-700 mx-auto my-5 p-2 rounded shadow-md;
+}
+
+.project-image-container {
+  @apply mx-auto mb-5;
+  max-width: 187px;
+}
+
+.project-info-container .title {
+  @apply mb-2 font-bold;
+}
+
+.project-info-container .technologies {
+  @apply flex flex-wrap my-2 justify-center;
+}
+
+.project-info-container .technologies li {
+  @apply mr-3 bg-gray-700 rounded-full px-4 py-1 text-white my-2 text-sm;
+}
+
+@screen md {
+  .project-container {
+    @apply flex max-w-screen-sm mt-5 p-5;
+  }
+
+  .project-image-container {
+    @apply mb-0;
+    min-width: 187px;
+  }
+
+  .project-info-container {
+    @apply ml-5;
+  }
+
+  .project-info-container .technologies {
+    @apply justify-start;
+  }
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index d566c7a..31f0ad0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,11 +2,13 @@ import React from "react"
 import Container from '../components/container';
 import Header from "../components/header";
 import About from '../components/about';
-import Jobs from  '../components/jobs';
+import Jobs from '../components/jobs';
+import Projects from '../components/projects';
 
 export default () =>
   <Container>
     <Header />
     <About />
     <Jobs />
+    <Projects />
   </Container>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index fcb746a..f0b7d2a 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -18,6 +18,10 @@
   @apply bg-white text-black;
 }
 
+.btn-primary {
+  @apply px-5 py-3 bg-black text-white text-center w-48 rounded-full border-4 border-gray-700;
+}
+
 .section-portfolio-item {
   @apply py-10 px-5
 }
@@ -26,4 +30,5 @@
   .section-portfolio-item {
     @apply px-24;
   }
-}
\ No newline at end of file
+}
+

From 0abbfaa390bd2f738e168cc1a680881239dcc8ba Mon Sep 17 00:00:00 2001
From: Felipe <felipe@fabricadecodigo.com>
Date: Mon, 30 Mar 2020 08:53:07 -0300
Subject: [PATCH 2/6] =?UTF-8?q?um=20projeto=20por=20p=C3=A1gina?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatsby-config.js                              | 29 ----------
 src/components/project.js                     | 29 ++++++++++
 ...ojects.module.scss => project.module.scss} |  5 +-
 src/components/projects.js                    | 57 ++++++++-----------
 src/pages/index.js                            |  2 +-
 src/pages/projetos.js                         | 51 +++--------------
 .../handson-ionic-4-para-iniciantes.md        |  8 +++
 src/projetos/handson-ionic-e-apis-rest.md     |  8 +++
 src/projetos/handson-ionic-e-sqlite.md        |  8 +++
 src/projetos/todo-app-angular.md              |  8 ---
 src/projetos/todo-app-nodejs.md               |  8 ---
 src/templates/projeto-single.js               | 23 ++++----
 12 files changed, 103 insertions(+), 133 deletions(-)
 create mode 100644 src/components/project.js
 rename src/components/{projects.module.scss => project.module.scss} (88%)
 create mode 100644 src/projetos/handson-ionic-4-para-iniciantes.md
 create mode 100644 src/projetos/handson-ionic-e-apis-rest.md
 create mode 100644 src/projetos/handson-ionic-e-sqlite.md
 delete mode 100644 src/projetos/todo-app-angular.md
 delete mode 100644 src/projetos/todo-app-nodejs.md

diff --git a/gatsby-config.js b/gatsby-config.js
index 19243ed..e63290a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -63,35 +63,6 @@ module.exports = {
         ASP.NET Soap web service, SQL Server, Windows Mobile e Android.</p>`
       }
     ],
-    projects: [
-      {
-        title: 'HandsOn Ionic 4 para iniciantes',
-        description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus urna ac lectus maximus, nec hendrerit turpis consequat. 
-        Aenean porta tincidunt neque a vulputate. Nullam at sapien mollis, pellentesque sapien sed, porta ex. Nam vitae ultrices ligula. Vivamus 
-        justo nulla, ullamcorper ac fermentum eget, convallis nec ligula. In elementum laoreet tempor. Vivamus convallis nibh et vulputate efficitur. 
-        Nam pellentesque ex in feugiat molestie.`,
-        technologies: ['Ionic', 'Html', 'CSS', 'JavaScript'],
-        img: 'http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-todo-com-ionic-ogd6rpbwgkg8mbyll61x8ez2zohiqvp8xbg4eysni8.png'
-      },
-      {
-        title: 'HandsOn Ionic e SQLite',
-        description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus urna ac lectus maximus, nec hendrerit turpis consequat. 
-        Aenean porta tincidunt neque a vulputate. Nullam at sapien mollis, pellentesque sapien sed, porta ex. Nam vitae ultrices ligula. Vivamus 
-        justo nulla, ullamcorper ac fermentum eget, convallis nec ligula. In elementum laoreet tempor. Vivamus convallis nibh et vulputate efficitur. 
-        Nam pellentesque ex in feugiat molestie.`,
-        technologies: ['Ionic', 'Html', 'CSS', 'JavaScript'],
-        img: 'http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-lista-de-compras-com-ionic-ogd6rlkjp8b3bw4274feyfx8m501w3abksu6huy874.png'
-      },
-      {
-        title: 'HandsOn Ionic e APIs REST',
-        description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus urna ac lectus maximus, nec hendrerit turpis consequat. 
-        Aenean porta tincidunt neque a vulputate. Nullam at sapien mollis, pellentesque sapien sed, porta ex. Nam vitae ultrices ligula. Vivamus 
-        justo nulla, ullamcorper ac fermentum eget, convallis nec ligula. In elementum laoreet tempor. Vivamus convallis nibh et vulputate efficitur. 
-        Nam pellentesque ex in feugiat molestie.`,
-        technologies: ['Ionic', 'Html', 'CSS', 'JavaScript'],
-        img: 'http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-agendamento-de-servi%C3%A7os-com-ionic-ogd6rir14q78d285nl7j8ymutzdy8zz4kevq212eps.png'
-      }
-    ],
     footerText: 'Fábrica de Código',
     homePage: {
       title: 'Página Inicial',
diff --git a/src/components/project.js b/src/components/project.js
new file mode 100644
index 0000000..ba237da
--- /dev/null
+++ b/src/components/project.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import styles from './project.module.scss'
+import { Link } from 'gatsby';
+
+export default props => {
+    const project = props.project;
+    return (
+        <div className={styles.projectContainer}>
+
+            <div className={styles.projectImageContainer}>
+                <img src={project.frontmatter.img} />
+            </div>
+
+            <div className={styles.projectInfoContainer}>
+                <Link to={project.fields.slug}>
+                    <h3 className={styles.title}>{project.frontmatter.title}</h3>
+                </Link>
+                <small className={styles.date}>{project.frontmatter.date}</small>
+
+                <p dangerouslySetInnerHTML={{ __html: project.html }}></p>
+                <ul className={styles.technologies}>
+                    {project.frontmatter.techs.split(',').map((technologie, index) => (
+                        <li key={index}>{technologie}</li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/projects.module.scss b/src/components/project.module.scss
similarity index 88%
rename from src/components/projects.module.scss
rename to src/components/project.module.scss
index 341cfb9..44636c9 100644
--- a/src/components/projects.module.scss
+++ b/src/components/project.module.scss
@@ -8,7 +8,10 @@
 }
 
 .project-info-container .title {
-  @apply mb-2 font-bold;
+  @apply mb-1 font-bold;
+}
+.project-info-container .date {
+  @apply inline-block mb-4;
 }
 
 .project-info-container .technologies {
diff --git a/src/components/projects.js b/src/components/projects.js
index e575fff..1175661 100644
--- a/src/components/projects.js
+++ b/src/components/projects.js
@@ -1,53 +1,46 @@
 import React from 'react'
-import { useStaticQuery, graphql } from "gatsby"
+import { useStaticQuery, graphql, Link } from "gatsby"
 import Section from './section';
-import styles from './projects.module.scss'
+import Project from './project';
 
-const Projects = () => {
+const Projects = (props) => {
   const data = useStaticQuery(graphql`
     {
-      site {
-        siteMetadata {
-          projects {
-            description
-            img
-            title
-            technologies
+      allMarkdownRemark {
+        edges {
+          node {
+            id
+            fields {
+              slug
+            }
+            frontmatter {
+              techs
+              title
+              img
+            }
+            html
           }
         }
       }
     }
   `)
 
-  const top = 3;
-  const projects = data.site.siteMetadata.projects.slice(0, top);
+  const top = props.limit ? props.limit : data.allMarkdownRemark.edges.length;
+  const projects = data.allMarkdownRemark.edges.slice(0, top);
   return (
     <Section id="projects" className="bg-gray-100" title="Projetos pessoais que trabalhei">
-      {projects.map((project, index) => (
-        <div key={index} className={styles.projectContainer}>
-
-          <div className={styles.projectImageContainer}>
-            <img src={project.img} />
-          </div>
-
-          <div className={styles.projectInfoContainer}>
-            <h3 className={styles.title}>{project.title}</h3>
-            <p dangerouslySetInnerHTML={{ __html: project.description }}></p>
-            <ul className={styles.technologies}>
-              {project.technologies.map((technologie, indexTech) => (
-                <li key={indexTech}>{technologie}</li>
-              ))}
-            </ul>
-          </div>
-        </div >
+      {projects.map(({ node }) => (
+        <Project key={node.id} project={node} />
       ))}
 
-      {data.site.siteMetadata.projects.length > top &&
+      {data.allMarkdownRemark.edges.length > top &&
         <div className="text-center">
-          <a href="#" className="btn btn-primary">Ver todos</a>
+          <Link to="projetos" className="btn btn-primary">
+            Ver todos
+          </Link>
         </div>}
 
-    </Section >
+    </Section>
   )
 }
 
diff --git a/src/pages/index.js b/src/pages/index.js
index 0957650..d9537a8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -10,5 +10,5 @@ export default () =>
     <Header />
     <About />
     <Jobs />
-    <Projects />
+    <Projects limit="2" />
   </Container>
diff --git a/src/pages/projetos.js b/src/pages/projetos.js
index 71e3ee2..fdaee26 100644
--- a/src/pages/projetos.js
+++ b/src/pages/projetos.js
@@ -1,47 +1,10 @@
 import React from "react"
-import Header from "../components/header";
 import Container from '../components/container';
-import { Link, graphql } from "gatsby"
-
-export default ({ data }) => {
-    const { edges } = data.allMarkdownRemark;
-    return (
-        <Container>
-            <Header title="Projetos" />
-
-            {edges.map(({ node }) => (
-                <div key={node.id}>
-                    
-                    <Link to={node.fields.slug}>
-                      <h2>{node.frontmatter.title}</h2>
-                    </Link>
-
-                    <small>{node.frontmatter.date}</small>
-                    <div>{node.excerpt}</div>
-                </div>
-            ))}
-
-            <Link to="/">Home</Link>
-        </Container>
-    )
-}
+import Header from "../components/header";
+import Projects from '../components/projects';
 
-export const query = graphql`
-  {
-    allMarkdownRemark {
-      edges {
-        node {
-          id
-          excerpt
-          fields {
-            slug
-          }
-          frontmatter {
-            date(formatString: "DD/MM/YYYY")
-            title
-          }
-        }
-      }
-    }
-  }
-`
\ No newline at end of file
+export default () =>
+  <Container>
+    <Header />
+    <Projects />
+  </Container>
\ No newline at end of file
diff --git a/src/projetos/handson-ionic-4-para-iniciantes.md b/src/projetos/handson-ionic-4-para-iniciantes.md
new file mode 100644
index 0000000..95571b6
--- /dev/null
+++ b/src/projetos/handson-ionic-4-para-iniciantes.md
@@ -0,0 +1,8 @@
+---
+title: "HandsOn Ionic 4 Para Iniciantes"
+date: "2019-03-25"
+techs: "Ionic, Html, JavaScript, CSS, SCSS, CSS Variables"
+img: "http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-todo-com-ionic-ogd6rpbwgkg8mbyll61x8ez2zohiqvp8xbg4eysni8.png"
+---
+
+Mussum Ipsum, cacilds vidis litro abertis. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Detraxit consequat et quo num tendi nada. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget.
diff --git a/src/projetos/handson-ionic-e-apis-rest.md b/src/projetos/handson-ionic-e-apis-rest.md
new file mode 100644
index 0000000..20759ac
--- /dev/null
+++ b/src/projetos/handson-ionic-e-apis-rest.md
@@ -0,0 +1,8 @@
+---
+title: "HandsOn Ionic e APIs REST"
+date: "2019-07-15"
+techs: "Ionic, Html, JavaScript, CSS, SCSS, CSS Variables"
+img: "http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-agendamento-de-servi%C3%A7os-com-ionic-ogd6rir14q78d285nl7j8ymutzdy8zz4kevq212eps.png"
+---
+
+Mussum Ipsum, cacilds vidis litro abertis. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Detraxit consequat et quo num tendi nada. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget.
diff --git a/src/projetos/handson-ionic-e-sqlite.md b/src/projetos/handson-ionic-e-sqlite.md
new file mode 100644
index 0000000..f3229e8
--- /dev/null
+++ b/src/projetos/handson-ionic-e-sqlite.md
@@ -0,0 +1,8 @@
+---
+title: "HandsOn Ionic e SQLite"
+date: "2019-05-05"
+techs: "Ionic, Html, JavaScript, CSS, SCSS, CSS Variables"
+img: "http://www.fabricadecodigo.com/wp-content/uploads/elementor/thumbs/app-lista-de-compras-com-ionic-ogd6rlkjp8b3bw4274feyfx8m501w3abksu6huy874.png"
+---
+
+Mussum Ipsum, cacilds vidis litro abertis. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Detraxit consequat et quo num tendi nada. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget.
diff --git a/src/projetos/todo-app-angular.md b/src/projetos/todo-app-angular.md
deleted file mode 100644
index 430f717..0000000
--- a/src/projetos/todo-app-angular.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: "Criando um app de lista de tarefas com Angular"
-date: "2019-11-28"
----
-
-Mussum Ipsum, cacilds vidis litro abertis. Delegadis gente finis, bibendum egestas augue arcu ut est. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo, vitae iaculis nisl. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Per aumento de cachacis, eu reclamis.
-
-[Acessar série completa](https://www.youtube.com/playlist?list=PLryJIoSncQyPBskKa1Fvr8eE3JdH4jxhK)
\ No newline at end of file
diff --git a/src/projetos/todo-app-nodejs.md b/src/projetos/todo-app-nodejs.md
deleted file mode 100644
index 9cffcee..0000000
--- a/src/projetos/todo-app-nodejs.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: "Criando um app de lista de tarefas com NodeJS"
-date: "2019-12-17"
----
-
-Mussum Ipsum, cacilds vidis litro abertis. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Delegadis gente finis, bibendum egestas augue arcu ut est. Cevadis im ampola pa arma uma pindureta. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.
-
-[Acessar série completa](https://www.youtube.com/playlist?list=PLryJIoSncQyNzHHbHMPQkjPRP3Kv0ICnq)
\ No newline at end of file
diff --git a/src/templates/projeto-single.js b/src/templates/projeto-single.js
index ea687ef..55a72c6 100644
--- a/src/templates/projeto-single.js
+++ b/src/templates/projeto-single.js
@@ -1,32 +1,35 @@
 import React from "react"
-import Header from "../components/header";
 import Container from '../components/container';
+import Header from "../components/header";
+import Project from '../components/project';
 import { Link } from "gatsby"
 
+
 export default ({ data }) => {
-    const projeto = data.markdownRemark;
+    const project = data.markdownRemark;
 
     return (        
         <Container>
-            <Header title={projeto.frontmatter.title} />
-            <small>{projeto.frontmatter.date}</small>
-
-            <div dangerouslySetInnerHTML={{ __html: projeto.html }}></div>
-
-            <Link to="projetos">Projetos</Link>
+          <Header />          
+          <Project project={project} />>
         </Container>
     )
 }
 
 export const query = graphql`
   query($slug: String!) {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
-      html
+    markdownRemark(fields: {slug: {eq: $slug}}) {
+      fields {
+        slug
+      }
       frontmatter {
         date(formatString: "DD/MM/YYYY")
+        img
+        techs
         title
       }
       html
+      id
     }
   }
 `
\ No newline at end of file

From 8ce4472d77ad7632f16da68b237d2712a7b5cc74 Mon Sep 17 00:00:00 2001
From: Felipe <felipe@fabricadecodigo.com>
Date: Thu, 2 Apr 2020 09:24:08 -0300
Subject: [PATCH 3/6] skills

---
 gatsby-config.js                  |  8 ++++++++
 src/components/skill.js           | 12 +++++++++++
 src/components/skill.module.scss  | 15 ++++++++++++++
 src/components/skills.js          | 33 +++++++++++++++++++++++++++++++
 src/components/skills.module.scss |  7 +++++++
 src/pages/index.js                |  2 ++
 6 files changed, 77 insertions(+)
 create mode 100644 src/components/skill.js
 create mode 100644 src/components/skill.module.scss
 create mode 100644 src/components/skills.js
 create mode 100644 src/components/skills.module.scss

diff --git a/gatsby-config.js b/gatsby-config.js
index e63290a..4e4a22a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -63,6 +63,14 @@ module.exports = {
         ASP.NET Soap web service, SQL Server, Windows Mobile e Android.</p>`
       }
     ],
+    skills: [
+      { name: 'Html', progress: 100 },
+      { name: 'CSS', progress: 90 },
+      { name: 'JavaScript', progress: 100 },
+      { name: '.Net', progress: 100 },
+      { name: 'Node JS', progress: 50 },
+      { name: 'Ionic Framework', progress: 90 }
+    ],
     footerText: 'Fábrica de Código',
     homePage: {
       title: 'Página Inicial',
diff --git a/src/components/skill.js b/src/components/skill.js
new file mode 100644
index 0000000..4d5eb9b
--- /dev/null
+++ b/src/components/skill.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import styles from './skill.module.scss';
+
+
+export default (props) =>
+    <div className={styles.container}>
+        {props.name}
+
+        <div className={styles.progressContainer}>
+            <div className={styles.progressValue} style={{ width: `${props.progress}%` }}></div>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/src/components/skill.module.scss b/src/components/skill.module.scss
new file mode 100644
index 0000000..6330954
--- /dev/null
+++ b/src/components/skill.module.scss
@@ -0,0 +1,15 @@
+.container {
+  @apply my-3;
+}
+
+.progress-container {
+  width: 100%;
+  height: 30px;
+  @apply bg-gray-400 rounded;
+}
+
+.progress-value {
+  height: 30px;
+  width: 0;
+  @apply bg-blue-400;
+}
diff --git a/src/components/skills.js b/src/components/skills.js
new file mode 100644
index 0000000..e67b774
--- /dev/null
+++ b/src/components/skills.js
@@ -0,0 +1,33 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import styles from './skills.module.scss';
+import Section from './section';
+import Skill from './skill';
+
+const Skills = () => {
+    const data = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          skills {
+            name
+            progress
+          }
+        }
+      }
+    }
+  `)
+    return (
+        <Section id="skills" title="O que eu tenho conhecimento">
+            <div className={styles.container}>
+                {data.site.siteMetadata.skills.map((skill, index) => (
+                    <div>
+                        <Skill key={index} name={skill.name} progress={skill.progress} />
+                    </div>
+                ))}
+            </div>
+        </Section>
+    )
+}
+
+export default Skills
diff --git a/src/components/skills.module.scss b/src/components/skills.module.scss
new file mode 100644
index 0000000..b808091
--- /dev/null
+++ b/src/components/skills.module.scss
@@ -0,0 +1,7 @@
+.container {
+    @apply flex flex-wrap;    
+}
+
+.container > div {
+    @apply w-2/4 px-2;
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index d9537a8..226a7a2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,6 +4,7 @@ import Header from "../components/header";
 import About from '../components/about';
 import Jobs from  '../components/jobs';
 import Projects from '../components/projects';
+import Skills from '../components/skills';
 
 export default () =>
   <Container>
@@ -11,4 +12,5 @@ export default () =>
     <About />
     <Jobs />
     <Projects limit="2" />
+    <Skills />
   </Container>

From 1db12fffd157d9faa5d993d350323b3a3ca00b0b Mon Sep 17 00:00:00 2001
From: Felipe <felipe@fabricadecodigo.com>
Date: Thu, 2 Apr 2020 09:40:18 -0300
Subject: [PATCH 4/6] contato

---
 src/components/contact.js | 20 ++++++++++++++++++++
 src/pages/index.js        |  2 ++
 src/styles/styles.scss    | 13 ++++++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/components/contact.js

diff --git a/src/components/contact.js b/src/components/contact.js
new file mode 100644
index 0000000..eb372c8
--- /dev/null
+++ b/src/components/contact.js
@@ -0,0 +1,20 @@
+import React from "react"
+import Section from './section';
+
+export default () =>
+    <Section id="contact" title="Contato" className="bg-gray-100">
+        <form name="contact" data-netlify="true">
+            <p>
+                <label>Name <input type="text" name="name" /></label>
+            </p>
+            <p>
+                <label>Email <input type="email" name="email" /></label>
+            </p>
+            <p>
+                <label>Mensagem <textarea name="message"  rows="5" /></label>
+            </p>
+            <p className="text-center">
+                <button type="submit" className="btn btn-primary">Enviar</button>
+            </p>
+        </form>
+    </Section>
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 226a7a2..976ba2a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,6 +5,7 @@ import About from '../components/about';
 import Jobs from  '../components/jobs';
 import Projects from '../components/projects';
 import Skills from '../components/skills';
+import Contact from '../components/contact';
 
 export default () =>
   <Container>
@@ -13,4 +14,5 @@ export default () =>
     <Jobs />
     <Projects limit="2" />
     <Skills />
+    <Contact />
   </Container>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index f0b7d2a..f5dbd97 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -23,7 +23,7 @@
 }
 
 .section-portfolio-item {
-  @apply py-10 px-5
+  @apply py-10 px-5;
 }
 
 @screen md {
@@ -32,3 +32,14 @@
   }
 }
 
+form {
+  
+}
+
+form p {
+  @apply mb-5;
+}
+
+input, textarea {
+  @apply block w-full border border-gray-700 px-2 py-2;
+}
\ No newline at end of file

From e640390347b9698945977747c62640c2a889dc84 Mon Sep 17 00:00:00 2001
From: Felipe <felipe@fabricadecodigo.com>
Date: Fri, 3 Apr 2020 08:46:44 -0300
Subject: [PATCH 5/6] contact form fix

---
 src/components/contact.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/contact.js b/src/components/contact.js
index eb372c8..4836567 100644
--- a/src/components/contact.js
+++ b/src/components/contact.js
@@ -3,7 +3,9 @@ import Section from './section';
 
 export default () =>
     <Section id="contact" title="Contato" className="bg-gray-100">
-        <form name="contact" data-netlify="true">
+        <form name="contact" method="post" data-netlify="true">
+            <input type="hidden" name="form-name" value="contact" />
+
             <p>
                 <label>Name <input type="text" name="name" /></label>
             </p>

From 577a937d2d1c4e330b4d1135443593736d9812d2 Mon Sep 17 00:00:00 2001
From: Felipe <felipe@fabricadecodigo.com>
Date: Fri, 3 Apr 2020 08:54:41 -0300
Subject: [PATCH 6/6] form fix

---
 src/components/contact.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/contact.js b/src/components/contact.js
index 4836567..61e3b38 100644
--- a/src/components/contact.js
+++ b/src/components/contact.js
@@ -3,8 +3,11 @@ import Section from './section';
 
 export default () =>
     <Section id="contact" title="Contato" className="bg-gray-100">
-        <form name="contact" method="post" data-netlify="true">
+        <form name="contact" method="post" data-netlify="true" netlify-honeypot="bot-field">
             <input type="hidden" name="form-name" value="contact" />
+            <p class="hidden">
+                <label>Não preencha isso se você for humano: <input name="bot-field" /></label>
+            </p>
 
             <p>
                 <label>Name <input type="text" name="name" /></label>
@@ -13,7 +16,7 @@ export default () =>
                 <label>Email <input type="email" name="email" /></label>
             </p>
             <p>
-                <label>Mensagem <textarea name="message"  rows="5" /></label>
+                <label>Mensagem <textarea name="message" rows="5" /></label>
             </p>
             <p className="text-center">
                 <button type="submit" className="btn btn-primary">Enviar</button>