| name | carnemuerta-security-portfolio |
| description | Browser-based security portfolio and technical blog covering AI security, data protection, ML threats, and secure engineering practices |
| triggers | ["set up the 0xcarnemuerta security portfolio locally","how do I serve the security portfolio website","customize the carnemuerta portfolio content","deploy the security hub to GitHub Pages","modify the AI security blog posts","add new content to the security portfolio","configure the 0xcarnemuerta site navigation","troubleshoot the security portfolio website"] |
0xcarnemuerta Security Portfolio Skill
Skill by ara.so — Security Skills collection.
What This Project Does
0xcarnemuerta Security Portfolio is a static HTML-based security portfolio and technical blog focused on AI security, data protection, machine-learning threats, and secure engineering. It serves as a browser-accessible showcase for security research and engineering work, covering topics like prompt injection, token authentication, ML threat surfaces, and secure data pipelines.
The project is designed to be served as a static website, either locally for development or via GitHub Pages for public access.
Installation
Clone the repository to your local machine:
git clone https://github.com/reedjordanvrb4237/0xcarnemuerta-security-hub.git
cd 0xcarnemuerta-security-hub
No additional dependencies or package installations are required since this is a pure HTML/CSS/JS project.
Serving the Portfolio Locally
Using Python 3 (Built-in HTTP Server)
The simplest approach for local development:
python3 -m http.server 8000
python3 -m http.server 3000
Then navigate to http://localhost:8000/ in your browser.
Using Node.js http-server
If you have Node.js installed:
npm install -g http-server
http-server -p 8000
http-server -p 8000 -c-1
Using PHP Built-in Server
php -S localhost:8000
Using Live Server (VS Code Extension)
- Install the "Live Server" extension in VS Code
- Right-click on
index.html
- Select "Open with Live Server"
Project Structure
Typical static portfolio structure:
0xcarnemuerta-security-hub/
├── index.html # Main landing page
├── about.html # About/bio page
├── portfolio.html # Portfolio showcase
├── blog.html # Blog listing page
├── posts/ # Individual blog posts
│ ├── ai-security.html
│ ├── prompt-injection.html
│ └── token-auth.html
├── assets/
│ ├── css/
│ │ └── styles.css
│ ├── js/
│ │ └── main.js
│ └── images/
└── LICENSE
Customizing Content
Modifying the Main Page
Edit index.html to update portfolio introduction:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0xcarnemuerta Security Portfolio</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href=>Blog
About
0xcarnemuerta Security Portfolio
AI Security, Data Protection, and Secure Engineering
Featured Projects
Adding a New Blog Post
Create a new HTML file in the posts/ directory:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ML Threat Modeling - 0xcarnemuerta</title>
<link rel="stylesheet" href="../assets/css/styles.css">
</head>
<body>
<header>
<nav>
<a href="../index.html">← Back to Home</a>
</nav>
</header>
<article>
<h1>Machine Learning Threat Modeling</h1>
<time datetime="2026-08-03">August 3, 2026</time>
<>
Introduction
Understanding threat surfaces in ML systems...
Common Attack Vectors
Data poisoning
Model extraction
Adversarial examples
Prompt injection
Mitigation Strategies
# Example: Input validation for ML endpoints
def validate_input(user_input: str) -> bool:
# Check for prompt injection patterns
injection_patterns = [
"ignore previous instructions",
"disregard all above",
"new instructions:"
]
return not any(pattern in user_input.lower()
for pattern in injection_patterns)
Updating Navigation
To add the new post to your blog listing (blog.html):
<section class="blog-posts">
<article class="post-preview">
<h3><a href="posts/ml-threat-modeling.html">ML Threat Modeling</a></h3>
<time datetime="2026-08-03">August 3, 2026</time>
<p>Understanding threat surfaces in machine learning systems...</p>
</article>
<article class="post-preview">
<h3><a href="posts/prompt-injection.html">Prompt Injection Attacks</a></h3>
<time datetime="2026-07-30">July 30, 2026</time>
<p>Exploring security risks in LLM-powered applications...</p>
</article>
</section>
Styling and Assets
Custom CSS Example
Create or modify assets/css/styles.css:
:root {
--primary-color: #0a0e27;
--accent-color: #00ff41;
--text-color: #e0e0e0;
--background: #0d1117;
}
body {
font-family: 'Courier New', monospace;
background-color: var(--background);
color: var(--text-color);
margin: 0;
padding: 0;
line-height: 1.6;
}
header nav {
background: var(--primary-color);
padding: 1rem;
}
header nav ul {
list-style: none;
display: flex;
gap: 2rem;
margin: 0;
padding: 0;
}
header nav a {
color: var(--accent-color);
text-decoration: none;
transition: opacity 0.3s;
}
header nav a:hover {
opacity: ;
}
{
: center;
: ;
: solid (--accent-color);
}
pre {
: block;
: (--primary-color);
: ;
: auto;
: solid (--accent-color);
}
JavaScript Enhancements
Add interactive features in assets/js/main.js:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
document.addEventListener('DOMContentLoaded', function() {
if (typeof hljs !== 'undefined') {
hljs.highlightAll();
}
});
const toggleDarkMode = () => {
document.body.classList.toggle('light-mode');
localStorage.setItem('theme',
...() ? :
);
};
(.() === ) {
...();
}
Deploying to GitHub Pages
Enable GitHub Pages
- Push your repository to GitHub
- Go to repository Settings → Pages
- Select source branch (usually
main or gh-pages)
- Select folder (
/root or /docs)
- Save
Your site will be available at:
https://reedjordanvrb4237.github.io/0xcarnemuerta-security-hub/
Custom Domain Setup
If you have a custom domain:
- Create a
CNAME file in your repository root:
echo "security.yourdomain.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push
- Configure DNS with your domain provider:
- Add a CNAME record pointing to
reedjordanvrb4237.github.io
- Or add A records pointing to GitHub Pages IPs
Common Patterns
Security-Focused Content Structure
Organize security research posts with consistent structure:
<article class="security-post">
<header>
<h1>Threat Name</h1>
<div class="metadata">
<span class="severity high">High Severity</span>
<span class="category">AI Security</span>
<time datetime="2026-08-03">August 3, 2026</time>
</div>
</header>
<section class="threat-overview">
<h2>Overview</h2>
</section>
<section class="attack-vectors">
<h2>Attack Vectors</h2>
</section>
<section =>
Proof of Concept
Mitigations
References
Portfolio Project Card
<div class="portfolio-card">
<h3>Secure ML Pipeline</h3>
<div class="tags">
<span class="tag">Python</span>
<span class="tag">MLOps</span>
<span class="tag">Security</span>
</div>
<p>End-to-end secure machine learning pipeline with data validation,
model authentication, and audit logging.</p>
<div class="links">
<a href="https://github.com/yourusername/project" target="_blank">
View on GitHub
</a>
<a href="posts/ml-pipeline-security.html">Read More</a>
</div>
</div>
Troubleshooting
Site Not Loading Locally
Problem: Opening index.html directly shows broken styles/scripts
Solution: Always use a web server, not file:// protocol:
python3 -m http.server 8000
Relative Path Issues
Problem: Navigation breaks when viewing different pages
Solution: Use relative paths consistently:
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="../assets/css/styles.css">
<link rel="stylesheet" href="/assets/css/styles.css">
GitHub Pages 404 on Refresh
Problem: Refreshing sub-pages returns 404
Solution: Add a custom 404.html that redirects:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=/0xcarnemuerta-security-hub/">
</head>
<body>
<p>Redirecting...</p>
</body>
</html>
Images Not Displaying
Problem: Images don't load after deployment
Solution: Check paths are correct for GitHub Pages subdirectory:
<img src="assets/images/diagram.png" alt="Architecture">
<img src="/0xcarnemuerta-security-hub/assets/images/diagram.png" alt="Architecture">
CSS Not Updating
Problem: Changes to CSS not reflected in browser
Solution: Clear cache or use cache-busting:
<link rel="stylesheet" href="assets/css/styles.css?v=2">
Or serve with proper headers during development:
python3 -m http.server 8000 --bind 127.0.0.1
Best Practices
- Keep HTML semantic: Use proper heading hierarchy and semantic elements
- Optimize images: Compress images before committing to reduce repository size
- Mobile-first design: Ensure responsive design for all device sizes
- Accessibility: Include alt text, ARIA labels, and proper contrast ratios
- Version assets: Use query strings or versioned filenames for CSS/JS to bust cache
- Validate HTML: Use W3C validator to catch markup errors
- Security headers: If self-hosting, configure appropriate security headers
- Regular updates: Keep content current and remove outdated security information
