IT Labs Portfolio · GitHub Pages
LAB-004

Building a Technical IT
Portfolio with GitHub Pages

A fully documented build of a live professional IT portfolio from scratch — using HTML, CSS, and GitHub Pages to create a dark sci-fi themed site that showcases hands-on labs, cybersecurity competitions, certifications, and technical documentation. Every design decision, technical challenge, and lesson learned is captured here.

Status In Progress
Category Web Development / Documentation
Platform GitHub Pages
Live Site tezana.github.io
Started April 2026
// Overview

Lab Details

Objective
  • Build a professional IT portfolio from scratch
  • Host a live site using GitHub Pages and free and public
  • Document all labs, projects, and certifications
  • Use HTML and CSS to create a custom dark design
  • Practice version control using GitHub directly in the browser
  • Demonstrate technical writing and documentation skills
  • Create a resource that grows with every new lab completed
Tools Used
  • GitHub Pages — free static site hosting
  • HTML5 — page structure and content
  • CSS3 — styling, layout, animations
  • GitHub Browser Editor — in-browser code editing
  • Google Fonts — Exo 2 and JetBrains Mono
  • Claude AI — design assistance and code generation
  • TextEdit (Mac) — file editing and pasting
  • YouTube — video hosting for lab walkthroughs
  • Meta Glasses — first-person POV lab recording
Skills Demonstrated
  • HTML and CSS authoring
  • GitHub repository management
  • Version control and file commits
  • Technical documentation and writing
  • Web publishing and deployment
  • Asset management — images, videos, files
  • Responsive web design
  • AI-assisted development workflow
  • Problem solving and debugging
// What Was Built

Portfolio Structure

Site Overview — tezana.github.io

A single-repository GitHub Pages site with a custom dark sci-fi command center design. All CSS and JavaScript is inline — no separate stylesheets or external frameworks. The site loads fast, works on mobile, and is fully maintained through the GitHub browser editor.

FilePurpose
index.htmlMain portfolio page — hero, about, labs, CTF, skills, certifications, contact
lab-001.htmlLAB-001 — Disassemble a Desktop Computer — full write-up and 6 Meta glasses videos
lab-002.htmlLAB-002 — Setting Up a Virtual Lab — VMware, Ubuntu, Windows VM build documentation
lab-003.htmlLAB-003 — Security Pro: Strengthen Security Foundations — Microsoft AI Skills Fest
lab-004.htmlLAB-004 — This page — building the portfolio itself
dod-cyber-sentinel.htmlCTF-001 — DoD Cyber Sentinel Challenge 2025 — full competition write-up
assets/images/All lab photos, badges, and profile image
assets/videos/Hero background video

Design System

The site uses a custom dark sci-fi command center aesthetic built entirely with CSS custom properties. The design is consistent across all pages, and every lab page, project page, and the main portfolio page share the same color palette, typography, and component styles.

  • Color palette — 12 custom CSS variables ranging from deep void black to white fog, plus transparency overlays
  • Typography — Exo 2 for headings and UI elements, JetBrains Mono for body text and code — both from Google Fonts
  • Grid dot background — CSS radial gradient pattern giving the sci-fi command center feel
  • Reveal animations — IntersectionObserver API triggers fade-in animations as sections scroll into view
  • Responsive layout — CSS Grid with breakpoints for mobile, tablet, and desktop
  • Status badges — color-coded inline labels: white for Completed, silver for In Progress, dim for Planned
// Build Process

How It Was Built

Phase 1 — Setting Up GitHub Pages

  • STEP 01Created a new GitHub repository named exactly tezana.github.io — GitHub Pages requires this naming format to publish automatically
  • STEP 02Enabled GitHub Pages in repository Settings — set source branch to main
  • STEP 03Created the first index.html file using the GitHub browser editor
  • STEP 04Committed the file and confirmed the site was live at tezana.github.io within 2 minutes

Phase 2 — Building the Main Portfolio Page

  • STEP 01Designed the dark sci-fi color palette using CSS custom properties for consistent theming across all pages
  • STEP 02Built the hero section with a video background, profile photo, typewriter effect, and animated grid dots
  • STEP 03Built the navigation — fixed top bar with hamburger dropdown menu linking to all sections
  • STEP 04Created the Labs section with clickable card grid — each card links to a dedicated lab page
  • STEP 05Built the CTF Competition section replacing a generic Projects section
  • STEP 06Built the Skills section with grouped skill tags across IT Support, Networking, Cybersecurity, Cloud, and Tools
  • STEP 07Built the Certifications section with status-coded cards for each completed and in-progress credential
  • STEP 08Added the How I Document My Labs section and Contact section

