Portfolio2

Developer
Omar Hassane
Size
7,217 Kb
Views
6,072
  1. Portfolio2 Previews
  2. Portfolio2 HTML Codes
  3. Portfolio2 CSS Codes
  4. Portfolio2 JS Codes

How do I make an portfolio2?

What is a portfolio2? How do you make a portfolio2? This script and codes were developed by Omar Hassane on 21 January 2023, Saturday.

Portfolio2 Previews
IQ Test

Portfolio2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>portfolio2</title> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Dancing+Script'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Terminal+Dosis'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=VT323'> <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! */ body{
}
#first { background: rgb(20,20,20); text-align: center; height:200px ; overflow: hidden; background-size: cover; background-attachment: fixed; margin:-30px ;
}
.svg-wrapper { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 320px;
}
.shape { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; fill: transparent; stroke: #123456; border-bottom: 5px solid black; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text { font-family: 'Roboto Condensed'; font-size: 22px; line-height: 32px; letter-spacing: 8px; color: #fff; top: -48px; position: relative;
}
.svg-wrapper:hover .shape { stroke-width: 2px; stroke-dashoffset: 0; stroke-dasharray: 760;
}
#second{ background-image:url("http://img01.deviantart.net/4145/i/2014/084/b/0/web_developer_wallpaper__white__by_plusjack-d7bmuby.jpg"); text-align: center; height:800px ; overflow: hidden; background-size: cover; background-attachment: fixed; margin:-30px ;
}
#first a{ text-decoration:none; color:#fff ;
} #first a:hover{ text-decoration:none; color:#fff ;
}
#third{ background-size: cover; background-attachment: fixed; margin:-30px;
height:100%; background-color:#000 ;
} #br + #disp { display: block;
}
#first #disp{ display:none; text-align: center; font-family: Dancing Script, Georgia, Times, serif;
}
.banana-slide { position: absolute; top: 0; overflow: hidden; cursor: pointer;
}
.banana-slide .content { width: 160%; left: -30%; position: absolute; height: 100%; background-position: center center, top left; background-size: auto 30%, cover; background-repeat: no-repeat, no-repeat;
}
.banana-slide .content video { display: inline-block; vertical-align: top; min-width: 100%; min-height: 100%; opacity: 0;
}
.banana-slide:hover .click_circle, .banana-slide:hover .click_triangle {opacity:1; }
.banana-slide:hover .click_circle:hover, .banana-slide:hover .click_triangle:hover {	-webkit-animation-name: banana_pulse;	-moz-animation-name: banana_pulse;	-o-animation-name: banana_pulse;	animation-name: banana_pulse;	-webkit-animation-duration:.5s;	animation-duration:.5s;	}
.banana-slide:hover .click_circle:hover > span {transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05)}
/* Circle Button */
.click_circle {-webkit-transform:scale(.9,.9);transform:scale(.9,.9);-webkit-tap-highlight-color:transparent;
display:block; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity:0;position:absolute;width:158px;height:158px;left:50%;z-index:1;margin-left:-79px;top:50%;margin-top:-79px;cursor:pointer}
.click_circle:after {pointer-events:none;opacity:.5; content:url("data:image/svg+xml;utf8, <svg class='click_circle_bg' viewBox='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000/svg'><circle fill='%23f4f4f4' cx='50' cy='50' r='48'></circle></svg>");}
.click_circle > span {pointer-events:none;position:absolute;left:50%;top:50%;margin-left:-34px;margin-top:-34px;background:#f2f2f2;width:69px;height:69px;z-index:4;border-radius:50%}
.click_circle > span > span {-webkit-tap-highlight-color:transparent;position:relative;display:block;left:50%;top:50%;margin-left:-9px;margin-top:-9px;width:18px;height:18px;z-index:4;pointer-events:none}
.click_circle > span > span:before {content:'';display:block;position:absolute;left:0;top:50%;margin-top:-1px;width:18px;height:2px;background:#666666;border-radius:1px}
.click_circle > span > span:after {content:'';display:block;position:absolute;left:50%;margin-left:-1px;width:2px;height:100%;background:#666666;bottom:0;border-radius:1px}
/* Triangle Button */
.click_triangle {transform:scale(.8,.8);-webkit-transform:scale(.8,.8);-webkit-tap-highlight-color:transparent;display:block; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;	opacity:0;position:absolute;width:158px;height:158px;left:50%;z-index:1;margin-left:-79px;top:50%;margin-top:-79px;cursor:pointer}
.click_triangle > span {transform:scale(.8,.8);-webkit-transform:scale(.8,.8);display:block;-webkit-tap-highlight-color:transparent;position:relative;display:block;left:50%;top:50%;margin-left:-50px;margin-top:-50px;width:50px;height:50px;z-index:4;pointer-events:none}
.click_triangle > span:before {content:url("../images/banana_play.svg");display:block;-webkit-tap-highlight-color:transparent;position:absolute;display:block;left:50%;top:50%;margin-left:-50px;margin-top:-50px;width:18px;height:18px;z-index:4;pointer-events:none}
/****************************************************************************** Animations
*******************************************************************************/
/* Pulse Effect */
@-webkit-keyframes banana_pulse { 0% { -webkit-transform: scale(1); }	50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes banana_pulse { 0% { -moz-transform: scale(1); }	50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); }
}
@-o-keyframes banana_pulse { 0% { -o-transform: scale(1); }	50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); }
}
@keyframes banana_pulse { 0% { transform: scale(1); }	50% { transform: scale(1.1); } 100% { transform: scale(1); }
}
.content video{ position:relative; left:-2%;
}
@import url(https://fonts.googleapis.com/css?family=Khula:700);
.console-container {
font-family: 'VT323' ; font-size:4em; text-align:center; height:200px; width:600px; display:block; color:green; top:0; bottom:0; left:0; right:0; margin:auto;
}
.console-underscore { display:inline-block; position:relative; top:-0.14em; left:10px;
}
#fourth{ background: rgb(20,20,20); background-attachment: fixed; margin:-30px; height:80px; text-align: center;
}
#fourth h3 { color:#fff ; font-size:20px ; font-family:Dancing script ;
}
.intro-divider { width: 1500px; border-top: 1px solid #C65151; border-bottom: 1px solid #C65151 ;
}
#second h1 { color:rgb(20,20,20); ; font-family:Dancing script ; padding:50px;
}
#second h2 { color:rgb(20,20,20); ; font-family:Dancing script ; padding:50px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body>
<div class="jumbotron" id="first"> <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text"><a id="br" href="#third">HASSANE OMAR</a> </div> </svg>
</div>
</div> <div class="jumbotron" id="second"> <h1> Welcome to my Portfolio </h1> <hr class="intro-divider"> <h2>The projects I'm working on are usually front-end projects built with Javascript and Jquery . </h2> <hr class="intro-divider"> <h2>Full stack projects are coming soon ... </h2> </div>
<div class="jumbotron" id="third"> <div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>&#95;</div></div>
</div>
<div class="jumbotron" id="fourth"> <h3>Copyright © 2015 HASSANE OMAR.</h3>
</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="http://vamosdeportes.com/va/custom-rs/BananaSlider/js/banana-slider.js"></script>
</body> <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='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>
<script src='http://vamosdeportes.com/va/custom-rs/BananaSlider/js/banana-slider.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio2 - Script Codes CSS Codes

