Responsive website built with jQuery, LESS, and Node.js.
This repo holds the files for my portfolio website, which you can view at www.carmenvkrol.com. Note that this website is deployed from the Github repo: carmenvkrol.github.io.
Configuring this project should be consistent across Mac (local) and Vagrant. You should already have Node.js installed before cloning.
Start by cloning the repository
$ git clone https://github.com/carmenvkrol/portfolio-website.git.
This app uses Grunt to run tasks. Install the Grunt Command Line Interface (grunt-cli) locally on your machine.
$ npm install -g grunt-cli
Once that's complete, install the remaining dependencies, except Bower, by running
$ npm install
Then install bower packages by running:
$ bower install
To see the site locally, open index.html in your browser.
In order to prepare for deployment, including minifying files, run:
$ grunt
portfolio-website/
|__dist/ #client-side production files
|__scripts/ #client-side custom jQuery file
|__styles/ #client-side style files, both CSS and LESS
Gruntfile.js
index.html
This app uses the CSS pre-processor LESS in order to facilitate styling with Bootstrap, which is included. LESS files can be found in the styles direcotry. In order for these files to be converted into CSS, and modify styling in the views, save LESS files within the less folder.
To compile LESS into CSS, run:
$ grunt less
A list of the plugins used by Grunt and what they're used for:
Grunt - installs grunt, which automates many JavaScript tasks
Grunt-Autoprefixer - parses CSS and adds vendor-prefixed CSS properties
Grunt-Concurrent - runs grunt tasks concurrently
Grunt-Contrib - collection of common grunt tasks
Grunt-Contrib-Clean - cleans files and folders
Grunt-Contrib-Concat - concatenates files for production mode
Grunt-Contrib-Connect - starts a static web server
Grunt-Contrib-Copy - copies files and folders for production mode
Grunt-Contrib-CSSmin - minifies CSS files for production
Grunt-Contrib-HTMLmin - minifies HTML files for production
Grunt-Contrib-Imagemin - minifies image files for production
Grunt-Contrib-Less - compiles LESS files into CSS. See LESS section below for more details about styles in this application.
Grunt-Contrib-Uglify - compresses and minifies JavaScript files
Grunt-Filerev - static asset revisioning through file content hash
Grunt-Google-CDN - replaces refs on the Google CDN
Grunt-Karma - for running Karma, a test runner for JavaScript.
Grunt-Newer - configures grunt tasks to run with newer files only
Grunt-SVGmin - minifies SVG files
Grunt-Usemin - replaces references to non-optimized scripts or stylesheets into a set of HTML files
Grunt-Wiredep - injects Bower packages into source code
Load-Grunt-Tasks - loads grunt tasks simulataneously instead of individually
Time-Grunt - displays elapsed execution time of grunt tasks
A list of other plugins used in this application and their purpose:
JSHint-Stylish - stylish reporter for JSHint
