FCC Portfolio

Developer
Chris
Size
4,304 Kb
Views
8,092
  1. FCC Portfolio Previews
  2. FCC Portfolio HTML Codes
  3. FCC Portfolio CSS Codes
  4. FCC Portfolio JS Codes

How do I make an fcc portfolio?

Portfolio Page for Free Code Camp. What is a fcc portfolio? How do you make a fcc portfolio? This script and codes were developed by Chris on 09 January 2023, Monday.

FCC Portfolio Previews
IQ Test

FCC Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Portfolio</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald:400,300,700'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <DOCTYPE html> <html> <head> <title>Portfolio</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript" src="js/javascript.js"></script> </head> <body data-spy="scroll"> <nav class="navbar-fixed-bottom"> <ul class="nav navbar-nav pull-right"> <li class="nav-item"><a href="#portfolio">Portfolio</a></li> <li class="nav-item"><a href="#about">About</a></li> <li class="nav-item"><a href="#contact">Contact</a></li> </ul> </div> </nav> <div id="fullpage"> <div class="section"> <h1 class="big-name">Chris Webster</h1> <div class="nav-links"> <a href="#portfolio"> <div class="nav-link-container"> <p id="port-link" class="nav-item">My Work</p> </div> </a> <a href="#about"> <div class="nav-link-container"> <p id="about-link" class="nav-item">About </p> </div> </a> <a href="#contact"> <div class="nav-link-container"> <p id="contact-link" class="nav-item">Contact</p> </div> </a> </div> </div> <div class="section" id="portfolio"> <div class="slide"> <h1 class="slide-title text-center">Project 1</h1> <p class="slide-description text-center">Project 1 description</p> <img class="slide-image" src="https://placeholdit.imgix.net/~text?txtsize=70&txt=750%C3%97500&w=750&h=500"></img> </div> <div class="slide"> <h1 class="slide-title text-center">Project 2</h1> <p class="slide-description text-center">Project 2 description</p> <img class="slide-image" src="https://placeholdit.imgix.net/~text?txtsize=70&txt=750%C3%97500&w=750&h=500"></img> </div> <div class="slide "> <h1 class="slide-title text-center">Project 3</h1> <p class="slide-description text-center">Project 3 description</p> <img class="slide-image" src="https://placeholdit.imgix.net/~text?txtsize=70&txt=750%C3%97500&w=750&h=500"></img> </div> <div class="slide"> <h1 class="slide-title text-center">Project 4</h1> <p class="slide-description text-center">Project 4 description</p> <img class="slide-image" src="https://placeholdit.imgix.net/~text?txtsize=70&txt=750%C3%97500&w=750&h=500"></img> </div> </div> <div class="section" id="about"> <h1 class="about-title">Me, Myself & I </h1> <div class="about"> <div class="who"> <h1 class="who-title">A few words about me ...</h1> <img class="profile-pic" src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="Profile Pic"> <p class="who-write">Hi, I'm Chris! I self taught myself to code using a variety of online tools and books. I prefer working on the back end - staying behind the scenes! However, working on the front end is no problem where I can use my great attention to detail to ensure your site is looking beautiful!</p> </div> <div class="skills"> <h1>What can I do?</h1> <div class="battery-container"> <ul> <li id="great"><i class="fa fa-battery-three-quarters" aria-hidden="true"></i> - Great</li> <li id="okay"><i class="fa fa-battery-half" aria-hidden="true"></i> - Not too shabby</li> <li id="improve"><i class="fa fa-battery-quarter" aria-hidden="true"></i> - Room for improvement</li> <hr> </ul> </div> <ul class="skill-container"> <li class="skill-item great">HTML 5 <i class="fa fa-battery-three-quarters" aria-hidden="true"></i></li> <li class="skill-item great">CSS3(inc Bootstrap) <i class="fa fa-battery-three-quarters" aria-hidden="true"></i></li> <li class="skill-item great">JavaScript(inc jQuery) <i class="fa fa-battery-three-quarters" aria-hidden="true"></i></li> <li class="skill-item great">PHP <i class="fa fa-battery-three-quarters" aria-hidden="true"></i></li> <li class="skill-item great">MYSQL <i class="fa fa-battery-three-quarters" aria-hidden="true"></i></li> <li class="skill-item okay">Node.JS <i class="fa fa-battery-half" aria-hidden="true"></i></li> <li class="skill-item okay">Mongo DB <i class="fa fa-battery-half" aria-hidden="true"></i></li> <li class="skill-item okay">Angular.JS <i class="fa fa-battery-half" aria-hidden="true"></i></li> <li class="skill-item improve">React.JS <i class="fa fa-battery-quarter" aria-hidden="true"></i></li> </ul> </div> </div> </div> <div class="section" id="contact"> <h1 class="contact-title">Get In Touch</h1> <div class="contact"> <ul class="contact-container"> </ul> </div> <footer> <p class="text-center">&#169; Chris Webster 2016</p> </footer> </div> </body> </html> <script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC Portfolio - Script Codes CSS Codes