body{
}
#first { background: rgb(20,20,20); text-align: center; height:200px ; overflow: hidden; background-size: cover; background-attachment: fixed; margin:-30px ;
}
.svg-wrapper { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 320px;
}
.shape { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; fill: transparent; stroke: #123456; border-bottom: 5px solid black; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text { font-family: 'Roboto Condensed'; font-size: 22px; line-height: 32px; letter-spacing: 8px; color: #fff; top: -48px; position: relative;
}
.svg-wrapper:hover .shape { stroke-width: 2px; stroke-dashoffset: 0; stroke-dasharray: 760;
}
#second{ background-image:url("http://img01.deviantart.net/4145/i/2014/084/b/0/web_developer_wallpaper__white__by_plusjack-d7bmuby.jpg"); text-align: center; height:800px ; overflow: hidden; background-size: cover; background-attachment: fixed; margin:-30px ;
}
#first a{ text-decoration:none; color:#fff ;
} #first a:hover{ text-decoration:none; color:#fff ;
}
#third{ background-size: cover; background-attachment: fixed; margin:-30px;
height:100%; background-color:#000 ;
} #br + #disp { display: block;
}
#first #disp{ display:none; text-align: center; font-family: Dancing Script, Georgia, Times, serif;
}
.banana-slide { position: absolute; top: 0; overflow: hidden; cursor: pointer;
}
.banana-slide .content { width: 160%; left: -30%; position: absolute; height: 100%; background-position: center center, top left; background-size: auto 30%, cover; background-repeat: no-repeat, no-repeat;
}
.banana-slide .content video { display: inline-block; vertical-align: top; min-width: 100%; min-height: 100%; opacity: 0;
}
.banana-slide:hover .click_circle, .banana-slide:hover .click_triangle {opacity:1; }
.banana-slide:hover .click_circle:hover, .banana-slide:hover .click_triangle:hover {	-webkit-animation-name: banana_pulse;	-moz-animation-name: banana_pulse;	-o-animation-name: banana_pulse;	animation-name: banana_pulse;	-webkit-animation-duration:.5s;	animation-duration:.5s;	}
.banana-slide:hover .click_circle:hover > span {transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05)}
/* Circle Button */
.click_circle {-webkit-transform:scale(.9,.9);transform:scale(.9,.9);-webkit-tap-highlight-color:transparent;
display:block; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; opacity:0;position:absolute;width:158px;height:158px;left:50%;z-index:1;margin-left:-79px;top:50%;margin-top:-79px;cursor:pointer}
.click_circle:after {pointer-events:none;opacity:.5; content:url("data:image/svg+xml;utf8, ");}
.click_circle > span {pointer-events:none;position:absolute;left:50%;top:50%;margin-left:-34px;margin-top:-34px;background:#f2f2f2;width:69px;height:69px;z-index:4;border-radius:50%}
.click_circle > span > span {-webkit-tap-highlight-color:transparent;position:relative;display:block;left:50%;top:50%;margin-left:-9px;margin-top:-9px;width:18px;height:18px;z-index:4;pointer-events:none}
.click_circle > span > span:before {content:'';display:block;position:absolute;left:0;top:50%;margin-top:-1px;width:18px;height:2px;background:#666666;border-radius:1px}
.click_circle > span > span:after {content:'';display:block;position:absolute;left:50%;margin-left:-1px;width:2px;height:100%;background:#666666;bottom:0;border-radius:1px}
/* Triangle Button */
.click_triangle {transform:scale(.8,.8);-webkit-transform:scale(.8,.8);-webkit-tap-highlight-color:transparent;display:block; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;	opacity:0;position:absolute;width:158px;height:158px;left:50%;z-index:1;margin-left:-79px;top:50%;margin-top:-79px;cursor:pointer}
.click_triangle > span {transform:scale(.8,.8);-webkit-transform:scale(.8,.8);display:block;-webkit-tap-highlight-color:transparent;position:relative;display:block;left:50%;top:50%;margin-left:-50px;margin-top:-50px;width:50px;height:50px;z-index:4;pointer-events:none}
.click_triangle > span:before {content:url("../images/banana_play.svg");display:block;-webkit-tap-highlight-color:transparent;position:absolute;display:block;left:50%;top:50%;margin-left:-50px;margin-top:-50px;width:18px;height:18px;z-index:4;pointer-events:none}
/****************************************************************************** Animations
*******************************************************************************/
/* Pulse Effect */
@-webkit-keyframes banana_pulse { 0% { -webkit-transform: scale(1); }	50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes banana_pulse { 0% { -moz-transform: scale(1); }	50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); }
}
@-o-keyframes banana_pulse { 0% { -o-transform: scale(1); }	50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); }
}
@keyframes banana_pulse { 0% { transform: scale(1); }	50% { transform: scale(1.1); } 100% { transform: scale(1); }
}
.content video{ position:relative; left:-2%;
}
@import url(https://fonts.googleapis.com/css?family=Khula:700);
.console-container {
font-family: 'VT323' ; font-size:4em; text-align:center; height:200px; width:600px; display:block; color:green; top:0; bottom:0; left:0; right:0; margin:auto;
}
.console-underscore { display:inline-block; position:relative; top:-0.14em; left:10px;
}
#fourth{ background: rgb(20,20,20); background-attachment: fixed; margin:-30px; height:80px; text-align: center;
}
#fourth h3 { color:#fff ; font-size:20px ; font-family:Dancing script ;
}
.intro-divider { width: 1500px; border-top: 1px solid #C65151; border-bottom: 1px solid #C65151 ;
}
#second h1 { color:rgb(20,20,20); ; font-family:Dancing script ; padding:50px;
}
#second h2 { color:rgb(20,20,20); ; font-family:Dancing script ; padding:50px;
}

