Video Portfolio
How do I make an video portfolio?
Portfolio with an embedded Vimeo showcase. Uses media queries and iframe for a responive design. Links to Behance, CodePen, Github, and personally hosted sites.. What is a video portfolio? How do you make a video portfolio? This script and codes were developed by Andrew Bales on 03 October 2022, Monday.
Video Portfolio - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Video Portfolio</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="click"> <div class="blinker"></div> <div><a id="videoText" href="#" onclick="toggleVisibility('watch'); videoText('videoText');">Video</a></div>
</div>
<div id="watch"> <iframe src="https://player.vimeo.com/video/148949697" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div id="andrew"><img src="http://gdurl.com/dOyX" height="550px"></div>
<ul> <div class="icon-box"> <li class="invert" id="behance"><a href="https://www.behance.net/AndrewBales" target="_blank"><img src="http://static.wixstatic.com/media/9d6bc1_3ccab2fb991444c79741943865570d61.png" height="100"></a> <li class="invert"><a href="https://codepen.io/agbales"><img src="https://blog.codepen.io/wp-content/uploads/2014/03/codepen-logo.svg" height="85"></a></li> <li class="invert"><a href="www.ucenglishcatalog.com" target="_blank"><img src="http://gdurl.com/Mhbm" height="90"></a></li> <li class="invert" id="ruby"><a href="https://github.com/agbales/" target="_blank"><img src="http://plainicon.com/dboard/userprod/2800_a1826/prod_thumb/plainicon.com-50310-512px-9d3.png" height="70"></a></li> <li class="invert" id="FCC"><a href="https://www.freecodecamp.com/agbales" target="_blank"><img src="https://cdn.rawgit.com/Deftwun/e3756a8b518cbb354425/raw/6584db8babd6cbc4ecb35ed36f0d184a506b979e/free-code-camp-logo.svg" height="70"></a> </div>
</ul>
<div class="bar"><h1><a href="http://www.andrewbales.com" target="_blank">Andrew Bales</a></h1></div> <script src="js/index.js"></script>
</body>
</html>
Video Portfolio - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700italic,700);
@import url(https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911);
body { text-align: center; height: 100%; overflow: hidden;
}
h1 { font-family: 'Goudy Bookletter 1911', serif; font-size: 55px; color: #fff; position: absolute; margin: 20px 100px; bottom: 0; right: 0; transition: all .5s; z-index: 9999; transition: all .7s ease;
}
ul { height: 50px; margin: 100px 0px -10px 0px; list-style-type: none; z-index: 2; transition: all .5s;
}
li { display: inline-block; margin: 30px 10px; transition: all .5s;
}
a { color: #fff; text-decoration: none;
}
a:hover { opacity: .5;
}
.icon-box { position: absolute; left: 0; bottom: 0; height: 135px; width: 780px; z-index: 2;
}
.invert { -webkit-filter: invert(1); filter: invert(1); z-index: -20;
}
#behance { transform: scale(1.4); margin: 0px 5px 0px 0px;
}
#ruby { margin: 0px 10px; transform: scale(.9) translateY(-10px);
}
#andrew { position: fixed; bottom: 0; right: 0; margin: 80px -30px; z-index: 0;
}
#FCC { padding: 0px 0px 10px 15px; bottom: 0;
}
.bar { position: absolute; right: 0; bottom: 0; background-color: #000; width: 100%; height: 130px; transition: all .5s ease; z-index: 1;
}
#watch { position: absolute; display: none; top: 0; margin: 0px -10px; height: 85%; width: 60%; background: #181818; transition: all 2s ease;
}
#watch:target { display: block;
}
.click { position: absolute; top: 0; right: 0; height: 30px; width: 30px; margin: 100px 120px; z-index: 9999;
}
.click a:link { font-family: 'Goudy Bookletter 1911', serif; color: #fff; font-size: 20px; background: #181818; border-radius: 50%; padding: 30px 20px;
}
/* Blinker */
.blinker { position: fixed; top: 0; right: 0; z-index: -100; width: 50px; height: 50px; border: none; border-radius: 50%; box-shadow: 0 0 0 0 #E9D460; background-color: #E9D460; transform: translate(-80px, 90px); cursor: pointer; -webkit-animation: pulse 2s infinite cubic-bezier; -moz-animation: pulse 2s infinite cubic-bezier; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite;
}
.click:hover .blinker { opacity: 0; -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none;
}
@-webkit-keyframes pulse { to { box-shadow: 0 0 0 45px #E9D460; opacity: 0; } }
@-moz-keyframes pulse { to { box-shadow: 0 0 0 45px #E9D460; opacity: 0; } }
@-ms-keyframes pulse { to { box-shadow: 0 0 0 45px #E9D460; opacity: 0; } }
@keyframes pulse { to { box-shadow: 0 0 0 45px #E9D460; opacity: 0; } }
/* Meida Queries */
@media (max-width: 1200px) { h1 { font-size: 45px; margin: 105px 150px; } ul { position: absolute; right: 0; bottom: 0; margin: -10px 655px; } li { margin: 20px 0px; transform: scale(.7); } #behance { transform: scale(1); } #ruby { transform: scale(.7) translateY(-10px); } #watch { width: 100%; height: 78%; } .bar { height: 180px; }
}
@media (max-width: 600px) { #andrew { display: none } h1 { font-size: 35px; }
}
Video Portfolio - Script Codes JS Codes
function toggleVisibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block';
}
function videoText(id) { var element = document.getElementById(id); if(element.innerHTML === 'Video') element.innerHTML = 'Close!'; else element.innerHTML = 'Video';
}
Developer | Andrew Bales |
Username | agbales |
Uploaded | October 03, 2022 |
Rating | 3 |
Size | 3,390 Kb |
Views | 24,288 |
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 |
Kitten Carousel | 4,534 Kb |
Open Weather Map API | 3,629 Kb |
Slanted Div, Fixed Header | 3,455 Kb |
Frasier Intro | 2,549 Kb |
Making A Murderer - Steven Avery | 3,210 Kb |
The Motherlode | 3,450 Kb |
Simon | 4,305 Kb |
Wikipedia Viewer | 3,986 Kb |
Daily Show Guest Stats | 3,335 Kb |
David Bowie Quotes | 4,173 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 |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
DNA Double Helix | Hugo | 5,112 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
CSS3 Animated buttons | Cguillou | 3,737 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!