<!DOCTYPE html>
<html ng-app="PORTFOLIO" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Portfolio ANGULAR</title>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="site.css" />
</head>
<body>
<div class="container">
<ng-include src="'navigation.html'"></ng-include>
<div ui-view=""></div>
</div>
<!--Libraries-->
<script data-require="jquery@*" data-semver="1.11.3" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<script data-require="angular-resource@*" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-resource.js"></script>
<script data-require="angular-mocks.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-mocks.js"></script>
<script data-require="angular-mocks.js@*" data-semver="1.3.15" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script data-require="angular-ui-bootstrap@0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script data-require="d3@*" data-semver="3.5.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script data-require="angular-ui@*" data-semver="0.4.0" src="http://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script data-require="ui-utils@*" data-semver="0.1.1" src="http://angular-ui.github.io/ui-utils/dist/ui-utils.js"></script>
<script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
<!--Applications-->
<script src="portfolio.js"></script>
<!--Controllers-->
<script src="productListController.js"></script>
<script src="productDetailController.js"></script>
<script src="productEditController.js"></script>
<!--Services-->
<script src="common.services.js"></script>
<script src="productService.js"></script>
<script src="productCustomService.js"></script>
<!--Mocks-->
<script src="common.mocks.js"></script>
<script src="productMock.js"></script>
<!--Charts-->
<script src="common.charts.js"></script>
<script src="chartController.js"></script>
<!--Filters-->
</body>
</html>
// Code goes here
(function() {
'use strict';
var app = angular.module("PORTFOLIO",
[
"ui.router",
"ui.bootstrap",
"ui.mask",
"common.services",
"common.mocks",
"common.charts",
"angularCharts"
]);
app.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
// .state("home", {
// url: "/",
// templateUrl: "resume.html"
// })
.state("resume", {
url: "/",
templateUrl: "resume.html"
})
.state("chart", {
url: "/chart",
templateUrl: "chart.html",
controller: "chartController"
// resolve: {
// productService: "productService",
// products: function(productService) {
// return productService.query().$promise;
// }
// }
})
.state("productList", {
url: "/products",
templateUrl: "productListView.html",
controller: "productListController as vm"
})
.state("productEdit", {
abstract: true,
url: "/products/edit/:productId",
templateUrl: "productEditView.html",
controller: "productEditController as vm",
resolve: {
productService: "productService",
product: function(productService, $stateParams) {
var productId = $stateParams.productId;
return productService.get({
productId: productId
}).$promise;
}
}
})
.state("productEdit.info", {
url: "/info",
templateUrl: "productEditInfoView.html"
})
.state("productEdit.price", {
url: "/price",
templateUrl: "productEditPriceView.html"
})
.state("productEdit.tags", {
url: "/tags",
templateUrl: "productEditTagsView.html"
})
.state("productDetail", {
url: "/products/:productId",
templateUrl: "productDetailView.html",
controller: "productDetailController as vm",
resolve: {
productService: "productService",
product: function(productService, $stateParams) {
var productId = $stateParams.productId;
return productService.get({
productId: productId
}).$promise;
}
}
})
.state("node", {
url: "/node",
templateUrl: "node.html"
});
}
]);
}());
/* Styles go here */
* {
margin: 0;
padding: 0;
}
img {
width: 3em;
height: 3em;
}
/* play with css3 */
.welcome-panel {
font-size: 500%;
}
.resume {
padding: 1em;
}
.resume li {
list-style-type:none;
}
/* .chart {
width: 100%;
height: 300px;
} */
.wizard a {
background: #EFEFEF;
display: inline-block;
margin-right: .2em;
min-width: 7em;
outline: none;
padding: .5em 3em .5em;
position: relative;
text-decoration: none;
}
.wizard .active {
background: #007ACC;
color: #FFF;
}
form {
padding: 1em;
}
form legend {
font-size: 2.5em;
line-height: 2;
}
form.non-edit input:disabled,
form.non-edit textarea:disabled {
border: none;
}
Created by Sereymony ROS (June 2015)
- Angular.js
- D3.js
- Javascript
- HTML5
- CSS3
- Node.js
- Bootstrap
(function () {
'use strict';
angular
.module("common.services")
.factory("productCustomService", productCustomService);
function productCustomService() {
function calculateMarginProfit(price,cost) {
return price - cost;
}
function calculateMarginPercent(price,cost) {
return "%" + ((price - cost) / cost) * 100;
}
return { calculateMarginProfit: calculateMarginProfit,
calculateMarginPercent: calculateMarginPercent };
}
}());
(function () {
'use strict';
angular
.module("PORTFOLIO")
.controller("productDetailController",
[
"product",
"$state",
"productCustomService",
productDetailController
]);
function productDetailController(product,$state, productCustomService) {
var vm = this;
vm.product = product;
vm.marginProfit = productCustomService.calculateMarginProfit(vm.product.price,vm.product.cost);
vm.marginPercent = productCustomService.calculateMarginPercent(vm.product.price,vm.product.cost);
vm.title = "Product Detail: " + vm.product.productName;
vm.cancel = function() {
$state.go("productList");
}
}
}());
<div class="panel panel-primary">
<div class="panel-heading" style="font-size:large;">{{ vm.title }}</div>
<form class="form-horizontal non-edit" role="form">
<fieldset>
<legend>{{ title }}</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="productName">Product Name:</label>
<div class="col-md-4">
<input
ng-model="vm.product.productName"
type="text"
class="form-control"
value="{{ vm.product.productName }}"
id="productName"
ng-disabled="true" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productCode">Code:</label>
<div class="col-md-4">
<input ui-mask="AAA-****"
ng-model="vm.product.productCode"
type="text"
value="{{ vm.product.productCode }}"
id="productCode"
class="form-control"
ng-disabled="true" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productAvailability">Availability:</label>
<div class="col-md-4">
<div class="input-group">
<input
type="text"
ng-model="vm.product.releaseDate"
class="col-md-6 form-control"
value="{{ vm.product.releaseDate | date:short }}"
id="productAvailability"
ng-disabled="true" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productDescription">Description:</label>
<div class="col-md-8">
<textarea
ng-model="vm.product.description"
type="text"
class="col-md-6 control-label"
value="{{ vm.product.description }}"
id="productDescription"
ng-disabled="true">
</textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productPrice">Cost:</label>
<div class="col-md-4">
<input
ng-model="vm.product.cost"
type="text"
class="col-md-6 form-control"
value="{{ vm.product.cost }}"
id="productPrice"
ng-disabled="true" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productPrice">Price:</label>
<div class="col-md-4">
<input
ng-model="vm.product.price"
type="text"
class="col-md-6 form-control"
value="{{ vm.product.price }}"
id="productPrice"
ng-disabled="true" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="profit">Profit:</label>
<div class="col-md-4">
<input
ng-model="vm.marginProfit"
type="text"
class="col-md-6 form-control"
value="${{ vm.marginProfit | currency}}"
id="profit"
ng-disabled="true" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="profit">Margin Percent:</label>
<div class="col-md-4">
<input
ng-model="vm.marginPercent"
type="text"
class="col-md-6 form-control"
value="{{ vm.marginPercent | number:2 }}"
id="profit"
ng-disabled="true" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="profit">Tags:</label>
<div class="col-md-4">
<input
ng-model="vm.product.tags"
type="text"
class="col-md-6 form-control"
value="{{ vm.vm.product.tags }}"
id="tags"
ng-disabled="true" />
</div>
</div>
</fieldset>
</form>
<div class="panel-footer">
<button ng-click="vm.cancel()" class="btn btn-default">Back to list</button>
</div>
</div>
(function () {
'use strict';
angular
.module("PORTFOLIO")
.controller("productEditController",
[
"product",
"$state",
"productCustomService",
productEditController
]);
function productEditController(product,$state,productCustomService) {
var vm = this;
vm.product = product;
if (vm.product && vm.product.productId) {
vm.productTitle = "Edit: " + product.productName;
}else {
vm.productTitle = "New Product";
}
vm.marginProfit = productCustomService.calculateMarginProfit(product.price,product.cost);
vm.marginPercent = productCustomService.calculateMarginPercent(product.price,product.cost);
vm.submit = function() {
vm.product.$save();
vm.cancel();
}
vm.cancel = function() {
$state.go("productList");
}
vm.toggleDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
vm.toggleDatePickered = !vm.toggleDatePickered;
};
vm.addTags = function(tags){
if (tags) {
var array = tags.split(' ');
vm.product.tags = vm.product.tags ? vm.product.tags.concat(array) : array;
vm.newTags = "";
} else {
alert("Please enter one or more tags seperated by space")
}
}
vm.removeTag = function(idx){
vm.product.tags.splice(idx,1);
}
}
}());
<form name="saveForm" novalidate>
<div class="panel panel-primary">
<div class="panel-heading" style="font-size:large;">{{ vm.productTitle }}</div>
<div class="panel-body">
<div class="wizard">
<a ui-sref=".info" ui-sref-active="active">Basic Information</a>
<a ui-sref=".price" ui-sref-active="active">Price Details</a>
<a ui-sref=".tags" ui-sref-active="active">Search Tags</a>
</div>
</div>
<div ui-view></div>
<div class="panel-footer">
<button ng-click="vm.cancel()" class="btn btn-default">Cancel</button>
<button ng-click="vm.submit()" class="btn btn-primary" ng-disabled="saveForm.$invalid">Save</button>
</div>
</div>
</form>
(function () {
'use strict';
angular
.module("PORTFOLIO")
.controller("productListController",
[
"productService",
productListController
]);
function productListController(productService) {
var vm = this;
productService.query(function (data) {
vm.products = data;
});
vm.showImage = true;
vm.toggleImage = function () {
vm.showImage = !vm.showImage;
};
}
}());
<section>
<div class="panel-body">
<form class="form-horizontal">
<legend>Search/Sort product</legend>
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label" for="search">Search</label>
<div class="col-md-4">
<input
ng-model="search"
type="search"
class="form-control"
placeholder="Search product"
id="search" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="search">Sort</label>
<div class="col-md-4">
<select ng-model="sortProduct">
<option value="productName" selected>Product Name</option>
<option value="price">Price</option>
</select>
</div>
</div>
</fieldset>
</form>
<table class="table">
<thead>
<tr>
<th><button ng-click="vm.toggleImage()" class="btn btn-primany">Toggle image</button></th>
<th>Name</th>
<th>Code</th>
<th>Price</th>
<th>Description</th>
<th>Date</th>
<th>Editable</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in vm.products | orderBy: sortProduct | filter:search">
<td><img ng-if="vm.showImage" ng-src="{{ product.imageUrl }}" alt="{{ product.productName }}" /></td>
<td><a ui-sref="productDetail({productId: product.productId})">{{ product.productName }}</a></td>
<td>{{ product.productCode }}</td>
<td>{{ product.price }}</td>
<td>{{ product.description }}</td>
<td ng-model="product.ReleaseDate">{{ product.releaseDate | date:short }}</td>
<td><a class="btn btn-primary" ui-sref="productEdit.info({productId: product.productId})">Edit</a></td>
</tr>
</tbody>
</table>
<div>
<a
class="btn btn-primary"
ui-sref="productEdit.info({productId:0})">
<i class="glyphicon glyphicon-plus pull-left"></i> Add New Product
</a>
</div>
</div>
</section>
(function () {
'use strict';
angular
.module("common.mocks")
.run(function ($httpBackend) {
var products =
[
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "Leaf rake with 48-inch wooden handle.",
"cost": 8.59,
"price": 19.95,
"productCode": "GDN-0011",
"productId": 1,
"productName": "Leaf Rake",
"releaseDate": "2009-03-19T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "15 gallon capacity rolling garden cart",
"cost": 18.59,
"price": 32.99,
"productCode": "GDN-0023",
"productId": 2,
"productName": "Garden Cart",
"releaseDate": "2010-03-18T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "Ergonomic firm-grim hand cultivator",
"cost": 1.59,
"price": 9.99,
"productCode": "GDN-0035",
"productId": 3,
"productName": "Hand Cultivator",
"releaseDate": "2012-03-18T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "Firm grip 14-inch hand trowel",
"cost": 2.59,
"price": 6.99,
"productCode": "GDN-0067",
"productId": 4,
"productName": "Hand Trowel",
"releaseDate": "2013-03-22T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "Curved claw steel hammer",
"cost": 6.59,
"price": 8.99,
"productCode": "TBX-0048",
"productId": 5,
"productName": "Hammer",
"releaseDate": "2013-05-21T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "5.55 mm and 7 mm double open-ended wrench",
"cost": 0.59,
"price": 12.99,
"productCode": "TBX-0045",
"productId": 6,
"productName": "Wrench",
"releaseDate": "2013-05-15T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "Reel-type push lawn mower",
"cost": 2.59,
"price": 15.29,
"productCode": "GDN-0006",
"productId": 7,
"productName": "Push Mower",
"releaseDate": "2008-05-01T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "15-inch steel blade hand saw",
"cost": 8.59,
"price": 11.55,
"productCode": "TBX-0022",
"productId": 8,
"productName": "Saw",
"releaseDate": "2009-05-15T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "14-in Aluminum Pipe Wrench",
"cost": 3.59,
"price": 13.95,
"productCode": "TBX-0045",
"productId": 9,
"productName": "Pipe Wrench",
"releaseDate": "2009-06-15T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "Standard two-button video game controller",
"cost": 18.59,
"price": 35.95,
"productCode": "GMG-0042",
"productId": 10,
"productName": "Video Game Controller",
"releaseDate": "2002-10-15T00:00:00-07:00"
},
{
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/91/molumen-fern.png",
"description": "Everyone wants one!",
"cost": 88.59,
"price": 100,
"productCode": "APL-123456",
"productId": 11,
"productName": "iWatch",
"releaseDate": "2015-03-10T16:55:08.535279-07:00"
}
];
var interceptUrl = "/api/products";
$httpBackend.whenGET(interceptUrl).respond(products);
var editRegex = new RegExp(interceptUrl + "/[0-9][0-9]*", '');
$httpBackend.whenGET(editRegex).respond(function(method, url, data) {
var product = { "productId": 0 };
var parameters = url.split('/');
var id = parameters[parameters.length - 1];
if (id > 0) {
for (var i = 0; i < products.length; i++) {
if (products[i].productId == id) {
product = products[i];
break;
}
}
}
return [200, product, {}];
});
$httpBackend.whenPOST(interceptUrl).respond(function(method, url, data) {
var product = angular.fromJson(data);
if (!product.productId) {
product.productId = products.length + 1;
products.push(product);
} else {
for (var i = 0; i < products.length; i++) {
if (products[i].productId == product.productId) {
products[i] = product;
break;
}
}
}
return [200, product, {}];
});
// $httpBackend.whenGET("home.html").passThrough();
$httpBackend.whenGET("navigation.html").passThrough();
$httpBackend.whenGET("productListView.html").passThrough();
$httpBackend.whenGET("productDetailView.html").passThrough();
$httpBackend.whenGET("productEditView.html").passThrough();
$httpBackend.whenGET("productEditInfoView.html").passThrough();
$httpBackend.whenGET("productEditPriceView.html").passThrough();
$httpBackend.whenGET("productEditTagsView.html").passThrough();
$httpBackend.whenGET("resume.html").passThrough();
$httpBackend.whenGET("chart.html").passThrough();
$httpBackend.whenGET("node.html").passThrough();
//$httpBackend.whenGET(/^\/products\//).passThrough();
});
}());
(function () {
'use strict';
angular
.module("common.services")
.factory("productService",
[
"$resource",
productService
]);
function productService($resource) {
return $resource("/api/products/:productId");
}
}());
(function () {
'use strict';
angular.module("common.charts",[]);
}());
(function () {
'use strict';
angular.module("common.mocks", ["ngMockE2E"]);
}());
(function () {
'use strict';
angular.module("common.services", ["ngResource"]);
}());
<!--<div class="panel panel-primary text-center">-->
<!-- <div class="panel-heading welcome-panel">Welcome Page</div>-->
<!--</div>-->
<header>
<nav class="navbar navbar-inverse">
<div class="container">
<a ui-sref="resume" class="navbar-brand">Resume</a>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
<span class="sr-only">Tottle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a ui-sref="productList">Angular</a>
</li>
<li>
<a href="http://embed.plnkr.co/05o2JaA67Ki42OmDAdyN/preview" target="parents">D3</a>
</li>
<li>
<a ui-sref="node">Node.js</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="resume">
<div class=text-center>
<hgroup>
<h1>Sereymony Ros</h1>
<h4>sereymonyros@gmail.com</h4>
<h4>(206)747-7313</h4>
<h3>Objective: Seeking a Front-End Developer position which specializing in User Interface Experiences and Data Driven Documents</h3>
</hgroup>
</div>
<div>
<p><b>Summary</b></p>
<ul>
<li>Six years experiences in Front-End web developing using cutting edge technologies. </li>
<li>Develop webpages viewable by all devices such as Mobile, Tablet, and Desktop.</li>
<li>Expert in HTML5, CSS3, Bootstrap, Jquery, SASS, RWD, AWD, Accessibilities, Localization, RTL and LTR and cross browsers compatibility.</li>
<li>Familiar with JavaScript Framework such as Angular, Ember, Typescript and D3.js for graphing.</li>
<li>Excellent software development life cycle skills include design and review software development spec, analysis, debug, and troubleshot of huge and complex problems.</li>
<li>Experienced in agile development environment and scrum: working quickly, release often, and able to ramp-up quickly on complex codes.</li>
<li>Team players and outstanding communication skills between team members, project managers, and designers.</li>
<li>Can-do attitude and task-driven.</li>
<li>Passion about the next generation of web technologies.</li>
<li>TDD: qUnit and Jasmine</li>
<li><a href="http://embed.plnkr.co/QjvTXbhBZMi6lNTX14Fh/preview" target="_blank" title="Portfolio">Portfolio</a></li>
</ul>
</div>
<div>
<h2><b>Employment History</b></h2>
<p><b>10/2010 – Present: Software Development Engineer(Microsoft Corporation)</b></p>
<div>I am fully responsible for all UI/UX experiences in making comps come to live. Building responsive layout for most viewable screen monitors, making HTML structures from sketch (comprehensive layout) and be sure they are all semantic and pass validations. Making pages Accessibility including High Contrast Mode, Screen Reader, and localized from Right to left (RTL) and vise-versa (LTR). Styling them accordingly with user interaction experiences and testing all pages are working perfectly in supported/targeted browsers. Working as a team player and using Javascript framework (AngularJS) and bootstrap to connect to API called and communicate with Back-end code. Writing custom Jqeury plugins to match with define requirements and making generic functions to be reusable.
</div>
<div>
<h3><b>General responsibilities:</b></h3>
<dl>
<dt>Business Account Management (BAM): <a href="https://commerce.microsoft.com" title="BAM" target="_blank">https://commerce.microsoft.com</a></dt>
<dd>Redesign the sites, the layout out, the structure and styling. Making the sites to become responsible layout (RWD) and fully accessibilities with latest technologies. Test in real Android and Ios devices with real life debug from PC to mobile.</dd> <br />
<dt>Gifting in (BAM): <a href="https://commerce.microsoft.com/gifting" title="eGifting" target="_blank">https://commerce.microsoft.com/gifting</a></dt>
<dd>Built pages from scratch with end to end flow from selecting templates till the end of buying gift card.</dd><br />
<dt>Catalog Cayman: <a href="https://catalog.cp.microsoft.com" title="Catalog" target="_blank">https://catalog.cp.microsoft.com</a></dt>
<dd>Built HTML and style according to the comps. Built wizard popup dialog using jQuery and correspondence with Model (Business logic) in MVC.</dd><br />
<dt>Prototype Microsoft Store <a href="http://www.microsoft.com/en-us/default.aspx" title="Microsoft Store" target="_blank"></a></dt>
<dd>Designed & coded APIs called to Gateway & Catalog object and made Microsoft Store project working properly in an intensive & comprehensive time.
Managed to write code and demonstrated APIs called to get object’s data using agile methodology. Used C#, MVC5, JsRender, CSS3 and HTML5 to dynamically created pages and responsive.</dd><br />
<dt>Commerce Portal UX: <a href="https://orgaccount.microsoft.com" title="Portal" target="_blank">https://orgaccount.microsoft.com</a></dt>
<dd>
<ul>
<li>Used blank Azure framework and build dynamics pages; thus, clients are able to view and buy-more subscriptions.</li>
<li>Used cutting edge HTML5 cool features such as WAI-ARIA roles and CSS3. </li>
<li>Built dynamic bar-chart by using JS-Render and JSon to render pages and custom Jquery Plugin for Buy-More Wizard. </li>
</ul>
</dd><br />
<dt>Seller Dashboard UX: <a href="https://sellerdashboard.microsoft.com" title="Seller Dashboard" target="_blank">https://sellerdashboard.microsoft.com</a></dt>
<dd>
<ul>
<li>Converted wireframe to real-world dynamics pages using HTML5, CSS3, Jquery templates, and MVC5 infrastructures.</li>
<li>Made all web pages are viewable, readable, and accessible to all people and all modes such as screen reader, and high contract mode. </li>
<li>Used Json to get dynamic data structures and built Jquery templates for dynamic bar-chart.</li>
<li>Used Ajax to connecting to server to reduce the amount of calling and speedup the loading page.</li>
</ul>
</dd><br />
<dt>Pinpoint UX: <a href="https://pinpoint.microsoft.com" title="Seller Dashboard" target="_blank">https://pinpoint.microsoft.com</a></dt>
<dd>
<ul>
<li>Designed, built, and coded Ektron templates (smartforms) by using XSLT and X-Path to structure HTML for content team.</li>
<li>Built web pages to support more than hundred different languages and handle for all localization issues.</li>
<li>Improved the visibility of websites by using Search Engine Optimization skills. </li>
</ul>
</dd>
</dl><br />
<div><p><b>04/2008 – 10-2010: Freelance (Web/.Net Developer)</b></p></div>
<p>Seattle and Puget Sound Area</p>
<ul>
<li>Designed and developed from sketch to wireframe to dynamic pages. </li>
<li>Expert in designing dynamic HTML pages with strongly Search Engine Optimization skills. </li>
</ul>
</div>
</div>
</section>
<!--<div class="content">-->
<!-- <div class="panel panel-primary">-->
<!-- <div class="panel-heading">{{ title }}</div>-->
<!-- <div class="panel-body">-->
<!-- <div class="col-md-12">-->
<!--<div class="chart" ac-chart="'bar'" ac-data="chartData" ac-config="chartConfig"></div>-->
<!-- <div ac-chart="'bar'" ac-data="Data" ac-config="Config"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!--<style>-->
<!-- #chart {-->
<!-- width: 1005;-->
<!-- height: 100px;-->
<!-- }-->
<!--</style>-->
// (function () {
// 'use strict';
// angular
// .module("PORTFOLIO")
// .controller("chartController", ["$scope",chartController]);
// function chartController($scope) {
// $scope.title = "Mony";
// }
// }());
<form class="form-horizontal" role="form" name="infoForm" novalidate>
<fieldset>
<legend>Basic Product Information</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="productName">Product Name:</label>
<div class="col-md-4">
<input
ng-model="vm.product.productName"
type="text"
class="form-control"
value="{{ vm.product.productName }}"
id="productName"
name="productName"
required />
<div class="text-danger" ng-show="infoForm.productName.$error.required && infoForm.productName.$dirty">Please enter Product Name.</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productCode">Code:</label>
<div class="col-md-4">
<input ui-mask="AAA-****"
ng-model="vm.product.productCode"
type="text"
value="{{ vm.product.productCode }}"
id="productCode"
name="productCode"
class="form-control"
required />
<div class="text-danger" ng-show="infoForm.productCode.$error.required && infoForm.productCode.$dirty">Please enter Product Code.</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productAvailability">Availability:</label>
<div class="col-md-4">
<div class="input-group">
<input
type="text"
ng-model="vm.product.releaseDate"
class="col-md-6 form-control"
value="{{ vm.product.releaseDate }}"
datepicker-popup="MMMM dd, yyyy"
is-open="vm.toggleDatePickered"
id="productReleaseDate"
name="productReleaseDate"
required />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.toggleDatePicker($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<div class="text-danger" ng-show="infoForm.productReleaseDate.$error.required && infoForm.productReleaseDate.$dirty">Please enter Product Date.</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productDescription">Description:</label>
<div class="col-md-8">
<textarea
ng-model="vm.product.description"
type="text"
class="col-md-6 control-label"
value="{{ vm.product.description }}"
id="productDescription"
name="productDescription"
required >
</textarea>
<div class="text-danger" ng-show="infoForm.productDescription.$error.required && infoForm.productDescription.$dirty">Please enter Product Description.</div>
</div>
</div>
</fieldset>
</form>
<form class="form-horizontal" name="priceForm" novalidate>
<fieldset>
<legend>Product Information</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="productPrice">Cost:</label>
<div class="col-md-4">
<input
ng-model="vm.product.cost"
type="text"
class="col-md-6 form-control"
value="{{ vm.product.cost }}"
id="productCost"
name="productCost"
required />
<div class="text-danger" ng-show="priceForm.productCost.$error.required && priceForm.productCost.$dirty">Please enter Product Date.</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="productPrice">Price:</label>
<div class="col-md-4">
<input
ng-model="vm.product.price"
type="text"
class="col-md-6 form-control"
value="{{ vm.product.price }}"
id="productPrice"
name="productPrice"
required />
<div class="text-danger" ng-show="priceForm.productPrice.$error.required && priceForm.productPrice.$dirty">Please enter Product Date.</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="profit">Profit:</label>
<div class="col-md-4">
<input
ng-model="vm.marginProfit"
ng-disabled="true"
type="text"
class="col-md-6 form-control"
value="${{ vm.marginProfit | currency}}"
id="profit" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="profit">Margin Percent:</label>
<div class="col-md-4">
<input
ng-model="vm.marginPercent"
ng-disabled="true"
type="text"
class="col-md-6 form-control"
value="{{ vm.marginPercent | number:2 }}"
id="profit" />
</div>
</div>
</fieldset>
</form>
<form class="form-horizontal">
<fieldset>
<legend>Product Search Tags</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="productPrice">Tags:</label>
<div class="col-md-4">
<input
ng-model="vm.newTags"
type="text"
class="col-md-6 form-control"
value="{{ vm.product.cost }}"
placeholder="Add tags for keywords seperate by space"
title="Add tags for keywords seperate by space"
id="productPrice" />
</div>
<div class="col-md-1">
<button
class="btn btn-primary"
type="button"
title="Add the specified tags"
ng-click="vm.addTags(vm.newTags)">
Add
</button>
</div>
<div class="row col-md-8 col-md-offset-2">
<span ng-repeat="tag in vm.product.tags | orderBy">
<button
class="btn btn-default"
ng-click="vm.removeTag($index)">
{{ tag }}
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
</fieldset>
</form>
<div class="content">
<div class="panel panel-primary">
<div class="panel-heading">Node.js is coming soon -</div>
</div>
</div>