fixed SEO and Accesability, also added manifest and offline support, …

…PWA working

gatsby-browser.js

@@ -0,0 +1,10 @@
+export const onServiceWorkerUpdateReady = () => {
+  const answer = window.confirm(
+    `Fidalgo just updated his website. ` +
+      `Reload to display the latest version?`
+  );
+
+  if (answer === true) {
+    window.location.reload();
+  }
+};

gatsby-config.js

@@ -4,9 +4,16 @@ module.exports = {
     description: `I’m Fidalgo , a 23 years old self-taught Front-end developer , from Portugal .`,
     author: `Fidalgo`,
     siteUrl: 'https://fidalgo.dev',
+    // name of the image to share, should be in static folder
     imageShare: `share.jpg`,
   },
   plugins: [
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: 'UA-141189217-1',
+      },
+    },
     `gatsby-plugin-use-dark-mode`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-styled-components`,
@@ -51,20 +58,18 @@ module.exports = {
         ],
       },
     },
-    // {
-    //   resolve: `gatsby-plugin-manifest`,
-    //   options: {
-    //     name: `gatsby-starter-default`,
-    //     short_name: `starter`,
-    //     start_url: `/`,
-    //     background_color: `#663399`,
-    //     theme_color: `#663399`,
-    //     display: `minimal-ui`,
-    //     icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
-    //   },
-    // },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `Fidalgo | Front-end Developer`,
+        short_name: `Fidalgo`,
+        icon: `src/images/icon.png`,
+        start_url: `/`,
+        background_color: `#212121`,
+        theme_color: `#127EB1`,
+        display: `minimal-ui`,
+      },
+    },
+    `gatsby-plugin-offline`,
   ],
 };

gatsby-ssr.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <link rel="preconnect" href="https://www.google-analytics.com" />,
+    <link rel="preconnect" href="https://marketingplatform.google.com" />,
+    <link rel="preconnect" href="https://google.com" />,
+    <link rel="preconnect" href="https://www.google.com" />,
+  ]);
+};

package.json

@@ -14,6 +14,7 @@
     "gatsby": "^2.6.0",
     "gatsby-cli": "^2.6.3",
     "gatsby-image": "^2.1.0",
+    "gatsby-plugin-google-analytics": "^2.0.20",
     "gatsby-plugin-google-fonts": "^1.0.0",
     "gatsby-plugin-manifest": "^2.1.1",
     "gatsby-plugin-offline": "^2.1.1",

src/components/UI/backgroundLogo/backgroundLogo.js

@@ -15,7 +15,7 @@ const StyledImage = styled(Img)`
   transform: rotate(-15deg);
 
   @media ${props => props.theme.mediaQueries.largest} {
-    top: -25%;
+    top: -30%;
   }
 
   @media ${props => props.theme.mediaQueries.large} {
@@ -52,7 +52,7 @@ const BackgroundLogo = () => {
     query {
       file(relativePath: { eq: "logo_background.png" }) {
         childImageSharp {
-          fluid(quality: 90, maxWidth: 1500) {
+          fluid(quality: 80, maxHeight: 1080) {
             ...GatsbyImageSharpFluid
           }
         }

src/components/UI/buttonLink/buttonLink.js

@@ -15,7 +15,7 @@ const StyledLink = styled.a`
   border: ${({ solid }) => (solid ? '1px transparent' : '1px solid')};
   border-radius: 10rem;
   font-size: 1rem;
-  padding: 1.4rem 3.5rem;
+  padding: 1.2rem 2.8rem;
   margin: 0rem;
   cursor: pointer;
   box-shadow: ${({ solid }) =>
@@ -34,13 +34,9 @@ const StyledLink = styled.a`
       solid ? '0 3px 10px var(--shadow-btn)' : 'none'};
   }
 
-  @media ${props => props.theme.mediaQueries.medium} {
-    font-size: 1rem;
-    padding: 1.3rem 3.3rem;
-  }
-
   @media ${props => props.theme.mediaQueries.small} {
-    padding: 1.2rem 3rem;
+    font-size: 1rem;
+    padding: 1.1rem 2.6rem;
   }
 `;
 

src/components/UI/heading/heading.js

@@ -18,7 +18,7 @@ const Title = styled.h1`
   font-size: 2.5rem;
   margin: 0;
   margin-bottom: 1rem;
-  color: var(--primary-light);
+  color: var(--primary);
   text-transform: uppercase;
   font-weight: 700;
   transition: color 0.2s ease-out;
@@ -55,11 +55,11 @@ const SubTitle = styled.h2`
   }
 
   @media ${props => props.theme.mediaQueries.smaller} {
-    font-size: 1.6rem;
+    font-size: 1.7rem;
   }
 
   @media ${props => props.theme.mediaQueries.smallest} {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
   }
 `;
 

src/components/layout/elements.js

@@ -2,9 +2,10 @@ import styled from 'styled-components';
 
 // FIX FOR VH ON MOBILE
 // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
-let vh = window.innerHeight * 0.01;
+let vh = typeof window !== 'undefined' && window.innerHeight * 0.01;
 // Then we set the value in the --vh custom property to the root of the document
-document.documentElement.style.setProperty('--vh', `${vh}px`);
+typeof document !== 'undefined' &&
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
 
 export const Contained = styled.div`
   max-width: 124rem;

