A Portfolio Website is a unique way to show your work and let others know more about you and your skills. In addition, it is also a great way to showcase your experience, personality and capabilities. Having your own Portfolio Website means that you have a wider reach and potential customers can reach if they need to engage your professional service. In this article, I will take you through the steps I took in building a simple Portfolio Website. Please feel free to make changes wherever you want: change the layout, colors etc., put your creative designs skills to practice, because I really don’t have many. This is what I have been able to come up with. 😊Let’s get started!
The Head
As you already know, you start with the HTML brawler plate which entails the opening and closing tags of the head, tittle, body and html as seen below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Valentina's portfolio site</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Sacramento&display=swap" rel="stylesheet">
</head>
You should be familiar with this already. In the head tag, I linked my external CSS and a link to Google Fonts to enable me use some custom font styles. The Next is my body tag.
My Layout
Read the lines of code carefully to understand my layout structure,the classes inserted in the tags for ease of styling and the images etc.
<body>
<!-- top-container begins -->
<div class="top-container">
<h1> I'm Valentina.</h1>
<p>A Web Developer</p>
<img class="centered-img" src="NicePng_dark-clouds-png_544051.png"/>
</div>
<!-- middle container-start -->
<div class="middle-container">
<div class="intro">
<img src="girl.png"/>
<h3>Hello!</h3>
<p class="introduction">
I'm a Web Developer, my area of interest is frontend development. Aut quasi, ea, earum optio totam facere eius tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. aut quasi, ea, earum optio
</p>
</div>
<hr>
<div class="skill-row">
<h2 class="head">Things I can do</h2><br>
<img class="skill-img" src="coding-icon-png-7.jpg"/>
<h3>Build Websites</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quasi, ea, earum optio totam facere eius tenetur aut quasi, ea, earum optio totam facere eius tenetur. Lorem ipsum dolor sit amet consectetur
</p>
</div>
<div class="skill-row">
<img class="article-img" src="coding-icon-png-9.jpg"/>
<h3>Write Technical Articles</h3>
<p class="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quasi, ea, earum optio totam facere eius tenetur aut quasi, ea, earum optio totam facere eius tenetur. Lorem ipsum dolor sit amet consectetur adipisicing elit aut quasi.
</p>
</div>
<hr>
</div>
The Final Layout
The final layout consist of external links to my past work. Please feel free to edit this add as many content as you wish and of course personalize this the website.
<!-- endining middle container -->
<div class="bottom-container">
<div>
<h3>My Publications</h3>
<ul class="portfolio">
<li>
<a href="https://icodemag.com/how-to-create-a-website-using-css-grid/">How to Create a Website Using CSS Grid </a>
</li>
<li>
<a href="https://icodemag.com/designing-a-resume-with-css/">Designing a Resume with CSS</a>
</li>
<li>
<a href="https://icodemag.com/getting-started-with-css-box-model/">Getting Started with CSS Box Model</a>
</li>
<li>
<a href="https://sweetcode.io/asynchronous-javascript-apps/">Asynchronous JavaScript Apps</a>
</li>
</ul>
</div>
<hr>
<div class="contact-me">
<h3>I am available to work</h3>
<p>If you will love to engage my services, kindly Contact Me.</p><br>
<a class="btn" href="mailto:nina4shizzy@gmail.com">Message Me</a>
</div>
</div>
<!-- footer begins -->
<footer>
<p>Catch me on SM</p>
<a class="footer-link" href="">Twitter</a>
<a hclass="footer-link" href="">Instagram</a>
<a class="footer-link" href="">Linked in</a>
<p class="footer-p">@2019 - Valentina Nnenna Som-anya</p>
</footer>
</body>
</html>
My Styling
body {
margin: 0;
text-align: center;
color: #40514E;
}
h1 {
margin-top: 0;
font-size: 362.2%;
color: rgb(30, 68, 68);
font-family: 'Sacramento', cursive;
padding: 20px;
}
.centered-img {
width: 18%;
}
.top-container {
background-color: #b2d3be;
background: linear-gradient(to right bottom, #abd8ce,#293f50);
}
As you know by now we add CSS styles to beautify our websites, web apps etc. Without CSS our Portfolio Website would be just plain text just like the websites from the 90s. Checkout www.yahoo.com in the 90s to appreciate CSS more.
.middle-container {
margin-top: 50px;
}
h2 {
color: rgb(41, 110, 110);
font-family: 'Montserrat', sans-serif;
font-size: 2.0em;
font-weight: normal;
padding: 3px;
}
h3 {
color: #11999E;
font-family: 'Montserrat', sans-serif;
font-size: 1.2em;
}
p {
line-height: 2;
color: rgb(30, 68, 68);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size:20px;
}
.introduction {
width: 30%;
margin: auto;
}
hr {
margin:70px auto;
width: 7%;
border: 6px dotted rgb(76, 188, 192);
border-bottom: none;
}
.head {
text-align: center;
}
.skill-row {
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
}
.skill-img {
width: 20%;
float: left;
padding: 30px;
}
.article-img {
width: 20%;
float: right;
padding: 28px;
}
li {
padding: 5px;
list-style-type: none;
width: 50%;
margin: auto;
}
a {
text-decoration: none;
margin: 20px;
color: rgb(30, 68, 68);
list-style-type: circle;
font-size: 20px;
letter-spacing: 1px;
}
a:hover {
font: 500;
background-color: #66BFBF;
}
And finally we have this below.
a:visited {
color: #40514E;
}
.contact-me {
width: 40%;
margin: 40px auto 50px;
padding: 5px;
}
.btn {
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
border-radius: 50px;
background-color: #66BFBF;
color: #40514E;
text-decoration: none;
}
.footer-p {
font-size: 15px;
}
footer {
background: linear-gradient(to right bottom, #abd8ce, #293f50);
}
Output
The resulting output for all of these codes is this simple, yet beautiful Portfolio Website.
Conclusion
Now you have an idea as to how to design your Portfolio Website, it is up to you to bring in your creative vision into this by building up on this. Here’s a link to my github page to find the source code for the Portfolio Website.
Have fun learning!!!
