Personal website redesign v1.0

Developer
Joost Jansen
Size
5,067 Kb
Views
8,096
  1. Personal website redesign v1.0 Previews
  2. Personal website redesign v1.0 HTML Codes
  3. Personal website redesign v1.0 CSS Codes
  4. Personal website redesign v1.0 JS Codes

How do I make an personal website redesign v1.0?

What is a personal website redesign v1.0? How do you make a personal website redesign v1.0? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

Personal website redesign v1.0 Previews
IQ Test

Personal website redesign v1.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal website redesign v1.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"> <!-- timeline--> <div class="sidebar"> <div class="selected"></div> <div class="time" id="t1"></div> <div class="time" id="t2"></div> <div class="time" id="t3"></div> <div class="time" id="t4"></div> <div class="time" id="t5"></div> </div> <!-- content divs--> <div class="sect welcome" id="welcome"> <h1>Welkom</h1> <p>op mijn website</p> <div class="button">Wie ben ik?</div> </div> <div class="sect about" id="about"> <h1>Ik ben Joost</h1> <div class="avatar"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xft1/v/t1.0-9/11057740_865412623537255_7331283565891080732_n.jpg?oh=1a8783cc1f052bbcaf4c2b634a393fde&amp;oe=56FC0322"/></div> <p>Ik studeer Software and Information Engineering aan de Hogeschool in Utrecht. Ik zit momenteel in het tweede jaar en vind het geweldig om problemen op te lossen met software.</p> </div> <div class="sect projects" id="projects"> <h1>Mijn Projecten</h1> <p>Hier zijn links naar mijn GitHub en portfolio website, waarop ik een overzicht heb van al mijn persoonlijke projecten.</p> </div> <div class="sect work" id="work"> <h1>Mijn Werk</h1> <p>fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="sect contact" id="contact"> <h1>Contact</h1> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal website redesign v1.0 - Script Codes CSS Codes

/* ===== fonts ===== */
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
/* ===== colors ===== */
/* ===== document root ===== */
:root { font-size: 18px;
}
*, *:before, *:after { box-sizing: border-box; opacity: 0;
}
html, body { color: white; font-family: Inconsolata, sans-serif; overflow: hidden; background: url("http://www.tuxero.soda-mx.com/wp-content/uploads/2015/07/hack-commond-prompt-tricks.jpg") no-repeat center center fixed;
}
/* ===== styling ===== */
h1 { font-size: 3rem;
}
p, a, .button { font-size: 1.15rem;
}
a, .button { text-decoration: none; color: black; background-color: white;
}
.button { margin-top: 130px;
}
.wrapper { background: rgba(0, 0, 0, 0.5) repeat;
}
.wrapper .sidebar { background-color: rgba(34, 139, 34, 0.5);
}
.wrapper .sidebar .selected { background-color: yellow;
}
.wrapper .sidebar .time { background-color: #32e632;
}
/* ===== positioning ===== */
a, .button { padding: 15px;
}
.sidebar { position: fixed; left: 30px; top: 50px; display: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 500px; width: 10px; border-radius: 10px;
}
.sidebar .selected { border-radius: 50px; height: 20px; width: 20px;
}
.sidebar .time { border-radius: 50px; height: 50px; width: 50px; margin: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.wrapper .sect { height: 100vh; margin: 0 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.wrapper .welcome { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.wrapper .welcome h1, .wrapper .welcome p { margin: 5px;
}
.wrapper .about .avatar { box-shadow: inset 0 0 20px black;
}
.wrapper .about .avatar img { height: 200px; width: 200px; position: relative;
}

Personal website redesign v1.0 - Script Codes JS Codes

(function($) { // vars var sidebar = $('.sidebar'), selected = $('.selected'), time1 = $('#t1'), time2 = $('#t2'), time3 = $('#t3'), time4 = $('#t4'), time5 = $('#t5'); // animate page load $("*").animate({ opacity: 1 }, 700); // initial hide timeline sidebar.css({ 'display': 'none' }); // welcome button scroll to about $('.button').click(function() { $('html,body').animate({ scrollTop: $(this).parent().next().offset().top }, 'slow', false); // check sidebar class if (!sidebar.hasClass('sidebar-active')) { sidebar.addClass('sidebar-active').fadeIn('slow', false); // move selected selected.appendTo(time2); }; }); // timeline click scroll time1.click(function() { $('html,body').animate({ scrollTop: $('#welcome').offset().top }, 'slow', false); // move selected selected.appendTo(time1).fadeIn(1500, false); // hide sidebar sidebar.fadeOut('slow', false).removeClass('sidebar-active'); }); time2.click(function() { $('html,body').animate({ scrollTop: $('#about').offset().top }, 'slow', false); // move selected selected.appendTo(time2).fadeIn(1500, false); }); time3.click(function() { $('html,body').animate({ scrollTop: $('#projects').offset().top }, 'slow', false); // move selected selected.appendTo(time3).fadeIn(1500, false); }); time4.click(function() { $('html,body').animate({ scrollTop: $('#work').offset().top }, 'slow', false); // move selected selected.appendTo(time4).fadeIn(1500, false); }); time5.click(function() { $('html,body').animate({ scrollTop: $('#contact').offset().top }, 'slow', false); // move selected selected.appendTo(time5).fadeIn(1500, false); });
})(jQuery);
Personal website redesign v1.0 - Script Codes
Personal website redesign v1.0 - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 5,067 Kb
Views 8,096
Do you need developer help for Personal website redesign v1.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
League of Legends Login UI
Perspective Flipbook
React CSSTransitionGroup
IPhone
Portfolio Joost Jansen 2016
Star Wars Battlefront I 2016 Interface
Personal Website Redesign v2.0
React Close Dialog with Animation
Firebase Logo Animation
JQuery Image Slider
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!