Skip to content
Avatar
👋
👋

Achievements

Achievements

Block or Report

Block or report mattmayo

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
mattmayo/README.md

CI

This is my personal website mattmayo.com

This serves as a playground so that I can code and learn about web technologies and frameworks. While it is simple now, I plan to continue to add more content.

Some of the technologies used

  • Gatsby
    • Web application framework that serves as a foundation for the site
  • GitHub Actions
    • Continuous integration that includes linting, testing, and building the app
  • GitHub Pages
    • Securely hosts the web application for free
  • GraphQL
    • Allows retreiving different sizes for images to support responsive screens
  • ESLint
    • Static code analyzer to find and automatically fix code
  • Node.js
    • Web server and development environment for applications leveraging JavaScript or TypeScript languages
  • Node Version Manager (nvm)
    • Installs and provides tooling to support multilple versions of Node.js
  • PostCSS
    • Cascading style sheets (CSS) tooling
    • Helps with things like linting CSS and transpiling future CSS
  • Prettier
    • Code formatter for JavaScript and TypeScript
  • React
    • Library for building user interfaces via a simple component architecture
  • Tailwind CSS
    • CSS framework that is designed to reduce lines of code and ease styling
  • Typescript
    • Typed programming language that is a superset of JavaScript
  • Webpack

How to setup the development environment

  1. Install Node.js, the long term support (LTS) version.
    1. I recommend using nvm, but this is not required as long as you have Node.js installed.
    2. You will also be using Node Package Manager (npm), but this comes with Node, so it doesn't need to be installed explicitly.
  2. In your shell of choice execute the following command in the root directory
    npm install
  3. To run the application execute
    npm run start
  4. Navigate to http://localhost:8000 and voilà!

How to to deploy

Currently, the repo is not setup to deploy automatically and this will need to be done from a local workstation.

  1. If you haven't already, install packages.
    npm install
  2. To deploy from master execute
    npm run deploy
  3. Navigate to the repo settings page and update the Custom domain field to matt.mayo.com. This is required because deployment script resets this field to empty. TODO figure out why that happens.

There's still much to do! Here are few things.

  • Add search engine optimization (SEO)
  • Add tree shaking to reduce deployed artifcact sizes (JS bundles, CSS, etc)
  • Automate deployment using GitHub Actions
  • Add metrics for things like page visits
  • Add monitoring for when the site goes down, etc.
  • Add more content!

In progress work at Revamp Personal Website (2020) project space

Issues backlog via issues page

Pinned

  1. mattmayo Public

    TypeScript 1

  2. C++

  3. Sample application that takes a photo or allows a selection of a photo from the gallery using UIImagePickerController.

    Swift 1

  4. TypeScript

  5. try-deno Public

    Playground for learning Deno!

    TypeScript

10 contributions in the last year

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Jan Mon Wed Fri
Activity overview

Contribution activity

January 2022

1 contribution in private repositories Jan 13

Seeing something unexpected? Take a look at the GitHub profile guide.