Portfolio Page

Developer
Joel
Size
5,240 Kb
Views
10,120
  1. Portfolio Page Previews
  2. Portfolio Page HTML Codes
  3. Portfolio Page CSS Codes
  4. Portfolio Page JS Codes

How do I make an portfolio page?

Creating a portfolio page for FreeCodeCamp. What is a portfolio page? How do you make a portfolio page? This script and codes were developed by Joel on 23 November 2022, Wednesday.

Portfolio Page Previews
IQ Test

Portfolio Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Page</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Developer: Joel Huffman
Date: 3-20-2016
Project: Portfolio
Comments:
-This project was built for FreeCodeCamp.com
-I used HTML SCSS Javascript Jquery and Bootstrap
-->
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<body class="fluid-container"> <div id="landPageContent"> <header> <nav class="row no-gutters"> <div class="col-sm-4 col-xs-12 text-left title"> <h1 class="h3" id="name">Joel Huffman</h1> </div> <ul class="text-right col-sm-8 col-xs-12 navi"> <li><a id="nav-one" href="#">Home</a></li> <li><a id="nav-two" href="#portfolio-header">Portfolio</a></li> <li><a id="nav-three" href="#about-header">About</a></li> <li><a id="nav-four" href="#contact-header">Contact</a></li> </ul> </nav> </header> <p id="p"></p> <h1 class="text-center landingText"><strong>Web Designer</strong></h1> </div> <main> <!--Beginning of the portfolio page three rows with bootstrap col-md-4 on each row col-xs-6 on each row --> <!--Header--> <div class="row no-gutters" id="portfolio-header"> <div class="col-sm-6 col-sm-offset-3 text-center"> <h1>Portfolio</h1> </div> </div> <!--First Row of portfolio page-->
<div class="row project-first no-gutters"> <div class="col-sm-4 col-sm-offset-1 col-xs-6 project"><a href="https://codepen.io/HuffmanJ25/full/yOzxRb/"> <img src="https://raw.githubusercontent.com/HuffmanJ25/QuoteMachine/master/quoteMachine-min.PNG" alt="thumbnail of project" class="img-responsive"> <h2><span>Project 1</span></h2> </div></a> <div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-1 col-xs-6 project"><a href="https://codepen.io/HuffmanJ25/full/RGLpNL/"> <img src="https://raw.githubusercontent.com/HuffmanJ25/WikiSearch/master/wikiSnip.PNG" alt="thumbnail of project" class="img-responsive"> <h2><span>Project 2</span></h2> </div></a> </div> </div> <!--Beginning of the About page --> <!-- About Header--> <div class="row no-gutters" id="about-header"> <div class="col-sm-6 col-sm-offset-3 text-center"> <h1>About</h1> </div> </div> <!--About content-->
<div class="row about-row no-gutters"> <div class="darken-background"> <div class="col-sm-5 col-sm-offset-1 text-center"> <h2>Joel Huffman</h2> <p>I stumbled upon web development through acheiving an IT Management Bachlors degree at Santa Fe College. I fell in love with creating web sites and dove in head first creating and learning with my spare time.</p> </div> <div class="col-sm-5 text-center"> <h2>Skills</h2> <ul class="about-list"> <li>HTML5, CSS3, Bootstrap3, Jquery</li> <li>Sass, Jade, Git, Responsive Web Design</li> <li></li> <li></li> </ul> </div> </div> </div> </main> <footer>
<!--Contact Page--> <div class="row no-gutters" id="contact-header"> <div class="col-sm-6 col-sm-offset-3 text-center"> <h1>Contact</h1> </div> </div> <div class="row contact no-gutters"> <div class="col-sm-4 text-center linked-in"> <a target="_blank" class="btn btn-primary" href="https://www.linkedin.com/in/joelhuffman
">Linked In<a> </div> <div class="col-sm-4 text-center free-code-camp"> <a target="_blank" class="btn btn-success" href="https://www.freecodecamp.com/huffmanj25">freeCodeCamp<a> </div> <div class="col-sm-4 text-center github"> <a target="_blank" class="btn btn-warning" href="https://github.com/HuffmanJ25">GitHub<a> </div> </div> <div class="row contact no-gutters"> <div class="col-sm-4 col-sm-offset-4 text-center old-school"> <ul> <li>535-547-1777</li> <li>[email protected]</li> </ul> <p><a class="glyphicon glyphicon-upload" id="top" href=#name></br>Back To Top</a></p> </div> </div> </footer>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Page - Script Codes CSS Codes

