Feature/dev

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: {

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>

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>
+    )
+}

src/components/projects.module.scss → 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 {

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>
   )
 }
 

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>

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;
+}

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

src/components/skills.module.scss

@@ -0,0 +1,7 @@
+.container {
+    @apply flex flex-wrap;    
+}
+
+.container > div {
+    @apply w-2/4 px-2;
+}

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>

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
-          }
-        }
-      }
-    }
-  }
-`
+export default () =>
+  <Container>
+    <Header />
+    <Projects />
+  </Container>

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.

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.

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.