Creating a personal portfolio website is a great way to showcase your work and skills. Using Jekyll, a static site generator, combined with HTML5, you can build a simple, fast, and customizable portfolio. This guide will walk you through the basic steps to get started.

What is Jekyll?

Jekyll is an open-source static site generator that transforms plain text into static websites and blogs. It is built in Ruby and integrates seamlessly with GitHub Pages, making deployment easy and free. Jekyll uses templates and Markdown to simplify website creation.

Setting Up Your Jekyll Portfolio

To start, you need to install Jekyll on your computer. Ensure you have Ruby and RubyGems installed, then run:

gem install jekyll bundler

Create a new Jekyll site with:

jekyll new my-portfolio

Navigate into your project folder:

cd my-portfolio

Build and serve the site locally:

bundle exec jekyll serve

Designing Your Portfolio with HTML5

HTML5 provides semantic tags that make your website more accessible and easier to maintain. Use tags like <header>, <section>, <article>, and <footer> to structure your content.

Basic HTML5 Structure

Here's a simple example of a portfolio homepage using HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
</head>
<body>
  <header>
    <h1>Welcome to My Portfolio</h1>
  </header>
  <section>
    <h2>About Me</h2>
    <p>Brief introduction and background.</p>
  </section>
  <section>
    <h2>My Work</h2>
    <article>
      <h3>Project Title</h3>
      <p>Description of the project.</p>
    </article>
  </section>
  <footer>
    <p>Contact information or links.</p>
  </footer>
</body>
</html>

Adding Content and Styling

You can add images, links, and customize your layout with CSS. Place your CSS in a separate stylesheet or within <style> tags inside the <head> section.

Example CSS snippet:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
header, footer {
  background-color: #f4f4f4;
  padding: 20px;
}
section {
  padding: 20px;
}

Deploying Your Portfolio

Once your site is ready, you can deploy it using GitHub Pages or another hosting service. Push your code to a GitHub repository and enable GitHub Pages in the repository settings. Your portfolio will be live in minutes.

Building a static portfolio with Jekyll and HTML5 is a rewarding project that enhances your web development skills. Keep experimenting with layouts, styles, and content to create a unique showcase of your work.