FreeCodeCamp - Build a Personal Portfolio Webpage
In this project (the final one!!!!) I was tasked with creating a portfolio webpage. I was instructed to make it similar to this one. Even though this project was the final one, it was actually quite easy for two reasons. First, I was able to reuse a lot of code from my previous project. I only had to modify the paragraphs, headers, CSS, add a contact section, and a fix dozen or so other parts of the code. The second reason this was easy was because I actually understood what I was doing! It was immensely gratifying to be able to finally understand how the CSS is going to affect the HTML without having to check the preview after every modification. I can honestly say that I can program in HTML & CSS. Is it very pretty? No. Is it production level? No. But I can do it. Being able to say that is very rewarding, especially after spending 40+ hours on this course.
🎉
With this, I have officially completed the Responsive Web Design Course courtesy of Free Code Camp!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header id="header">
<img id="header-img" height="415" src="https://jessekramer.org/content/images/size/w1000/2025/07/jk-high-resolution-logo-transparent.png"></img>
<nav id="navbar">
<ul>
<li><a class="nav-link" href="#welcome-section">Welcome</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main-doc">
<section class="main-section" id="welcome-section">
<br><h1>Welcome!</h1>
<article>
<img id="profile-pic" height="415" src="https://jessekramer.org/content/images/size/w1600/2024/12/NextAVL-Images-39-Edited.jpg"></img>
<p>I'm a Montreat College Honors student majoring in Cybersecurity. I am proficient in Linux, network administration, blue team, and OSINT. My mission in technology is to develop and promote technology that encourages growth virtue. </p>
</article>
</section>
<section class="main-section" id="projects">
<h1>Projects</h1>
<p>IHere are a few projects that I have done over the years through FreeCodeCamp as well as self-directed projects</p>
<div class="project-tile-flex">
<div class="project-tile">
<header class="project-tile-label">Technical Documentation</header>
<p class="project-tile-description">
In <a href="https://jessekramer.org/blog/freecodecamp-technical-documentation-page/" target="_blank">this project</a> In this project, I created a demo documentation page. I chose to be a bit facetious, discussing the rise, fall, and revival of drywall as a food.
</p>
</div>
<div class="project-tile">
<header class="project-tile-label">Tribute Page</header>
<p class="project-tile-description">In <a href="https://jessekramer.org/blog/freecodecamp-tribute-page-project/" target="_blank">this project</a>, I was tasked with creating a tribute page. After much work, I was able to create a decent looking HTML page that talks about the 10th Mountain Division.
</p>
</div>
<div class="project-tile">
<header class="project-tile-label">Personal Website</header>
<p class="project-tile-description">
In <a href="https://jessekramer.org/blog/how-i-built-this-website/" target="_blank">this project</a> I built my personal website. The page linked is mostly just a dump of the very helpful resources that I used to get a static homepage working.
</p>
</div>
</div>
</section>
<section id="contact">
<h1>Contact Info</h1>
<p>Please feel free to contact me by email of phone!</p>
<i class="fa fa-envelope"> <a target="_blank" id="profile-link" href="mailto:jkramer@example.com">jkramer@example.com</a></i><br>
<i class="fa fa-phone"> (828) 867-5309</i>
</section>
</main>
</body>
</html>CSS
body {
font-family: lato;
background:#FAFBFAff;
color:#3A3237ff;
font-size:1.3rem;
max-width: 100%;
overflow-x: hidden;
}
@media only screen and (min-width:498px) {
#header {
clear:both;
overflow:visible; background-color:#C6D4D4ff;
height:80px;
width:100%;
position: fixed;
top:0px;
left:0px;
right:0px;
}}
@media only screen and (max-width:498px) {
#header {
clear:both;
overflow:visible;
position: fixed;
top:0px;
left:0px;
right:0px;
background-color:#C6D4D4ff;
height:115px;
width:100%;
}}
/* This used to be here for the h1 element. It used to be called "Juggling with Jesse" but having to put the navbar at the top messed it up a bit.
#header h1 {
display: inline-block;
font-size:1.2rem;
margin-left:25px;
margin-bottom:0px;
margin-top:30px;
padding:0;
}
*/
nav {
float:right;
position: fixed;
top: 0px;
margin-left:20px;
}
#header ul li{
display: inline-block;
font-size:1.2rem;
font-family:Lato;
margin-right:5px;
margin-top:10px;
padding:0px;
}
#header ul li a {
color: black;
}
#header-img {
float:left;
max-width: 65px;
height: 65px;
border-radius: 50px;
margin-left:8px;
margin-top:7px;
margin-bottom:7px;
}
#profile-pic {
float:center;
max-width: 50vw;
height: 50vw;
border-radius: 20px;
border: solid #94ADC4ff 5px;
margin-left:25%;
margin-right:25%;
margin-top:10px;
margin-bottom:10px;
}
#welcome-section h1 {
margin-top:70px;
}
section h1 {
font-size:2rem;
padding:0;
margin-top:30px;
margin-bottom:8px;
text-align:center;
}
p {
padding:0;
margin-left: 30px;
margin-right: 30px;
}
ul li {
margin-left: 40px;
}
.project-tile-flex {
display: flex;
width:100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.project-tile {
margin: 10px;
border: 3px solid #3A3237ff;
max-width: 400px;
height: 250px;
width: 350px;
border-radius:8px;
background-color:#94ADC4ff;
}
.project-tile-label {
font-size:1.75rem;
text-decoration:bold;
text-align:center;
margin-top:10px;
}
#contact {
border:3px solid black;
height:240px;
width:50%;
margin-top:30px;
margin-bottom:50px;
margin:auto;
border-radius:8px;
background-color:#C6D4D4ff;
}
#contact p {
width:60%;
margin:auto;
text-align:center;
margin-bottom:20px;
}
#contact i {
width:100%;
margin:auto;
text-align:center;
margin-bottom:10px;
}
0:00
/0:28
AI Usage
The usage of AI & ML technologies are always kept to a minimum in order to maximize deep learning. I do not consider tools like search engines and "AI Summaries" in search engines to be notable AI assistance.
Member discussion