Personal Website Redesign v2.0

Developer
Size
5,168 Kb
Views
8,096

How do I make an 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 19 November 2022, Saturday.

Personal Website Redesign v2.0 Previews

Personal Website Redesign v2.0 - Script Codes 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 - Script Codes 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 - Script Codes 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'); });
});
Personal Website Redesign v2.0 - Script Codes
Personal Website Redesign v2.0 - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 5,168 Kb
Views 8,096
Do you need developer help for Personal Website Redesign v2.0?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joost Jansen (DevItWithDavid) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!