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 - 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,096 |
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!
Name | Size |
React Close Dialog with Animation | 5,569 Kb |
Skyrim Start Game UI | 4,768 Kb |
IPhone | 5,010 Kb |
League of Legends Login UI | 6,748 Kb |
My Business Card | 4,034 Kb |
Portfolio Joost Jansen 2016 | 5,671 Kb |
React CSSTransitionGroup | 5,296 Kb |
JQuery Image Slider | 3,407 Kb |
Flexbox Mixin | 2,746 Kb |
CSGO image overlay using clip path | 2,794 Kb |
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!
Name | Username | Size |
About Us | Francescaedits | 1,902 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Ocean | Gordonnl | 2,817 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
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!