Hello developers! Happy new year. In this tutorial let's create a portfolio like this.
Getting started
Let's first create the basic HTML structure with the libraries.
I am using this library to create the portfolio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John doe | Portfolio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/tronic247-material@3.0.0/dist/material.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
</head>
<body>
<script src="https://unpkg.com/tronic247-material@3.0.0/dist/material.min.js"></script>
<script>
Material.Forms.init();
</script>
</body>
</html>
After that, we have all our libraries added to the package.
Now let's create the header.
<header class="appbar elevating">
<div class="left">
<span class="title animated">John Doe</span>
</div>
<div class="right">
<a href="#!" class="btn hide-on-mobile animated text">Home</a>
<a href="#!" class="btn hide-on-mobile animated text">About</a>
<a href="#!" class="btn hide-on-mobile animated text">Projects</a>
<a href="#!" class="btn hide-on-mobile animated text">Contact</a>
<a href="#!" onclick="Material.Dialog.open(document.querySelector('#hamburger'))" class="show-on-mobile icon">
<i class="mdi mdi-menu"></i>
</a>
</div>
</header>
We will have a result like this:
Now we will make it more nice using some CSS
body {
margin: 0;
padding: 0;
}
.appbar {
position: sticky;
top: 0;
left: 0;
z-index: 9999;
background: #fff !important;
}
Now let's make the menu responsive.
.show-on-mobile {
display: none;
}
@media (max-width: 768px) {
.hide-on-mobile {
display: none !important;
}
.show-on-mobile {
display: inline-flex !important;
}
}
<header class="appbar elevating">
<div class="left">
<span class="title animated">John Doe</span>
</div>
<div class="right">
<a href="#!" class="btn hide-on-mobile animated text">Home</a>
<a href="#!" class="btn hide-on-mobile animated text">About</a>
<a href="#!" class="btn hide-on-mobile animated text">Projects</a>
<a href="#!" class="btn hide-on-mobile animated text">Contact</a>
<a href="#!" onclick="Material.Dialog.open(document.querySelector('#hamburger'))" class="show-on-mobile icon">
<i class="mdi mdi-menu"></i>
</a>
</div>
</header>
<div class="dialog" id="hamburger">
<div class="content">
<a href="#!" class="btn unelevated">Home</a>
<br>
<a href="#!" class="btn unelevated">About</a>
<br>
<a href="#!" class="btn unelevated">Projects</a>
<br>
<a href="#!" class="btn unelevated">Contact</a>
</div>
</div>
Okay. Now let's create the hero section.
And add the CSS.
#main {
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#main .box {
display: flex;
flex-direction: column;
justify-content: center;
}
Then let's create a container for the bottom stuff.
<div class="container">
</div>
Inside that let's add the about section.
<div class="row mb-5">
<div class="col-12 col-lg-6">
<img src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="rounded">
</div>
<div class="col-12 col-lg-6">
<h1 class="mt-0">About me</h1>
<p>Hey, I'm John Doe. I'm a web developer and designer based in London, UK. I'm a self-taught developer and designer, and I love what I do. I'm currently working as a freelancer, and I'm looking for new opportunities to work on exciting projects.</p>
<p>Here are some of my skills:</p>
<ul>
<li>Responsive web design</li>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>PHP</li>
<li>WordPress</li>
<li>SASS</li>
<li>Gulp</li>
</ul>
</div>
</div>
<div class="p-5"></div>
Then let's add a latest projects section
<div class="row">
<h2 style="text-align: center;">My latest projects</h2>
<div class="row">
<a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
<img
src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80" class="rounded">
<h4>Project 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
</a>
<a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
<img
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
<h4>Project 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
</a>
<a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
<img
src="https://images.unsplash.com/photo-1537498425277-c283d32ef9db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1478&q=80" class="rounded">
<h4>Project 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
</a>
</div>
<div class="row mt-5">
<a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
<img
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
<h4>Project 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
</a>
<a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
<img
src="https://images.unsplash.com/photo-1547082299-de196ea013d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
<h4>Project 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
</a>
<a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
<img
src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
<h4>Project 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
</a>
</div>
</div>
<div class="p-5 m-5"></div>
We will get this result.
Don't worry we'll fix it.
.card:not(:hover, :focus-visible) {
box-shadow: none;
}
.card:hover {
z-index: 9;
}
Yay. Now let's create the contact section.
<div class="row mb-5">
<div class="col-12 col-lg-6">
<h1>Let's Connect</h1>
<p>I'm currently looking for new opportunities to work on exciting projects. If you're interested in working with me, please get in touch.</p>
<div class="mt-2 mb-4">
<a href="#!" class="icon">
<i class="i mdi mdi-github"></i>
</a>
<a href="#!" class="icon">
<i class="i mdi mdi-codepen"></i>
</a>
<a href="#!" class="icon">
<i class="i mdi mdi-dev-to"></i>
</a>
<a href="#!" class="icon">
<i class="i mdi mdi-twitch"></i>
</a>
<a href="#!" class="icon">
<i class="i mdi mdi-twitter"></i>
</a>
</div>
<div class="textbox">
<div class="left">
</div>
<div class="middle">
<label for="name" class="label">Name</label>
<input type="text" id="name" class="input">
</div>
<div class="right"></div>
</div>
<div class="p-2"></div>
<div class="textbox">
<div class="left">
</div>
<div class="middle">
<label for="email" class="label">Email</label>
<input type="text" id="email" class="input">
</div>
<div class="right"></div>
</div>
<div class="p-2"></div>
<div class="textbox textarea">
<div class="left">
</div>
<div class="middle">
<label for="message" class="label">Message</label>
<textarea id="message" class="input"></textarea>
</div>
<div class="right"></div>
</div>
<div class="p-2"></div>
<button class="btn primary">Send</button>
</div>
<div class="col-12 col-lg-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.90781809816!2d-0.120873984689908!3d51.5135695798898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c8f8f8f8f%3A0x8f8f8f8f8f8f8f8f!2sLondon%2C%20UK!5e0!3m2!1sen!2sus!4v1588795909872!5m2!1sen!2sus"
width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
Let's fix the form.
.textbox .input {
width: 300px !important;
}
And for the final part. The footer.
<footer class="container-fluid p-5 mt-5 bg-dark-1">
<p>John Doe © <span id="year">future</span>. All rights reserved. Created with <a href="https://material.tronic247.com/" target="_blank" id="link">Tronic247 Material</a>.
</footer>
And we will make the date update automatically.
document.querySelector('#year').innerHTML = new Date().getFullYear();
Yay! We're done. If you want to add a smooth animation, add this CSS.
.animated {
opacity: 0;
animation: fadeup 0.8s ease forwards;
}
@keyframes fadeup {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated:nth-child(1) {
animation-delay: 0.1s;
}
.animated:nth-child(2) {
animation-delay: 0.2s;
}
.animated:nth-child(3) {
animation-delay: 0.3s;
}
.animated:nth-child(4) {
animation-delay: 0.4s;
}
.animated:nth-child(5) {
animation-delay: 0.5s;
}
.animated:nth-child(6) {
animation-delay: 0.6s;
}
.animated:nth-child(7) {
animation-delay: 0.7s;
}
.animated:nth-child(8) {
animation-delay: 0.8s;
}
.animated:nth-child(9) {
animation-delay: 0.9s;
}
.animated:nth-child(10) {
animation-delay: 1s;
}
And for the links add this CSS
body {
overflow-x: hidden;
}
#link {
color: rgb(5, 40, 199);
}
#link:focus {
box-shadow: 0 0 0 0.2rem rgba(5, 40, 199, 0.5);
}
And thanks for reading this tutorial! If you like the template, you can star the framework here.
Modern Material design framework for just vanilla JS!
Demos
Getting started
See how to getting started here.
Top comments (0)