MightyJoeW Portfolio

Developer
Joe Warren
Size
15,545 Kb
Views
26,312
  1. MightyJoeW Portfolio Previews
  2. MightyJoeW Portfolio HTML Codes
  3. MightyJoeW Portfolio CSS Codes
  4. MightyJoeW Portfolio JS Codes

How do I make an mightyjoew portfolio?

What is a mightyjoew portfolio? How do you make a mightyjoew portfolio? This script and codes were developed by Joe Warren on 06 December 2022, Tuesday.

MightyJoeW Portfolio Previews
IQ Test

MightyJoeW Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MightyJoeW Portfolio</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- NAVBAR -->
<div id="navbar"> <div class="nav-container"> <div class="toggle-nav"> <i class="fa fa-bars"></i> </div> <ul class="nav-list"> <li class="active"> <a data-title="home" href="#">Home</a> </li> <li> <a data-title="about" href="#about">About</a> </li> <li> <a data-title="portfolio" href="#portfolio">Portfolio</a> </li> <li> <a data-title="contact" href="#contact">Contact</a> </li> </ul> </div> <!-- end-nav-container -->
</div>
<!-- end-navbar -->
<!-- HOME -->
<div id="home" class="section"> <div class="section-container"> <div class="profil"> <div class="profil-img"></div> <h1>JOE WARREN</h1> <p><u>Front End Developer</u></p> </div> <!-- end-profil --> <div class="social-links"> <a id="profile-link" href="https://github.com/MightyJoeW" target="_blank"><i class="fa fa-github"></i></a> <a href="https://www.linkedin.com/in/josephmwarren" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="https://twitter.com/MightyJoeW" target="_blank"><i class="fa fa-twitter"></i></a> <a href="https://youtube.com/MightyJoeW" target="_blank"><i class="fa fa-youtube"></i></a> </div> <!-- end-social-links --> </div> <!-- end-home-container --> <div class="scroll-icon"> <div class="scroll-container"> <figure> <svg id="mouse" viewBox="0 0 106 106" width="40" height="60"> <g> <rect y="81" width="106" height="60" /> <polygon points="40,18 50,18 50,0 0,0 0,75 50,75 50,58 40,58	"/> <polygon points="56,0 56,18 66,18 66,58 56,58 56,75 106,75 106,0	"/> <rect class="wheel" x="45" y="23" width="16" height="30" /> </g> </svg> </figure> <i class="fa fa-angle-double-down"></i> </div> </div> <!-- end-scroll-icon -->
</div>
<!-- end-home -->
<!-- ABOUT -->
<div id="about" class="section"> <div class="section-container" id="welcome-section"> <div class="intro"> <h1>My name is JOE WARREN</h1> <p>I'm a Front-End developer in development who's driven daily by my passion for technology along with my desire to make our lives more efficient <i> and </i> entertaining. I'm currently working towards my Front End Development Certification with <a href="https://www.freecodecamp.com" target="about_blank">Free Code Camp</a>. I recently completed <a href="https://github.com/MightyJoeW/100-Days-of-Code/blob/master/log.md" target="_blank">#100DaysofCode</a> and am working through the <a href="https://github.com/MightyJoeW/Javascript30/blob/master/log.md" target="_blank"> #Javascript30 challenge</a>.</p> </div> <div class="skills"> <h2 class="title">My skills</h2> <ul> <li> Responsive Design <ul class="lvl-1"> <li><span class="skill-bar">50%</span><u>Bootstrap</u></li>
<!-- <li><span class="skill-bar">80%</span><u>Neat</u></li> --> </ul> </li> <li> CSS Tools <ul class="lvl-1"> <li><span class="skill-bar">10%</span><u>SASS</u></li>
<!-- <li><span class="skill-bar">0%</span><u>#</u></li> --> </ul> </li> <li> Javascript Tools <ul class="lvl-1"> <li><span class="skill-bar">20%</span><u>jQuery</u></li> <li><span class="skill-bar">05%</span><u>React</u></li> </ul> </li> <li> Workflow <ul class="lvl-1"> <li><span class="skill-bar">10%</span><u>Git</u></li> <li><span class="skill-bar">0%</span><u>Grunt</u></li> </ul> </li> </ul> </div> <!-- end-skills --> </div> <!-- end-about-container -->
</div>
<!-- end-home -->
<!-- PORTFOLIO -->
<div id="portfolio" class="section"> <div class="section-container"> <div class="title"> <h2>My Projects</h2> </div> <div class="thumbnails" id="projects"> <ul> <li> <a href="http://mightyjoetech.com/JSDrumkit/" target="_blank"> <img src="https://lh3.googleusercontent.com/aKzDeACPInx-8s4XU7vpZHDNOHOexAeQ7sxJubk6orBsYaGBoSjy3JXglNhZbMezV9MntrS8up73tf0COi9paffKQypwjJ_AEPntReHbEZojTpHclCrQmPkNtNv8XS-3k22X2JFfztyJqy81OPvDhVBgrSNq1hrOtWyUPgUag9gWjBDqfQX2qJ-XYwsTHjZ8_gGMTE07bo1EiV4fPRxnt_LIbKNih7HsgXYoRBPM_7JYBSjpjUb7bRQ8cYzqigjAQaN6mvn7ogam0pLHAHoCOFbFGuMq7ZIq8BSX8DBDJXImvUewKDtBIZ_yDXbJmA_SNZ5i_liQQeY195e4Hfl21DeYb77SKLSD8LEXqVInN77Z5dimDCPbLVj4O6DxFSilXoqptqgK223zUBkMv1r-_0Ts3WkpxZsTqg8z1abWCklVS-wHVFVwsrEhSfsOgJNG_CLu_N5-VlUn2jpIR-5K4HgyHMk6tItr1jxotSjmrIUi70z4wMWqUmzfsBfrMFzE4Gc4J9TW1wy-NlxiMcry4_--oDxnIjNhdgG9yWi-xviNjmixLFEm6qg6CWnY37AJLBrGOZfKuRERnea8WK0ANUTZxLj01TDfRjyH552wKZwbDo57wfSOsg=w721-h348-no" alt="JS Drum Machine" /> <span class="project-tile"> <h2>JavaScript Drum Kit</h2> <p>Jam out with your desktop keyboard!</p> <i class="fa fa-link"></i> </span> </a> </li> <li> <a href="http://mightyjoetech.com/HEEL-Rock-Paper-Scissors/" target="_blank"> <img src="https://lh3.googleusercontent.com/XpqMlbc8DvUc6Ckvi660cUI3KXKsx2A_enlpsOOC5V5qODJj1-GS0tjZbKUBeGNYRHNGFbJv1TvyA0neX6TGwLU0PIDEBHCHBIDN5A9kalCmn4KRE32sJkTuLe3isl_yT7FErsm-c_BdmEUCYzsPmWYpgx8u-8AcBhmzErbtC82D4vF3Q6-iXjwI-YnOJL8-Onf1wIlN3GhmZ-HSru2xE10lwT5QBz-gV7ybj55yXxmWL3ICG3TfT5FM1CzgYVSPs3gkKzkG4is1PNeDg4v_tRqWS5tKJayXSR3axVMrRFCGVMrn0UYHEn4x2TbeHWv5hHS7OoUSQISu0DzmU0HzFrFocQgRIcniPX-P_9B6pe28deWPvyiyp1CGAGxXchW-74w5Hmzxa0HGK8GDhd9zV2Z0Z4cUvEWkGjFCOyNLWS0aZqldbBW-F2oMRi9MfKSMGNi8TxpgGRwG10OGjD27gqunYWiPPiinjs1lL861Qi61wuwcuota4-r6c_iA5nNePM53VyC3utts8ryCPRLZk36EeoG6SMK8-JoLT4kDn1-tH64CF5aanD0VFlhEVdaFN7PI45s1RUUj_uqHQv8HYpdA2JckLgpaMtHWyPXkOetf2x7ZUXcLbw=w650-h350-no" alt="HEEL Rock Paper Scissors" /> <span class="project-tile"> <h2>HEEL Rock Paper Scissors</h2> <p>Try to win, Jabroni!</p> <i class="fa fa-link"></i> </span> </a> </li> <li> <a href="http://mightyjoetech.com/gakLandingPage2/" target="_blank"> <img src="https://lh3.googleusercontent.com/0ALKo3Mhq69A60X6Iqs71qIQbQPzmhdTso7dDd1BfEFXQSTMuD6WWt54rY9wVooQfmqOXXD1kkajCcVsCgCXDg5lm_0iDv7v6e9UerKsqPG5vPXg3YaDTTImxB0IBY_M1Ggs-kjvPj5Dq-jtwG1rwJGhITiu4ytCI1hWMJtxQe9AhWWYqZzzRFdTn4WSEEZ57UeesVRtjDXHR-org68yNRlNMBJwlyNDzBMs2pcos5WdKuuacDCWiGzr6kjDYdsPhIWP-esO72r42JKhRQQothzROzZnb1B6SKSFwQEY41Y0ths5Ijww76nU2iDxNsHt4GPjq_uAX_f_ojdryQ-7wtSpDRk0h_-Gug_OhgXiJWux9XpkOjecJk_uM9V5hB_17uGwqcnK4ycBF99mUsL3xHOvftLVXoZsMohRI3Z4QkeRiFhoVXp2-tPRxElgoPoV4qvNDUFEZKhSnqlXZag1cMsDDEP-neJt0AhieK70e7Ci_xSTkb28xb4I0v-u6qKlLj-tHEVN1V2OKR7YSjbQmvDdLovmd1IsRSFqxMsQEYaZLXHB3DHVpxWeDaP9_MQGIS_bYieXrhrHWonujgdQZx_bdNwccMMFj3fdsQxh6244kI3nP-3fEg=w1261-h555-no" height="250" width="250" alt="Games and Keys Landing Page" /> <span class="project-tile"> <h2>Games and Keys Landing Page</h2> <p>Video Game Piano Tutorials, Sheet Music, & Midi Files</p> <i class="fa fa-link"></i> </span> </a> </li> <li> <a href="http://mightyjoetech.com/Music-Learning-Style/" target="_blank"> <img src="https://lh3.googleusercontent.com/ehpqlKmtKPpkoV_WOBJT0QFhcRBjiCvyVQlRZzgDP1niUVPmYI8OBaFLm3P3Na-8Nh9Snh5-WIbp-PILlpkBgX0sKWzzjQ9Ix3mOL57FSwKH8c6aU4k2i9BJS0GwU_rEGMwIFN9uFA_OE_YSI3yZG3j6XpBPg-4U6RLJTrbwNpJ9QK7l7askmNf_rXrgWAOln5KQenhijDkWO5S4alxo2YaDQ6rNqLBXyMGdQJGJXXeYsgpWeH-DHgW2o8C9m09m7pNDStG50WUAZIGswZP0A_yafdgKQSEahtodxDAdMNSTtZPRIGsV4vP18tejM4MX8mlST5fCWQ-NLQW1hgQhghxNuh2vbKwYvKOP74VAjAB7T_MsLQx9AU4vULFvvoKxtqh2hXecDlXki-g-n_Qq1GYiWodUuCrYvvI7s2SRBrSa7RQ26xxR0UsuhEDNMgFSZKq7hhlylrpLGQs04W7NlKwdtmhTraGx2uZGunQ_LSEqXkYTcpB7zU5VIRDx85RoYYF3uIeBgB8S6H7P8ZiiotvpiYyi1qos6u1jl8YZVisOtQeBZb8Uh1sDi83BaSOwXLtUQtclWR7qWJ6sIslx-xgqsDsM6NMhQoBGYE0jCtSZ-edOLP-deQ=w650-h350-no" alt="Music Learning Style Assessment" /> <span class="project-tile"> <h2>Music Learning Style Assessment</h2> <p>Discover your Learning Style</p> <i class="fa fa-link"></i> </span> </a> </li> </ul> </div> <!-- end-thumbnails --> </div> <!-- end-portfolio-container -->
</div>
<!-- end-home -->
<!-- CONTACT -->
<div id="contact" class="section"> <div class="section-container"> <div class="title"> <h2>Let's connect</h2> </div> <!-- end-title --> <div class="form-container"> <form action="#project-form"> <div class="form-group profil-img"> <input required id="name" type="text" name="name" placeholder="Name"> </div> <div class="form-group profil-img"> <input required id="email" type="email" name="email" placeholder="Email"> </div> <div class="form-group profil-img"> <input required id="subject" type="text" name="subject" placeholder="Subject"> </div> <div class="form-group profil-img"> <textarea required name="description" id="description" placeholder="Description"></textarea> </div> <div class="form-group profil-img"> <button type="reset" class="btn clear" name="clear">CLEAR</button> <button type="submit" class="btn action" name="submit">SEND</button> </div> </form> <!-- and-form --> </div> <!-- end-form-container --> </div> <!-- end-contact-container -->
</div>
<!-- end-contact --> <script src='https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js'></script>
<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://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script> <script src="js/index.js"></script>
</body>
</html>