html { height: 100%;
}
body { color: #767676; background: url("https://raw.githubusercontent.com/HuffmanJ25/QuoteMachine/master/portfolioBackground-min.jpg") no-repeat center; background-size: 100%; background-color: black; height: 100%;
}
header { background-color: black; margin: 0; padding: 0; border-bottom: 1px solid white;
}
.row.no-gutters { margin-right: 0; margin-left: 0;
}
.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] { padding-right: 0; padding-left: 0;
}
#name { padding: 30px; margin: 0; font-family: "Julius Sans One", sans-serif; color: white;
}
#name h1 { margin: 0;
}
.navi { list-style-type: none; padding: 20px 0;
}
.navi li { display: inline;
}
.navi a { text-decoration: none; color: inherit; padding: 20px;
}
.navi a:hover { color: white; border-bottom: 1px solid white; text-decoration: none;
}
@media (max-width: 768px) { #name { text-align: center; } .navi { text-align: center; }
}
#landPageContent { position: relative; height: 100%;
}
#landPageContent .landingText { color: white; text-shadow: 3px 2px 3px black; position: absolute; top: 50%; left: 50%; height: 30%; width: 40%; margin: 5% 0 0 -20%; font-family: "Rock Salt", cursive; letter-spacing: 15px;
}
@media (max-width: 768px) { .landingText { font-size: 15px; }
}
#portfolio-header { font-family: "Julius Sans One", sans-serif; border-top: 1px solid white; border-bottom: 1px solid white; background-color: #000101;
}
.project { margin-bottom: -20px;
}
img { margin: 0;
}
.project-first { background-color: #000101; position: relative; height: 300px;
}
.project-first span { position: absolute; top: 253px; background: rgba(0, 0, 0, 0.6); color: white; padding: 5px 20px; border: 1px solid #E56717;
}
.project-second { background-color: #000101; position: relative; height: 7px; border: 1px solid white;
}
.project-second span { position: absolute; top: 255px;
}
.portfolio-third { background-color: #000101; position: relative; height: 300px;
}
.portfolio-third h2 span { position: absolute; top: 253px; background: rgba(0, 0, 0, 0.6); color: white; padding: 5px 20px; border: 1px solid #E56717;
}
#about-header { font-family: "Julius Sans One", sans-serif; border-top: 1px solid white; border-bottom: 1px solid white; background-color: #000101;
}
.about-row { background-color: #000f0e; background-image: url("http://www.publicdomainpictures.net/pictures/50000/nahled/blurry-background.jpg"); background-size: cover; color: #000a14;
}
.about-row h2 { font-weight: bold; margin-top: 60px; border-bottom: 2px solid black; padding: 10px;
}
.about-row p { padding: 30px 30px 60px 30px; font-size: 20px; text-shadow: 1px 1px 1px black;
}
.about-list { list-style-type: none; padding: 2px 0;
}
.about-list li { padding: 5px 30px; font-size: 20px; text-shadow: 1px 1px 1px black;
}
#contact-header { font-family: "Julius Sans One", sans-serif; border-top: 1px solid white; border-bottom: 1px solid white; background-color: #000101;
}
.contact a { color: white; text-decoration: none; margin: 40px 0; font-size: 20px;
}
.contact ul { text-decoration: none; list-style-type: none; padding: 20px; color: white; font-size: 20px;
}
@media(min-width: 1904px) { .project { height: 300px; }
}

Portfolio Page - Script Codes JS Codes

$(document).ready(function() { $("#nav-two").click(function(event) { event.preventDefault(); var hash = this.hash; $('html,body').animate({ scrollTop: $(hash).offset().top }, 1600,function(){ window.location.hash = hash; }); }); $("#nav-three").click(function(event) { event.preventDefault(); var hash = this.hash; $('html,body').animate({ scrollTop: $(hash).offset().top }, 1600,function(){ window.location.hash = hash; }); }); $("#nav-four").click(function(event) { event.preventDefault(); var hash = this.hash; $('html,body').animate({ scrollTop: $(hash).offset().top }, 1600,function(){ window.location.hash = hash; }); }); $("#top").click(function(event) { event.preventDefault(); var hash = this.hash; $('html,body').animate({ scrollTop: $(hash).offset().top }, 1600,function(){ window.location.hash = hash; }); });
});
Portfolio Page - Script Codes
Portfolio Page - Script Codes
Home Page Home
Developer Joel
Username HuffmanJ25
Uploaded November 23, 2022
Rating 3
Size 5,240 Kb
Views 10,120
Do you need developer help for Portfolio Page?

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!

Joel (HuffmanJ25) Script Codes
Name
Quote Machine
Weather Data
Tribute Page - No CSS
A Pen by Joel
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!