Personal Website Redesign v2.0
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>© 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'); });
});
| Developer | Joost Jansen |
| Username | DevItWithDavid |
| Uploaded | November 19, 2022 |
| Rating | 3 |
| Size | 5,168 Kb |
| Views | 8,092 |
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
| Name | Size |
| League of Legends Login UI | 6,748 Kb |
| CSGO image overlay using clip path | 2,794 Kb |
| Portfolio Joost Jansen 2016 | 5,671 Kb |
| Flexbox Layout - One page website | 5,649 Kb |
| Flexbox is AWESOME | 2,524 Kb |
| Flexbox Mixin | 2,746 Kb |
| Material ripple effect with pure CSS and JS | 3,408 Kb |
| JQuery Image Slider | 3,407 Kb |
| Skyrim Start Game UI | 4,768 Kb |
| React Close Dialog with Animation | 5,569 Kb |
Create amazing captions 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!
Similar Scripts & Codes
| Name | Username | Size |
| CardMove | Thompsonemerson | 3,699 Kb |
| Angular-HAML | Cwacht | 2,022 Kb |
| Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| Pure CSS read more toggle | Idered | 2,344 Kb |
| The Monty Hall Problem | Melatonind | 4,360 Kb |
| Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
| Simple checkbox style | Vncnz | 2,628 Kb |
| Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
| Vue.js | Thommyboy02 | 1,506 Kb |
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. Hide Your IP Now!