badersur / badersur.github.io

A PWA showing completed courses, projects and blog posts.

badersur.github.io v5

This is the source code for my github pages. It's a Progressive Web Application (PWA) showing my skills, completed courses, projects and blog posts using React and Gatsby.

Links

• badersur.github.io (built by Travis CI)

• badersur.netlify.app (built by Netlify's continuous deployment)

Features

• Responsive design using vanilla CSS (Flexbox and Grid).

• Performance optimization - Images, JavaScript, HTML and CSS are minifed.

• Using modern JavaScript/TypeScript features.

• Offline support thanks to Service Worker and gatsby-plugin-offline.

• Static asset revisioning by appending content hash to filenames for better caching.

Prerequisites

• Node.js and (npm or yarn).

  I suggest using nvm to download Node.js and manage multiple versions of it. npm is bundled with Node.js but you may want to update it using the command: npm i npm@latest -g

• Or just use Docker!

Usage

1. Open the Terminal / Command Prompt (cmd).

2. Clone the repo. using git (or download it).

   git clone https://github.com/badersur/badersur.github.io

3. Change your current directory to repo.'s directory.

   cd badersur.github.io

4. Either use Docker or node package managers (npm / yarn):

   • Using Docker, and if you have node installed, then just run:

     • npm run develop:docker and visit http://localhost:8000/ to run the development version of the site.
     • npm run serve:docker and visit http://localhost:9000/ to run the production version.

     In case you don't have node installed, run:

     • for the development version:

       1. docker-compose build to build it.
       2. docker-compose up to run it.

     • for the production version:

       1. docker build -t bs-app . to build it.
       2. docker run --rm --detach --publish 9000:9000 bs-app

     Note: you may need to add sudo before the docker commands!

   • Using package managers:

     1. Install the dependencies using npm or yarn.

        • npm i
        • yarn

     2. Either use npm scripts or Netlify CLI:

        • using npm scripts, run:

          • npm run develop and visit the development version of the app at: http://localhost:8000/en/
          • npm run build to have a production-ready version of the app.
          • npm run serve and open the production version at: http://localhost:9000/en/

        • using Netlify CLI, run:

          1. npm install netlify-cli -g
          2. netlify dev to serve the production version of the app and visit the link shown in the screen...

You may want to read my post: Helpful resources and notes for Udacity's web development course to learn about web development and Google App Engine.

Deploy to Netlify

Test deploying to Netlify with my app as a template, for free!

What happens when you click 'Deploy to Netlify'?

Thanks

• React and Gatsby for their awesome projects

• Jen Simmons and her amazing Layout Land YouTube channel especially her mind-blowing Resilient CSS series

• Wes Bos and his great projects and courses especially:

  • What The Flexbox?! Course
  • eslint-config-wesbos
  • dotfiles repo.
  • JavaScript30 Course

• Traversy Media YouTube Channel and their fantastic courses especially:

  • Web Development Crash Courses
  • Vanilla JavaScript Playlist

• Google's lighthouse project

• Travis CI

• Netlify

• All awesome open source projects :)

License

MIT © Bader Nasser Al-Hashmi