Skip to content

Commit

Permalink
Feature: add progress-bar to pre-production [ref:#22], add certificat…
Browse files Browse the repository at this point in the history 
…e-carousel to skills-component [ref:#26]
  • Loading branch information
@kuklinv
kuklinv committed Sep 18, 2019
1 parent 47796ef commit 17d61ac
Show file tree
Hide file tree
Showing 11 changed files with 179 additions and 73 deletions.
14 changes: 7 additions & 7 deletions scripts/pagesComponent/test.html → dev/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,19 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="../fontawesome/css/font-awesome.css">
<link rel="stylesheet" href="../fontawesome/css/font-awesome-ie7.min.css">
<link rel="stylesheet" href="../fontawesome/css/prettify.css">
<link rel="stylesheet" href="../fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../icons/general/stylesheets/general_foundicons.css">
<link rel="stylesheet" href="../icons/social/stylesheets/social_foundicons.css">
<link rel="stylesheet" href="../scripts/fontawesome/css/font-awesome.css">
<link rel="stylesheet" href="../scripts/fontawesome/css/font-awesome-ie7.min.css">
<link rel="stylesheet" href="../scripts/fontawesome/css/prettify.css">
<link rel="stylesheet" href="../scripts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../scripts/icons/general/stylesheets/general_foundicons.css">
<link rel="stylesheet" href="../scripts/icons/social/stylesheets/social_foundicons.css">

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Palatino+Linotype" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../../styles/custom.css">
<link rel="stylesheet" href="../styles/custom.css">



Expand Down
89 changes: 89 additions & 0 deletions dev/testRender.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>


<div class="span4 sidebar">
<div class="sidebox">
<h3 class="sidebox-title">My software bundle (MERN)</h3>
<h5> Vanilla Javascript Algorithms And Data Structures + ES6( 50% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 50%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>React + Redux + Redux-saga + Redux-thunk( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>Node.js( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>Express ( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>MongoDB ( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>lodash + ramdajs + axios ( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h3 class="sidebox-title">My management bundle</h3>
<h5>MBA / Sales / Strategy ( 95% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 95%" aria-valuenow="10"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 active" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Fifth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

</body>
</html>
Binary file added images/Blog-Article-MERN-Stack.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<title>DEVCOD.PRO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Страница разработчика">
<meta name="keywords" content="#">
<meta name="keywords"
content="web development web-dev javascript node.js npm personal-page software-engineer MERN">
<meta name="author" content="Vitaly Kuklin">
<meta property="og.title" content="developer page"/>
<meta property="og:description" content="Личная страничка разработчика"/>
Expand Down
Binary file added scripts/pagesComponent/pagesContent/carousel/MBS.pdf
View file
Binary file not shown.
Binary file added scripts/pagesComponent/pagesContent/carousel/geekBrains -certificate-WebDev.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added scripts/pagesComponent/pagesContent/carousel/jsruJS.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added scripts/pagesComponent/pagesContent/carousel/stepik-certificate-73-Linux.pdf
View file
Binary file not shown.
Binary file added scripts/pagesComponent/pagesContent/carousel/stepik-certificate-Git_basics.pdf
View file
Binary file not shown.
5 changes: 3 additions & 2 deletions scripts/pagesComponent/pagesContent/home.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ export class HomeComponent extends BaseComponent{
<div class="sidebox">
<h3 class="sidebox-title">DEVCOD.PRO</h3>
<p>Это моя личная страничка = (все в одном) =>
визитная карточка, экспериментальная площадка, учебная песочница и портфолио</p>
<p>This is my personal page = (all in one) => business card,
experimental site, training sandbox and portfolio
</p>
</div>
</div>
</div>
Expand Down
141 changes: 78 additions & 63 deletions scripts/pagesComponent/pagesContent/skills.component.js
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,91 @@

import {BaseComponent} from "../../common/components/base.component.js";

export class SkillsComponent extends BaseComponent{
export class SkillsComponent extends BaseComponent {
constructor({element}) {
super({element});
this._render();
}


_render() {
this._element.innerHTML = `
<div class="divPanel page-content">
<div class="row-fluid">
<div class="span12" id="divMain">
<div class="span4 sidebar">
<div class="sidebox">
<h3 class="sidebox-title">DEVCOD.PRO</h3>
<p>Skills page </p>
</div>
</div>
</div>
</div>
<div class="span4 sidebar">
<div class="sidebox">
<h3 class="sidebox-title">My software bundle (MERN)</h3>
<h5> Vanilla Javascript Algorithms And Data Structures + ES6( 50% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 50%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="span4 sidebar">
<div class="sidebox">
<h3 class="sidebox-title">Sample Sidebar Content</h3>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting industry</a>.</p>
<p> Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
<h4 class="sidebox-title">Sidebar Categories</h4>
<ul>
<li><a href="#">Quisque diam lorem sectetuer adipiscing</a></li>
<li><a href="#">Interdum vitae, adipiscing dapibus ac</a></li>
<li><a href="#">Scelerisque ipsum auctor vitae, pede</a></li>
<li><a href="#">Donec eget iaculis lacinia non erat</a></li>
<li><a href="#">Lacinia dictum elementum velit fermentum</a></li>
<li><a href="#">Donec in velit vel ipsum auctor pulvinar</a></li>
</ul>
<h4 class="sidebox-title">Our Skills</h4>
<h5>Web Design ( 40% )</h5>
<div class="progress progress-info">
<div class="bar" style="width: 20%"></div>
</div>
<h5>Wordpress ( 80% )</h5>
<div class="progress progress-success">
<div class="bar" style="width: 40%"></div>
</div>
<h5>Branding ( 100% )</h5>
<div class="progress progress-warning">
<div class="bar" style="width: 60%"></div>
</div>
<h5>SEO Optmization ( 60% )</h5>
<div class="progress progress-danger">
<div class="bar" style="width: 80%"></div>
</div>
</div>
</div>
<h5>React + Redux + Redux-saga + Redux-thunk( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>Node.js( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>Express ( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>MongoDB ( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h5>lodash + ramdajs + axios ( 10% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 10%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h3 class="sidebox-title">My management bundle</h3>
<h5>MBA / Sales / Strategy ( 95% )</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 95%" aria-valuenow="10"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!--https://getbootstrap.com/docs/4.0/components/carousel/#via-javascript-->
<!--<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">-->
<!-- <ol class="carousel-indicators">-->
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>-->
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>-->
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>-->
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>-->
<!-- </ol>-->
<!-- <div class="carousel-inner">-->
<!-- <div class="carousel-item active">-->
<!-- <img class="d-block w-100 active" src="./carousel/jsruJS.jpg" alt="First slide">-->
<!-- </div>-->
<!-- <div class="carousel-item">-->
<!-- <img class="d-block w-100" src="./carousel/geekBrains%20-certificate-WebDev.jpg" alt="Second slide">-->
<!-- </div>-->
<!-- <div class="carousel-item">-->
<!-- <img class="d-block w-100" src="./carousel/stepik-certificate-Git_basics.pdf" alt="Third slide">-->
<!-- </div>-->
<!-- <div class="carousel-item">-->
<!-- <img class="d-block w-100" src="./carousel/stepik-certificate-73-Linux.pdf" alt="Fourth slide">-->
<!-- </div>-->
<!-- <div class="carousel-item">-->
<!-- <img class="d-block w-100" src="./carousel/MBS.pdf" alt="Fifth slide">-->
<!-- </div>-->
<!-- </div>-->
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">-->
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!-- <span class="sr-only">Previous</span>-->
<!-- </a>-->
<!-- <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">-->
<!-- <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!-- <span class="sr-only">Next</span>-->
<!-- </a>-->
<!--</div>-->
`;
}
}

0 comments on commit 17d61ac

Please sign in to comment.