src/components/navigation/navItems/navItem/navItem.js

@@ -19,7 +19,7 @@ const StyledLink = styled(Link)`
 
   @media ${({ theme }) => theme.mediaQueries.small} {
     margin: 1rem 0;
-    font-size: 1.3rem;
+    font-size: 1.4rem;
   }
 `;
 

src/components/navigation/navbar/logo/logo.js

@@ -29,14 +29,14 @@ const Logo = ({ notOnePageSection, setMenuOpened }) => {
     query {
       darkLogo: file(relativePath: { eq: "logo/logo_dark.png" }) {
         childImageSharp {
-          fixed(height: 35) {
+          fixed(height: 35, quality: 80) {
             ...GatsbyImageSharpFixed
           }
         }
       }
       lightLogo: file(relativePath: { eq: "logo/logo_light.png" }) {
         childImageSharp {
-          fixed(height: 35) {
+          fixed(height: 35, quality: 80) {
             ...GatsbyImageSharpFixed
           }
         }

src/components/utils/seo.js

@@ -94,7 +94,7 @@ SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
 };
 
 export default SEO;

src/content/aboutMe.md

@@ -1,5 +1,6 @@
 ---
 stack: 'HTML5 - CSS3 - JAVASCRIPT - SASS - WEBPACK - REACTJS - REDUX - STYLED COMPONENTS - CSS MODULES - FIREBASE - BABEL - GRAPHQL - GATSBY'
+curriculum: 'curriculum.pdf'
 ---
 
 I’m <span>Fidalgo</span> , a 23 years old self-taught <span>Front-end developer</span> , from <span>Portugal</span> .
@@ -8,7 +9,7 @@ After my college degree in _"Communication & Multimedia"_, I got a job as a "dev
 
 In October2018 I decided it was _time for a change_, so I started to wake up at 6am to _study javascript before going into work_. I quickly started to <span>love Javascript</span>, and in January 2019 I decided to _take the risk and quit my job_. I’ve been studying Front-end development full time ever since.
 
-During this time, I took online courses like [The Complete Javascript Course](), [Javascript30](), [Understanding the Weird Parts](), [ES6](), [Advanced React w/ Redux](), [React: The Complete Guide](), [Gatsby Bootcamp](), and also read book series ["You don’t know JS"](). Because we the best way to learn is to practice, I also did a bunch of personal projects with the knowledge I gathered from the courses, you can check them <scroll-link to='portfolio'>here</scroll-link>. And I even started my [Youtube channel](https://www.youtube.com/channel/UC8pnh6gmhMP-hyQ6MJb414g), where I already have some tutorials about React, Redux and Firebase.
+During this time, I took online courses like [The Complete Javascript Course](), [Javascript30](), [Understanding the Weird Parts](), [ES6](), [Advanced React w/ Redux](), [React: The Complete Guide](), [Gatsby Bootcamp](), and also read book series ["You don’t know JS"](). Because we the best way to learn is to practice, I also did a bunch of personal projects with the knowledge I gathered from the courses, you can check them <scroll-link to='portfolio'>here</scroll-link>. And I even started my [Youtube channel](https://www.youtube.com/channel/UC8pnh6gmhMP-hyQ6MJb414g 'Fidalgo Youtube Channel'), where I already have some tutorials about React, Redux and Firebase.
 
 I always want to _learn more_, _do more_, and _be more_. I’m also a firm believer that we should <span>never settle</span>.
 

src/content/portfolio/1_budgety/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Budgety'
+live: 'https://fidalgodev.github.io/budgety/'
+source: 'https://github.com/fidalgodev/budgety'
+stack: 'Vanilla Javascript'
+image: 'budgety.png'
+---
+
+A simple app to manage your monthly budget. You can insert your income, and also your expenses, and it will calculate how much budget you have left for the month, and also show the percetange that each expense represented on your budget.

src/content/portfolio/2_movie_library/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Movie Library'
+live: 'https://fidalgodev.github.io/movie-library/'
+source: 'https://github.com/fidalgodev/movie-library'
+stack: 'Vanilla javascript - SASS'
+image: 'movie_library.png'
+---
+
+A movie library made from scratch, using Vanilla JS. This project fecthes data from an API when the user searches for a Movie. THe user can then add the movie do his watched/watch later lists, and this information will be saved on localStorage. This project uses the MVC pattern.

src/content/portfolio/3_weather_app/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Weather App'
+live: 'https://weather.fidalgo.dev/'
+source: 'https://github.com/fidalgodev/weather-app'
+stack: 'Vanilla javascript - SASS'
+image: 'weatherapp.png'
+---
+
+A weather app, that get's user location, and fetches the current weather from an API. The user can then click on the location, and check the weather for the next 5 days. It's also possible to search for other locations, and add/remove them from favorites. Since the API only lets you download a hude .json file with all the location available, I made a [small REST API](https://github.com/fidalgodev/cities-ids-api 'REST API Repository') to get the locations, that is being used when the user searches for a location.

src/content/portfolio/4_movies_react/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Movie Library'
+live: 'https://movies.fidalgo.dev'
+source: 'https://github.com/fidalgodev/movie-library-react'
+stack: 'React - Redux - Styled Components'
+image: 'movies.png'
+---
+
+A Movie Library made with React. This was my first project after finishing a React Course. It fetches information from an API, and displays it in a nice way. You also get recommended movies based on the one you're watching, and you can also click on an Actor, and check information about him/her as well as movies that same actor enters. it uses React Router, and fetches the movie based on the URL, so you can easily reload the page and the data will be still fetched. It also uses lazy loading on images, has error handling, and uses Redux to manage state(even tho I realize now with more experience that I probably didn't needed it). One of the projects I'm most proud of.

src/content/portfolio/5_auth_boilerplate/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Firebase Auth Boilerplate'
+live: 'https://auth-w-firebase-boiler.fidalgo.dev/'
+source: 'https://github.com/fidalgodev/react_auth_redux_firebase_boilerplate'
+stack: 'React - Redux - Styled Components - Firebase - Formik'
+image: 'auth_boiler.png'
+---
+
+I wanted to play around with Firebase Auth, so I made this simple boilerplate project. The user can Login, Logout and Register. After being logged in, the user has to verifiy is email in order to see protected pages. The user can also re-send the verification email if he deleted it, he can recover his password, and edit his account details. It's also possible for the user to Login/Register using his Google Account.

src/content/portfolio/6_todos_firebase/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Todos App w/ Firebase & Firestore'
+live: 'https://todos.fidalgo.dev/'
+source: 'https://github.com/fidalgodev/todo_app_w_auth'
+stack: 'React - Redux - Styled Components - Firebase & Firestore - Formik'
+image: 'react_todos.png'
+---
+
+A todo App, where the user has the ability to Add/Edit/Delete todos. Todos are saved to the Firestore, so the user can basically login anywhere and have access to his todos. The App uses Firebase for the Authentication system, and the user is forced to verify his email before using the App. It's also possible to Re-send the verification email, recover the password and edit the user profile. I made a [video series](https://www.youtube.com/watch?v=OHQvbiQpGC8&list=PLoH-uUW2wEIQU3diUzrpFaFOcXM8z8gBc 'Youtube tutorial of this project') on my [Youtube channel](https://www.youtube.com/channel/UC8pnh6gmhMP-hyQ6MJb414g 'Fidalgo Youtube Channel') while creating the project.

src/content/portfolio/7_fidalgo_portfolio/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Fidalgo Portfolio'
+live: 'https://fidalgo.dev/'
+source: 'https://github.com/fidalgodev/portfolio_gatsby'
+stack: 'React - Styled Components - Gatsby'
+image: 'fidalgo.png'
+---
+
+This very website you're now wathing. I wanted something fast and with good SEO for my portfolio, so a static website generator like Gatbsy seemed like the best fit. It reads data from markdown files, so it's super easy for me to keep adding Portfolio items as I keep developing stuff. It also has a cool dark mode switch since I couldn't decide between a dark or light design.