Build-a-Portfolio-Site

This is the second project of Part 1, Core Curriculum, Full Stack Web Developer Nanodegree Program. This project is based upon a mockup provided by Udacity.

Table of Contents

1. Installation
2. Screenshots
3. Description
4. References
5. License

Installation

1. To run this project in local environment, clone it with git clone <URL>

2. Once done, open the project in your favorite IDE and run npm install in command prompt on Windows to install the node dependencies as specified in the package.json file. The various dependencied involved are:

     "devDependencies": {
       "grunt": "~0.4.5",
       "grunt-contrib-jshint": "~0.10.0",
       "grunt-contrib-nodeunit": "~0.4.1",
       "grunt-contrib-uglify": "~0.5.0",
       "grunt-contrib-clean": "~0.6.0",
       "grunt-mkdir": "~0.1.2",
       "grunt-contrib-copy": "~0.8.0"
     },
     "dependencies": {
       "grunt-responsive-images": "^0.1.6"
     }
   

3. Then install ImageMagick for respective OS.

4. Once installed, run grunt from the command prompt while within the project directory to create responsive images for the web site. This will create a new folder images which will hold images with different size and density.

5. Now open in the index.html file in your favorite browser to view the project.

To debug in Android: 1. connect your device via USB to your computer. 2. Then enable USB Debugging on the device and run adb start-server from command prompt on computer. 3. Now move to Chrome (if you want to use other browsers, make sure to check how to debug through their documentation) and type chrome://inspect in the address bar. Then set Port and IP Address and port in Port Forwarding settings. 4. Now install simplehttpserver by running the command npm install simplehttpserver -g from the command prompt. Once installed run simplehttpserver <path-to-project-directory> which will start up the server thus, enabling us to debug on Android devices.

Screenshots

Desktop

Nexus 5 Potrait Mode

Nexus 5 Landscape Mode

iPad Potrait Mode

iPad Landscape Mode

Description

This is a portfolio responsive website built with HTML5, CSS3, JS and Bootstrap. The website is tested on Nexus 5, iPad, iPad Pro and HP Laptop for responsiveness. Further customization like pagination, transition between links within the web page were made with basic Javascript and jQuery.

The pagination was implemented with the help of jQuery Pagination plugin.

References

1. Bootstrap
2. jQuery
3. W3Schools
4. Markup Validation
5. CSS3 Validation
6. Responsive Images
7. Responsive Web Design fundamental

License

The content of this repository is licensed under MIT.