.section{ font-size: 6em; text-align: center; font-family:'Oswald', sans-serif;
}
.nav-bar{	height:30px;	width: 100%;	border: 1px solid black;	position: absolute;
}
.nav{	display: flex;	wrap:no-wrap;
}
.nav-link-container{	width:70px;	height:20px;
}
.nav-item{	background-color: transparent;
}
.big-name{	font-size:120%;
}
.nav-links{	display:flex;	justify-content:center;	font-size: 20%;	height:10px;
}
.nav-item{	margin-right: 10px;
}
a { color: inherit;	text-decoration: none;
}
a:hover{	color: tomato;	text-decoration: none;	}
.slide-title{	font-size: 70%;	position: relative;	margin-bottom:5%;	top:-40px;
}
.slide-description{	font-size: 20%;	position: relative;	font-family: 'Roboto', sans-serif;
}
.slide-image{	height:50%;	width:50%;
}
.about-title{	font-size: 150%;	position: relative;	top: -10px;
}
.about-lead{	font-size: 40%;	text-align: left;	position: relative;	top: -100px;	margin-left: 10%;	margin-top: 10%;
}
.about-write{	font-size: 30%;	position: relative;	top: -100px;	margin-top: 10%;
}
.contact-title{	font-size: 150%;	position: relative;	top: -10px;
}
.contact-container{	display:flex;	justify-content:center;	flex-wrap:wrap;
}
.contact-item{	list-style: none;	margin-right: 10%;	margin-left: 10%;
}
.contact-item h1{
font-size: 120%;
}
.about{	display:flex;	justify-content:space-around;
}
.battery-container{	display: flex;	justify-content: space-between;
}
li{	list-style: none;
}
.skill-container{	display: flex;	flex-direction:column;	justify-content: center;	font-family: 'Roboto', sans-serif;
}
}
.skill-item{	margin:8px;
}
.skills, .who{	font-size: 20%;	width:25%;
}
.who-write{	font-family: 'Roboto', sans-serif;
}
}
.skills ul li{	list-style: none;
}
.skills-hover{	color:tomato;
}
.profile-pic{	width:80px;	height:90px;	border-radius: 40px;	box-shadow: 2px 2px 2px #888888;	margin-bottom: 10px;
}
footer{	font-size: 20px;	font-family: sans-serif;	margin-top: 250px;
}
#portfolio{	color:#F2F2F2;
}

FCC Portfolio - Script Codes JS Codes

$(document).ready(function() { var me = $(window); $(".test").click(function(){ alert(me.scrollTop()); }) $('#fullpage').fullpage({	sectionsColor: ['#f2f2f2', '#979696', '#C3C3C3', 'whitesmoke'],	scrollingSpeed: 700,	autoScrolling:false,	scrollBar: true }); // hide .div elemenrs first	$("nav").hide(); $('#port-link').hide(); $('#about-link').hide(); $('#contact-link').hide(); $(".slide").hide(); $(".contact").hide(); $(".about").hide(); $(".about-title").hide(); setInterval(function(){ $("#port-link").fadeIn('slow')}, 1000); setInterval(function(){ $("#about-link").fadeIn('slow')}, 2000); setInterval(function(){ $("#contact-link").fadeIn('slow')}, 3000);	// fade in .navbar	$(function () { $(window).scroll(function () { // set distance user needs to scroll before we start fadeIn if ($(this).scrollTop() > 110) { $('nav').fadeIn(); $('.slide').fadeIn(); } else { $('nav').fadeOut(); $('.slide').fadeOut(); $('.contact').fadeOut(); } }); }); // fade in conctact items $(function () { $(window).scroll(function () { // set distance user needs to scroll before we start fadeIn if ($(this).scrollTop() > 1950) { $('.contact').fadeIn('slow'); } else{ $('.contact').fadeOut('slow'); } }); }); // fade in about items $(function () { $(window).scroll(function () { // set distance user needs to scroll before we start fadeIn if ($(this).scrollTop() > 900) { $('.about').fadeIn('slow'); $('.about-title').fadeIn('slow'); } else{ $('.about-title').fadeOut('slow'); $('.about').fadeOut('slow'); } }); }); $('a[href^="#portf"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; });	}); $('a[href^="#about"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; });	}); $('a[href^="#contact"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; });	}); $('.great').hover( function(){ $(this).addClass('skills-hover') $('#great').addClass('skills-hover') }, function(){ $(this).removeClass('skills-hover') $('#great').removeClass('skills-hover') } ) $('.okay').hover( function(){ $(this).addClass('skills-hover') $('#okay').addClass('skills-hover') }, function(){ $(this).removeClass('skills-hover') $('#okay').removeClass('skills-hover') } ) $('.improve').hover( function(){ $(this).addClass('skills-hover') $('#improve').addClass('skills-hover') }, function(){ $(this).removeClass('skills-hover') $('#improve').removeClass('skills-hover') } ) });
FCC Portfolio - Script Codes
FCC Portfolio - Script Codes
Home Page Home
Developer Chris
Username cmwebby
Uploaded January 09, 2023
Rating 3
Size 4,304 Kb
Views 8,092
Do you need developer help for FCC 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!

Chris (cmwebby) Script Codes
Name
React Github user viewer
Wikipedia Search
FCC - Camp Leaderboard
3D Cube hover effects
FCC - Random Quote Machine
FCC Wikipedia Viewer
FCC Scattergraph
FCC - Show the Local Weather
FCC - Tribute Page
FCC Heat Map
Create amazing SEO content 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!