MightyJoeW Portfolio - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald:300|Open+Sans:700,400);
html { box-sizing: border-box;
}
*, *::after, *::before { box-sizing: inherit;
}
/*	=================================================================================================	Base styles.	=================================================================================================
*/
html { margin: 0; padding: 0; overflow: auto;
}
::selection { background-color: #2FC5CC;
}
::-moz-selection { background-color: #2FC5CC;
}
* { -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background-color: #0e393b; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; color: #F4F7F7;
}
p { margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Oswald", Helvetica, sans-serif; font-size: 2rem; font-weight: 300; margin-top: 0; margin-bottom: 25.6px;
}
a,
a:link,
a:visited,
a:active { text-decoration: none; color: #2FC5CC; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
a:hover,
a:link:hover,
a:visited:hover,
a:active:hover { border-bottom-color: #2FC5CC; border-bottom-style: solid; border-bottom-width: 0.125rem;
}
ul { list-style: none; padding: 0; margin: 0;
}
#container { position: relative;
}
#welcome-section { height: 100vh;
}
/*	=================================================================================================	Typography.	=================================================================================================
*/
/*	=================================================================================================	Grids.	=================================================================================================
*/
/*	=================================================================================================	Forms.	=================================================================================================
*/
form input { background-color: #F4F7F7; color: #0e393b; height: 51.2px; width: 100%; padding-left: 1rem; outline: none; border: none; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
form input:focus { border-left-color: #f7bf07; border-left-style: solid; border-left-width: 0.25rem;
}
form textarea { background-color: #F4F7F7; color: #0e393b; height: 102.4px; width: 100%; max-width: 100%; padding-left: 1rem; padding-top: 1rem; outline: none; border: none; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
form textarea:focus { border-left-color: #f7bf07; border-left-style: solid; border-left-width: 0.25rem;
}
/*	=================================================================================================	Modules.	=================================================================================================
*/
.btn { background-color: #0e393b; color: #F4F7F7; border: none; outline: none; padding: 0.8rem 1.5625rem; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s; float: left;
}
@media screen and (max-width: 559px) { .btn { width: 100%; }
}
.btn.clear { background-color: #0e393b; margin-right: 1rem;
}
@media screen and (max-width: 559px) { .btn.clear { margin-right: 0; margin-bottom: 1rem; }
}
.btn.action { background-color: #f7bf07; color: #F4F7F7;
}
.btn:hover { background-color: #0e393b; color: #F4F7F7;
}
.btn:active { background-color: #0e393b; color: #F4F7F7;
}
.scroll-icon { position: absolute; width: 100%; text-align: center; bottom: 25.6px;
}
@media screen and (max-width: 1023px) { .scroll-icon { display: none; }
}
@media screen and (max-width: 559px) { .scroll-icon { display: none; }
}
@media screen and (max-height: 719px) { .scroll-icon { display: none; }
}
.scroll-icon figure { margin: 0;
}
.scroll-icon figure svg { fill: #F4F7F7;
}
.scroll-icon figure svg .wheel { fill: #f7bf07; -webkit-animation: flash 1s ease infinite alternate; -moz-animation: flash 1s ease infinite alternate; animation: flash 1s ease infinite alternate;
}
@keyframes flash { from { fill: #F4F7F7; } to { fill: #f7bf07; }
}
.scroll-icon i { height: 3.2rem; width: 3.2rem; line-height: 3.2rem; font-size: 2rem; color: #F4F7F7; -webkit-animation: scroll 1s ease-out infinite alternate; -moz-animation: scroll 1s ease-out infinite alternate; animation: scroll 1s ease-out infinite alternate;
}
@keyframes scroll { from { margin-bottom: 1.5625rem; } to { margin-bottom: 0; }
}
.scroll-icon i.animate { -webkit-animation: scroll 1s ease-out infinite; -moz-animation: scroll 1s ease-out infinite; animation: scroll 1s ease-out infinite;
}
.social-links { margin-bottom: 25.6px; position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
.social-links::after { clear: both; content: ""; display: block;
}
@media screen and (max-width: 559px) { .social-links { margin-bottom: 25.6px; }
}
.social-links a { display: inline-block; background-color: #F4F7F7; color: #0e393b; height: 51.2px; width: 51.2px; line-height: 51.2px; margin-right: 1rem; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
@media screen and (max-width: 559px) { .social-links a { height: 40.96px; width: 40.96px; line-height: 40.96px; margin-right: 0.5rem; }
}
.social-links a:last-of-type { margin-right: 0;
}
.social-links a i { font-size: 1.25rem; text-align: center;
}
.social-links a:hover { background-color: #2FC5CC; color: #F4F7F7; border: none;
}
@media screen and (max-width: 559px) { .social-links a:hover { background-color: #F4F7F7; color: #0e393b; }
}
@media screen and (max-width: 559px) { .social-links a:active { background-color: #2FC5CC; color: #F4F7F7; }
}
/*	=================================================================================================	Section.	=================================================================================================
*/
.section { position: absolute; height: 100%; width: 100%;
}
@media screen and (max-width: 1023px) { .section { position: relative; height: 100vh; padding: 102.4px 0; }
}
@media screen and (max-width: 559px) { .section { position: relative; height: auto; padding: 102.4px 0; }
}
@media screen and (max-height: 719px) { .section { position: relative; height: auto; padding: 102.4px 0; }
}
.section .section-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}
@media screen and (max-width: 559px) { .section .section-container { top: 0; transform: none; }
}
@media screen and (max-height: 719px) { .section .section-container { top: 0; transform: none; }
}
/*	=================================================================================================	Nav Bar.	=================================================================================================
*/
#navbar { display: none; position: absolute; left: 0; top: 0; height: 100%; z-index: 9999;
}
@media screen and (max-width: 1023px) { #navbar { display: block; position: fixed; height: auto; width: 100%; background-color: #f7bf07; }
}
@media screen and (max-width: 559px) { #navbar { display: block; position: fixed; height: auto; width: 100%; background-color: #f7bf07; }
}
@media screen and (max-height: 719px) { #navbar { display: block; position: fixed; height: auto; width: 100%; background-color: #f7bf07; }
}
#navbar .nav-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 3.125rem; text-align: center;
}
@media screen and (max-width: 1023px) { #navbar .nav-container { transform: none; top: 0; padding: 0; }
}
@media screen and (max-width: 559px) { #navbar .nav-container { transform: none; top: 0; padding: 0; }
}
@media screen and (max-height: 719px) { #navbar .nav-container { transform: none; top: 0; padding: 0; }
}
#navbar .nav-container .toggle-nav { display: none; position: fixed; z-index: 9999; top: 0; left: 0; height: auto; width: 100%; text-align: center; background-color: #f7bf07; padding: 0.625rem;
}
@media screen and (max-width: 559px) { #navbar .nav-container .toggle-nav { display: block; position: relative; }
}
#navbar .nav-container .toggle-nav i { color: #F4F7F7; font-size: 3rem;
}
#navbar .nav-container .toggle-nav i:hover { border: none;
}
#navbar .nav-container .toggle-nav i:active { color: #0e393b;
}
@media screen and (max-width: 559px) { #navbar .nav-container ul { display: none; }
}
#navbar .nav-container ul li { text-align: center;
}
@media screen and (max-width: 1023px) { #navbar .nav-container ul li { display: inline-table; }
}
@media screen and (max-height: 719px) { #navbar .nav-container ul li { display: inline-table; }
}
@media screen and (max-width: 559px) { #navbar .nav-container ul li { display: block; }
}
#navbar .nav-container ul li a { color: #F4F7F7; display: block; text-transform: uppercase; padding: 0.9375rem 0.9375rem;
}
@media screen and (max-width: 1023px) { #navbar .nav-container ul li a { cursor: pointer; }
}
@media screen and (max-height: 719px) { #navbar .nav-container ul li a { cursor: pointer; }
}
@media screen and (max-width: 559px) { #navbar .nav-container ul li a { font-size: 2rem; padding: 0.9375rem 0.625rem; cursor: pointer; }
}
#navbar .nav-container ul li a:hover { border: none; color: #F4F7F7;
}
@media screen and (max-width: 1023px) { #navbar .nav-container ul li a:hover { color: #0e393b; }
}
@media screen and (max-width: 559px) { #navbar .nav-container ul li a:hover { color: #F4F7F7; }
}
@media screen and (max-height: 719px) { #navbar .nav-container ul li a:hover { color: #0e393b; }
}
#navbar .nav-container ul li.active a { background-color: #f7bf07; color: #F4F7F7;
}
@media screen and (max-width: 1023px) { #navbar .nav-container ul li.active a { background-color: #c59906; border: none; color: #F4F7F7; }
}
@media screen and (max-width: 559px) { #navbar .nav-container ul li.active a { background-color: #c59906; color: #F4F7F7; }
}
@media screen and (max-height: 719px) { #navbar .nav-container ul li.active a { background-color: #f7bf07; color: #F4F7F7; }
}
@media screen and (max-height: 719px) { #navbar .nav-container ul li.active a:hover { color: #0e393b; }
}
/*	=================================================================================================	Home Page.	=================================================================================================
*/
#home { background-image: url(//i.imgsafe.org/8717961.jpg); background-size: cover; text-align: center; z-index: 99;
}
#home .profil { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem; margin-bottom: 25.6px;
}
#home .profil::after { clear: both; content: ""; display: block;
}
#home .profil .profil-img { color: transparent; background-image: url(https://lh3.googleusercontent.com/OkCqiak95eWnGniqoMVIFDfJyGXWkJ5guUO7aHLs4bpvQLEPQftdzIEDgpRS2zkoddvGZt47r5iUSwbj-9dQtOTRGzPmQBwQWHrho9rLEnv5052KnCRebN6jYPKRKOnM9xXq-DQ7bqbvKxoYpE-gmwFWwDChNJH2_zv7q-f_RSwP5ff84Ia7nK6meIRd6_Tg2zxaADUGyaXR3xLUH3zLEr101HI2xygz6_oTiJz-qTt-zuqQrD2Rnv3jx-xicZVH9DZdYejlzhxKC5V0-YK58QI0cM9o-7-3TWmBJXkc-2l8VlHEEl2WyQ5_MTQyRpO8hs23qgkBFiEf0ZEUlp7qELOwHFjToqpl8ps_pyLZgEhYv5DFWdGhDIuXD14i4mLvis1mB5u3qr2DAqOum3VP-xz7LasitQlLPvF-2xRHvtlZ9DUemPy1FNztVJcwqBacDOkB-ob-ctEqoVeOA9Lqqd7d0KamR4QdJz0sEuKfB3coX6o8eLbbtpcMSbeNYHH_NCXSw-c82Oj6gZl8r4srPwA8sPsFEA_XyWGmsbTXG-d2kzZOG5tTvYg1RZZcl8xg-XPA_83nEZBQmJwMuF0WyjZKfFzMP7nWzSyIxJOiYE26e5z_r3NY_A=s439-no); background-size: contain; height: 10.5rem; width: 10.5rem; margin: 0 auto 25.6px auto; box-shadow: 0 0.0625rem 0.125rem #0e393b; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
@media screen and (max-width: 1023px) { #home .profil .profil-img { height: 10.5rem; width: 10.5rem; }
}
@media screen and (max-width: 559px) { #home .profil .profil-img { height: 8.25rem; width: 8.25rem; }
}
#home .profil h1 { font-size: 3.5rem; margin-bottom: 0; background-color: #2FC5CC; color: #F4F7F7; text-shadow: 0.25rem 0.25rem #0e393b; display: inline-block; padding: 0.3125rem 1.25rem; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
}
@media screen and (max-width: 1023px) { #home .profil h1 { font-size: 3rem; }
}
@media screen and (max-width: 559px) { #home .profil h1 { font-size: 2.25rem; text-shadow: 0.1875rem 0.1875rem #0e393b; }
}
#home .profil p u { display: inline-block; color: #F4F7F7; background-color: #f7bf07; padding: 0.3125rem 1.25rem; text-decoration: none;
}
/*	=================================================================================================	About Page.	=================================================================================================
*/
#about { background-image: url(//i.imgsafe.org/7b4884d.jpg); background-size: cover; text-align: center; z-index: 98;
}
#about .intro { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem; margin-bottom: 51.2px;
}
#about .intro::after { clear: both; content: ""; display: block;
}
#about .intro h1 { font-size: 2rem; color: #F4F7F7;
}
@media screen and (max-width: 1023px) { #about .intro h1 { font-size: 1.625rem; }
}
#about .intro p { margin: 0 auto;
}
#about .skills { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#about .skills::after { clear: both; content: ""; display: block;
}
#about .skills h2 { background-color: #2FC5CC; display: inline-block; padding: 0 0.9375rem;
}
#about .skills ul { text-align: center;
}
#about .skills ul li { position: relative; display: inline-block; width: 15.625rem; margin-bottom: 25.6px;
}
#about .skills ul li:last-child { margin-bottom: 0;
}
@media screen and (max-width: 559px) { #about .skills ul li { display: block; width: auto; }
}
#about .skills ul li .lvl-1 { position: relative; margin: 25.6px auto 0 auto;
}
#about .skills ul li .lvl-1 li { position: relative; display: inline-block; width: 15rem; background-color: #0e393b; padding: 0.625rem; margin-bottom: 0.625rem;
}
#about .skills ul li .lvl-1 li:last-child { margin-bottom: 0;
}
@media screen and (max-width: 559px) { #about .skills ul li .lvl-1 li { display: block; width: auto; }
}
#about .skills ul li .lvl-1 li span { position: absolute; z-index: 1; left: 0; top: 0; height: 100%; background-color: #f7bf07; overflow: hidden; font-size: 1px; text-indent: -9999px;
}
#about .skills ul li .lvl-1 li u { position: relative; z-index: 2; text-decoration: none; color: #F4F7F7;
}
/*	=================================================================================================	Portfolio Page.	=================================================================================================
*/
#portfolio { background-image: url(//i.imgsafe.org/8586dee.jpg); background-size: cover; text-align: center; z-index: 97;
}
#portfolio .title { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#portfolio .title::after { clear: both; content: ""; display: block;
}
#portfolio .title h2 { background-color: #2FC5CC; display: inline-block; padding: 0 0.9375rem;
}
#portfolio .thumbnails { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#portfolio .thumbnails::after { clear: both; content: ""; display: block;
}
#portfolio .thumbnails ul li { position: relative; display: inline-block;
}
#portfolio .thumbnails ul li a { position: relative; display: block; height: 15.625rem; width: 15.625rem; padding: 0; overflow: hidden;
}
#portfolio .thumbnails ul li a img { position: relative; z-index: 1; height: 100%; width: 100%;
}
#portfolio .thumbnails ul li a span { position: absolute; z-index: 2; height: 100%; width: 100%; top: 0; left: 0; background-color: #0e393b; color: #F4F7F7; opacity: 0; -webkit-transition: all 0.15s ease-out 0s; -moz-transition: all 0.15s ease-out 0s; transition: all 0.15s ease-out 0s; padding: 25.6px 0.625rem;
}
#portfolio .thumbnails ul li a span h2 { margin-top: 0; color: #f7bf07;
}
#portfolio .thumbnails ul li a span p { color: #F4F7F7; margin-bottom: 25.6px;
}
#portfolio .thumbnails ul li a span i { font-size: 2rem;
}
#portfolio .thumbnails ul li a:hover { border: none;
}
#portfolio .thumbnails ul li a:hover span { opacity: .8;
}
/*	=================================================================================================	Contact Page.	=================================================================================================
*/
#contact { background-image: url(//i.imgsafe.org/t/86c1376.jpg); background-size: cover; text-align: center; z-index: 96;
}
#contact .title { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem; margin-bottom: 25.6px;
}
#contact .title::after { clear: both; content: ""; display: block;
}
@media screen and (max-height: 719px) { #contact .title { margin-top: 0; }
}
#contact .title h2 { background-color: #2FC5CC; display: inline-block; padding: 0 0.9375rem;
}
#contact .form-container { position: relative; max-width: 34.375rem; margin-left: auto; margin-right: auto; padding: 0 1rem;
}
#contact .form-container::after { clear: both; content: ""; display: block;
}
#contact .form-container .form-group { margin-bottom: 25.6px;
}
#contact .form-container .form-group:last-of-type { margin-bottom: 0;
}

