unserver-unify
Version:
369 lines (334 loc) • 22.8 kB
HTML
<div ng-controller="MyProfileCtrl as ctrl">
<!-- User Block -->
<a class="fa fa-pencil pull-right" href="" style="margin-right:20px; font-size: 20px;"></a>
<div class="g-brd-around g-pa-20 g-mb-40">
<div class="row">
<div class="col-lg-4 g-mb-40 g-mb-0--lg">
<!-- User Image -->
<div class="g-mb-20">
<img ng-src="{{ user.avatar? ctrl.imagePicUrl + user.id+'/'+user.avatar:ctrl.defaultPersonPhotoUrl }}" class="img-fluid w-100"/>
</div>
<!-- User Image -->
<!-- User Contact Buttons -->
<a class="btn btn-block u-btn-outline-primary g-rounded-50 g-py-12 g-mb-10" href="#!">
<i class="fa fa-user-plus g-pos-rel g-top-1 g-mr-5"></i> Follow Me
</a>
<a class="btn btn-block u-btn-darkgray g-rounded-50 g-py-12 g-mb-10" href="#!">
<i class="fa fa-phone g-pos-rel g-top-1 g-mr-5"></i> Contact Me
</a>
<!-- End User Contact Buttons -->
</div>
<div class="col-lg-8">
<!-- User Details -->
<div class="d-flex align-items-center justify-content-sm-between g-mb-5">
<h2 class="g-font-weight-300 g-mr-10" style=" text-transform: capitalize; font-size: 30px;">{{ user.fullname }}</h2>
</div>
<!-- End User Details -->
<!-- User Position -->
<h4 class="h6 g-font-weight-300 g-mb-10">
<i class="fa fa-graduation-cap g-pos-rel g-top-1 g-mr-5 g-color-gray-dark-v5"></i> High School
</h4>
<!-- End User Position -->
<!-- User Info -->
<h4 class="h6 g-font-weight-300 g-mb-10">
<i class="fa fa-map-marker g-pos-rel g-top-1 g-mr-5 g-color-gray-dark-v5"> </i> Singapore
</h4>
<!-- End User Info -->
<!-- User Info -->
<!-- <ul class="list-inline g-font-weight-300">
<li class="list-inline-item g-mr-20">
<i class="fa fa-map-marker g-pos-rel g-top-1 g-color-gray-dark-v5 g-mr-5"></i> London, UK
</li>
</ul> -->
<!-- End User Info -->
<hr class="g-brd-gray-light-v4 g-my-20">
<p class="g-line-height-1_8">About elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est. Dell viverra cursus nibh volutpat at.</p>
<hr class="g-brd-gray-light-v4 g-my-20">
<!-- User Skills -->
<div class="d-flex flex-wrap text-center">
<!-- Counter Pie Chart -->
<div class="g-mr-40 g-mb-20 g-mb-0--xl">
<div class="js-pie g-color-purple g-mb-5" data-circles-value="54" data-circles-max-value="100" data-circles-bg-color="#d3b6c6" data-circles-fg-color="#9b6bcc" data-circles-radius="30" data-circles-stroke-width="3" data-circles-additional-text="%" data-circles-duration="2000" data-circles-scroll-animate="true" data-circles-font-size="14" id="hs-pie-1"><div class="circles-wrp" style="position: relative; display: inline-block;"><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path fill="transparent" stroke="#d3b6c6" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 29.96041407176496 1.5000274920433334 Z" class="circles-maxValueStroke"></path><path fill="transparent" stroke="#9b6bcc" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 22.943363074828525 57.61256734362646 " class="circles-valueStroke"></path></svg><div class="circles-text" style="position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 14px; height: 60px; line-height: 60px;">54%</div></div></div>
<h4 class="h6 g-font-weight-300">ASP.net</h4>
</div>
<!-- End Counter Pie Chart -->
<!-- Counter Pie Chart -->
<div class="g-mr-40 g-mb-20 g-mb-0--xl">
<div class="js-pie g-color-blue g-mb-5" data-circles-value="72" data-circles-max-value="100" data-circles-bg-color="#bee3f7" data-circles-fg-color="#3498db" data-circles-radius="30" data-circles-stroke-width="3" data-circles-additional-text="%" data-circles-duration="2000" data-circles-scroll-animate="true" data-circles-font-size="14" id="hs-pie-2"><div class="circles-wrp" style="position: relative; display: inline-block;"><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path fill="transparent" stroke="#bee3f7" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 29.96041407176496 1.5000274920433334 Z" class="circles-maxValueStroke"></path><path fill="transparent" stroke="#3498db" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 2.0106890878874566 35.37107760743576 " class="circles-valueStroke"></path></svg><div class="circles-text" style="position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 14px; height: 60px; line-height: 60px;">72%</div></div></div>
<h4 class="h6 g-font-weight-300">JavaScript</h4>
</div>
<!-- End Counter Pie Chart -->
<!-- Counter Pie Chart -->
<div class="g-mr-40 g-mb-20 g-mb-0--xl">
<div class="js-pie g-color-lightred g-mb-5" data-circles-value="81" data-circles-max-value="100" data-circles-bg-color="#ffc2bb" data-circles-fg-color="#e74c3c" data-circles-radius="30" data-circles-stroke-width="3" data-circles-additional-text="%" data-circles-duration="2000" data-circles-scroll-animate="true" data-circles-font-size="14" id="hs-pie-3"><div class="circles-wrp" style="position: relative; display: inline-block;"><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path fill="transparent" stroke="#ffc2bb" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 29.96041407176496 1.5000274920433334 Z" class="circles-maxValueStroke"></path><path fill="transparent" stroke="#e74c3c" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 3.4952499945662545 19.523921194002977 " class="circles-valueStroke"></path></svg><div class="circles-text" style="position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 14px; height: 60px; line-height: 60px;">81%</div></div></div>
<h4 class="h6 g-font-weight-300">Copywriting</h4>
</div>
<!-- End Counter Pie Chart -->
<!-- Counter Pie Chart -->
<div class="g-mr-40 g-mb-20 g-mb-0--xl">
<div class="js-pie g-color-primary g-mb-5" data-circles-value="83" data-circles-max-value="100" data-circles-bg-color="#c9ff97" data-circles-fg-color="#72c02c" data-circles-radius="30" data-circles-stroke-width="3" data-circles-additional-text="%" data-circles-duration="2000" data-circles-scroll-animate="true" data-circles-font-size="14" id="hs-pie-4"><div class="circles-wrp" style="position: relative; display: inline-block;"><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path fill="transparent" stroke="#c9ff97" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 29.96041407176496 1.5000274920433334 Z" class="circles-maxValueStroke"></path><path fill="transparent" stroke="#72c02c" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 5.008151206172407 16.301186406609574 " class="circles-valueStroke"></path></svg><div class="circles-text" style="position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 14px; height: 60px; line-height: 60px;">83%</div></div></div>
<h4 class="h6 g-font-weight-300">Testing</h4>
</div>
<!-- End Counter Pie Chart -->
<!-- Counter Pie Chart -->
<div class="g-mb-20 g-mb-0--lg">
<div class="js-pie g-mb-5" data-circles-value="92" data-circles-max-value="100" data-circles-bg-color="#eeeeee" data-circles-fg-color="#111111" data-circles-radius="30" data-circles-stroke-width="3" data-circles-additional-text="%" data-circles-duration="2000" data-circles-scroll-animate="true" data-circles-font-size="14" id="hs-pie-5"><div class="circles-wrp" style="position: relative; display: inline-block;"><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path fill="transparent" stroke="#eeeeee" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 29.96041407176496 1.5000274920433334 Z" class="circles-maxValueStroke"></path><path fill="transparent" stroke="#111111" stroke-width="3" d="M 29.994195313694686 1.5000005911295347 A 28.5 28.5 0 1 1 16.251688639110682 5.035346292727354 " class="circles-valueStroke"></path></svg><div class="circles-text" style="position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 14px; height: 60px; line-height: 60px;">92%</div></div></div>
<h4 class="h6 g-font-weight-300">Communication</h4>
</div>
<!-- End Counter Pie Chart -->
</div>
<!-- End User Skills -->
</div>
</div>
</div>
<!-- End User Block -->
<div class="col-md-12">
<div class="text-center">
<img src="assets/images/radar_chart.png" />
</div>
<!-- Experience Timeline -->
<div class="card border-0 rounded-0 g-mb-40">
<!-- Panel Header -->
<div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
<h3 class="h6 mb-0">
<i class="fa fa-briefcase g-pos-rel g-top-1 g-mr-5"></i> Experience
</h3>
</div>
<!-- End Panel Header -->
<!-- Panel Body -->
<div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-300 g-pa-0">
<ul class="u-timeline-v2-wrap list-unstyled">
<li class="col-md-12 g-brd-bottom g-brd-0--md g-brd-gray-light-v4 g-pb-30 g-pb-0--md g-mb-30 g-mb-0--md">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">Project Manager</h4>
<h5 class="h6 g-font-weight-300 mb-0">2016 - Current</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">Pixeel Ltd.</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<li class="col-md-12 g-brd-bottom g-brd-0--md g-brd-gray-light-v4 g-pb-30 g-pb-0--md g-mb-30 g-mb-0--md">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">Full Stack Developer</h4>
<h5 class="h6 g-font-weight-300 mb-0">2014 - 2016</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">Htmlstream</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<li class="col-md-12 g-brd-bottom g-brd-0--md g-brd-gray-light-v4 g-pb-30 g-pb-0--md g-mb-30 g-mb-0--md">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">Frontend Developer</h4>
<h5 class="h6 g-font-weight-300 mb-0">2012 - 2014</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">Amazon Inc.</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<li class="col-md-12">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">UX/UI Designer</h4>
<h5 class="h6 g-font-weight-300 mb-0">2010 - 2012</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">Apple Inc.</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
<!-- End Panel Body -->
</div>
<!-- End Experience Timeline -->
<!-- Education Timeline -->
<div class="card border-0 rounded-0 g-mb-40">
<!-- Panel Header -->
<div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
<h3 class="h6 mb-0">
<i class="fa fa-graduation-cap g-pos-rel g-top-1 g-mr-5"></i> Education
</h3>
<div class="dropdown g-mb-10 g-mb-0--md">
<span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-options-vertical g-pos-rel g-top-1"></i>
</span>
<div class="dropdown-menu dropdown-menu-right rounded-0 g-mt-10">
<a class="dropdown-item g-px-10" href="#!">
<i class="icon-layers g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Projects
</a>
<a class="dropdown-item g-px-10" href="#!">
<i class="icon-wallet g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Wallets
</a>
<a class="dropdown-item g-px-10" href="#!">
<i class="icon-fire g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Reports
</a>
<a class="dropdown-item g-px-10" href="#!">
<i class="icon-settings g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Users Setting
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item g-px-10" href="#!">
<i class="icon-plus g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> View More
</a>
</div>
</div>
</div>
<!-- End Panel Header -->
<!-- Panel Body -->
<div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-300 g-pa-0">
<ul class="u-timeline-v2-wrap list-unstyled">
<li class="col-md-12 g-brd-bottom g-brd-0--md g-brd-gray-light-v4 g-pb-30 g-pb-0--md g-mb-30 g-mb-0--md">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">MBA</h4>
<h5 class="h6 g-font-weight-300 mb-0">2008 - 2010</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">Imperial College London</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<li class="col-md-12 g-brd-bottom g-brd-0--md g-brd-gray-light-v4 g-pb-30 g-pb-0--md g-mb-30 g-mb-0--md">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">Bachelor of IT</h4>
<h5 class="h6 g-font-weight-300 mb-0">2004 - 2008</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">MIT University</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<li class="col-md-12 g-brd-bottom g-brd-0--md g-brd-gray-light-v4 g-pb-30 g-pb-0--md g-mb-30 g-mb-0--md">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">High School</h4>
<h5 class="h6 g-font-weight-300 mb-0">2001 - 2004</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">Chicago High School</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<li class="col-md-12">
<div class="row">
<!-- Timeline Date -->
<div class="col-md-3 align-self-center text-right g-pr-40--md g-mb-20 g-mb-0--md">
<h4 class="h5 g-font-weight-300">Elementary School</h4>
<h5 class="h6 g-font-weight-300 mb-0">2001 - 1992</h5>
</div>
<!-- End Timeline Date -->
<!-- Timeline Content -->
<div class="col-md-9 align-self-center g-orientation-left g-pl-40--md">
<!-- Timeline Dot -->
<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
<i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
</div>
<!-- End Timeline Dot -->
<article class="g-pa-10--md">
<h3 class="h4 g-font-weight-300">New York Elementary School</h3>
<p class="mb-0">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber. Pea cress potato sprouts wattle seed rutabaga.</p>
</article>
</div>
<!-- End Timeline Content -->
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
<!-- End Panel Body -->
</div>
<!-- End Education Timeline -->
</div>
<div class="clearfix"></div>
</div>