Let’s Create a Portfolio Landing Page For Devs (HTML and CSS)
Video Tutorial
Getting Started
If you are a New Developer or an experienced Full Stack Web Developer you will probably be looking for designing your own portfolio website with your experiences, projects and languages/frameworks you have worked with to let the outside world know about you and you would have better chances to get hired by companies or individuals for freelancing jobs or even bigger projects if they are impressed enough with your portfolio, so it’s a very important step to take if you are willing to start your career as a software engineer most likely as a Web Developer or any other fields you intend to work for.
So I’m going to walk you through making a full landing portfolio page with a really nice header and a background image and a simple languages/frameworks container shows the technologies that you are experienced and worked with alongside the contact form to get informed for any open opportunities.
The landing page we are going to create is going to be very basic and simple, I will try to guide you through the layout and how you do it your self beside all of that you could take care of adding your own fingerprints to the design and the layout to make it look more creative and unique.
You can grab the full Source code and demo with the used images from Github.
Check out the Demo on Codepen.
Portfolio Header
For the landing page header, we will make it cover the full webpage of the client’s browser once he first gets in with a nice blurred coding background and with some effect and obviously some centered text.
<!-- You can use the Div instead header -->
<header class="header">
<div class="header-info">
<img src="./images/ip_logo.png" alt="Ipenywis">
<h3>I'm a Full Stack Web Developer</h3>
<h4>And I Love to Code</h4>
<button class="btn" href="#experience"><a href="#experience">What do I Know</a></button>
</div>
</header>We use the header element instead of the normal div element by you still can use it with no problems.
Now let’s add the styling for the header to make it take the full height of the client’s browser screen when he first comes in and add some cool coding background to it.
/*Make sure to set the Html and Body to take full width and height of the webpage*/
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Oxygen, sans-serif; /*Global Font Familly*/
}
/*hyper link with no decoration (no underline)*/
a {
text-decoration: none;
color: #fff;
}
/*Finally the header style*/
.header {
width: 100%;
height: 100vh; /*100vh stand for 100 of virtual height which will do the trick*/
display: flex;
justify-content: center; /*make child text on center*/
align-items: center;
text-align: center;
position: relative;
overflow-x: hidden; /*no horizontal overflow*/
}You obviously for any style you need to specifically make the HTML and body take the full available width & height so you face no problems when laying out your elements (body children).
To make it take the full client view height we have to set it to 100 virtual height (100vh) and also the full width and some other center alignment to make sure the text that comes afterward is going to be perfectly centered.
Let’s set the background image width some overlay color gradients and blur effect so we need to use CSS SubElements on the header (after & before).
/*Do not ignore the content just set it to empty text*/
.header::before {
content: "";
width: 100%;
height: 100%;
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(54, 156, 243, 0.28)),
to(rgba(245, 36, 36, 0.23))
),
-webkit-gradient(linear, left top, right top, from(rgba(15, 15, 15, 0.7)), to(rgba(15, 15, 15, 0.7))),
url(./images/startup-photos.jpg); /*Set red, blue and dark color gradient + the image*/
filter: blur(5px) contrast(80%);
}So we set the background to have two color gradient over the actual background to make it look less sharp and noticeable as well as we set the blur and lower background contrast.
Lastly, we have to set the style of the button .btn and the header info div which holds the overlay text over the header background and color gradients.
.header-info {
position: absolute; /*Absolute to make sure it comes on top of the background*/
font-family: Oxygen, sans-serif;
font-size: 35px;
text-shadow: 10px 5px 25px rgba(15, 15, 15, 0.5); /*Shadow to show Depth and make it more readbale*/
color: #fff;
}
/*Fancy Button Style*/
.btn {
border: 2px solid #2ecc71;
width: 10em;
height: 2.4em;
font-family: Oxygen, sans-serif;
font-size: 16px;
box-shadow: 0px 0px 15px 3px rgba(15, 15, 15, 0.3);
color: #fff;
background-color: #2c3e50;
border-radius: 4px;
transition-property: border, background-color;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
cursor: pointer;
}The most important part is to set the position to absolute so the text will appear on top of the background and the color gradients we have set on the before selection otherwise you will get a very weird header layout.
Experience Section
This section is designed for putting all the languages/frameworks and technologies you are familiar with and you have actually work with at some point during your career which can guarantee that you know it well enough to use it in a business scale, we are simply going to put three frameworks Laravel, React and Angular in a very simple and minimal layout.
<!-- you can use section instead of div -->
<section id="experience" class="section experience-sec">
<div class="section-header">Languages & Frameworks</div>
<div class="experience-container">
<div class="experience-item">
<span class="item-logo"><img src="./images/laravel-logo.png" /></span>
<span class="item-name">Laravel</span>
</div>
<div class="experience-item">
<span class="item-logo"><img src="./images/react-logo.png" /></span>
<span class="item-name">React</span>
</div>
<div class="experience-item">
<span class="item-logo"><img src="./images/angular-logo.png" /></span>
<span class="item-name">Angular</span>
</div>
</div>
</section>The section has a header for just letting it know what’s this section is about and obviously, the main container which basically holds three other containers each one of them has a logo and a name which we can put on the framework or languages logo alongside its name.
Let’s add some style to it.
/*Common Section Style*/
.section {
width: 100%;
display: flex;
margin-top: 3em;
}
.experience-sec {
flex-direction: column;
width: 100%;
text-align: center;
font-family: Oxygen, sans-serif;
}
.section-header {
margin: auto;
font-size: 26px;
padding: 10px 5px;
border-bottom: 3px solid #2ecc71;
}
.experience-container {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 6em;
}
/*Each item style */
.experience-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 35px;
border-radius: 4px;
}
/*Make image take the full width of the parent container which is in this case the .item-logo*/
.item-logo > img {
width: 100%;
height: 100%;
}
.item-logo {
width: 13em;
height: 12em;
}
.item-name {
font-family: Oxygen, sans-serif;
font-size: 27px;
margin-top: 1.7em;
}For the images we make them take the full width & height of the parent container then we can specifically set the parent width and height to what we need.
Let’s add the contact footer.
Contact Section
The contact section will allow the company or the client to reach you and hire you for some projects after they agree of doing business with you by seeing your elegant unique portfolio design, so it’s simply going to be a contact form with a name, email and a message contact.
<!-- Yet Another Section -->
<section class="section contact-sec">
<div class="section-header" style="color: #fff">Reach US</div>
<div class="contact-container">
<form id="contact-form">
<label for="name">Your Name</label>
<input type="text" name="name" placeholder="Full Name">
<label for="name">Your Email</label>
<input type="email" name="email" placeholder="Email Address">
<label for="name">Your Message</label>
<textarea name="content" id="contact-content" placeholder="Your Message..."></textarea>
</form>
</div>
</section>And add some style.
.contact-sec {
min-height: 30em;
background-color: #34495e;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-container {
width: 21em;
margin-top: 5em;
display: flex;
}
#contact-form {
display: flex;
flex-direction: column;
width: 100%;
}
/*Access form content through child CSS Selector*/
#contact-form > label {
color: #fff;
font-family: Oxygen, sans-serif;
}
#contact-form > input {
padding: 0 5px;
height: 37px;
margin-top: 10px;
margin-bottom: 30px;
font-size: 16px;
border: 0;
border-bottom: 3px solid #2ecc71;
box-shadow: 0px 0px 15px 3px rgba(15, 15, 15, 0.2);
}
/*Edit Input placeholder*/
#contact-form > input::placeholder {
font-family: Oxygen, sans-serif;
font-size: 16px;
}
#contact-form > textarea {
max-width: 100%;
min-width: 100%;
min-height: 40px;
margin-bottom: 60px;
font-size: 16px;
}
#contact-form > textarea::placeholder {
max-width: 100%;
min-width: 100%;
height: 60px;
margin-bottom: 60px;
font-family: Oxygen, sans-serif;
font-size: 16px;
}Making it Responsive
And finally we have to let the landing page look responsive to whatever device or screen size we are viewing from, likely enough we have everything using flexBox design so we don’t need to use too much media queries to change the style when the screen size change.
CSS Media queries allow you to change your style depending on the current screen size so could hide some elements or change its position or display regarding the currently available width.
In this case, we only need to change the experience items layout type from row display to column when the screen width size is lower than 968px so it would look better on smaller screens.
/*Media Queries*/
@media screen and (max-width: 968px) {
.experience-container {
flex-direction: column;
}
}And that should do the trick.
What’s Next
So hopefully you could have some benefit from seeing this layout and how it’s actually gets designed and layout on a real-world portfolio alongside how to make an interesting portfolio header so you could make the viewer be interested in working with you.
You can take the landing page from here and take it even further by creating either a single page application or you can turn it to use React which makes it even better and obviously try to design a bit better with your unique touch.
