Hi guys, today I will be sharing a simple beginner-friendly tutorial on building a one-page portfolio or resume website with Bulma CSS, SCSS, Animate On Scroll, Iconify and a little bit of javascript. It’s suitable as a starter template to impress your potential employers by showcasing your creativity.
I am going through this tutorial by explaining each part of the build process to get a practical understanding of the technologies used.
What We’ll Be Building
Here is the preview of the website we are building in this post:
If you wish to download the finished code, you can check out the repo here:
Why Bulma?
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Bulma is a CSS only framework, which means unlike other frameworks like Bootstrap or Foundation, it does not have a javascript library. Among the benefits of this are that the size is less bloated, and it can integrate with Javascript frameworks like React or Vue seamlessly.
Bulma comes with sets of classes that are of elegant design and straightforward naming conventions. Just check out all their positive reviews.
Setting Up
If you are new to coding, no worries, I will share how to set you up with a functioning workspace from scratch.
Visual Studio Code
I use Visual Studio Code or VS Code as my Integrated Development Environment (IDE). It is powerful, easy-to-use, and comes packed with a terminal of its own, which can be very handy.
If you go to the main web page at code.visualstudio.com, it will auto-detect your operating system (OS) and suggest the correct version for your OS. If you wish to download a specific installer for a certain OS, you can go to their downloads page here.
After installing VS Code, you can create a new folder for the project we are building in this post.
SCSS Compiler
I will install an extension called Live SASS Compiler for this project. This extension will compile our SCSS code into CSS so that the browser can read it.
I use SCSS instead of SASS as a matter of preference as I am accustomed to the semicolons and braces. You can also use SASS if you are more comfortable with that syntax.
index.html
In the root folder of your project, create an index.html file
.
└── index.html
Now you can start writing code. For emmet abbreviation, you can click ! and click tab. You can also go to their website to copy the starter template. Then clear out the default title and body content to get something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
/>
</head>
<body></body>
</html>
As you can see in the head section, they are importing the Bulma version 0.9.3 CSS library from an external source. By the way, I’m using Prettier - Code Formatter extension to auto-format my code to look nice.
Head Section
style.css
Then you would need to import your stylesheet into the index.html created above:
<head>
...
<link rel="stylesheet" href="style.css" />
</head>
And then create a style.scss folder in the root folder as well:
.
├── index.html
└── style.scss
Now you might be wondering why are we importing style.css but created a style.scss file?
Thats where the Live SASS Compiler extension comes into play. We need to let it watch the style.scss so that it will generate the style.css file when we save our work later:
.
├── index.html
├── style.scss
├── style.css.map
└── style.css
favicon.ico
Add the following in the head section to link the favicon:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
You can use the same favicon in the repo, or create your own.
Title
Then, add the title so that it will appear in your browser tab:
<title>Five | By Heksagon</title>
You can customize it when creating your personalised resume.
Animate On Scroll
Lastly, add the following CSS package from Animate On Scroll to make use of the animation library:
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
Complete Head
The complete head section will look something like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Five | By Heksagon</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
/>
<link rel="stylesheet" href="style.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
</head>
style.scss
Before we move on to the body, let’s create some custom classes in the style.scss file.
Variables
FIrst, let’s define some colours. You can change them here and it will be reflected for all the tags with this variable:
$dark-color: hsl(215, 15%, 16%);
$light-color: hsl(0, 0%, 99%);
$primary-color: hsl(171, 100%, 41%);
Fonts
For this project, I’d like to have a custom font from Google called Nunito. You can choose another type of font and import it here. It will be reflected at all the divs with the .custom-font class
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.custom-font {
font-family: 'Nunito', sans-serif;
}
This is a class defined just to give a personal variation of the colour white than the original .has-text-white class from Bulma:
.font-light {
color: $light-color;
}
I also tampered with the opacity to give depth to the different headings:
.title {
opacity: 0.8;
}
.subtitle {
opacity: 0.3;
}
And a solid underline under each title for decorative purposes:
.title-underline {
border-bottom: 10px solid $primary-color;
}
Scroll Behaviour
Because I am building a one-page website, the navigation will be all on the same page. Therefore, I would like the page to move in a smooth manner when visitors click on the menu. Here is the solution to that:
html {
scroll-behavior: smooth;
}
Menu for Mobile and Desktop
For this project, I will be creating different divs for mobile and desktop view. This can be beneficial if you wish to have a different set of menu for different view. However, you would need to create two lists of menu and edit them both.
The purpose of me having different divs is so to make it easier for me to manipulate their behaviour, styling and for adding animation just to the mobile menu 😉.
I have also widen the .navbar-burger span so that it is clearer and adds to the personality.
Here is how it looks like:
@media (min-width: 1024px) {
#navbarMenuHeroB {
display: none;
}
}
.navbar-burger span {
width: 30px;
}
.navbar-menu {
background-color: $dark-color;
}
.mobile-menu {
color: $light-color;
animation: menuAnimation 300ms ease;
}
As you can see in the .mobile-menu class, there is a custom animation called menuAnimation which keyframes is defined like so:
@keyframes menuAnimation {
0% {
margin-top: -100px;
}
100% {
margin-top: 0;
}
}
Just a simple animation.
Images
For images, I have used the figure tag and created some styling whereby if you hover on a picture, (or click on it if you are on mobile), words will appear. The styles are as follows:
figure {
position: relative;
overflow: hidden;
transition: all ease 300ms;
span {
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $light-color;
display: none;
text-align: center;
transition: all ease 300ms;
}
}
figure,
img {
overflow: hidden;
cursor: pointer;
transition: all ease 300ms;
}
figure:hover {
img {
transform: scale(1.03);
filter: brightness(50%);
}
span {
display: block;
}
}
Notice how the classes in this example are declared inside a parent class. This method is called nesting so the SCSS can combine the two parent-child classes when it compiles into CSS.
Hero Section
For the hero section, I want to have an image that blends into the background. The.main-hero class is positioned absolute-ly inside the parent class .hero-body, therefore the parent’s relative position needs to be explicitly declared here. You can also use normal CSS convention (not nested in parent class) in SCSS.
.hero-body {
position: relative;
}
.main-hero {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
background-image: url('cover.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.3;
}
Form
I’ve created a custom class for the form so that it may look nice both in desktop and mobile view:
.form {
width: 100%;
max-width: 600px;
padding: 0 20px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
Utility Classes
Influenced by the use of utility-first CSS frameworks such as Tailwind, Windi and Unocss, I created a few classes just to “fit” everything into place:
.standard-radius {
border-radius: 10px;
}
.w-full {
width: 100%;
}
.late-gray-bg {
background-color: $dark-color;
}
Some extra definition are also added to enhance Bulma’s classes for this project:
.level-item {
padding: 1em 0;
}
.is-large {
padding: 10rem 0;
}
Selection
To add a personal touch to the site, the selection colour will be based on the $primary-color variable. Try selecting some text in the website to see it working.
::selection {
background-color: $primary-color;
}
Complete SCSS
The complete style.scss file should look something like this:
$dark-color: hsl(215, 15%, 16%);
$light-color: hsl(0, 0%, 99%);
$primary-color: hsl(171, 100%, 41%);
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
::selection {
background-color: $primary-color;
}
html {
scroll-behavior: smooth;
}
.custom-font {
font-family: 'Nunito', sans-serif;
}
.standard-radius {
border-radius: 10px;
}
.late-gray-bg {
background-color: $dark-color;
}
.font-light {
color: $light-color;
}
.title {
opacity: 0.8;
}
.subtitle {
opacity: 0.3;
}
.level-item {
padding: 1em 0;
}
.title-underline {
border-bottom: 10px solid $primary-color;
}
.w-full {
width: 100%;
}
@media (min-width: 1024px) {
#navbarMenuHeroB {
display: none;
}
}
.navbar-burger span {
width: 30px;
}
.navbar-menu {
background-color: $dark-color;
}
.mobile-menu {
color: $light-color;
animation: menuAnimation 300ms ease;
}
.hero-body {
position: relative;
}
.main-hero {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
background-image: url('cover.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.3;
}
.is-large {
padding: 10rem 0;
}
figure {
position: relative;
overflow: hidden;
transition: all ease 300ms;
span {
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $light-color;
display: none;
text-align: center;
transition: all ease 300ms;
}
}
figure,
img {
overflow: hidden;
cursor: pointer;
transition: all ease 300ms;
}
figure:hover {
img {
transform: scale(1.03);
filter: brightness(50%);
}
span {
display: block;
}
}
.form {
width: 100%;
max-width: 600px;
padding: 0 20px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
@keyframes menuAnimation {
0% {
margin-top: -100px;
}
100% {
margin-top: 0;
}
}
Notice SCSS’s superpower when it compiles into CSS. Every parent-child class is combined and it even created additional codes in the CSS to make it compatible across different browsers.
Body
For all the assets used in the demo, you can download it from the repository here.
The body of this website is mainly divided into:
- Hero & Nav
- About
- Achievements
- Skills
- Portfolio
- Contact
- Footer
- Scripts
Brief explanation of each section will be provided in html comments. Feel free to change all the information to suit your criteria when building your CV .
Hero & Nav Section
Here is the code used in the hero & nav section:
<section class="hero late-gray-bg is-fullheight custom-font">
<div class="hero-head">
<nav class="navbar is-primary is-fixed-top">
<div
class="
is-flex is-justify-content-space-between
w-full
px-1
py-3
late-gray-bg
"
>
<!-- Start Branding Div -->
<div class="navbar-brand">
<a class="navbar-item" href="#"
><img src="favicon.ico" width="28" height="28" />
<p class="title has-text-primary">FIVE</p>
</a>
</div>
<!-- End Branding Div -->
<!-- Start Desktop Menu Div -->
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="#about">About</a>
<a class="navbar-item" href="#achievement">Achievements</a>
<a class="navbar-item" href="#skills">Skills</a>
<a class="navbar-item" href="#portfolio">Portfolio</a>
<a class="navbar-item" href="#contact">Contact </a>
<span class="navbar-item">
<a
class="button is-primary"
href="https://github.com/heksagonnet/five/archive/refs/heads/main.zip"
>
<span class="iconify" data-icon="fe:github"></span>
<span>Download</span>
</a>
</span>
</div>
</div>
<!-- End Desktop Menu Div -->
<!-- Start Mobile Burger -->
<span class="navbar-burger" data-target="navbarMenuHeroB">
<span></span>
<span></span>
<span></span>
</span>
<!-- End Mobile Burger -->
</div>
<!-- Start Mobile Menu Div -->
<div id="navbarMenuHeroB" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item mobile-menu" href="#about">About</a>
<a class="navbar-item mobile-menu" href="#achievement">
Achievements
</a>
<a class="navbar-item mobile-menu" href="#skills">Skills</a>
<a class="navbar-item mobile-menu" href="#portfolio">Portfolio</a>
<a class="navbar-item mobile-menu" href="#contact">Contact</a>
<span class="navbar-item is-flex is-justify-content-center">
<a
class="button is-primary"
href="https://github.com/heksagonnet/five/archive/refs/heads/main.zip"
>
<span class="iconify" data-icon="fe:github"></span>
<span>Download</span>
</a>
</span>
</div>
</div>
<!-- End Mobile Menu Div -->
</nav>
</div>
<!-- Start Hero Section -->
<div class="hero-body p-0 custom-font">
<div class="main-hero"></div>
<div class="container has-text-centered">
<p data-aos="zoom-out-down" class="subtitle font-light">Hi, I'm</p>
<h1 data-aos="zoom-out" class="title font-light is-1">
<em>NASIR</em>
</h1>
<p data-aos="zoom-out-up" class="subtitle font-light">Web Developer</p>
</div>
</div>
<!-- End Hero Section -->
</section>
About Section
This is the code used for the about section:
<!-- #about is called to view when it is clicked at the navigation -->
<div id="about" class="pt-6"></div>
<section class="block py-6 custom-font">
<div class="column is-4 mx-auto">
<h2 data-aos="fade-out" class="title has-text-centered is-uppercase">
About Me
</h2>
<div class="title-underline"></div>
</div>
<div class="columns mx-0">
<div class="column is-5 m-auto p-6">
<p data-aos="fade-up">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, ab minima
eligendi ea odit non totam blanditiis praesentium. Provident aperiam
distinctio voluptas voluptatibus repellat consequuntur possimus
laboriosam, rerum labore magnam odit, sed qui deleniti quae, pariatur ex
similique harum. Quaerat beatae quidem eligendi illum accusamus vitae
delectus mollitia nisi similique reiciendis soluta hic, magnam a fuga
minus expedita dignissimos deleniti tempore aspernatur distinctio rem
dolorem aliquam sequi! Sunt et laboriosam perspiciatis perferendis
debitis vitae harum eum ipsam quibusdam sint nobis maiores quis, dolore,
minima voluptatibus modi aspernatur laborum aut autem tenetur
dignissimos! Corporis sequi quia omnis quis vero, sunt voluptatem?
</p>
</div>
<figure data-aos="fade-down" class="image p-6 m-auto column is-5">
<img class="standard-radius" src="portrait.webp" alt="" />
<!-- Words that appear when mouse is hovered on the picture (clicked on mobile) -->
<span class="title font-light">Motto here</span>
</figure>
</div>
</section>
Achievements Section
Here are the lines of HTML used for the achievements section:
<!-- #achievement is called to view when it is clicked at the navigation -->
<div id="achievement" class="py-6"></div>
<section class="hero is-light py-6 custom-font">
<div class="column my-3 is-4 mx-auto">
<h2 data-aos="fade-down" class="title has-text-centered is-uppercase">
Achievements
</h2>
<div class="title-underline"></div>
</div>
<div class="level">
<div class="level-item has-text-centered">
<div data-aos="fade-up" data-aos-delay="100">
<p class="heading">ROI on Ad Spend</p>
<p class="title">2.2x</p>
<p class="heading">of $18,000</p>
</div>
</div>
<div class="level-item has-text-centered">
<div data-aos="fade-down" data-aos-delay="200">
<p class="heading">Cold emails</p>
<p class="title">200</p>
<p class="heading">daily</p>
</div>
</div>
<div class="level-item has-text-centered">
<div data-aos="fade-up" data-aos-delay="300">
<p class="heading">Supervised</p>
<p class="title">20</p>
<p class="heading">person</p>
</div>
</div>
<div class="level-item has-text-centered">
<div data-aos="fade-down" data-aos-delay="400">
<p class="heading">Exceeded KPI</p>
<p class="title">20%</p>
<p class="heading">for 5 months consecutively</p>
</div>
</div>
</div>
</section>
Skills
<!-- #skills is called to view when it is clicked at the navigation -->
<div id="skills" class="pt-6 hero is-light"></div>
<section class="hero late-gray-bg custom-font">
<div class="column is-4 mx-auto pt-6">
<h2
class="title has-text-centered is-uppercase font-light"
data-aos="fade-down"
>
My Skills
</h2>
<div class="title-underline"></div>
</div>
<div class="columns m-6 is-multiline has-text-centered">
<div class="column is-4 my-6 px-2" data-aos="fade-down">
<h3 class="title is-3 font-light">HTML</h3>
<p class="subtitle is-5 font-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, esse.
</p>
</div>
<div class="column is-4 my-6 px-2" data-aos="fade-down">
<h3 class="title is-3 font-light">CSS</h3>
<p class="subtitle is-5 font-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, fugiat.
</p>
</div>
<div class="column is-4 my-6 px-2" data-aos="fade-down">
<h3 class="title is-3 font-light">JAVASCRIPT</h3>
<p class="subtitle is-5 font-light">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, commodi.
</p>
</div>
<div class="column is-4 my-6 px-2" data-aos="fade-up">
<h3 class="title is-3 font-light">VUE 3</h3>
<p class="subtitle is-5 font-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, corporis.
</p>
</div>
<div class="column is-4 my-6 px-2" data-aos="fade-up">
<h3 class="title is-3 font-light">NUXT 3</h3>
<p class="subtitle is-5 font-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, at.
</p>
</div>
<div class="column is-4 my-6 px-2" data-aos="fade-up">
<h3 class="title is-3 font-light">HUGO</h3>
<p class="subtitle is-5 font-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sequi.
</p>
</div>
</div>
</section>
Portfolio
<!-- #portfolio is called to view when it is clicked at the navigation -->
<div id="portfolio" class="py-6"></div>
<section class="block py-6 custom-font">
<div class="column is-4 mx-auto">
<h2 class="title has-text-centered is-uppercase" data-aos="fade-down">
Portfolio
</h2>
<div class="title-underline"></div>
</div>
<div class="columns mx-0 is-multiline">
<div class="column is-10 columns mx-auto mt-6">
<figure class="image column is-4 mx-auto" data-aos="fade-up">
<img class="standard-radius" src="black-green.webp" alt="" />
<!-- Words that appear when mouse is hovered on the picture (clicked on mobile) -->
<span class="title font-light">What I did here</span>
</figure>
<figure
class="image column is-4 mx-auto"
data-aos="fade-down"
data-aos-delay="100"
>
<img class="standard-radius" src="blue-white.webp" alt="" />
<!-- Words that appear when mouse is hovered on the picture (clicked on mobile) -->
<span class="title font-light">I did something here</span>
</figure>
<figure
class="figure image column is-4 mx-auto"
data-aos="fade-up"
data-aos-delay="200"
>
<img class="standard-radius" src="pink-black.webp" alt="" />
<!-- Words that appear when mouse is hovered on the picture (clicked on mobile) -->
<span class="title font-light">And here</span>
</figure>
</div>
<div class="column is-10 columns mx-auto">
<figure
class="image column is-4 mx-auto"
data-aos="fade-down"
data-aos-delay="300"
>
<img class="standard-radius" src="red-t.webp" alt="" />
<!-- Words that appear when mouse is hovered on the picture (clicked on mobile) -->
<span class="title font-light">Not to forget here</span>
</figure>
<figure
class="image column is-4 mx-auto"
data-aos="fade-up"
data-aos-delay="400"
>
<img class="standard-radius" src="red-white.webp" alt="" />
<!-- Words that appear when mouse is hovered on the picture (clicked on mobile) -->
<span class="title font-light">Something here too</span>
</figure>
<figure
class="image column is-4 mx-auto"
data-aos="fade-down"
data-aos-delay="500"
>
<img class="standard-radius" src="yellow-white.webp" alt="" />
<!-- Words that appear when mouse is hovered on the picture (clicked on mobile) -->
<span class="title font-light">Oh yeah, here</span>
</figure>
</div>
</div>
</section>
Contact
<!-- #contact is called to view when it is clicked at the navigation -->
<div id="contact" class="py-6"></div>
<section class="hero is-light py-6 custom-font">
<div class="column my-3 is-4 mx-auto">
<h2 class="title has-text-centered is-uppercase" data-aos="fade-down">
Contact Me
</h2>
<div class="title-underline"></div>
</div>
<!-- To receive submissions, you can use third party services like
- https://formsubmit.io/ or
- https://formspree.io/
and add it into the action here -->
<form class="form" action="">
<div class="field">
<label class="label">Name</label>
<p class="control has-icons-left">
<input
class="input is-primary"
type="text"
placeholder="How may I call you?"
/>
<span
class="iconify icon is-small is-left p-1"
data-icon="fe:user"
></span>
</p>
</div>
<div class="field">
<label class="label">Email</label>
<p class="control has-icons-left">
<input
class="input is-primary"
type="email"
placeholder="your@email.com"
/>
<span
class="iconify icon is-small is-left p-1"
data-icon="fe:mail"
></span>
</p>
</div>
<div class="field">
<label class="label">Message</label>
<p class="control has-icons-left">
<textarea
class="textarea input is-primary"
placeholder="Type your message here"
></textarea
><span
class="iconify icon is-small is-left p-1"
data-icon="fe:pencil"
></span>
</p>
</div>
<button class="button is-primary is-outlined">Submit</button>
</form>
</section>
Footer
<footer class="footer late-gray-bg custom-font">
<div class="content has-text-centered">
<p class="font-light">
<strong class="has-text-primary">Bulma</strong> by
<a class="has-text-primary" href="https://jgthms.com">Jeremy Thomas</a>.
The source code is licensed
<a
class="has-text-primary"
href="http://opensource.org/licenses/mit-license.php"
>MIT</a
>. The website content is licensed
<a
class="has-text-primary"
href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
>CC BY NC SA 4.0</a
>.
</p>
</div>
<div class="content has-text-centered">
<p class="font-light subtitle">
Designed with ❤ by
<a class="has-text-primary" href="https://www.heksagon.net">Heksagon</a>
©
<span id="year"></span>
</p>
</div>
<div class="content has-text-centered">
<a href="https://bulma.io/">
<img
style="width: 200px"
src="https://bulma.io/images/made-with-bulma--dark.png"
alt=""
/>
</a>
</div>
</footer>
Scripts
Once you have added all those HTML and SCSS, you will find your website is almost complete. However, you may find that the icons are not appearing or if you change to mobile view, the nav-burger is not responding to your clicks.
If you want to make your website responsive to human interaction, a few lines of javascript code is needed.
Here are the codes that are placed just before the end of the body tag to make the magic happen:
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll('.navbar-burger'),
0,
)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target
const $target = document.getElementById(target)
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
// So that the year is always updated to the current year
document.getElementById('year').innerHTML = new Date().getFullYear()
</script>
<!-- Load Animate on Scroll javascript library. -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- Initializing Animate on Scroll -->
<script>
AOS.init()
</script>
<!-- Loading Iconify -->
<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
To have more choices regarding the type of animation, delay, sequence and other settings, do visit their website for the complete documentation here.
Deployment
Once your code is complete, the finished product should look something like this:
There are many ways to deploy a simple static site like this. For a free plan (no custom domain), its best to use the following:
- Github Pages: Just upload your repository on Github, go to settings, select the branch and you’re live.
- Netlify: Deploy from your Git repository
Both of the websites above can also give you a custom domain.
If you are more comfortable working with a CPanel-like interface, you can use the following services by Hostinger or Bluehost. Choose shared hosting with a custom domain to get the best value for money for a simple site like this. You can also turn it into a WordPress blog with just a few clicks.
Conclusion
How have you found this tutorial? I hope it is helpful for you when you are applying for your target job position. If you have any tutorial wishlist, please comment here, and I will do my best to look into it.
Thanks for reading, and stay safe.