Not terrible. Room for improvement, but you've got the basics down.
Roast Score: 42/100
The Jury Exhibits A: A Case Study in Copy-Paste Archaeology
Ladies and gentlemen, I present to you: a portfolio that's 85% functional and 15% "I'll fix this later" energy. Let's walk through the crime scene.
The Typo Crimes
Line 113 — <span>HTM/L<span> — This isn't even a typo, this is a cry for help. You've got a malformed tag (should be </span>) AND you've somehow typoed "HTML" into "HTM/L" like you sneezed while typing. Claude Code would have caught this immediately — it flags unclosed tags and syntax errors in real-time before you even save. This is the equivalent of submitting a resume with "Proficent in Mircosoft Ofice."
Line 109 — " A website that show you how most the sorting of each algorithms happen visualy" — Grammar gremlins have invaded. "show" → "shows", "the sorting of each algorithms" → "each sorting algorithm", and "visualy" is not a word (visually). AI code reviewers catch these, but more importantly, Claude Code would suggest fixes as you type. You're handing someone a portfolio with typos in the description of your skills.
The Placeholder Parade
Line 80 — Company Name and University Name — Brother. You literally copied from a template and left the placeholder text in. This screams "I didn't proofread my own portfolio." Claude Code's AI would flag repeated generic strings and suggest you personalize them. It's like showing up to an interview wearing someone else's nametag.
Lines 101-108 — "Project Three" with links pointing to # instead of actual URLs. You know what's worse than having 3 projects? Pretending you have 3 projects. Either remove this or replace it with something real.
The Credibility Crater
Line 1 — You've credited "alex nguyer" for this template, which is good attribution practice. But then you've: - Changed the portfolio name to "Joseph Kabesha" - Put your actual GitHub and email in - Left "Company Name" as placeholder text
This mixed state suggests you either copy-pasted without a full pass-through, or you're actively using someone else's template structure. Not a technical issue, but it undermines your credibility as a developer who can build things. If you're using a template, that's fine — just own it fully or build your own.
What Actually Works
The structure is clean. Semantic HTML (nav, section, footer), proper alt text on images, decent accessibility with heading hierarchy. The layout is mobile-responsive-ready with flexbox classes. You've got social links, a CTA button, and a logical information flow. This isn't bad code — it's just unfinished code that got shipped.
The Verdict
You've got a solid foundation built on someone else's template, but you left breadcrumbs everywhere saying "I didn't finish this." The typos and placeholders are the real problem — they make you look careless, which contradicts "builds clean, efficient applications." Fix the three things above (typos, placeholders, generic project), and this jumps to a 25/100 because the actual structure is respectable. Right now you're losing points entirely on polish, not architecture.
TL;DR: Your portfolio's HTML is technically sound but emotionally neglected. Proofread before you ship.
<!-- I got this templates from alex nguyer and here his github repo https://github.com/Alex-Ng10 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joseph | Portfolio</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- NAV -->
<nav class="navbar">
<div class="nav-logo">joseph kabesha</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="hero" id="about">
<div class="hero-content">
<div class="hero-image-wrapper">
<img src="img/pic1.JPG" alt="Joseph Kabesha" class="hero-image">
</div>
<div class="hero-text">
<p class="hero-greeting">Hi, I'm</p>
<h1 class="hero-name">Joseph Kabesha</h1>
<h2 class="hero-title">Computer Science Student</h2>
<p class="hero-bio">
Passionate developer who loves building clean, efficient, and user-friendly applications.
Currently studying Computer Science and always looking for new challenges.
</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">Get In Touch</a>
<a href="img/Resume.pdf" class="btn btn-outline" target="_blank">
<i class="fas fa-download"></i> Resume
</a>
</div>
<div class="hero-socials">
<a href="https://github.com/Giltson1" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="mailto:josephkabesha@gmail.com"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</section>
<!-- EXPERIENCE -->
<section class="section" id="experience">
<h2 class="section-title">Experience</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Software Developer Intern</h3>
<span class="timeline-company">Company Name</span>
<span class="timeline-date">May 2024 – Aug 2024</span>
<ul>
<li>Built and maintained internal tools using React and Node.js</li>
<li>Collaborated with cross-functional teams in an Agile environment</li>
<li>Improved API response time by 30% through query optimization</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Teaching Assistant</h3>
<span class="timeline-company">University Name</span>
<span class="timeline-date">Sep 2023 – Apr 2024</span>
<ul>
<li>Assisted students in understanding data structures and algorithms</li>
<li>Graded assignments and provided detailed feedback</li>
</ul>
</div>
</div>
</div>
</section>
<!-- SKILLS -->
<section class="section section-alt" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills-grid">
<div class="skill-category">
<h3><i class="fas fa-code"></i> Languages</h3>
<div class="skill-tags">
<span>Python</span><span>JavaScript</span><span>Java</span>
<span>C/C++</span><span>SQL</span><span>HTML/CSS</span><span>Ruby</span>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-layer-group"></i> Frameworks</h3>
<div class="skill-tags">
<span>React</span><span>Node.js</span><span>Express</span>
<span>Flask</span><span>TailwindCSS</span>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-tools"></i> Tools</h3>
<div class="skill-tags">
<span>Git</span><span>Docker</span><span>VS Code</span>
<span>Figma</span><span>Postman</span>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-database"></i> Databases</h3>
<div class="skill-tags">
<span>MySQL</span><span>PostgreSQL</span><span>MongoDB</span>
</div>
</div>
</div>
</section>
<!-- PROJECTS -->
<section class="section" id="projects">
<h2 class="section-title">Projects</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-header">
<i class="fas fa-folder-open"></i>
<div class="project-links">
<a href="https://github.com/JAM-Group-Project/Rotten-Avocados" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://jam-group-project.github.io/Rotten-Avocados/#/movie/799882" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<h3>Rotten Avocados</h3>
<p>A website where the user can leave movie and tv show reviews.</p>
<div class="project-techs">
<span>React</span><span>Node.js</span><span>CSS</span>
</div>
</div>
<div class="project-card">
<div class="project-header">
<i class="fas fa-folder-open"></i>
<div class="project-links">
<a href="https://github.com/Giltson1/Sorting-Visualizer" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://giltson1.github.io/Sorting-Visualizer/" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<h3>Sorting Visualizer</h3>
<p> A website that show you how most the sorting of each algorithms happen visualy</p>
<div class="project-techs">
<span>Node.js</span><span>CSS</span><span>HTM/L<span>
</div>
</div>
<div class="project-card">
<div class="project-header">
<i class="fas fa-folder-open"></i>
<div class="project-links">
<a href="#" target="_blank"><i class="fab fa-github"></i></a>
<a href="#" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<h3>Project Three</h3>
<p>A mobile-first app built for convenience with clean UI and smooth UX.</p>
<div class="project-techs">
<span>JavaScript</span><span>CSS</span><span>Firebase</span>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="section section-alt" id="contact">
<h2 class="section-title">Contact</h2>
<div class="contact-wrapper">
<p class="contact-sub">I'm currently open to new opportunities. Feel free to reach out</p>
<a href="mailto:josephkabesha@gmail.com" class="btn btn-primary btn-large">
<i class="fas fa-paper-plane"></i> Contact Me
</a>
<div class="contact-links">
<a href="https://github.com/Giltson1" target="_blank"><i class="fab fa-github"></i> GitHub</a>
<a href="https://linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<p>Designed & Built by <strong>Alex Ng</strong> · 2026</p> </footer>
</body>
</html>