FreeCodeCamp - Personal Portfolio
How do I make an freecodecamp - personal portfolio?
What is a freecodecamp - personal portfolio? How do you make a freecodecamp - personal portfolio? This script and codes were developed by Jason Thomas on 14 September 2022, Wednesday.
FreeCodeCamp - Personal Portfolio Previews
FreeCodeCamp - Personal Portfolio - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>freeCodeCamp - Personal Portfolio </title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!––The navigation bar starts here-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Jason H. Thomas</a> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#about_id">About <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#port_id">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact_id">Contact</a> </li> </ul> <span class="navbar-text"> <a href="https://github.com/jthomas216" target="_blank" class="link_li_space"><i class="fa fa-github" style="font-size:24px"></i></a><a href="https://www.freecodecamp.com/jthomas216" target="_blank" class="link_li_space"><i class="fa fa-free-code-camp" style="font-size:24px"></a></i><a href="https://www.linkedin.com/in/jthomas902/" target="_blank" class="link_li_space"><i class="fa fa-linkedin-square" style="font-size:24px"></i></a><a href="https://codepen.io/samoht513" target="_blank" class="link_li_space"><i class="fa fa-codepen" style="font-size:24px"></i></a> </span> </div>
</nav>
<!––The about Section-->
<section id="about_id"><div class="about_div"> <div class="container"> <div class="row"> <div class="col"> <p class="lead">Internet marketing specialist with a technical background. As a specialist, planned, implemented, and evaluated Internet advertising campaigns using search engine marketing, display advertising, and email marketing. Assisted in the production of data driven systems and web applications for the marketing function of for-profit and nonprofit organizations. </p> </div> <div class="col"> <!--6 year old me--> <img src="https://dl.dropboxusercontent.com/s/gqpbdznm6dt1i29/Screen%20Shot%202017-05-04%20at%203.44.25%20PM.png?dl=0" class="rounded-circle img-fluid" width="170"> </div> </div> </div>
</div></section>
<!––The portfolio section-->
<section id="port_id"><div class="work_div">
<div class="container"> <h1 class="display-4 text-center light_text">Portfolio</h1> <div class="row row-padding portDiv"> <div class="col-lg-6"> <img src="https://dl.dropboxusercontent.com/s/eyw6mqgf5ivpwfj/Screen%20Shot%202017-04-10%20at%2012.51.57%20AM.png?dl=0" class="figure-img img-fluid rounded" alt="Thea Bowman Center" width="400"> </div> <div class="col-lg-6 "> <h2 class="portHead">Thea Bowman Center</h2> <div class="tech">Wordpress, HTML5, CSS3, Jquery</div> <div class="blurb">Thea Bowman Center is a nonprofit dedicated to helping the Mt. Pleasant neighborhood in Cleveland, OH. I designed this site, implemented the Wordpress backend, and implemented the digital marketing for awareness</div> <div class="links"> <a href="http://theabowmancenter.org" target="_blank"><i class="fa fa-link fa-2x" aria-hidden="true"></i></a></div> </div> </div> <div class="row row-padding portDiv"> <div class="col-lg-6"> <img src="https://dl.dropboxusercontent.com/s/m8ggg9ujnwwps4e/Screen%20Shot%202017-04-10%20at%2012.52.46%20AM.png?dl=0" class="figure-img img-fluid rounded" alt="Muhammad Ali Tribe page project for freeCodeCamp" width="400"> </div> <div class="col-lg-6"> <h2 class="portHead">Muhammad Ali</h2> <div class="tech">HTML5, CSS3, Bootstrap, freeCodeCamp</div> <div class="blurb">This is my 1st freeCodeCamp frontend project dedicated to "The Greatest." </div>
<div class="links"> <a href="https://jthomas216.github.io/tribute-page/" target="_blank"><i class="fa fa-link fa-2x" aria-hidden="true"></i></a><a href="https://github.com/jthomas216/freecodecamp-tribute-page" target="_blank"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a><a href="https://codepen.io/samoht513/pen/mWZNgd" target="_blank"><i class="fa fa-codepen fa-2x" aria-hidden="true"></i></a> </div> </div> </div> <div class="row row-padding portDiv"> <div class="col-lg-6"> <img src="https://dl.dropboxusercontent.com/s/n04o1zoi0ywvet2/Screen%20Shot%202017-05-05%20at%209.19.32%20PM.png?dl=0" class="image figure-img img-fluid rounded" alt="" width="400"> </div> <div class="col-lg-6"> <h2 class="portHead">Portfolio Page</h2> <div class="tech">HTML5, CSS3, Bootstrap, JQuery, freeCodeCamp</div> <div class="blurb">This is my portfolio page originally completed for my freeCodeCamp project.</div> <div class="links"> <a href="https://jthomas216.github.io/" target="_blank"><i class="fa fa-link fa-2x" aria-hidden="true"></i></a><a href="https://github.com/jthomas216/jthomas216.github.io" target="_blank"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a><a href="https://codepen.io/samoht513/pen/ybPbgx" target="_blank"><i class="fa fa-codepen fa-2x" aria-hidden="true"></i></a></div> </div> </div> </div> </div></section>
<!––The contact me section-->
<section id="contact_id"><div class="contact_div"> <div class="container"> <h1 class="display-4 text-center">Contact</h1> <div class="row row-padding"> <div class="col"> <form action="https://formspree.io/[email protected]" method="POST"> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Name"> </div> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email" name="_replyto"> </div> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Phone Number"> </div> <div class="form-group"> <textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea> </div> <button class="btn btn-primary" input type="submit" value="Send">Send</button> </form> </div> <div class="col"> <p>Need some work done? Drop me a line.</p> </div> </div> </div> <hr class="my-4"> <footer class="text-center" target="_blank">Made by <a href="https://github.com/jthomas216">Me</a></footer> </div></section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://www.google.com/recaptcha/api.js'></script> <script src="js/index.js"></script>
</body>
</html>
FreeCodeCamp - Personal Portfolio - Script Codes CSS Codes
@media (min-width: 1200px) { .container{ max-width: 960px; }
}
.link_li_space { margin-left:5px;
}
.about_div { padding-top:80px; background-image:url(https://dl.dropboxusercontent.com/s/86oer4msfyil1zo/topography.png?dl=0);
}
.work_div { padding-top:20px; background-image:url(https://dl.dropboxusercontent.com/s/q38ehp3950mbp34/congruent_outline.png?dl=0);
}
.contact_div { padding-top:20px; padding-bottom:20px; background-image:url(https://dl.dropboxusercontent.com/s/ygmyl5rh335vi0o/congruent_pentagon.png?dl=0);
}
.light_text { color:#ededed;
}
.row-padding { padding-top:20px;
}
/* unvisited link */
.figure-caption a:link { color: #80ccff;
}
/* visited link */
.figure-caption a:visited { color: #80ccff;
}
/* mouse over link */
.figure-caption a:hover { color: #80ccff; text-decoration: underline;
}
/* selected link */
.figure-caption a:active { color: #80ccff;
}
.efefef { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden;
}
.portHead { color: #efefef;
}
.tech { color: #00ba28; font-weight:bold;
}
.blurb { color: #efefef;
}
.portDiv { margin-top: 50px;
}
.links { margin-top: 20px;
}
.links a:link { margin-right:15px;
}FreeCodeCamp - Personal Portfolio - Script Codes JS Codes
/*After clicking on a page, you are moved to an anchor link. This code facilitates that.*/
$('a[href*=\\#]:not([href=\\#])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) {
/*After clicking, an animiated scroll.*/ $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });
$(window).scroll(function() { var windscroll = $(window).scrollTop(); if (windscroll >= 0) { $('section').each(function(i) { if ($(this).position().top <= windscroll + 130) {
/*The code below toggles active menu item when scrolling*/ $('.navbar-nav li').removeClass('active'); $('.navbar-nav li').eq(i).addClass('active'); } }); } else { $('.navbar-nav li').removeClass('active'); $('.navbar-nav li').addClass('active'); }
}).scroll();
| Developer | Jason Thomas |
| Username | samoht513 |
| Uploaded | September 14, 2022 |
| Rating | 3 |
| Size | 4,512 Kb |
| Views | 22,264 |
Do you need developer help for FreeCodeCamp - Personal 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!
Jason Thomas (samoht513) Script Codes
| Name | Size |
| FreeCodeCamp - Local Weather App | 3,093 Kb |
| FreeCodeCamp - Simon Game | 4,301 Kb |
| FreeCodeCamp - Javascript Calculator | 1,907 Kb |
| FreeCodeCamp - Twitchtv API | 2,531 Kb |
| Freecodecamp - Tribute Page | 3,583 Kb |
| FreeCodeCamp - Random Quote Generator | 3,218 Kb |
| FreeCodeCamp - Wikipedia Viewer | 2,692 Kb |
| FreeCodeCamp - Pomodoro Clock | 2,959 Kb |
| FreeCodeCamp - Tic Tac Toe Game | 2,820 Kb |
| Html - canvas | 1,658 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
| Exploring css spinners | Akagr | 3,569 Kb |
| Simple Responsive Text | Fbrz | 2,282 Kb |
| Draggables in pure angular | Rlo206 | 5,167 Kb |
| Zeichensatz | Moklick | 2,058 Kb |
| Price Comparison Table | Orrinward | 3,459 Kb |
| JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
| Sketchy Box | Mnicpt | 3,033 Kb |
| A Pen by John Malc | F789gh | 1,420 Kb |
| Flexbox playground | Enxaneta | 5,418 Kb |
Do you want hide your ip address?
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!