GitXplorerGitXplorer
y

portfolio-site-template

public
0 stars
1 forks
0 issues

Commits

List of commits on branch master.
Unverified
617412e19de95c65d8249354d6aa4726854620a2

Update bootstrap version

yyangshun committed 10 years ago
Unverified
34f45bf2ad37368792b8511c81732c8f8690fc11

Modified instructions

yyangshun committed 10 years ago
Unverified
4be2fc2f85041799702153f7e7754622e7b21431

Updated readme instructions

yyangshun committed 10 years ago
Unverified
cb4f4301fe500e6725887b302bf4efe4040152d9

OCD again.

yyangshun committed 10 years ago
Unverified
bb2a691d5e42b5ce814de0dc3b4b5d1809fb8d07

Use relative path for homepage

yyangshun committed 10 years ago
Unverified
e32abc848898fc873a526b55de87759c789d418a

Use relative path for portfolio.json

yyangshun committed 10 years ago

README

The README file for this repository.

CS3240 Lab Bootstrap Assignment

Introduction

The homepage is located inside index.html. This website is a single-page application built using AngularJS for routing, templating, and part of the user interaction. Bootstrap was used for the CSS layouts and Animate.css was used for adding flashy features.

Description

This site is my portfolio site where I showcase my past projects and resume. I have been working on front end development for a few years now.

Walkthrough

Usage of a grid system

This was used throughout the webpage which can be inspected from the source code.

Responsive Design

Using Bootstrap 3, sites are responsive out of the box. Resize the browser width to see this in action. The nav bar automatically collapses to form a mobile-friendly navigation bar. Columns are also stacked on top of each other, which can be see from the portfolio page.

Base CSS
  • Forms: Used in the Contact page.
  • Responsive Images: Used in the Portfolio page.
  • Responsive Utilities: Used for hiding the name in the navigation bar on mobile.
Components
  • Navbar: Used for the navigation bar of the page.
  • Labels: Used for labels on the Portfolio page.
JavaScript
  • Carousel: Used for screenshots of certain project on the Portfolio page, such as NUSMods and Una.

Form Validation

  • AngularJS' built-in form validation is used to check for the valid state of the form. There's no need for jQuery here.

jQuery Effects

  • The form is hidden using hide() after the user has entered valid form input and hits on "Submit".

Usability and Aesthetics

  • The page has a simple and straightforward navigation system by keeping the navigation bar at the top. Also, all pages can be accessed from every page, so that users do not get lost while surfing the page.
  • CSS3 animations have been used throughout the site to make the content more dynamic.

Special Note to TA

The base site was generated using Yeoman's web app generator. Yeoman is a scaffolding tool for quick setting up of websites. To run the site locally, please refer to the following steps:

To setup:

npm install -g bower grunt-cli
bower install
npm install

Build for development:

grunt serve

Build for development:

grunt build