https://github.com/irsol/irsol.github.io

My photography portfolio site: Udacity Full Stack Nanodegree Project
https://github.com/irsol/irsol.github.io

bootstrap css fullstack grunt gruntfile gruntjs html img javascript jquery js nodejs npm portfolio udacity udacity-fullstack-nanodegree webpage

Last synced: 4 days ago
JSON representation

My photography portfolio site: Udacity Full Stack Nanodegree Project

• Host: GitHub
• URL: https://github.com/irsol/irsol.github.io
• Owner: irsol
• Created: 2017-06-01T16:27:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-02-10T19:58:26.000Z (almost 5 years ago)
• Last Synced: 2023-09-24T08:44:50.934Z (about 1 year ago)
• Topics: bootstrap, css, fullstack, grunt, gruntfile, gruntjs, html, img, javascript, jquery, js, nodejs, npm, portfolio, udacity, udacity-fullstack-nanodegree, webpage
• Language: HTML
• Homepage: https://www.udacity.com/course/full-stack-web-developer-nanodegree--nd0044
• Size: 4.14 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Udacity FSND Project - Build a Portfolio

## [Link to my project](https://irsol.github.io/)

A portfolio website project for the Full Stack Web Developer Nanodegree (or FSND) Program course. 

Goals:

- Replicate the design in HTML and CSS provided by the Udacity Project. 

- Develop a responsive website that display images, descriptions and links to each of the portfolio projects. 

- Use responsive images, media queries, Bootstrap.

## Project structure

	- index.html - main page of the website

	- main.css - in css folder contains custom css styles

	- fonts - folder with fonts required by Bootstrap

	- img - responsive images

	- img_src - original images

	- js - JavaScript libraries

	- Gruntfile.js contains a script to create different sizes/qualities of the images

	- README.md

## Prerequisites 

This project requires:

- Web Browser

- [Bootstrap](https://getbootstrap.com/) 

- [jQuery](https://jquery.com/)

- [nodejs](https://nodejs.org/en/)

- [Grunt](https://gruntjs.com/)

- [npm](https://www.npmjs.com/)

## Technologies 

I have used several technologies in this project.

[Gruntjs](http://gruntjs.com/)

Gruntjs is a taskrunner that I've used to automate sizes and quality for my photos.

[Bootstrap](http://getbootstrap.com/)

Bootstrap is an HTML5/CSS3 framework that I've used to help structure my website.

### Prepare images

1. Install nodejs by following instructions from [nodejs](https://nodejs.org/en/download/)

2. Update *npm* by running following command: _npm install npm@latest -g_

3. Install *grunt* by following instructions from [grunt](https://gruntjs.com/installing-grunt)

4. To prepare responsive images run Granjs by typing _grunt_ in the command line.

### Run the webpage

To run the webpage: open index.html in your internet browser.