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.
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.
This was used throughout the webpage which can be inspected from the source code.
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.
- 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.
- Navbar: Used for the navigation bar of the page.
- Labels: Used for labels on the Portfolio page.
- Carousel: Used for screenshots of certain project on the Portfolio page, such as NUSMods and Una.
- AngularJS' built-in form validation is used to check for the valid state of the form. There's no need for jQuery here.
- The form is hidden using
hide()
after the user has entered valid form input and hits on "Submit".
- 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.
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