MightyJoeW Portfolio - Script Codes JS Codes

'use strict';
$(function () { function next(next, current, winHeight) { next.target.css({ display: 'block' }); next.target.promise().done(function () { current.target.animate({ marginTop: -winHeight }, 500, 'easeInCubic'); current.target.promise().done(function () { $(this).css({ display: 'none' }); current.current = false; current.menuItem.parent().removeClass('active'); next.current = true; next.menuItem.parent().addClass('active'); }); }); } // end-next function prev(prev, current) { prev.target.css({ display: 'block' }); prev.target.promise().done(function () { $(this).animate({ marginTop: 0 }, 500, 'easeOutCubic'); $(this).promise().done(function () { current.target.css({ display: 'none' }); current.current = false; current.menuItem.parent().removeClass('active'); prev.current = true; prev.menuItem.parent().addClass('active'); }); }); } // end-prev function nextSlide(e, slides, winHeight) { var currentSlide = slides.filter(function (obj) { return obj.current; })[0], animtedSlide = slides.filter(function (obj) { return obj.target.is(':animated'); })[0], currentSlideIndex = slides.indexOf(currentSlide), nextSlide = slides[currentSlideIndex + 1]; if (currentSlideIndex !== slides.length - 1 && !animtedSlide) { if (nextSlide.target.is(':hidden')) { next(nextSlide, currentSlide, winHeight); } } // end-if } // end nextSlide function prevSlide(e, slides, winHeight) { var currentSlide = slides.filter(function (obj) { return obj.current; })[0], animtedSlide = slides.filter(function (obj) { return obj.target.is(':animated'); })[0], currentSlideIndex = slides.indexOf(currentSlide), prevSlide = slides[currentSlideIndex - 1]; if (currentSlideIndex !== 0 && !animtedSlide) { if (prevSlide.target.is(':hidden')) { prev(prevSlide, currentSlide); } } // end-else } // end prevSlide function scrollTo(e, slides) { var targetElementId = $(e.target).attr('data-title'), targetElement = slides.filter(function (obj) { return obj.id === targetElementId; })[0]; $body.animate({ scrollTop: targetElement.target.offset().top }); $body.promise().done(function () { targetElement.menuItem.parent().siblings().removeClass('active'); targetElement.menuItem.parent().addClass('active'); }); } // DOM var $body = $('body'); var $navBar = $('#nav-bar'); var $navList = $navBar.find('.nav-list'); var $navToggle = $navBar.find('.toggle-nav').find('i'); var slides = [{ id: 'home', target: $('#home'), menuItem: $navList.find('a[data-title=' + 'home' + ']'), current: true }, { id: 'about', target: $('#about'), menuItem: $navList.find('a[data-title=' + 'about' + ']'), current: false }, { id: 'portfolio', target: $('#portfolio'), menuItem: $navList.find('a[data-title=' + 'portfolio' + ']'), current: false }, { id: 'contact', target: $('#contact'), menuItem: $navList.find('a[data-title=' + 'contact' + ']'), current: false }]; var $sections = $('.section'); var $skillBars = $('.skill-bar'); // Vars var winHeight = $(window).height(); function portfolio() { // Slides mode if ($sections.css('position') === 'absolute') { // Hide hidden slides slides.forEach(function (slide) { if (!slide.current) { slide.target.css({ display: 'none' }); } }); // Next slide mousewheel $body.on('mousewheel', function (e) { if (e.deltaY < 1) { nextSlide(e, slides, winHeight); } }); // Prev slide mousewheel $body.on('mousewheel', function (e) { if (e.deltaY === 1) { prevSlide(e, slides, winHeight); } }); } else { $sections.css({ display: 'block', marginTop: 0 }); } // end-if-section if ($navToggle.is(':hidden')) { $navList.css({ display: 'block' }); } else { $navList.css({ display: 'none' }); } // end-if-nav-toggle $skillBars.each(function () { $(this).css({ width: $(this).html() }); }); } // end-portfolio $(document).ready(function () { // Run my function portfolio(); // Update winHeight when resizing the window $(window).resize(function () { winHeight = $(window).height(); portfolio(); }); // Fixed Nav $navList.on('click', function (e) { scrollTo(e, slides); if (!$navToggle.is(':hidden') && $navToggle.hasClass('fa-close')) { $navList.hide(); $navToggle.addClass('fa-bars').removeClass('fa-close'); } }); // Mobile Nav $navToggle.on('click', function (e) { var self = $(this); if (self.hasClass('fa-bars')) { self.addClass('fa-close').removeClass('fa-bars'); } else { self.addClass('fa-bars').removeClass('fa-close'); } $navList.toggle(); }); });
});
MightyJoeW Portfolio - Script Codes
MightyJoeW Portfolio - Script Codes
Home Page Home
Developer Joe Warren
Username MightyJoeW
Uploaded December 06, 2022
Rating 3
Size 15,545 Kb
Views 26,312
Do you need developer help for MightyJoeW Portfolio?

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!

Joe Warren (MightyJoeW) Script Codes
Name
Joe Warren Portfolio
Joe Warren Portfolio Deluxe
2017-04-02 Weather App
Navbar test
Google.com page source
The Heart
Bouncing Basketball
Javascript Quiz
Animated Android Logo
Weather App 2
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!