Phase 3 — Building Individual Lab Pages

  • STEP 01Built lab-001.html — PC Hardware Disassembly lab using the Per Scholas lab PDF as the write-up source. Added 6 YouTube Shorts embedded in a 3-column grid — recorded with Meta glasses during the live lab
  • STEP 02Built lab-002.html — Virtual Lab Setup documenting the HP EliteDesk build, VMware installation, Ubuntu and Windows VM configuration, and folder structure
  • STEP 03Built lab-003.html — Microsoft AI Skills Fest Security Pro lab with 7 screenshots, two full case study write-ups, and lessons learned
  • STEP 04Built dod-cyber-sentinel.html — DoD CTF competition full write-up with challenge breakdown table, tools used, score cards, and participant badge

Phase 4 — Asset Management and Uploads

  • STEP 01Created assets/images/ folder structure in the repository for all photos and badges
  • STEP 02Uploaded profile photo, DoD badge, Microsoft AI Skills Fest badge, and all lab screenshots
  • STEP 03Uploaded hero background video to assets/videos/
  • STEP 04Hosted all lab walkthrough videos on YouTube as Unlisted — embedded via iframe on lab pages
  • STEP 05Established a naming convention for all assets — lab001-01.jpg, lab003-01.png etc. — for consistency

Phase 5 — Ongoing Updates and Refinements

  • STEP 01Updated certifications as they were completed — merged CompTIA A+ Core 1 and Core 2 into a single Completed card, added CompTIA Security+ as In Progress
  • STEP 02Added OSHA 10-Hour General Industry Certification and Microsoft AI Skills Fest Security Pro to certifications
  • STEP 03Reorganized sections — removed planned labs and projects to keep the page focused on completed work
  • STEP 04Replaced the Projects section with a dedicated Capture the Flag Competition section
  • STEP 05Updated the Who I Am section to clearly communicate the IT Support and AI Enablement career focus
  • STEP 06Fixed card formatting inconsistencies — standardized all lab and CTF cards to match the same structure
// Troubleshooting

Issues Encountered & Fixed

Technical Challenges and How They Were Resolved

IssueRoot CauseFix
Profile photo not showing Browser cache serving old version of the page Hard refresh with Cmd+Shift+R — cleared on its own
Lab videos too large to upload to GitHub GitHub has a 100MB file size limit per file Uploaded videos to YouTube as Unlisted — embedded via iframe
Video players too large on lab page YouTube Shorts are portrait format — full width made them huge Switched to 3-column CSS Grid layout for compact display
Lab photos not showing on live site Image files named with .jpg but uploaded as .png Updated all image references in lab-003.html from .jpg to .png
Accidental repository created Created a separate repo instead of adding file to main repo Deleted via GitHub Settings → Danger Zone → Delete repository
Page content corrupted after paste Partial paste in GitHub editor replaced only part of the file Used Cmd+A to select all before deleting and pasting fresh content
LinkedIn badge broken link Placeholder username not updated in href Searched for yourusername in index.html and replaced with real URL
// Takeaways

Lessons Learned

LESSON 01
A portfolio is never finished — it grows with you. Every lab completed, every cert earned, and every project built adds a new page. The portfolio is a living document that reflects your current skill level at any point in time.
LESSON 02
GitHub is not just for developers. Using GitHub Pages as a free hosting platform and the browser editor for file management proved that version control and web publishing are IT skills, not just developer skills.
LESSON 03
Documentation is the most important deliverable. Any lab without documentation is just practice. A lab with full documentation — write-up, photos, lessons learned — becomes portfolio evidence that a recruiter can actually review.
LESSON 04
One repository, one site — keep it simple. Everything lives in tezana.github.io. No separate repos for individual labs. This keeps navigation clean, URLs simple, and maintenance manageable.
LESSON 05
Consistency builds credibility. When every lab page follows the same structure — objective, tools, write-up, photos, lessons learned — the portfolio looks intentional and professional rather than pieced together.
LESSON 06
AI tools are part of the modern IT workflow. Using Claude to assist with code generation, design decisions, and documentation is itself a demonstration of AI Enablement skills — exactly the career path this portfolio represents.
// Continuing

What Gets Added Next

Portfolio Roadmap

  • LAB-005 — First Linux Commands in Ubuntu VM — once Ubuntu-Lab-01 is fully configured
  • LAB-006 — Nmap Network Scan inside the virtual lab environment
  • Education & Training section — formal degrees and professional development training
  • CompTIA Security+ certification card updated to Completed when exam is passed
  • New labs and projects added as they are completed throughout 2026
  • LinkedIn profile link and contact information kept current
← Lab 003: Security Pro All Labs