Personal site header 2017

Developer
Zach Saucier
Size
6,864 Kb
Views
18,216
  1. Personal site header 2017 Previews
  2. Personal site header 2017 HTML Codes
  3. Personal site header 2017 CSS Codes
  4. Personal site header 2017 JS Codes

How do I make an personal site header 2017?

The header of my 2017 site redesign. It is missing a font file on this version, but it's close to the full page.. What is a personal site header 2017? How do you make a personal site header 2017? This script and codes were developed by Zach Saucier on 30 November 2022, Wednesday.

Personal site header 2017 Previews
IQ Test

Personal site header 2017 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal site header 2017</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="header"> <div class="container"> <header> <h1 class="main-heading">Zach Saucier</h1> <div class="main-subheading">Frontend developer.<br>Specialist in the <span class="word-highlight" style="width: 51px;"><span class="word">interactive</span></span>.</div> </header> </div> <div class="Z-container"> <div class="Z">Z</div> </div>
</section>
<div id="socials"> <a href="https://codepen.io/Zeaklous"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYtJREFUeNrsVrttw0AMlZ0mZWpVzgYy1KSURtAIniDxBIomsDcIsoE2UBYQ7BHcqb1MYJMAD2CI0yWOxMQFH0CcfUdZz4+/SxKDwWAwGKZgMdcP5XmewbIDW4Ft+r7/uBmCQO4Vllps78EaIOr+jSCp9gaWjbicpqq5nKjagcihShU7LokchrsD3x3Yw58QRNXADiykLdgjqNR6H1JsTWFGvOCfgecK1RCLXHMUvpadn4nggu0VlAar3+Tm8gpyXUw1ykdOKqZmpxHiQiR/KB89vuQdqfXJzrPZQ+zDJ0g2YM/shVylMZ9EpsHcVcwr1LcY/F7CS7doIz6y0tXajCML7cd8xp5TC7Fj4fMV2tBaR3zUQ8yreC8qtA5UuvRRC/ExVMVYoSzvPCrYq3yvC1Sx0yBYxiYDn7eyP4Ymj9plITYZ5CT5bvKo3WaoAdei323YhFiLW05L5PSq+IdqhlrP1apx3E0hOAzDKU3Td/h4D/YUqHRs3sdbufJ7NRHbKaoZDAaDwTAfLgIMAFdlx4hMR+sjAAAAAElFTkSuQmCC"></a> <a href="https://github.com/ZachSaucier"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACcUlEQVRYR+2WT8gMYRzHv79hzBwcEOp1k4sau7XzEKXcFJJX1HsR5SBJiJSSmyTvwemlcJGTPzeRolzkwPbMztbOS9q3Vvay5d20KbPZmZ9Gs7VN3npmJmvVzGUu3+98P31/v2efJUz4QxPOhwIw74SKBosG8zaQ11/sYNHgUg0IIQ4y8y4ieiSlrAIIl9BSqVTaqOv6UQADx3FuRG/VZrPu4HIhxE0AZ+Kgl8w8T0TbAGxiZgPAAhFVmXkNER0CoAN4FQTBjOu638YNqJo3NkCybfsiEc2qkkU6Zr7f7XZPtVotX9WXacS2bZcBvCCiDapBse4ngCNSyieqvqyAl4nommpIQvdgcXHxpGqLqQEty1phGMYcEZ3ICPgOwH4p5VcVf2pAAMkTrJIzqnnr+/4Bz/O6KsYsgBBCXAVwRSXgD5q/O+Io0LbtPUT0NP5tS8t5Wkp5W9WUqUHLslaapnkLwDHVoFhX6/f7041G44uqLxNg9PFyubxe1/W7AKYVw7wgCI67rhtdi8pPKkAhRHRdnQ3DsFqr1d4AWFapVHZqmnYYwG4AmxPJHwG8B/C40+m8brfbP5TJYmEqwMgjhJhi5lkieiilfD78jhDiEoDrowDMfKfX651rNpv9tGBDfWrA+JDsIKILYRjOaZo2D2AKwD0A2xMgC4PBYF+9Xv80VkAA0V08Q0Tnmfk7EYXMvJWIVica/Axgr+M4H8YN+DsvOs2GYWwBsC6++koTBTiEEUKsBfAsOWJm/rcN/jeAADTLslaZpqmNjtj3/dDzvF6av/jJXc10irMufBZfAZiltVFP0WDRYN4G8vqLHczb4C/7mOIpIkOZIwAAAABJRU5ErkJggg=="></a> <a href="https://twitter.com/ZachSaucier"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACjUlEQVRYR+2VPYgTQRTH/y/OsbqcKChRNCCKkEjCxuwUVhbaHRwWorXFCcqpBEu/OLWwEPEaLey0EDlRsPAQbC3EIrNhvCYQEBsLEU6ihpNs9snARYLkYz/u4JCdbnfm/96P/3vzhrDBF21wPqSASSuUOpg6mNSBpPq0B1MHkzqQVP/f9aBwHMfSWv8a5UyhUNhh2/Z1AGeIaBLAIoArtVqtIaU80Ol0hNa6EcbdSA5WKpU9RHTX9/0bWutPgxI4jpMVQjwjouP9+8y8TESBge12u9V6vd4CYL5HrkiAruseAvCGiH4y81ml1AcA3J9BSjkL4OGgrMz8lYjeM/MLpdTTf7WDNJEAHcfZL4RYJCIDuhIEwTyAB57nfVkNLqSU9wFcGgK4zMyznucthIEzMSIBAhCu694jomofQAfAW2Z+GQTBUiaTMX13YUjdjOPTtVrt27jS9vYjAUopdwZBUCaiOSI6GjZJ37n1BSyXy3uFEK8BHI4BB2Ze8H1/ZtwU6I8dyUFTYinlVQC3YgJeU0rdiaKNCohisThpWdZtIroIYCJsMmY2F2lKKaXDauJcEqPZVKlUTmcymSkApwDYYRIy86NWq1VtNpu/w5yPdUl6IinlEQCvAOwOk4yZP/u+P621XgpzPkkP/tW6riuJyPTTsTGl7jDzOaXU47Czb00ATZBSqbTLsqybAM4PcWbFDGal1JMwz1qil0RKOcHMBwFsA7CPiE4AOAlg85BXo8nMM57nvYvjXKwezOVyW7LZrIG6TERyiGsfmXne9/3nUebdsN6MPGZ6gfL5/FbbtvMAtq/++95utxuNRuNH1Isw6nxswLWESAHX0820xEndTR1MHUzqQFJ92oNJHfwDKBTfKdId3rAAAAAASUVORK5CYII="></a> <a class="social-text" href="https://stackoverflow.com/users/story/2065702?view=Cv">CV</a>
</div>
<div id="view-more"> <a href="https://zachsaucier.com/">View the full site</a>
</div> <script src="js/index.js"></script>
</body>
</html>

Personal site header 2017 - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@font-face { font-family: 'Futura Bold'; src: url('https://zachsaucier.com/Futura-Bold.woff') format('woff');
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background-color: white; padding: 0; margin: 0; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 300; line-height: 1.7em; color: black; overflow-x: hidden;
}
section { position: relative; max-width: 100%; padding-top: 100px; padding-bottom: 100px; max-width: 2150px; margin: 0 auto;
}
a { font-weight: 700; text-decoration: none; text-decoration-skip: ink; color: white;
}
.container { padding: 20px; margin: 0 auto; max-width: 1070px; position: relative; z-index: 1;
}
header { text-align: right; position: absolute; right: 0; top: 25%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding-right: 50px;
}
#header { height: 130vh; max-width: none; color: white; padding: 0; background: #24C6DC; background: -webkit-linear-gradient(to right, #2af598 0%, #009efd 100%); background: linear-gradient(to right, #2af598 0%, #009efd 100%); background: -webkit-linear-gradient(to top, white, rgba(255, 255, 255, 0.2) 48%, transparent 100%), -webkit-linear-gradient(to left, #514A9D, #24C6DC); background: linear-gradient(to top, white, rgba(255, 255, 255, 0.2) 48%, transparent 100%), linear-gradient(to left, #514A9D, #24C6DC);
}
#header .container { height: 100vh;
}
.main-heading { font-size: 60px; margin-top: 0; margin-bottom: 0.2em; line-height: 0.9em; opacity: 0; -webkit-animation: fadeInAndUp 0.7s 0.6s forwards; animation: fadeInAndUp 0.7s 0.6s forwards;
}
.main-subheading { float: right; line-height: 1.2em; opacity: 0; -webkit-animation: fadeInAndUp 0.7s 0.7s forwards; animation: fadeInAndUp 0.7s 0.7s forwards;
}
.word-highlight { color: #39e7ff;
}
.Z-container { -webkit-animation: fadeInAndUp 0.7s ease-out forwards; animation: fadeInAndUp 0.7s ease-out forwards; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 83vh;
}
.Z { font-family: 'Futura Bold', 'Roboto', Helvetica, Arial, sans-serif; height: 83vh; font-weight: bold; font-size: 103vh; padding-top: 40vh; position: absolute; top: 7vh; left: 50%; -webkit-transform: translateX(-75%) rotateZ(-30deg); -ms-transform: translateX(-75%) rotateZ(-30deg); transform: translateX(-75%) rotateZ(-30deg); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-shadow: -7px 9px 30px rgba(0,0,0,0.5), 2px 2px 61px rgba(255,255,255,0.8); text-shadow: 2px 2px 61px rgba(255,255,255,0.8);
}
#socials { position: fixed; bottom: 3%; left: 3%; width: 0; z-index: 1;
}
#socials { position: fixed; bottom: 3%; left: 3%; width: 0; z-index: 1;
}
#socials a { display: inline-block; height: 80px; opacity: 0; -webkit-animation: fadeInAndUpBig 1.5s forwards; animation: fadeInAndUpBig 1.5s forwards;
}
#socials a:nth-child(1) { -webkit-animation-delay: 1.0s; animation-delay: 1.0s;
}
#socials a:nth-child(2) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s;
}
#socials a:nth-child(3) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
#socials a:nth-child(4) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s;
}
.social-text { color: #333; font-size: 16px; font-weight: bold; margin-top: -6px; padding-left: 9px; z-index: 10;
}
#view-more { position: absolute; bottom: 10%; right: 5%; z-index: 10; text-align: center; line-height: 1; -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
}
@-webkit-keyframes fadeInAndUp { 0% { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); } 70% { opacity: 1; } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInAndUp { 0% { opacity: 0; transform: translateY(20%); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes fadeInAndUpBig { 0% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } 70% { opacity: 1; } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInAndUpBig { 0% { opacity: 0; transform: translateY(100%); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 800px) and (max-height: 750px) { .Z { -webkit-transform: translateX(-95%) rotateZ(-30deg); -ms-transform: translateX(-95%) rotateZ(-30deg); transform: translateX(-95%) rotateZ(-30deg); }
}
@media (max-aspect-ratio: 1/1) and (max-width: 700px) { .Z { font-size: 46vh; top: 0; left: 50%; -webkit-transform: translateX(-15%) rotateZ(-30deg) translateY(-30%); -ms-transform: translateX(-15%) rotateZ(-30deg) translateY(-30%); transform: translateX(-15%) rotateZ(-30deg) translateY(-30%); } header { top: 60%; }
}

Personal site header 2017 - Script Codes JS Codes

// Fill polyfill
if (!Array.prototype.fill) { Object.defineProperty(Array.prototype, 'fill', { value: function(value) { // Steps 1-2. if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); // Steps 3-5. var len = O.length >>> 0; // Steps 6-7. var start = arguments[1]; var relativeStart = start >> 0; // Step 8. var k = relativeStart < 0 ? Math.max(len + relativeStart, 0) : Math.min(relativeStart, len); // Steps 9-10. var end = arguments[2]; var relativeEnd = end === undefined ? len : end >> 0; // Step 11. var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len); // Step 12. while (k < final) { O[k] = value; k++; } // Step 13. return O; } });
}
var startTime,	isMovingHeading = false,	finishedAnimating = false;
var wordBank = [ "interactive", "cutting-edge", "responsive", "animated", "exceptional",	"unusual", "fun", "meaningful"
];
var currentNum = 0,	currentIteration = 0;
var wordHighlight = document.querySelector(".word-highlight"), word = document.querySelector(".word"), maxNumIterations = 13, minNumIterations = 10, wordString = [], letterBank = "abcdefghijklmnopqrstuvwxyz";
function getIterations(initWord, finWord, iterationNum) {	if(wordHighlight) { var iterations = [], correctLetters = [finWord.length].fill(false), proportion = iterationNum / 2; for(var i = 0; i < iterationNum; i++) {	var iteration = i > 0 ? iterations[i - 1]: initWord.split(""); iteration.length -= Math.round((iteration.length - finWord.length) / (iterationNum - i)); for(var j = 0; j < iteration.length; j++) { var changeMe = Math.random() <= 0.5 ? true : false; if(changeMe && proportion < i) { // Unscramble the second half of iterations iteration[j] = finWord[j]; correctLetters[i] = true; } else if((changeMe && proportion >= i) || (!correctLetters[i] && proportion < i)) { // Scramble the first half of iterations var randLetter = letterBank.charAt( Math.floor( Math.random() * letterBank.length ) ); iteration[j] = randLetter; } } // Assure the last iteration is correct if(i === iterationNum - 1) { iteration = finWord.split(""); } iterations.push(iteration.slice(0)); } return iterations;	}
}
var startTime,	lastChangedTime,	singleDuration = 60, totalDuration = 4000, wordIterations = [];
function animateThings(currTime) {	if(window.pageYOffset != 0) {	document.body.classList.add("scrolled");	} else {	document.body.classList.remove("scrolled");	}	if(wordHighlight) { // Animate the text scrambling if(!startTime)	startTime = currTime; if(!lastChangedTime)	lastChangedTime = currTime; var progress = currTime - startTime; if(progress > totalDuration) {	currentNum++; if(currentNum >= wordBank.length) { currentNum = 0; } var numIterations = Math.ceil(Math.random() * (maxNumIterations - minNumIterations)) + minNumIterations; wordIterations = getIterations(word.innerText, wordBank[currentNum], numIterations); currentIteration = 0;	startTime = currTime; } var progress3 = currTime - lastChangedTime; if(progress3 > singleDuration) {	if(typeof wordIterations[currentIteration] != "undefined") {	word.innerText = wordIterations[currentIteration++].join(""); wordHighlight.style.width = word.offsetWidth + "px"; } lastChangedTime = currTime; } window.requestAnimationFrame(animateThings);	}
}
window.requestAnimationFrame(animateThings);
// Little movement on the Z
var ZContainer = document.querySelector(".Z-container"),	reduction = 0.005;
document.body.onmousemove = function(e) {	if(document.body.scrollTop < window.innerHeight && ZContainer != null) {	var horizScale = -(e.clientX / window.innerWidth - 0.5) * 100 * reduction;	var vertScale = -(e.clientY / window.innerHeight - 0.5) * 100 * reduction * 2;	ZContainer.style.opacity = 1;	ZContainer.style.animation = "none";	ZContainer.style.transform = "translateX(" + horizScale + "%) translateY(" + vertScale + "%)";	}
}
Personal site header 2017 - Script Codes
Personal site header 2017 - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded November 30, 2022
Rating 4.5
Size 6,864 Kb
Views 18,216
Do you need developer help for Personal site header 2017?

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!

Zach Saucier (Zeaklous) Script Codes
Name
Single Element gif Recreation
Changing a CSS Animation at its Current Values
Single element color loader
Change transformation-origin mid animation
Pausing Transitions
Swirling dots
Click Based Rotation Demo
Circle Snake
SVG clip path with blend mode
Responsive CSS bars
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!