Portfolio

GitHub Pages

We'll be using GitHub Pages to serve our static site. A quick reminder from the slides: a static site is when the server just serves pre-built content "as-is" so there's no customisation from the user requesting it for what content is received. It can be viewed as a server-less tech stack.

Creating your Repository

To follow these steps, you should have a GitHub account. If you don't have one, sign up for one at https://github.com/signup.

Create a new repository (green "New" button on homepage)
Go to the settings of the repository
Go to Pages (under the Code and Automation section)
Select "Deploy from a branch"
Configure it to be "main" and save

Testing Pages: basic HTML

Here's a basic HTML program to test your repository.


<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Ed's Portfolio</title>
        <meta charset="UTF-8">
    <body>
        <h1>Hello world</h1>
        <p>I'm alive!</p>
    </body>
</html>

Put this code inside of index.html, push the file to your repository, and go to the repository on GitHub. You should see the following:

If you click on the brown dot, you'll get information about your deployment to GH Pages. When it has fully processed, which you can see under "Deployments" on the right-hand side of the page, you can check out your site at:

YourGitHubName.github.io/YourRepositoryName

If it doesn't work, then you should double-check your pages configuration and, if you change something, do another edit and commit.

Congratulations! You've made the site.

Using Bootstrap

We'll use bootstrap to help style our site because doing it from scratch with raw HTML/CSS/JS would take a while (but is a good exercise for learning).

How does Bootstrap work?

Bootstrap is a front-end framework that provides prebuilt CSS styles and JavaScript behaviors. You add Bootstrap class names to regular HTML elements, and those elements get consistent, responsive styling.

A component is a reusable UI building block, such as a navbar, card, alert, button, or modal. We'll look at a couple examples of components in the coming code snippets - the main thing is that you can look at their documentation here: https://getbootstrap.com/docs/5.3/components

Importing Bootstrap using CDNs

Add the following inside your <head>:


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

Add this just before </body> so interactive components work:


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap Example:NavBar

Navbar code (put this into </body> to see what it does):


<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top">
    <div class="container">
        <a class="navbar-brand fw-semibold" href="#">Ed's Portfolio</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainNavbar">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/RexMortem" target="_blank" rel="noopener noreferrer">
                        <i class="bi bi-github me-1"></i>GitHub
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://www.linkedin.com/in/edward-denton-416a30240/" target="_blank" rel="noopener noreferrer">
                        <i class="bi bi-linkedin me-1"></i>LinkedIn
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="mailto:Edward.Denton@warwick.ac.uk">
                        <i class="bi bi-envelope-fill me-1"></i>Email
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

What this navbar does:

navbar-expand-lg shows a full horizontal menu on large screens and collapses it on smaller screens.
sticky-top keeps the navbar visible at the top while scrolling.
navbar-toggler is the mobile menu button.
data-bs-target="#mainNavbar" connects the button to the collapsible menu container.
ms-auto pushes nav links to the right side.
bi ... classes display Bootstrap Icons for GitHub, LinkedIn, and Email.
target="_blank" rel="noopener noreferrer" opens external links in a new tab safely.

Don't worry about all the exact details though - Bootstrap has quite a bit of boilerplate in it, which can be overwhelming for someone starting. Just start looking at examples in their documentation and tweaking them to see how changing one thing affects the output.

Make It Your Own

It's time to just go wild and make it your own! Look at the components page in Bootstrap's docs and feel free to add whatever you want.

If you want to do something super exciting, then you can also add js scripts to add some animation or further functionality! For the example site below, I've added some JavaScript to cycle the text.

If you want an example for what kind of things to add, I've made an example here: https://uwcs.github.io/PortfolioExample/

The code for the example site: https://github.com/UWCS/PortfolioExample

Going Further: React

Our site just uses bootstrap since that's enough for our small site - if you want to build something more substantial, our society has a React course which you can find here: https://readytoreact.net/