Personal Website Redesign v2.0

What is a personal website redesign v2.0 How do you make a personal website redesign v2.0? This script and codes were developed by Joost Jansen on 23 January 2022, Sunday.

How do I make an personal website redesign v2.0?
  1. Personal Website Redesign v2.0 Previews
  2. Personal Website Redesign v2.0 HTML Codes
  3. Personal Website Redesign v2.0 CSS Codes
  4. Personal Website Redesign v2.0 JS Codes
Personal Website Redesign v2.0 Previews

Personal Website Redesign v2.0 HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Personal Website Redesign v2.0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<div class="wrapper">
  <div class="flex intro">
    <h1>Hi, welcome to my website.</h1>
    <p>I hope you like what you see.</p>
  </div>
  <div class="flex about">
    <h1>Its all about me here.</h1>
    <p>I love technology.</p>
    <p class="readmore-content">I might only be 19 years old but I've tried out  many different programming languages, my favorites being Python, JavaScript, Sass and Jade(a.k.a. Pug).</p><i class="fa fa-4x fa-chevron-down readmore-button"></i>
  </div>
  <div class="flex work">
    <h1>From C# to Sass,</h1>
    <p>I've got it all.</p>
    <p class="readmore-content">In school I learned about Requirements Engineering and Software Architecture, and I also learned the basics of Java and C#. In my free time I enjoy doing Front-End projects or learn new things.</p><i class="fa fa-4x fa-chevron-down readmore-button"></i>
  </div>
  <div class="flex contact">
    <h1>Want to see more?</h1>
    <p>Here you go.</p>
    <ul>
      <li><a href="https://codepen.io/BitsPls/"><i class="fa fa-codepen fa-4x"></i></a></li>
      <li><a href="https://github.com/jj199611"><i class="fa fa-github fa-4x"></i></a></li>
      <li><a href="https://bitbucket.org/jjdavid/"><i class="fa fa-bitbucket fa-4x"></i></a></li>
      <li><a href="https://nl.linkedin.com/in/joost-jansen-121966b4"><i class="fa fa-linkedin fa-4x"></i></a></li>
      <li><a href="https://twitter.com/B1tsPls"><i class="fa fa-twitter fa-4x"></i></a></li>
    </ul>
  </div>
  <div class="flex outro">
    <ul>
      <li>KvK: 65290658</li>
    </ul><small>&copy; Copyright 2016 Johnson Development</small>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Personal Website Redesign v2.0 CSS Codes

/* fonts and colors */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
/* general styling */
:root {
  font-family: "Open Sans Light", sans-serif;
}

html, body {
  background: url(http://placehold.it/1500x1500) no-repeat center center fixed;
}

h1, h2, h3 {
  margin: 1.5rem;
  text-align: center;
  font-weight: 400;
  border-bottom: 0.25rem solid black;
}

.intro h1 {
  border: none;
}

p, small {
  margin: 1.5rem;
  text-align: center;
  max-width: 70vw;
}

p, li, a {
  font-weight: 300;
}

ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
ul li {
  margin: 2rem 1rem;
}
ul li a {
  text-decoration: none;
  color: black;
  font-size: 0.75em;
}
ul li a .fa:before {
  -webkit-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out;
}
ul li a .fa:hover:before {
  color: #47b8e0;
}

.readmore-content {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  height: 0;
  margin: 0.625rem;
}

.is-visible {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  height: initial;
}

/* FLEXING BOYS */
.wrapper {
  width: 100%;
  overflow-x: hidden;
  background-color: rgba(0, 0, 0, 0.7);
}
.wrapper .flex {
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  overflow: hidden;
}
.wrapper .intro {
  background: transparent;
  color: white;
}
.wrapper .intro > * {
  -webkit-animation: fadein 1.5s;
          animation: fadein 1.5s;
}
.wrapper .intro .avatar {
  border-radius: 50%;
  max-height: 10rem;
  border: 0.5rem solid #22D88F;
}
.wrapper .about {
  background-color: #22D88F;
}
.wrapper .work {
  background-color: #47b8e0;
}
.wrapper .contact {
  background-color: #ffc952;
}
.wrapper .outro {
  color: white;
}
.wrapper .outro small {
  position: relative;
  bottom: -30vh;
}

/* animations */
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* media queries */
@media (min-width: 275px) {
  :root {
    font-size: 14px;
  }
}
@media (min-width: 450px) {
  :root {
    font-size: 14px;
  }
}
@media (min-width: 500px) {
  :root {
    font-size: 16px;
  }
}
@media (min-width: 620px) {
  :root {
    font-size: 18px;
  }
}
@media (min-width: 700px) {
  :root {
    font-size: 20px;
  }
}

Personal Website Redesign v2.0 JS Codes

$(function() {

  var aboutContent = $('.about p'),
    workContent = $('.work p'),
    aboutButton = $('.about i'),
    workButton = $('.work i');

  aboutButton.click(function() {
    aboutContent.toggleClass('is-visible');
    aboutButton.toggleClass('fa-chevron-down');
    aboutButton.toggleClass('fa-chevron-up');
  });

  workButton.click(function() {
    workContent.toggleClass('is-visible');
    workButton.toggleClass('fa-chevron-down');
    workButton.toggleClass('fa-chevron-up');
  });

});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.