Portfolio2 - Script Codes JS Codes

var dots = 0;
$(document).ready(function() { setInterval (type, 600); $(function() { function filterPath(string) { return string .replace(/^\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(/\/$/,''); } var locationPath = filterPath(location.pathname); var scrollElem = scrollableElement('html', 'body'); // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) $('a[href*=#]').each(function() { // Ensure it's a same-page link var thisPath = filterPath(this.pathname) || locationPath; if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) { // Ensure target exists var $target = $(this.hash), target = this.hash; if (target) { // Find location of target var targetOffset = $target.offset().top; $(this).click(function(event) { // Prevent jump-down event.preventDefault(); // Animate to target $(scrollElem).animate({scrollTop: targetOffset}, 1000, function() { // Set hash in URL after animation successful location.hash = target; }); }); } } }); // Use the first element that is "scrollable" (cross-browser fix?) function scrollableElement(els) { for (var i = 0, argLength = arguments.length; i <argLength; i++) { var el = arguments[i], $scrollElement = $(el); if ($scrollElement.scrollTop()> 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop()> 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } } return []; } }); $('.navbar-brand').hover(function(){ $('.navbar-brand').attr("style","color:#ffffff"); },function(){ $('.navbar-brand').attr("style","color:#000000"); } );
});
function type() { if(dots < 3) { $('#dots').append('.'); dots++; } else { $('#dots').html(''); dots = 0; }
}
// function([string1, string2],target id,[color1,color2]) consoleText(['HELLO.', 'MY NAME IS HASSANE OMAR.', 'A FRONT END DEVELOPER AVAILABLE FOR YOU.'], 'text',['#123456','#123456','#123456']);
function consoleText(words, id, colors) { if (colors === undefined) colors = ['#fff']; var visible = true; var con = document.getElementById('console'); var letterCount = 1; var x = 1; var waiting = false; var target = document.getElementById(id) target.setAttribute('style', 'color:' + colors[0]) window.setInterval(function() { if (letterCount === 0 && waiting === false) { waiting = true; target.innerHTML = words[0].substring(0, letterCount) window.setTimeout(function() { var usedColor = colors.shift(); colors.push(usedColor); var usedWord = words.shift(); words.push(usedWord); x = 1; target.setAttribute('style', 'color:' + colors[0]) letterCount += x; waiting = false; }, 1000) } else if (letterCount === words[0].length + 1 && waiting === false) { waiting = true; window.setTimeout(function() { x = -1; letterCount += x; waiting = false; }, 1000) } else if (waiting === false) { target.innerHTML = words[0].substring(0, letterCount) letterCount += x; } }, 120) window.setInterval(function() { if (visible === true) { con.className = 'console-underscore hidden' visible = false; } else { con.className = 'console-underscore' visible = true; } }, 400)
}
Portfolio2 - Script Codes
Portfolio2 - Script Codes
Home Page Home
Developer Omar Hassane
Username omodev
Uploaded January 21, 2023
Rating 3
Size 7,217 Kb
Views 6,072
Do you need developer help for Portfolio2?

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!

Omar Hassane (omodev) Script Codes
Name
Mini-projet
Goku flying the whole day
Errachidia-Morocco
Cv
Pop-up contact vacances bleues
A Pen by Omar Hassane
Portfolio-animation
TODO
My portfolio
Svg sky
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!