a.k.a. monster

Your page

Let’s create your very own home/about/cv page.
There is a great starter kit from StartBoostrap here:

https://github.com/startbootstrap/startbootstrap-resume

You will need to download this file (or clone the repository locally if you already have git installed)
https://github.com/StartBootstrap/startbootstrap-resume/archive/refs/heads/master.zip

There is a lot of code included, but the only items we need for this tutorial are inside the dist folder.

Responsive Web

Back in 2010 browsing websites using phones and tablets started to be popular, so Responsive Web Design was born to as a need to have the same website displayed consistently for different screen sizes and orientations, instead of having different versions for different screen sizes (as a mobile.* domain/website)

Bootstrap is a popular framework that simplifies that, and you might probably have seen that style and icons around. Let’s open the live demo (below) and see what happens if you resize the browser size/orientation and/or if you open that site with a phone/tablet. Click the different menu/options of that page as well.

https://startbootstrap.github.io/startbootstrap-resume/

Having all information avaiable without needing to open a new page is what is known as Single Page Application (or similar). In this case there is only one file to use: index.html.

Bootstrap works this way: there is a navigation/menu area that uses the href attribute to display, inside the same page, a section of information like “skills”, “education” etc. Look for the “href=#*” attributes:

<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">
         <span class="d-block d-lg-none">Clarence Taylor</span>
          <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.jpg" alt="..." /></span>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#education">Education</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#awards">Awards</a>
            </li>
        </ul>
    </div>
</nav>

Then if you scroll down inside index.html there are sections with matching id, like this for interests:

<!-- Interests-->
<section class="resume-section" id="interests">
    <div class="resume-section-content">
        <h2 class="mb-5">Interests</h2>
        <p>
            Apart from being a web developer, I enjoy most of my time ...
        </p>
    </div>
</section>

Try to update that and other areas with your information.
You may also completely remove sections that don’t apply to your profile or page.
If you want to create a new section menu follow that pattern of adding a menu option with code like this

<li class="nav-item">
    <a class="nav-link js-scroll-trigger" href="#hobbies">Awards</a>
</li>
...
<section class="resume-section" id="hobbies">
    <div class="resume-section-content">
        <h2 class="mb-5">Hobbies</h2>
        <p>
            My hobbies are ...
        </p>
    </div>
</section>

Galleries

You can customize it even more by adding extra items like a gallery to your page.
As an example, a good extension for galleries is this one:

https://mdbootstrap.com/docs/standard/extended/gallery/

To use it you need to add this to the header, before the styles.css section:

<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css"
  rel="stylesheet"
/>
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />

Then add this at the end of the document, before the scripts.js section

<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>

Then create a menu pointing to a gallery and a section for it

<li class="nav-item">
    <a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
</li>
<li class="nav-item">
    <a class="nav-link js-scroll-trigger" href="#showcase">Gallery</a>
</li>

...

<!-- Showcase -->
<section class="resume-selection" id="showcase">
    <div class="resume-section-content">
        <h2 class="mb-5">Gallery</h2>
        <p>Sample photos</p>
    </div>

*** copy here any example from the MB gallery
*** https://mdbootstrap.com/docs/standard/extended/gallery/

</section>

Style

The hacker way to customize the page colors is to update the style.css file inside dist. For instance, the orange color can be updated to turquoise with the following change in the dist/style.css file:

before:

--bs-primary: #bd5d38;
--bs-primary-rgb: 189, 93, 56;

after:

--bs-primary: #0a9396;
--bs-primary-rgb: 10, 147, 150;

A more elegant way to update it is to use the original source files
For that we need to update the files and settings inside the scss folder then regenerate the dist folder with NodeJS.
That requires to install NodeJS and using Visual Studio Code or similar.

If you want to try that then you will need to change the scss/variables/_colors.scss with any desired color. You can browse the following site for palettes/color inspiration:
https://coolors.co/palettes/trending

This is what’s inside the file /src/scss/variables/_colors.scss. That is then compiled o transformed into common CSS/style in the dist folder

$gray-800: #343a40;
// Override Bootstrap color system
$orange: #bd5d38;
// Override Bootstrap default state colors
$primary: $orange;

To run that process you will need to run the following commands:

• npm i (only once)
• node scripts/build-scss.js (every time you make a color/style change)

Hosting

Once you are done updating your very own page, you can start thinking about hosting options.
There are couple free alternatives that are oriented to developers and others options more oriented to general public, couple of the latest options also give you a @domain email account. Will not cover that here as the list is long and sadly “it depends” might be the answer to which one to choose.
However, if you are in New Zealand, one local business you can support is moreweb, from Oamaru (south island)
I host one .nz domain and a email box there, great service/pricing (honest review, no sponsored link nor anything like that)
https://moreweb.nz/

Recap

At the end of this tutorial you may know how to create a simple responsive page, how to edit different types of contents, how to change a bit the style and how to add extra items like a gallery.
While there are couple tools/services that can do the same with fancy graphic interfaces at the end of the day both generate more or less the same type of archives, so is always best to understand a bit the language of what’s behind that magic, as sometimes you may need to change or fix particular website details.
So congratulations on getting this far, I hope that this approach from general into details may be helpful and fun for you.