How to Build a Cybersecurity Portfolio From Zero (Free Tools Only, 2026)

Want to build a cybersecurity portfolio for FREE and have a live website you can actually put on your CV, LinkedIn, or job applications? In this video, I’ll show you how to create your own cybersecurity portfolio from scratch in around 15 minutes using free tools — even if you have little or no web development experience. ================================================== AI COMMAND: I want you to turn the cybersecurity profile below into a complete, modern, professional personal portfolio website that I can deploy for FREE using GitHub Pages. IMPORTANT: This must NOT look like a CV or resume website. The purpose of this portfolio is to give additional context and evidence beyond my CV. The CV tells recruiters what I have done; this portfolio should SHOW them what I have done. DESIGN: Create a visually impressive but professional cybersecurity-themed portfolio. Make it feel like a personal cybersecurity project hub, not a resume. Make PROJECTS the main focus of the website. Use a modern dark cybersecurity aesthetic with subtle animations, cards, terminal-style elements or other tasteful cybersecurity UI elements. Do not make it look childish, overly “hacker” or gimmicky. Make it clean enough that I could send it to a recruiter. Make it fully responsive for desktop, tablet and mobile. Use good typography, spacing and visual hierarchy. Add subtle hover effects and animations where appropriate. Do not use excessive animations that make the site distracting. CONTENT STRUCTURE: Create the website with these main sections: 1. HERO My name Short cybersecurity headline Short introduction Buttons linking to GitHub, LinkedIn and other relevant links 2. ABOUT Turn my information into a concise personal introduction. Do NOT simply copy my CV. Focus on my cybersecurity interests, what I enjoy working on and what I am currently building/learning. 3. PROJECTS This is the MOST IMPORTANT section. Create a separate project card for each project. When someone clicks a project, show a detailed project view. For EVERY project, clearly present: What was the project? Why did I build/do it? What was the objective? What tools/technologies did I use? What did I actually do? What skills did I develop? What was the outcome? What is the real-world relevance? Evidence Do NOT include huge blocks of technical code directly on the main project page. Instead, provide appropriate areas/buttons for: GitHub repository Screenshots Write-up Demo Technical documentation Where evidence is mentioned in my information but an actual URL is not provided, create a clearly labelled placeholder rather than inventing a URL. 4. CYBERSECURITY COMPETITIONS Create a separate section for CTFs, hackathons and competitions. For each competition, show: Competition name Result/placement What the competition involved Challenges/areas covered What I learned Evidence 5. PRACTICAL LEARNING Show my TryHackMe and other hands-on learning separately from certifications. Do NOT treat completed labs as certifications. Show: Number of labs/rooms completed Areas covered Relevant profile link Selected write-ups/evidence where available 6. CERTIFICATIONS Create a clean certification section. For each certification, show: Certification name Why I completed it Relevant areas covered Certificate link placeholder Do not make this section the main focus of the website. 7. ACHIEVEMENTS / COMMUNITY Create a section for meaningful achievements, volunteering, mentoring, talks, awards or community contributions. Focus on the actual accomplishment and impact rather than simply listing titles. 8. CONTACT Include GitHub, LinkedIn and email. TECHNICAL REQUIREMENTS: I want to deploy this using GitHub Pages. Create a simple static website using: HTML, CSS, JavaScript Do NOT use React, Next.js, Node.js, databases, backend services or anything that requires a server. I want the website to work simply by uploading the files to a GitHub repository and enabling GitHub Pages. Provide the project as these files: 1. index.html, 2. style.css, 3. script.js If you need images, do not rely on external images that may disappear. Use CSS, icons or clearly labelled image placeholders that I can replace later. Make sure all file references work correctly when the files are placed in the same GitHub repository. Before giving me the code, briefly explain the structure you are going to create. Then provide the COMPLETE code for all required files. After the code, give me SIMPLE step-by-step instructions for publishing the website using GitHub Pages, assuming I have never deployed a website before. Here is my cybersecurity profile: [PASTE YOUR NOTEPAD NOTES FOR YOUR PORTFOLIO HERE] =================================================== Chapters 00:00 Intro 01:07 Portfolio tips 03:45 Step 1: Gather your data 08:18 Step 2: AI prompt 10:55 Step 3: Hosting 12:48 LIVE! 15:08 Next steps