Imported from reason-machines/security-skills (skills/carnemuerta-security-portfolio/SKILL.md). Install upstream with npx skills add reason-machines/security-skills --skill carnemuerta-security-portfolio. Copyright stays with the author.

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:

# Serve on default port 8000
python3 -m http.server 8000

# Serve on a custom port
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:

# Install http-server globally (one-time)
npm install -g http-server

# Serve the current directory
http-server -p 8000

# With auto-reload on file changes
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.html">Blog</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="hero">
            <h1>0xcarnemuerta Security Portfolio</h1>
            <p>AI Security, Data Protection, and Secure Engineering</p>
        </section>
        
        <section class="featured-work">
            <h2>Featured Projects</h2>
            <!-- Add your security projects here -->
        </section>
    </main>
    
    <script src="assets/js/main.js"></script>
</body>
</html>

Adding a New Blog Post

Create a new HTML file in the posts/ directory:

<!-- posts/ml-threat-modeling.html -->
<!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>
        
        <section>
            <h2>Introduction</h2>
            <p>Understanding threat surfaces in ML systems...</p>
        </section>
        
        <section>
            <h2>Common Attack Vectors</h2>
            <ul>
                <li>Data poisoning</li>
                <li>Model extraction</li>
                <li>Adversarial examples</li>
                <li>Prompt injection</li>
            </ul>
        </section>
        
        <section>
            <h2>Mitigation Strategies</h2>
            <pre><code class="language-python">
# 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)
            </code></pre>
        </section>
    </article>
    
    <script src="../assets/js/main.js"></script>
</body>
</html>

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: 0.7;
}

.hero {
    text-align: center;
    padding: 4rem 2rem;
    border-bottom: 2px solid var(--accent-color);
}

pre code {
    display: block;
    background: var(--primary-color);
    padding: 1rem;
    overflow-x: auto;
    border-left: 3px solid var(--accent-color);
}

JavaScript Enhancements

Add interactive features in assets/js/main.js:

// Smooth scrolling for anchor links
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'
            });
        }
    });
});

// Code syntax highlighting (if using a library)
document.addEventListener('DOMContentLoaded', function() {
    // Initialize syntax highlighting
    if (typeof hljs !== 'undefined') {
        hljs.highlightAll();
    }
});

// Dark mode toggle
const toggleDarkMode = () => {
    document.body.classList.toggle('light-mode');
    localStorage.setItem('theme', 
        document.body.classList.contains('light-mode') ? 'light' : 'dark'
    );
};

// Restore theme preference
if (localStorage.getItem('theme') === 'light') {
    document.body.classList.add('light-mode');
}

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>
        <!-- Threat description -->
    </section>
    
    <section class="attack-vectors">
        <h2>Attack Vectors</h2>
        <!-- How the attack works -->
    </section>
    
    <section class="code-examples">
        <h2>Proof of Concept</h2>
        <pre><code><!-- Demonstration code --></code></pre>
    </section>
    
    <section class="mitigations">
        <h2>Mitigations</h2>
        <!-- Defense strategies -->
    </section>
    
    <section class="references">
        <h2>References</h2>
        <!-- Links to research, CVEs, etc. -->
    </section>
</article>

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:

# Don't: file:///path/to/index.html
# Do:
python3 -m http.server 8000
# Then visit http://localhost:8000

Relative Path Issues

Problem: Navigation breaks when viewing different pages

Solution: Use relative paths consistently:

<!-- In index.html -->
<link rel="stylesheet" href="assets/css/styles.css">

<!-- In posts/article.html -->
<link rel="stylesheet" href="../assets/css/styles.css">

<!-- Or use absolute paths from root -->
<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:

<!-- 404.html -->
<!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:

<!-- Use relative paths -->
<img src="assets/images/diagram.png" alt="Architecture">

<!-- Or repository-relative -->
<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
# Then hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)

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

carnemuerta-security-portfolio

About