Last active
February 1, 2018 11:15
-
-
Save Phoenix124/7267b474879c00e2d49c43a3ad662bc3 to your computer and use it in GitHub Desktop.
My Portfolio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<body data-spy="scroll" data-target=".navbar" data-offset="50"> | |
<!-- Navigation Part --> | |
<nav class="navbar navbar-inverse navbar-fixed-top"> | |
<div class="container-fluid"> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".myNavbar"> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">Maksim Liakhavets</a> | |
</div> | |
<div class="collapse navbar-collapse myNavbar"> | |
<ul class="nav navbar-nav navbar-right"> | |
<li class="active"> | |
<a href="#home"> | |
<span class="glyphicon glyphicon-home"></span> Home</a> | |
</li> | |
<li> | |
<a href="#experience"> | |
<span class="glyphicon glyphicon-info-sign"></span> Experience</a> | |
</li> | |
<li> | |
<a href="#portfolio"> | |
<span class="glyphicon glyphicon-briefcase"></span> Portfolio</a> | |
</li> | |
<li> | |
<a href="#contact"> | |
<span class="glyphicon glyphicon-comment"></span> Contact</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</nav> | |
<section class="home" id="home"> | |
<h1>Maksim Liakhavets</h1> | |
<h2>Developer</h2> | |
<hr class="thick-rule"/> | |
<img class="img-responsive img-circle displayed me" src="https://media-exp1.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAeBAAAAJDc2ZDEwMWQ2LTVjZjItNGZmZC1hNjQ5LTNmNDZkYmQ0Y2VkMA.jpg"> | |
<div class="img-text"> | |
<p>My name is Maksim Liakhavets. Student and member of FreeCodeCamp where I have been learling Full Stack Java and JS. I'm currently looking for a Jr. Position either front, back or full stack.</p> | |
</div> | |
</section> | |
<!-- Experience --> | |
<section class="experience" id="experience"> | |
<div class="container"> | |
<h1>My Experience</h1> | |
<p>Here is some of my past employment history.</p> | |
<hr class="thick-rule"/> | |
<div class="panel-group" id="accordion"> | |
<div class="panel panel-default"> | |
<div class="panel-heading"> | |
<h4 class="panel-title"> | |
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Freelancer UpWork</a> | |
</h4> | |
</div> | |
<div id="collapse1" class="panel-collapse collapse in"> | |
<div class="panel-body">March 2017 – Present | |
<p>Provided the following Services:</p> | |
<ul> | |
<li>Ghost writing.</li> | |
<li>Internet research</li> | |
</ul> | |
<p>Currently Provides:</p> | |
<ul> | |
<li>Web Development</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="panel panel-default"> | |
<div class="panel-heading"> | |
<h4 class="panel-title"> | |
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Test Projects on GitHub</a> | |
</h4> | |
</div> | |
<div id="collapse2" class="panel-collapse collapse"> | |
<div class="panel-body">November 2016 – Present | |
<h5>Github Projects</h5> | |
</div> | |
</div> | |
</div> | |
<div class="panel panel-default"> | |
<div class="panel-heading"> | |
<h4 class="panel-title"> | |
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Working as QA</a> | |
</h4> | |
</div> | |
<div id="collapse3" class="panel-collapse collapse"> | |
<div class="panel-body"> | |
August 2017 – Present , Minsk, BY | |
<h5>Job Responsibilities</h5> | |
<ul> | |
<li>Integration testing</li> | |
<li>Testing mobile devices: iOS and Android</li> | |
<li>Automate mobile testing with Appium</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Portfolio --> | |
<section class="portfolio" id="portfolio"> | |
<h1>Portfolio</h1> | |
<p>Here are some of my used technologies </p> | |
<hr class="thick-rule"/> | |
<div class="container-flex"> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/html-5.svg" alt=""> | |
<h3>HTML 5</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/css-3.svg" alt=""> | |
<h3>CSS 3</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/bootstrap.svg" alt=""> | |
<h3>Bootstrap</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/yarn.svg" alt=""> | |
<h3>Yarn</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/spring-boot.svg" alt=""> | |
<h3>Spring Boot</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/icons/spring.png" alt=""> | |
<h3>Spring Security</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/icons/maven.png" alt=""> | |
<h3>Maven</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/hibernate.svg" alt=""> | |
<h3>Hibernate</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/mysql.svg" alt=""> | |
<h3>MySQL</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/icons/mongo.png" alt=""> | |
<h3>MongoDB</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/heroku.svg" alt=""> | |
<h3>Heroku</h3> | |
</div> | |
<div class = "child"> | |
<img src="http://www.jhipster.tech/images/logo/svg/circleci.svg" alt=""> | |
<h3>Circle CI</h3> | |
</div> | |
</div> | |
</section> | |
<!-- Contact --> | |
<section class="contact" id="contact"> | |
<div class="contact-info"> | |
<h1>Contact Me</h1> | |
<hr class="thick-rule"/> | |
<!-- social media buttons --> | |
<div class="social" align="center"> | |
<div class="btn-group-vertical"> | |
<a href="mailto:liakhovetsmaksim@gmail.com"> | |
<button type="button" class="btn btn-primary"><i class="fa fa-envelope fa-fw"></i> | |
E-mail</button></a> | |
<button type="button" class="btn btn-primary"> | |
<i class="fa fa-github fa-fw"></i> | |
<a href="https://github.com/Phoenix124" target='_blank'></a> GitHub</button> | |
</div> | |
<div class="btn-group-vertical"> | |
<button type="button" class="btn btn-primary"><i class="fa fa-linkedin"></i> | |
<a href="https://www.linkedin.com/in/maksim08" target='_blank'></a> LinkedIn</button> | |
<button type="button" class="btn btn-primary"><i class="fa fa-codepen"></i> | |
<a href="https://codepen.io/Phoenix124/" target='_blank'></a> CodePen</button> | |
</div> | |
<div class="btn-group-vertical"> | |
<button type="button" class="btn btn-primary"><i class="fa fa-fire fa-fw"></i> | |
<a href="http://www.freecodecamp.com/rafase282" target='_blank'></a> FreeCodeCamp</button> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- The footer --> | |
<footer> | |
<p>Copyright © Liakhavets M. 2018. All Rights Reserved</p> | |
<p> | |
<a href="mailto:liakhovetsmaksim@gmail.com"> | |
<i class="fa fa-envelope fa-fw"></i> | |
</a> | |
<a href="https://github.com/Phoenix124" target="_blank"> | |
<i class="fa fa-github fa-fw"></i> | |
</a> | |
<a href="https://www.linkedin.com/in/maksim08" target="_blank"> | |
<i class="fa fa-linkedin"></i> | |
</a> | |
<a href="https://codepen.io/Phoenix124/" target="_blank"> | |
<i class="fa fa-codepen"></i> | |
</a> | |
<a href="https://www.freecodecamp.org/phoenix124" target="_blank"> | |
<i class="fa fa-free-code-camp"></i> | |
</a></p> | |
</footer> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$white: #fff | |
$font-stack: 'Verdana', sans-serif | |
body | |
position: relative | |
footer | |
background-color: black | |
color: gray | |
line-height: 20px | |
padding-top: 10px | |
padding-bottom: 5px | |
width: 100% | |
bottom: 0 | |
position: relative | |
text-align: center | |
section h1, | |
h2, | |
p | |
text-align: center | |
font-family: $font-stack | |
.panel-body, | |
p | |
font-size: 150% | |
section a | |
color: $white | |
.gray-text | |
color: gray | |
.project-text | |
color: gray | |
img | |
opacity: 1.0 | |
filter: alpha(opacity=100) | |
/* For IE8 and earlier */ | |
.thumbnail img:hover | |
opacity: 0.4 | |
filter: alpha(opacity=40) | |
/* For IE8 and earlier */ | |
.me | |
width: 250px | |
height: 250px | |
margin-top: 50px | |
border-width: 5px | |
border-style: solid | |
border-color: gray | |
.displayed | |
display: block | |
margin-right: auto | |
margin-left: auto | |
.img-text | |
margin-top: 50px | |
margin-bottom: 50px | |
padding-right: 30% | |
padding-left: 30% | |
.social | |
padding-top: 10px | |
.panel-body | |
color: black | |
.navbar-header | |
padding-left: 10% | |
.navbar-right | |
padding-right: 10% | |
.home | |
position: relative | |
min-height: 100vh | |
padding-top: 10% | |
padding-bottom: 10% | |
color: $white | |
background-color: #1E88E5 | |
.experience | |
min-height: 100vh | |
padding-top: 10% | |
padding-bottom: 10% | |
color: $white | |
background-color: #009688 | |
.portfolio | |
min-height: 100vh | |
padding-top: 10% | |
padding-bottom: 10% | |
color: $white | |
background-color: #1E88E5 | |
.contact | |
min-height: 90vh | |
padding-top: 5% | |
padding-bottom: 50px | |
color: $white | |
background-color: #00bcd4 | |
.contact-info | |
max-width: 100vh | |
min-height: 60vh | |
margin: auto | |
.project-img | |
height: 450px | |
width: 450px | |
.well | |
min-height: 450px | |
.map-part:hover | |
opacity: 0.5 | |
background: rgba(255, 255, 255, 0.8) | |
z-index: 10 | |
.inline | |
display: inline-block | |
.thick-rule | |
border-top: 4px solid rgba(255,255,255, 1) | |
width: 30% | |
.container-flex | |
display: flex | |
width: 100% | |
padding : 250px | |
flex-direction: row | |
flex-wrap: wrap | |
justify-content: flex-start | |
align-items: center | |
.child | |
display: flex | |
flex-direction: column | |
margin: 10px | |
justify-content: center | |
align-items: center | |
width: 250px | |
height: 250px | |
border-radius: 50% | |
background-color: #fff | |
transition: all .4s ease | |
&:hover | |
background-color: rgba(0, 0, 0, 0.5) | |
border-color: green | |
cursor: pointer | |
img | |
display: block | |
width: 150px | |
height: 150px |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment