Portfolio Home page

Developer
Hans Engebretsen
Size
12,664 Kb
Views
38,456
  1. Portfolio Home page Previews
  2. Portfolio Home page HTML Codes
  3. Portfolio Home page CSS Codes
  4. Portfolio Home page JS Codes

How do I make an portfolio home page?

Simple profile/portfolio page, see it live here: haaans.com or heportfolio.com. What is a portfolio home page? How do you make a portfolio home page? This script and codes were developed by Hans Engebretsen on 09 August 2022, Tuesday.

Portfolio Home page Previews
IQ Test

Portfolio Home page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Home page</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } 80% { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
.bounceInLeft { animation-name: bounceInLeft; animation-duration: .8s; animation-fill-mode: both;
}
@font-face { font-family: 'hans-font'; src: url("http://haaans.com/fonts/hans-font.eot?soqwyy"); src: url("http://haaans.com/fonts/hans-font.eot?#iefixsoqwyy") format("embedded-opentype"), url("http://haaans.com/fonts/hans-font.woff?soqwyy") format("woff"), url("http://haaans.com/fonts/hans-font.ttf?soqwyy") format("truetype"), url("http://haaans.com/fonts/hans-font.svg?soqwyy#hans-font") format("svg"); font-weight: normal; font-style: normal;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'hans-font'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-list:before { content: "\e600";
}
.icon-undo:before { content: "\e601";
}
.icon-console:before { content: "\e602";
}
.icon-github:before { content: "\e603";
}
.icon-apple:before { content: "\e604";
}
.icon-wordpress:before { content: "\e605";
}
.icon-dribbble:before { content: "\e606";
}
.icon-twitter:before { content: "\e607";
}
.icon-file-xml:before { content: "\e608";
}
.icon-code:before { content: "\e609";
}
.icon-css3:before { content: "\e60a";
}
.icon-pacman:before { content: "\e60b";
}
body { zoom: 1;
}
body:before, body:after { content: "\0020"; display: block; height: 0; overflow: hidden;
}
body:after { clear: both;
}
.image-wrap { display: block; margin: 0 auto; width: auto; margin-bottom: .5em; border-radius: 50%; z-index: 1; overflow: hidden; line-height: 0;
}
.image-wrap { max-width: 100px; display: inline-block; border: 2px solid white; box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.image-wrap img { max-width: 100%; height: auto; border-radius: 50%;
}
.hans-clicked #hans-toggle:after { content: "x"; display: inline-block; float: right; padding: .1em .4em; margin-right: .4em; color: white; font-size: 13px; background-color: rgba(100, 100, 100, 0.2);
}
@keyframes bouncey-bounce { 0% { left: 10px; } 30% { left: 15px; } 50% { left: 10px; } 70% { left: -2px; } 100% { left: 10px; }
}
/*
____________________________________________________________________ BASE STYLINGS - foundational stylings - modular elements
____________________________________________________________________
*/
* { box-sizing: border-box;
}
html { height: 100%; position: relative; font-family: 'Lekton', sans-serif; font-size: 18px; background-color: #222; color: #aaa;
}
@media (max-width: 650px) { html { border-top: 6px solid black; }
}
body { height: 100%;
}
h1, h2 { font-weight: 200; margin: 0.4em 0;
}
h1 { font-size: 1em;
}
h2 { color: rgba(136, 136, 136, 0.5); font-size: .75em;
}
.image-wrap { background: #b9c8c6; transition-property: opacity; transition-duration: .7s;
}
.index .image-wrap { opacity: 0;
}
.index.loaded .image-wrap { opacity: 1;
}
.button, a.button { display: inline-block; padding: .5em 1em; border-radius: .4em; text-decoration: none; border: 0.04em solid rgba(255, 255, 255, 0.55); background: transparent; color: rgba(255, 255, 255, 0.55); transition: background 200ms;
}
.button:hover, a.button:hover { background: rgba(255, 255, 255, 0.55); color: #282828;
}
.button.back, a.button.back { text-indent: -9999px;
}
.button.back:after, a.button.back:after { content: "<"; position: absolute; text-indent: 0px; font-size: 1.23em;
}
.strikethrough { text-decoration: line-through;
}
/*
____________________________________________________________________ MAIN PAGE STYLINGS - Navigation - Hans-Clicked states - Footer
____________________________________________________________________
*/
nav { max-height: 200px; margin: 0 auto; margin-top: 120px; max-width: 100px; z-index: 3;
}
@media (max-width: 450px) { nav { margin-top: 10%; }
}
.work nav { float: left; margin: 1.75em 0 0 2em;
}
.internal-nav-wrap { height: 121px; margin-top: 0px; overflow: hidden; transition: margin-top 200ms, height 200ms;
}
.internal-nav-wrap.social-clicked { height: 141px;
}
.hans-clicked .internal-nav-wrap { margin-top: 70px; height: 141px;
}
@media (max-width: 750px) { .hans-clicked .internal-nav-wrap { margin-top: 70px; } .hans-clicked.index .internal-nav-wrap { margin-top: 150px; }
}
@media (max-width: 650px) { .hans-clicked .internal-nav-wrap { margin-top: 100px; }
}
@media (max-width: 450px) { .hans-clicked .internal-nav-wrap { margin-top: 210px; } .hans-clicked.index .internal-nav-wrap { margin-top: 215px; }
}
@media (max-width: 370px) { .hans-clicked.index .internal-nav-wrap { margin-top: 315px; margin-bottom: 30px; display: block; }
}
.menu { padding: 0; margin: 0; margin-top: -10px; opacity: 0; transition: opacity 20ms .6s, margin-top 200ms;
}
.social-clicked .menu.unfolded { margin-top: -62px;
}
@media (max-width: 450px) { .social-clicked .menu.unfolded { margin-top: -77px; }
}
.menu.unfolded { opacity: 1; margin-top: 0;
}
.menu.unfolded li { margin-top: 0;
}
.menu li { display: block; margin-top: -31%; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: margin-top 200ms .6s;
}
.menu li:hover { background-color: rgba(100, 100, 100, 0.1); transition-delay: 0;
}
.menu li:nth-child(2) { transition-duration: .4s; transition-delay: .7s;
}
.menu li:nth-child(3) { transition-duration: .5s; transition-delay: .8s;
}
.menu li:nth-child(3) a:hover, .social-clicked .menu li:nth-child(3) a { padding-left: .5em;
}
.social-clicked .menu li:nth-child(3) a { color: #F08656;
}
.menu li a { display: block; padding-left: 0; padding-right: .5em; padding: .3em; text-decoration: none; color: #aaa; transition: all 100ms ease-in-out, color 100ms;
}
@media (max-width: 450px) { .menu li a { padding-top: .5em; padding-bottom: .5em; }
}
.menu li a:hover { padding-left: .5em; padding-right: 0;
}
.social { display: inline-block; width: 100%; padding: 0; margin: 150px 0 0 0; background: #333; background: rgba(0, 0, 0, 0.2); border-top: 1px solid #242321; border-bottom: 1px solid #4e4e4e; transition: margin 0 .2s;
}
.social-clicked .social { margin: 0px 0 0 0; transition-delay: 0;
}
.social li { display: block; width: 100%; max-width: 100%; overflow: hidden;
}
.social a { max-width: 31px; text-decoration: none; display: block; color: white; position: relative; padding: .4em; font-size: 15px; transition: padding-left .2s;
}
.social a:hover { padding-left: 100%;
}
.social a:before { content: attr(data); color: white; position: absolute; display: block; left: -75px; transition: left .2s; color: #b9c8c6;
}
.social a:hover:before { left: 5px;
}
@media (max-width: 650px) { .overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; z-index: 10; opacity: 0; background-color: rgba(34, 34, 34, 0.93); transition: opacity 0.5s, visibility 0s 0.5s; } .menu-clicked .overlay { opacity: 1; visibility: visible; transition: opacity .5s; } .menu-clicked.work nav { margin-top: 100px; }
}
footer { position: absolute; bottom: 0; width: 100%; padding: .7em .2em; margin: 0 auto; text-align: center; transition: margin-bottom .5s 1s, opacity 400ms; opacity: 1; overflow: hidden;
}
.work footer { position: relative;
}
@media (max-width: 370px) { .hans-clicked.index footer { opacity: 0; }
}
footer.loaded { margin-bottom: 0;
}
footer a { color: rgba(136, 136, 136, 0.5); font-style: italic; text-decoration: none;
}
footer a:hover { text-decoration: underline;
}
.hans-content { opacity: 0; visibility: hidden; z-index: -1; transition: opacity 600ms, visibility 600ms 1s;
}
.hans-content p { color: rgba(136, 136, 136, 0.5); font-size: .75em;
}
@media (max-width: 450px) { .hans-content p { color: rgba(136, 136, 136, 0.7); line-height: 1.35em; font-size: .8em; }
}
.hans-content .bio { margin: 0 auto; margin-top: 0px; width: 80%; max-width: 600px; min-width: 240px; transition: margin-top 400ms;
}
.work .hans-content .bio { position: absolute; top: 0px; left: 26px; margin-top: 0; transition: top 400ms;
}
.hans-content .bio a { color: rgba(136, 136, 136, 0.5); font-style: italic;
}
.hans-content:after { content: ""; display: block; position: absolute; left: 0; top: 0; height: 90%; width: 100%; z-index: -1; opacity: .059; background-size: cover; background-position: center center;
}
.hans-clicked .menu { margin-top: 109px;
}
.hans-clicked .container { margin-left: 100%;
}
.hans-clicked .hans-content { opacity: 1; visibility: visible; transition: opacity 600ms;
}
.hans-clicked .hans-content .bio { margin-top: -108px; transition: margin-top 400ms;
}
.hans-clicked #hans-toggle { color: #F08656; padding-left: .5em; padding-right: 0; background-color: rgba(100, 100, 100, 0.1);
}
.container { padding-right: 10px; padding-left: 2.5em; transition: all 400ms; width: 100%; transition: all 200ms;
}
@media (max-width: 650px) { .container { padding-left: 10px; }
}
.container-wrap { overflow: hidden;
}
@media (max-width: 650px) { .container-wrap { width: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<nav>	<div class="image-wrap" id="profile-image"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512_3.jpg" alt="Hans Engebretsen" />	</div>	<div class="internal-nav-wrap"> <ul id="navigation-menu" class="menu">	<li><a href="#" id="hans-toggle">hans</a></li>	<li><a href="http://haaans.com/work.html">work</a></li>	<li><a href="#" id="social-toggle">elsewhere</a></li> </ul> <ul class="social"> <li><a href="http://codepen.io/hans" data="/hans">CodePen</a></li> <li><a href="https://twitter.com/HansEngebretsen" data="@HansEnge">Twitter</a></li> <li><a href="http://dribbble.com/HansE" data="/hansE">Dribbble</a></li> <li><a href="http://www.linkedin.com/in/hansenge" data="/hansenge">LinkedIn</a></li> </ul>	</div> </nav> <section class="hans-content"> <div class="bio">	<h1> <span id="txt-rotate" class="txt-rotate" data-period="2000" data-rotate='[ "Graphic", "UX", "Front-end", "Print", "Minimalist", "Typographer &" ]'>	</span> Designer	</h1> <p>I'm passionate about serving up focused experiences through intuitive design & aesthetic. I get pumped about the little things in life, like <a href="https://www.simple.com/">Simple</a>, <a href="http://tryghost.com">Ghost</a>, Apple, Costco, Amazon Prime, <a href="http://www.sublimetext.com/">Sublime Text</a>, <a href="http://lmgtfy.com/">LMGTFY</a>, <a href="http://instagram.com/p/d6X1UAwCys/">Travel</a>, and of course my dog <a href="http://instagram.com/p/kXBBvfwC80/">Lucy</a> and wife <a href="http://instagram.com/p/eDgqceQC-u/">Bailey</a>.</p> <p>This site is built sans-CMS with straight CSS & HTML (uses Grunt, Sass, and Amazon S3 to make things easier). If you want to know more about my work, just <a href="mailto:[email protected]">email me</a> – I'm a <a href="http://www.mailboxapp.com/">Mailbox</a> user, so I won't miss it. I'd be happy to pause for a second from honing my (impressive) stockpile of gifs to connect.</p> </div> </section> <footer>	<div class="bio"> <h2>Full site <a href="http://haaans.com/">here</a> <span>|</span> Source on <a href="https://github.com/HansEngebretsen">GitHub</a></h2>	</div> </footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Home page - Script Codes CSS Codes

@keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } 80% { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
.bounceInLeft { animation-name: bounceInLeft; animation-duration: .8s; animation-fill-mode: both;
}
@font-face { font-family: 'hans-font'; src: url("http://haaans.com/fonts/hans-font.eot?soqwyy"); src: url("http://haaans.com/fonts/hans-font.eot?#iefixsoqwyy") format("embedded-opentype"), url("http://haaans.com/fonts/hans-font.woff?soqwyy") format("woff"), url("http://haaans.com/fonts/hans-font.ttf?soqwyy") format("truetype"), url("http://haaans.com/fonts/hans-font.svg?soqwyy#hans-font") format("svg"); font-weight: normal; font-style: normal;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'hans-font'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-list:before { content: "\e600";
}
.icon-undo:before { content: "\e601";
}
.icon-console:before { content: "\e602";
}
.icon-github:before { content: "\e603";
}
.icon-apple:before { content: "\e604";
}
.icon-wordpress:before { content: "\e605";
}
.icon-dribbble:before { content: "\e606";
}
.icon-twitter:before { content: "\e607";
}
.icon-file-xml:before { content: "\e608";
}
.icon-code:before { content: "\e609";
}
.icon-css3:before { content: "\e60a";
}
.icon-pacman:before { content: "\e60b";
}
body { zoom: 1;
}
body:before, body:after { content: "\0020"; display: block; height: 0; overflow: hidden;
}
body:after { clear: both;
}
.image-wrap { display: block; margin: 0 auto; width: auto; margin-bottom: .5em; border-radius: 50%; z-index: 1; overflow: hidden; line-height: 0;
}
.image-wrap { max-width: 100px; display: inline-block; border: 2px solid white; box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.image-wrap img { max-width: 100%; height: auto; border-radius: 50%;
}
.hans-clicked #hans-toggle:after { content: "x"; display: inline-block; float: right; padding: .1em .4em; margin-right: .4em; color: white; font-size: 13px; background-color: rgba(100, 100, 100, 0.2);
}
@keyframes bouncey-bounce { 0% { left: 10px; } 30% { left: 15px; } 50% { left: 10px; } 70% { left: -2px; } 100% { left: 10px; }
}
/*
____________________________________________________________________ BASE STYLINGS - foundational stylings - modular elements
____________________________________________________________________
*/
* { box-sizing: border-box;
}
html { height: 100%; position: relative; font-family: 'Lekton', sans-serif; font-size: 18px; background-color: #222; color: #aaa;
}
@media (max-width: 650px) { html { border-top: 6px solid black; }
}
body { height: 100%;
}
h1, h2 { font-weight: 200; margin: 0.4em 0;
}
h1 { font-size: 1em;
}
h2 { color: rgba(136, 136, 136, 0.5); font-size: .75em;
}
.image-wrap { background: #b9c8c6; transition-property: opacity; transition-duration: .7s;
}
.index .image-wrap { opacity: 0;
}
.index.loaded .image-wrap { opacity: 1;
}
.button, a.button { display: inline-block; padding: .5em 1em; border-radius: .4em; text-decoration: none; border: 0.04em solid rgba(255, 255, 255, 0.55); background: transparent; color: rgba(255, 255, 255, 0.55); transition: background 200ms;
}
.button:hover, a.button:hover { background: rgba(255, 255, 255, 0.55); color: #282828;
}
.button.back, a.button.back { text-indent: -9999px;
}
.button.back:after, a.button.back:after { content: "<"; position: absolute; text-indent: 0px; font-size: 1.23em;
}
.strikethrough { text-decoration: line-through;
}
/*
____________________________________________________________________ MAIN PAGE STYLINGS - Navigation - Hans-Clicked states - Footer
____________________________________________________________________
*/
nav { max-height: 200px; margin: 0 auto; margin-top: 120px; max-width: 100px; z-index: 3;
}
@media (max-width: 450px) { nav { margin-top: 10%; }
}
.work nav { float: left; margin: 1.75em 0 0 2em;
}
.internal-nav-wrap { height: 121px; margin-top: 0px; overflow: hidden; transition: margin-top 200ms, height 200ms;
}
.internal-nav-wrap.social-clicked { height: 141px;
}
.hans-clicked .internal-nav-wrap { margin-top: 70px; height: 141px;
}
@media (max-width: 750px) { .hans-clicked .internal-nav-wrap { margin-top: 70px; } .hans-clicked.index .internal-nav-wrap { margin-top: 150px; }
}
@media (max-width: 650px) { .hans-clicked .internal-nav-wrap { margin-top: 100px; }
}
@media (max-width: 450px) { .hans-clicked .internal-nav-wrap { margin-top: 210px; } .hans-clicked.index .internal-nav-wrap { margin-top: 215px; }
}
@media (max-width: 370px) { .hans-clicked.index .internal-nav-wrap { margin-top: 315px; margin-bottom: 30px; display: block; }
}
.menu { padding: 0; margin: 0; margin-top: -10px; opacity: 0; transition: opacity 20ms .6s, margin-top 200ms;
}
.social-clicked .menu.unfolded { margin-top: -62px;
}
@media (max-width: 450px) { .social-clicked .menu.unfolded { margin-top: -77px; }
}
.menu.unfolded { opacity: 1; margin-top: 0;
}
.menu.unfolded li { margin-top: 0;
}
.menu li { display: block; margin-top: -31%; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: margin-top 200ms .6s;
}
.menu li:hover { background-color: rgba(100, 100, 100, 0.1); transition-delay: 0;
}
.menu li:nth-child(2) { transition-duration: .4s; transition-delay: .7s;
}
.menu li:nth-child(3) { transition-duration: .5s; transition-delay: .8s;
}
.menu li:nth-child(3) a:hover, .social-clicked .menu li:nth-child(3) a { padding-left: .5em;
}
.social-clicked .menu li:nth-child(3) a { color: #F08656;
}
.menu li a { display: block; padding-left: 0; padding-right: .5em; padding: .3em; text-decoration: none; color: #aaa; transition: all 100ms ease-in-out, color 100ms;
}
@media (max-width: 450px) { .menu li a { padding-top: .5em; padding-bottom: .5em; }
}
.menu li a:hover { padding-left: .5em; padding-right: 0;
}
.social { display: inline-block; width: 100%; padding: 0; margin: 150px 0 0 0; background: #333; background: rgba(0, 0, 0, 0.2); border-top: 1px solid #242321; border-bottom: 1px solid #4e4e4e; transition: margin 0 .2s;
}
.social-clicked .social { margin: 0px 0 0 0; transition-delay: 0;
}
.social li { display: block; width: 100%; max-width: 100%; overflow: hidden;
}
.social a { max-width: 31px; text-decoration: none; display: block; color: white; position: relative; padding: .4em; font-size: 15px; transition: padding-left .2s;
}
.social a:hover { padding-left: 100%;
}
.social a:before { content: attr(data); color: white; position: absolute; display: block; left: -75px; transition: left .2s; color: #b9c8c6;
}
.social a:hover:before { left: 5px;
}
@media (max-width: 650px) { .overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; z-index: 10; opacity: 0; background-color: rgba(34, 34, 34, 0.93); transition: opacity 0.5s, visibility 0s 0.5s; } .menu-clicked .overlay { opacity: 1; visibility: visible; transition: opacity .5s; } .menu-clicked.work nav { margin-top: 100px; }
}
footer { position: absolute; bottom: 0; width: 100%; padding: .7em .2em; margin: 0 auto; text-align: center; transition: margin-bottom .5s 1s, opacity 400ms; opacity: 1; overflow: hidden;
}
.work footer { position: relative;
}
@media (max-width: 370px) { .hans-clicked.index footer { opacity: 0; }
}
footer.loaded { margin-bottom: 0;
}
footer a { color: rgba(136, 136, 136, 0.5); font-style: italic; text-decoration: none;
}
footer a:hover { text-decoration: underline;
}
.hans-content { opacity: 0; visibility: hidden; z-index: -1; transition: opacity 600ms, visibility 600ms 1s;
}
.hans-content p { color: rgba(136, 136, 136, 0.5); font-size: .75em;
}
@media (max-width: 450px) { .hans-content p { color: rgba(136, 136, 136, 0.7); line-height: 1.35em; font-size: .8em; }
}
.hans-content .bio { margin: 0 auto; margin-top: 0px; width: 80%; max-width: 600px; min-width: 240px; transition: margin-top 400ms;
}
.work .hans-content .bio { position: absolute; top: 0px; left: 26px; margin-top: 0; transition: top 400ms;
}
.hans-content .bio a { color: rgba(136, 136, 136, 0.5); font-style: italic;
}
.hans-content:after { content: ""; display: block; position: absolute; left: 0; top: 0; height: 90%; width: 100%; z-index: -1; opacity: .059; background-size: cover; background-position: center center;
}
.hans-clicked .menu { margin-top: 109px;
}
.hans-clicked .container { margin-left: 100%;
}
.hans-clicked .hans-content { opacity: 1; visibility: visible; transition: opacity 600ms;
}
.hans-clicked .hans-content .bio { margin-top: -108px; transition: margin-top 400ms;
}
.hans-clicked #hans-toggle { color: #F08656; padding-left: .5em; padding-right: 0; background-color: rgba(100, 100, 100, 0.1);
}
.container { padding-right: 10px; padding-left: 2.5em; transition: all 400ms; width: 100%; transition: all 200ms;
}
@media (max-width: 650px) { .container { padding-left: 10px; }
}
.container-wrap { overflow: hidden;
}
@media (max-width: 650px) { .container-wrap { width: 100%; }
}

Portfolio Home page - Script Codes JS Codes

$( document ).ready(function() { // Loaded transitions $('.work #profile-image').addClass('bounceInLeft'); $('#navigation-menu').addClass('unfolded'); $('body').addClass('loaded'); // Navigation $('#hans-toggle').click(function(e) { e.preventDefault(); $('body').toggleClass('hans-clicked'); });
});
// Project Containers
$('.preview-image, .project-container .more').on('click', function(){ $('html,body').animate({scrollTop: $('.project-container').offset().top - '10'}, 400); $(this).parents('li').addClass('active'); $(this).parents('ul').addClass('project-active');
});
$('.project-container .back').click(function(e) { e.preventDefault(); $(this).parents('li').removeClass('active'); $(this).parents('ul').removeClass('project-active');
});
// Navigation
$('#social-toggle').click(function(e) { e.preventDefault(); $('.internal-nav-wrap').toggleClass('social-clicked'); });
// Nav toggle on mobile
$('#nav-toggle').click(function(e) { e.preventDefault(); $('body').addClass('menu-clicked'); });
$('.close-toggle').click(function(e) { e.preventDefault(); $('body').removeClass('menu-clicked'); $('body').removeClass('hans-clicked'); });
// Typing Text Function
var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false;
};
TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta);
};
// Only start when clicked, and don't run multiple instances
$('#hans-toggle').click(function() { if ( !$('#hans-toggle').data('clicked') ) { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); } $(this).data('clicked', true);
});
Portfolio Home page - Script Codes
Portfolio Home page - Script Codes
Home Page Home
Developer Hans Engebretsen
Username hans
Uploaded August 09, 2022
Rating 4
Size 12,664 Kb
Views 38,456
Do you need developer help for Portfolio Home page?

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!

Hans Engebretsen (hans) Script Codes
Name
IMac - Scrolling effect
Background-filter toggle
Product -Thumb Hover
The World Wide Web
Image Hover effect
Timeline Sign Load Transition
Nice Grainy background
Pure CSS FitText
Nice textured background
Nav Menu Hover
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!