My Personal Website, and some documentation for future use.

I chose to use Bootstrap 4.3.1 as it helps implement the css required to scale my site to mobile. Using the column and grid style formatting makes the website reactive to different browser widths

During the creation of this website, besides web technologies and languages, I also learnt about tools like gulp, browsersync, and Nunjucks.

• ~/src/components/ contains youtube function, and project card function
• ~/src/pages/ contains root pages
• ~/src/projects/ contains all project pages. These will be included into the projects.html page when site is built

Do not edit any html files. These are built using Gulp. Only edit the .njk files

After updating njk file, run the following to build and serve the website locally:

• npm run start

To build the site, without serving locally, run:

• npm run build

Tested with node version 14.7.0 LTS. Was found not to work with 16.1.0

• Carousel
• Carousel2
• Changing Chevron Colour for Carousel
• Filtering projects
• Button filterable portfolio made using Isotope
• html includes and file splitting was done using Nunjucks with a Gulp build system
• Ensure Font remains visible during pageload
• Font Awesome 4.7 icon list
• Creating a 404 page

I used typed.js for the typewriting effect on the home page. https://github.com/mattboldt/typed.js/

Tutorial

For the little icon in the tab/bookmarks: How to guide is here

• Bootstrap requires Javascript, and offers no graceful fallback if javascript is disabled

• an HTML templating engine
• We build into HTML using Gulp
• Good Tutorial
• Old example of site
• Another example/tutorial

• Native lazy-loading for the web
• DesignCourse: Native Lazy Loading + A Fallback Solution ..in 60 seconds
• Google Dev's advice
• https://github.com/aFarkas/lazysizes
• To setup an image for lazy loading, add:

<img class="lazyload" data-src="image.jpg" loading="lazy">

Set up Analytics - Google Help Wiki

• Enabled enhanced measurement on v4; then you can see page views, which page was viewed, outbound clicks, etc.

Agency is a theme for Bootstrap created by Start Bootstrap.

• make better favicon.ico/logo
• spread chevrons out in carousel
• carousel caption -- appear too high up on picture, and aren't very readable --> mask?
• carousel indicators --> change colours
• update media CSS tags
• rename PNG, github seems to mix and match. I've made a (WIP?) gulp script for this.

The following projects are still left to add:

• Node.js Twitter Bot
• reshape reality window frame game
• MachineLearningProjects
• Vue.js To-do list app
• RREF Matrix Solving Robot