Skip to content

Instantly share code, notes, and snippets.

@Phoenix124

Phoenix124/index.html

Created February 1, 2018 11:38
Show Gist options
  • Save Phoenix124/4fa9f4c219c0e59c028b5347f682dfc5 to your computer and use it in GitHub Desktop.
Save Phoenix124/4fa9f4c219c0e59c028b5347f682dfc5 to your computer and use it in GitHub Desktop.
Download ZIP
My Portfolio
Raw
index.html
<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 class="img-maven" 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>
<a href="https://github.com/Phoenix124" target='_blank'>
<button type="button" class="btn btn-primary">
<i class="fa fa-github fa-fw"></i>
GitHub</button></a>
</div>
<div class="btn-group-vertical">
<a href="https://www.linkedin.com/in/maksim08" target='_blank'>
<button type="button" class="btn btn-primary"><i class="fa fa-linkedin"> </i>
LinkedIn</button></a>
<a href="https://codepen.io/Phoenix124/" target='_blank'>
<button type="button" class="btn btn-primary"><i class="fa fa-codepen"> </i>
CodePen</button></a>
</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>
Raw
scripts
<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>
Raw
style.sass
$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
.img-maven
display: block
width: 150px
height: 100px
Raw
styles
<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