stbensonimoh / official-website

My Official Website.

My Official Website.

This is my official website built on Gatsby.

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the blog starter.

   # create a new Gatsby site using the blog starter
   gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-blog-starter/
   gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-blog-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

5. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

6. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

7. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

8. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

9. LICENSE: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.

10. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

11. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

12. README.md: A text file containing useful reference information about your project.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

💫 Deploy

official-website's Issues

Rewrite the Documentation for this Repo

Rewrite the documentation for this repository to reflect the technology used.

Add Resume link to /about page

Add my downloadable resume to my about page.

Edit the content folder

Edit the items in the content folder, especially the content/assets/ folder where images are stored:

• delete the current images inside.
• delete the blog posts.

Fix SEO Meta tags

meta tags for SEO such as twitter cards, etc are not properly set up on the website and do not show up in browsers.

Make the projects link on /about page link to somewhere

The projects button on the /about route currently links to a non-existent page. Make it link to my GitHub page temporarily until the projects page is ready.

Add Styled Components to the project

Install Styled Components plugins for Gatasby

npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Add the Styled Components Gatsby plugin to the gatsby-config.js file.

plugins: [
  plugins: [`gatsby-plugin-styled-components`],
  // ...other plugins.
]

Create Layout

Create the <Layout /> component for use as a page template.

Add Gatsby SEO

Install necessary plugins

First install the plugins and the dependencies

npm install --save gatsby-plugin-next-seo react-helmet-async

Then add this to the plugin array in gatsby-config.js

module.exports {
  // ...
  plugins: [
    // ...
    'gatsby-plugin-next-seo'
  ],
}

For more information see this link and this one.

Change the Site Metadata

Edit the current site information
Edit the current site information & metadata in gatsby-config.js to include interesting information like:

• social media accounts (LinkedIn, Facebook, Instagram, GitHub, etc)
• think of other interesting data to add to the site information

The current site metadata is something like this:

siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.app/`,
    social: {
      twitter: `kylemathews`,
    },
  }

Fix Lighthouse issues

Run a lighthouse test and fix performance and accessibility issues.

Properly design the 404 page and make it responsive

The 404 page has a design already. Make it responsive.

Add a page for folks to download media materials

As I gain more popularity in the industry, folks would want to invite me to speak or feature me a in podcast or blog article.
They should be able to download materials about me like photo, bio, etc.
Create a page or link to a Google Drive with all those materials in there.

Add Social Media Cards to Website

When a page or blog post link is shared on social media, the link should display the featured image of the blog post as part of the share or the website logo in the case of the page.

Remove Styled Components and use Tailwind CSS instead

Remove styled components and use Taildwind CSS instead.

Add GitHub templates to this repository

• Issues Template
• Pull Requests Template
• commit template