diff --git a/gatsby-config.js b/gatsby-config.js
index 19243ed..4e4a22a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -63,34 +63,13 @@ 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'
-      }
+    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: {
diff --git a/src/components/contact.js b/src/components/contact.js
new file mode 100644
index 0000000..61e3b38
--- /dev/null
+++ b/src/components/contact.js
@@ -0,0 +1,25 @@
+import React from "react"
+import Section from './section';
+
+export default () =>
+    <Section id="contact" title="Contato" className="bg-gray-100">
+        <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>
+            </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/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/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 0957650..976ba2a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,11 +4,15 @@ 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';
+import Contact from '../components/contact';
 
 export default () =>
   <Container>
     <Header />
     <About />
     <Jobs />
-    <Projects />
+    <Projects limit="2" />
+    <Skills />
+    <Contact />
   </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/styles/styles.scss b/src/styles/styles.scss
index f8eff54..f5dbd97 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -23,11 +23,23 @@
 }
 
 .section-portfolio-item {
-  @apply py-10 px-5
+  @apply py-10 px-5;
 }
 
 @screen md {
   .section-portfolio-item {
     @apply px-24;
   }
+}
+
+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
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