feat: added image perfil and social networks

franciscojunior10 · Apr 18, 2020 · 0160329 · 0160329
1 parent 126a839
commit 0160329
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 7 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -9,15 +9,15 @@ module.exports = {
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sitemap',
     'gatsby-plugin-sass',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'images',
-        path: `${__dirname}/src/images`,
+        path: `${__dirname}/src/assets/images`,
       },
     },
-    'gatsby-transformer-sharp',
-    'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {

diff --git a/package.json b/package.json
@@ -5,6 +5,9 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "bulma": "^0.8.2",
     "gatsby": "^2.19.45",
     "gatsby-image": "^2.2.44",

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,5 +1,20 @@
 import React from 'react';
-import { Link } from 'gatsby';
+
+import {
+  Link,
+  StaticQuery,
+  graphql,
+} from 'gatsby';
+
+import Img from 'gatsby-image';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import {
+  faInstagram,
+  faGithub,
+  faLinkedin,
+} from '@fortawesome/free-brands-svg-icons';
 
 import Layout from '../components/layout';
 import SEO from '../components/SEO';
@@ -10,8 +25,54 @@ const IndexPage = () => (
       description="full-stack developer, developing apps"
       keywords="ReactJS, React Native, Node, Gatsby, Front-end, Back-end, API"
     />
-    <h1 className="title has-text-centered">Francisco Júnior</h1>
-    <h2 className="subtitle has-text-centered">Full Stack Developer</h2>
+    <figure className="perfil image is-128x128">
+      <StaticQuery
+        query={graphql`
+        query {
+          file(relativePath: { eq: "perfil.jpg" }) {
+            childImageSharp {
+              fixed(width: 128, height: 128) {
+                ...GatsbyImageSharpFixed
+              }
+            }
+          }
+        }
+      `}
+        render={(data) => (
+          <Img
+            fixed={data.file.childImageSharp.fixed}
+            imgStyle={{ borderRadius: '100%' }}
+            alt="Francisco Júnior"
+          />
+        )}
+      />
+    </figure>
+
+    <div className="has-text-centered">
+
+      <h1 className="title">Francisco Júnior</h1>
+      <h2 className="subtitle">Full Stack Developer</h2>
+
+      <a href="https://github.com/franciscojunior10" aria-label="github">
+        <span className="icon is-large fa-2x">
+          <FontAwesomeIcon icon={faGithub} />
+        </span>
+      </a>
+
+      <a href="https://www.linkedin.com/in/franciscojunior10/" aria-label="linkedin">
+        <span className="icon is-large fa-2x">
+          <FontAwesomeIcon icon={faLinkedin} />
+        </span>
+      </a>
+
+      <a href="https://instagram.com/junniorcarvallho" aria-label="instagram">
+        <span className="icon is-large fa-2x">
+          <FontAwesomeIcon icon={faInstagram} />
+        </span>
+      </a>
+
+    </div>
+
     <section className="section content is-size-4-desktop is-size-5-touch">
       <h4 className="title">Hello, I am Francisco das Chagas dos Anjos Carvalho Júnior</h4>
       <p>

diff --git a/src/styles/home.scss b/src/styles/home.scss
@@ -0,0 +1,4 @@
+.perfil {
+    margin: 48px auto 24px;
+    border-radius: 100%;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1 +1,2 @@
-@import '~bulma/bulma';
+@import '~bulma/bulma';
+@import './home.scss';
diff --git a/yarn.lock b/yarn.lock
@@ -908,6 +908,32 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.2.28":
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
+  integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.28":
+  version "1.2.28"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
+  integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.28"
+
+"@fortawesome/free-brands-svg-icons@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz#e79de73ba6555055204828dca9c0691e7ce5242b"
+  integrity sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.28"
+
+"@fortawesome/react-fontawesome@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02"
+  integrity sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/[email protected]":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"