When I started building my personal cybersecurity portfolio, I had no coding background. None. What I did have was motivation, curiosity, and access to free tools — GitHub, Jekyll, and a powerful assistant named ChatGPT. That’s how stevenloucks.tech was born.

But it wasn’t easy. It still isn’t. This post is a breakdown of the tools I’ve been learning — Markdown, CSS, Liquid, and more — and the real journey of making it all work (and sometimes break) with a lot of help from AI.

Markdown (.md): My Starting Point

Markdown is a plain-text writing format that turns into HTML when the site is built. It’s how I write blog posts like this, document labs, and structure content for my GitHub Pages site.

It’s beginner-friendly, but that doesn’t mean I didn’t mess it up repeatedly. I’d forget headers, miss brackets on links, or leave off front matter — and wonder why the page wouldn’t render.

CSS (.css): Making It Not Look Like 1999

CSS handles all the styling — fonts, colors, banners, buttons, cards, shadows. If Markdown is the skeleton, CSS is the wardrobe and makeup.

I wanted a clean, modern look with bold visuals, so I:

  • Created section headers with angled mustard-orange banners
  • Styled lab projects as floating cards with hover effects
  • Customized buttons and fonts for a tech-forward aesthetic

Getting that styling to cooperate across browsers (or even devices) was way harder than I expected.

One of the most painful parts was chasing down broken things — especially image icons. Half the time it was something like:

  • I used .jpg instead of .png
  • A file was in the wrong folder
  • The file name had a capital letter, and GitHub is case-sensitive
  • The path worked locally but broke on GitHub Pages

I would spend hours trying to fix a badge icon that just wouldn’t show up, only to find I’d written SecurityPlus.JPG instead of securityplus.png.

What Else I Had to Learn (Still Learning…)

HTML

I didn’t plan to write HTML, but I had to. Jekyll mixes Markdown with embedded HTML. Now I can write a basic layout, link to sections, and even customize div structures.

YAML (.yml)

This one surprised me. YAML is used for structured data in Jekyll. I store my certifications and lab metadata in _data/certifications.yml, which lets me reuse content across the site.

Liquid

Liquid is Jekyll’s templating language — I still don’t fully understand it, but I’ve figured out how to loop through YAML files and conditionally render content like my lab cards and Credly badges.

Git and Branching

Branching and merging repositories is still a work in progress. I’ve created protected branches like stable-v1 and working-copy, and I’m learning to test changes without breaking my live site. It’s not always graceful, but I’m getting there.

AI Was My Secret Weapon

I built this site in partnership with AI (ChatGPT). Without it, I would’ve been lost. I asked questions like:

  • “Why isn’t my badge showing?”
  • “Write me a collapsible grid in HTML.”
  • “Make this blog look better.”

Sometimes I didn’t even know the right question — just pasted my broken code and asked for help. And every time, the response helped me move forward.

But let’s be honest: AI didn’t build the site for me. I still had to learn it. I still had to:

  • Rebuild sections I broke
  • Copy and paste code a hundred times
  • Manually fix filenames and file paths
  • Choose a theme, then customize it line-by-line

Using AI wasn’t a shortcut. It was a learning partner — and a lifeline during late nights of trial-and-error.

Still Not Done — But Proud of What’s Here

The truth is, my site still isn’t exactly how I want it. I’m still:

  • Tweaking the layout
  • Refining colors and fonts
  • Fixing things that look off on mobile
  • Reorganizing labs and blog sections

But I’m proud of how far it’s come. It started as a blank GitHub repo, and now it’s a working portfolio at stevenloucks.tech, with working links, real projects, custom styling, and growing content.

If You’re Just Starting Out

Here’s what I’ve learned:

  • Start with Markdown — it’s easy, and powerful.
  • Don’t fear CSS — small changes make big visual impacts.
  • You will break things — that’s normal.
  • Use AI smartly — it’s a teacher, not a crutch.
  • Track your progress — you’ll be amazed at how much you learn.

Thanks for reading. If you’re also trying to build a portfolio, feel free to reach out or follow along — I’m still figuring it out too.