DataHarvest Portfolio Workshop Template

Welcome!

This repository is a starter template for the workshop:

“Showcase your work online: Build a portfolio with GitHub Pages”

The goal of this template is to help you quickly build and publish a simple personal portfolio website using HTML, CSS, a small amount of JavaScript, and GitHub Pages — no prior web development experience required.

By the end of the workshop, you will have your own live portfolio website that you can continue to edit, expand, and use for job applications, story pitches, and showcasing your work.

---

A few words about the important folders and files:

• CSS: includes 3 files, and each file controls:
  • layout.css: page structure and positioning
  • utilities.css: buttons, icons, navigation, small effects
  • typography.css: fonts and text styling

---

• JS: includes one JavaScript file called:
  • script.js: adds small interactive behavior to the website (for example smooth scrolling when clicking navigation links). You don’t need to fully understand it for this workshop — just know it helps make the site feel more dynamic.

---

• Images: contains all visual assets used in the portfolio:
  • project images (you can replace these with your own work, right now it's just a generic placeholder image)
  • icons (svg files for email, GitHub, arrows used in buttons)

---

• index.html: this is the structure of your website
  This is where you will:
  1. add your name and bio
  2. replace placeholder text
  3. insert your own project links
  4. customize your portfolio content

CSS controls how it looks, JavaScript adds small interactions, but HTML is where everything starts.

---

A small note about images

The images included here are placeholders. You can:

• delete them
• replace them with your own
• or leave them as temporary visuals during the workshop
  Just make sure that if you change an image, the filename matches what is written in index.html.

---

Publishing your site

This repository uses GitHub Pages to turn your GitHub repository into a live website.

To make your portfolio live, name your repository:

yourusername.github.io

Then go to Settings → Pages, and select the main branch as the source.

After a few minutes, GitHub will automatically publish your site.

Your portfolio will then be live at: https://yourusername.github.io

---

Finding your website URL

Just a quick note: in your repository, you will see a Settings button next to About.

If you click on you will see a choice to "Use your GitHub Pages website", and there you will find the link to your live portfolio website.

This is the URL where your site is published.

---

This is a GitHub repository, which means any changes you make (editing files, updating text, adding images) will automatically update your live website after a short delay.

---

What this repository is

This is a GitHub repository, which means:

• It stores all the files for your website in one place
• Any changes you make (text, images, code) will automatically update your live site after being pushed
• It acts as both your project folder and your publishing system via GitHub Pages

---

Final note

This template is just a starting point.

You are encouraged to:

• change it
• break it
• rebuild it
• and make it your own

The goal is not to create a perfect website while following the workshop, but to understand how websites are structured and to leave with something you can continue developing.

---

🎉 End of Workshop

Well done! You’ve built and published your first portfolio website!

From here, this is yours to grow. Add your work, refine your design, experiment with structure, and keep updating it as your projects evolve.

You can download the workshop's presentation here.

Thank you for taking part in the workshop!