Skip to content
View mattmayo's full-sized avatar
👋
👋
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.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
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 (past version as I'm using postcard now)

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 Loading

  1. mattmayo mattmayo Public

    TypeScript 1

  2. ios-examples ios-examples Public

    C++

  3. ios-take-a-selfie ios-take-a-selfie Public

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

    Swift 1

  4. react-native-foursquare-clone react-native-foursquare-clone Public

    JavaScript 1

  5. try-nestjs try-nestjs Public

    TypeScript

  6. try-deno try-deno Public

    Playground for learning Deno!

    TypeScript