`Max the programmer - AngularJS Site`

This site is just a simple way to display my skills and past experience, as well as test out some new features. I am making the project public in case anyone is interested in looking under the hood!

Located at http://torontoweb.ninja

hosted on Amazon AWS EC2 Instance (Running Ubuntu Server 16.04)
Domain routing and load balancing features provided by Amazon Route53
A password is needed to access the full resume; however it is currently not obscured in the code
- NodeJS server is used to check the password from the user

Getting Started

To get you started you can simply clone this repository and install the dependencies easily:

git clone https://github.com/max-in-to/personal-site.git
cd personal-site
yarn

Run the Application

The simplest way to start this server is:

yarn start

To run for production mode (minified/concatenated/etc):

yarn prod

Now browse to the app at localhost:8000/index.html.

ctrl + c to end the server and kill the scss watcher

Prerequisites

This project was initially built on a barebones skelaton, called angular-seed. Running and testing my site also uses a number of Node.js tools, as well as all of the barebones angular tools included with the angular-seed project. You must have Node.js and its package manager (npm) installed. You can get them from here.

Install Dependencies

We have two kinds of dependencies in this project: tools and Angular framework code. The tools help us manage and test the application.

We get the tools we depend upon via npm, the Node package manager.
We get the Angular code via bower, a client-side code package manager.
In order to run the end-to-end tests, you will also need to have the Java Development Kit (JDK) installed on your machine.

We have preconfigured npm to automatically run bower so we can simply do:

yarn

Behind the scenes this will also call bower install. After that, you should find out that you have two new folders in your project.

node_modules - contains the npm packages for the tools we need
app/assets/bower_components - contains linked Angular framework files

Note that the bower_components folder would normally be installed in the root folder but angular-seed changes this location through the .bowerrc file. Putting it in the app folder makes it easier to serve the files by a web server.

Directory Layout

app/                    --> all of the source files for the application
  assets/               --> all public assets (linked bower assets appear here upon compilation)
      images/               --> images to share
          favicon.ico             --> basic site favicon
        fonts/                  --> Contains custom fonts
        css/                    --> Location of stylesheets generated by sass watcher
        scss/                   --> the details view te
          _base.scss              --> variables and style definitions
          style.scss              --> main scss file
  components/             --> all non-shared views/related components
      summary/                --> the summary view template and logic
        summary.html            --> the partial template
        summary.js              --> the controller logic
      details/                --> the details view template and logic
        details.html            --> the partial template
        details.js              --> the controller logic
  app.js                --> main application module
  index.html            --> app layout file (the main html template file of the app)
package.json          --> yarn/npm package manager file for site
README.md             --> this file that you are reading

Running the App Locally

This project comes preconfigured with a local development web server. It is a Node.js tool called http-server. You can start this web server with yarn start

yarn start takes care of starting/stopping the following:

The web server (at localhost:8000)
The NodeJS API server (at localhost:3000)
The SASS watcher that converts SASS files to CSS on the fly while developing (localhost:8621)

A development/production environment will be available eventually, currently this project is only under development. Alternatively, you can choose to configure your own web server, such as Apache or Nginx. Just configure your server to serve the files under the app/ directory.

Contact

Feel free to contact me about this site or any of my work at max@torontoweb.ninja

References

For more information on AngularJS please check out angularjs.org.

Updates

January 9, 2018: Added sass capabilities for easier prototyping
January 10, 2018: Setup yarn as package manager and config automated setup/running
January 12, 2018: Added short description
January 13, 2018: Styled main page
January 14, Made repo public
January 15, 2018: Fixed full resume - added background colour
January 17, 2018: Added node/express/mongodb server to run locally and test full resume password - also added password to full resume. NOTE: Must setup mongodb rn it is plaintext inside node server
January 20, 2018: Fixed api server for password to be hardcoded for time being
January 25, 2018: Setting up prod env on Amazon EC2
January 26, 2018: Purchased domains, setup DNS routing with Amazon Route 53, update code for initial production env
February 1, 2018: Made the full resume accessible through API call, so as to hide it in sourcecode
February 13, 2018: Fixed project structure (see revisions above); made resume call with password call for security
February 15, 2018: Made torontoweb.ninja an anonymous site
February 20, 2018: Added download button for resume
February 22, 2018: Added dev and production modes as development was getting more complicated; character sheet :O
May 8, 2018: Moved api to separate repo; setup on Canadian EC2 instance

max-in-bc/my-personal-site

Max the programmer - AngularJS Site