LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




  
  
  

  
  

Anastasios Mpoletis

Front End Developer

CV


This browser does not support PDFs.
Please download the PDF to view it:
Download PDF.

Education

Aristotle University of Thessaloniki (2008-2015)

Bachelor's Degree in Informatics, School of Informatics, Faculty of Sciences
Activities: Information and Communication Technologies in Education


Aristotle University of Thessaloniki

Experience

Portfolio


My Photo Gallery

CodePen GitHub

FreeCodeCamp Tribute Page

CodePen GitHub

FreeCodeCamp Random Quote Machine

CodePen GitHub

Contact me



You can contact me at:

anastasiosmpoletis@gmail.com

+306998414453


CSS
body {
  font-family: Noto Sans, Arial;
  background-color: #f0f0f0;
}

h1 {
  font-weight: 600;
}

h2 {
  font-size: 24px;
  text-transform: uppercase;
  color: #303030;
  font-weight: 600;
  margin-bottom: 30px;
}

.innerLinks p, .education p {
  font-size: 20px;
}

img {
  user-select: none;
}

.navbar {
  font-family: Noto Sans, Arial;
  margin-bottom: 0;
  background-color: #5c5c5c;
  z-index: 9999;
  border: 0;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.42857143 !important;
  letter-spacing: 0;
  border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
  color: #5c5c5c !important;
  background-color: #fff !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}

.navContainer {
  padding: 0 8vw;
}

.jumbotron {
  background-image: url("https://dl.dropbox.com/s/w010ruqdprvf4u6/background.jpg?dl=0");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  color: white;
  text-shadow: -2px 2px 9px #000000;
  padding: 60px 25px 10px 25px;
}

#profilePhoto {
  display: inline;
}

.social-buttons-div {
  margin: 20px 0px 0px 0px;
}

.social-button {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

/* /Social buttons */

#linkedin-button {
  /* LinkedIn official color */
  background-color: #0077b5;
  color: white;
}

#facebook-button {
  /* Facebook official color */
  background-color: #3b5998;
  color: white;
}

#github-button, #codepen-button {
  background-color: white;
  color: black;
}

#freecodecamp-button {
  /* FreeCodeCamp official color */
  background-color: #006400;
  color: white;
}

/* ./Social buttons */

#greekFlag {
  padding-top: 30px;
}

/* /CV button */
#cvButton {
  height: 90px;
  outline: none;
  border-radius: 50px;
  border: 1px solid #5c5c5c;
  background-color: #ffffff;
}

#cvButton h3 {
  font-size: 17px;
}

#cvButton .glyphicon {
  font-size: 25px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.glyphicon-circle-arrow-down {
  color: #5c5c5c;
  -webkit-transition: transform ease-in;
  -moz-transition: transform ease-in;
  -o-transition: transform ease-in;
  transition: transform ease-in;
  -webkit-transition: color ease-in;
  -moz-transition: color ease-in;
  -o-transition: color ease-in;
  transition: color ease-in;
}

.glyphicon-circle-arrow-down.rotate-180 {
  color: #0077b5;
  transform: rotate(180deg);
  -webkit-transition: transform ease-in;
  -moz-transition: transform ease-in;
  -o-transition: transform ease-in;
  transition: transform ease-in;
  -webkit-transition: color ease-in;
  -moz-transition: color ease-in;
  -o-transition: color ease-in;
  transition: color ease-in;
}
/* ./CV button */

#education h3 {
  color: #818181;
}

#education h4 {
  line-height: 1.4;
}

.partContainer {
  margin: 10px 8vw;
  padding-bottom: 30px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.portfolio-part-container {
  margin: 10px 8vw;

  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.hrContainer {
  border: 0;
  height: 1px;
  margin-top: 40px;
  background-color: white;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #818181, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #818181, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #818181, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #818181, #f0f0f0);
}

.portfolio-div {
  width: 100%;
  margin: 0px;
}

.project-div {
  padding: 0px;
}

/* /Portfolio thumbnails */
.cuadro_intro_hover {
  background-color: #cccccc;
  position: relative;
  overflow: hidden;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.19);
}

.cuadro_intro_hover:hover .caption {
  opacity: 1;
  margin-bottom: 1px;
  transform: translateY(-7em);
  -webkit-transform: translateY(-7em);
  -moz-transform: translateY(-7em);
  -ms-transform: translateY(-7em);
  -o-transform: translateY(-7em);
}

.cuadro_intro_hover img {
  z-index: 4;
}

.cuadro_intro_hover .caption {
  position: absolute;
  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.cuadro_intro_hover .blur {
  background-color: rgba(0, 0, 0, 0.7);
  height: 100%;
  z-index: 5;
  position: absolute;
  width: 100%;
}

.cuadro_intro_hover .caption-text {
  z-index: 10;
  color: #fff;
  position: absolute;
  height: 100%;
  text-align: left;
  padding: 10px;
  top: -20px;
  width: 100%;
}

.caption-text a:link {
  color: white;
  text-decoration: none;
}

.caption a:hover, .caption a:active, .caption a:visited {
  color: #0077b5;
}

.project-button {
  border-radius: 1px;
}

/* ./Portfolio thumbnails */

.centerize {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.lefterize {
  text-align: left;
  align-items: left;
}

#pdfDisplay {
  width: 100%;
  height: 115vh;
}

/* /Carousel */
.carousel-control.right, .carousel-control.left {
  background-image: none;
  color: #5c5c5c;
}

.carousel-indicators li {
  border-color: #5c5c5c;
}

.carousel-indicators li.active {
  background-color: #5c5c5c;
}

.item h4 {
  font-size: 19px;
  line-height: 1.375em;
  font-weight: 400;
  font-style: italic;
  margin: 70px 0;
}

.item span {
  font-style: normal;
}
/* ./Carousel */

.glyphicon {
  color: #5c5c5c;
}

footer .glyphicon {
  font-size: 20px;
  margin-bottom: 10px;
}

#contactme .glyphicon {
  font-size: 16px;
}

.slideanim {
  visibility: hidden;
}

.slide {
  animation-name: slide;
  -webkit-animation-name: slide;
  animation-duration: 2s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@media screen and (min-width: 1440px) {
  .partContainer {
    margin: 60px 15vw;
  }
  .portfolio-part-container {
    margin: 60px 15vw;
  }
  .navContainer {
    padding: 0 15vw;
  }
  .innerLinks p, .education p {
    font-size: 15px;
  }
  #pdfDisplay {
    width: 100%;
    height: 95vh;
  }
}

@media screen and (min-width: 1981px) {
  .partContainer {
    margin: 60px 20vw;
  }
  .portfolio-part-container {
    margin: 60px 20vw;
  }
  .navContainer {
    padding: 0 20vw;
  }
  .innerLinks p, .education p {
    font-size: 15px;
  }
  #pdfDisplay {
    width: 100%;
    height: 105vh;
  }
}

@media screen and (max-width 768px) {
  #pdfDisplay {
    width: 100%;
    height: 1vh;
  }
}
JS
/* Smooth scrolling script */
$(document).ready(function() {
  $(".innerLinks a, .navbar a, footer a[href='#index']").on("click", function(
    event
  ) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $("html, body").animate(
        { scrollTop: $(hash).offset().top },
        900,
        function() {
          window.location.hash = hash;
        }
      );
    }
  });
});

/* Display delay of content script */
$(window).scroll(function() {
  $(".slideanim").each(function() {
    var pos = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (pos < winTop + screen.height * 1.1) {
      $(this).addClass("slide");
    }
  });
});

/* "To Top" button tooltip script */
$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

/* CV collapse glyphicon effect script */
$("#demo").on("shown.bs.collapse", function() {
  if ($(window).width() > 768) {
    $("#cvButton .glyphicon").toggleClass("rotate-180");
  }
});
$("#demo").on("hidden.bs.collapse", function() {
  if ($(window).width() > 768) {
    $("#cvButton .glyphicon").toggleClass("rotate-180");
  }
});

Description

My personal website. All you need to know about me.
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv