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

0xcarnemuerta Security Hub Portfolio

Skill by ara.so — Security Skills collection.

Overview

The 0xcarnemuerta Security Hub is a static HTML/CSS/JavaScript portfolio website focused on security research, data protection, AI/ML security threats, and secure engineering practices. It serves as both a personal portfolio and a technical blog platform for sharing security insights, particularly around prompt injection, token authentication, and AI-specific attack surfaces.

This is a web-based project with no backend dependencies—just static files served through a web server or GitHub Pages.

Installation

Clone the repository and navigate to the project directory:

git clone https://github.com/reedjordanvrb4237/0xcarnemuerta-security-hub.git
cd 0xcarnemuerta-security-hub

Local Development

Serving the Site Locally

Use Python's built-in HTTP server (most common):

python3 -m http.server 8000

Then open http://localhost:8000/ in your browser.

Alternative with Node.js http-server:

npx http-server -p 8000

Alternative with PHP:

php -S localhost:8000

Directory Structure

0xcarnemuerta-security-hub/
├── index.html              # Main landing page
├── portfolio/              # Portfolio projects
├── blog/                   # Technical blog posts
├── assets/                 # Images, CSS, JS
│   ├── css/
│   ├── js/
│   └── images/
├── LICENSE
└── README.md

Key Usage Patterns

Adding a New Blog Post

Create a new HTML file in the blog/ directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt Injection Vulnerabilities in LLM Applications - 0xcarnemuerta</title>
    <link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
    <header>
        <nav>
            <a href="../index.html">Home</a>
            <a href="../portfolio/">Portfolio</a>
            <a href="../blog/">Blog</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h1>Prompt Injection Vulnerabilities in LLM Applications</h1>
            <time datetime="2026-08-03">August 3, 2026</time>
            
            <section>
                <h2>Introduction</h2>
                <p>Prompt injection represents a critical security concern...</p>
            </section>
            
            <section>
                <h2>Attack Vectors</h2>
                <pre><code class="language-python">
# Example vulnerable code
user_input = request.form['query']
prompt = f"Translate the following to Spanish: {user_input}"
response = llm.complete(prompt)
                </code></pre>
            </section>
            
            <section>
                <h2>Mitigation Strategies</h2>
                <ul>
                    <li>Input sanitization and validation</li>
                    <li>Prompt templates with strict boundaries</li>
                    <li>Output filtering and monitoring</li>
                </ul>
            </section>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2026 0xcarnemuerta Security Hub</p>
    </footer>
    
    <script src="../assets/js/main.js"></script>
</body>
</html>

Adding a Portfolio Project

Create a portfolio entry showcasing security work:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure ML Pipeline - 0xcarnemuerta Portfolio</title>
    <link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
    <header>
        <nav>
            <a href="../index.html">Home</a>
            <a href="../portfolio/">Portfolio</a>
            <a href="../blog/">Blog</a>
        </nav>
    </header>
    
    <main>
        <div class="portfolio-item">
            <h1>Secure ML Pipeline Architecture</h1>
            
            <div class="project-meta">
                <span class="tech-stack">Python | TensorFlow | Kubernetes</span>
                <span class="date">2026</span>
            </div>
            
            <section class="project-overview">
                <h2>Overview</h2>
                <p>End-to-end secure machine learning pipeline implementing data validation, 
                model versioning, and inference monitoring...</p>
            </section>
            
            <section class="technical-details">
                <h2>Security Features</h2>
                <ul>
                    <li>Encrypted data storage and transmission</li>
                    <li>Model signature verification</li>
                    <li>Access control with JWT tokens</li>
                    <li>Audit logging for all predictions</li>
                </ul>
            </section>
            
            <section class="code-sample">
                <h2>Implementation</h2>
                <pre><code class="language-python">
import os
from cryptography.fernet import Fernet

class SecureModelLoader:
    def __init__(self):
        self.encryption_key = os.getenv('MODEL_ENCRYPTION_KEY')
        self.cipher = Fernet(self.encryption_key.encode())
    
    def load_model(self, model_path, signature):
        """Load and verify encrypted model"""
        with open(model_path, 'rb') as f:
            encrypted_data = f.read()
        
        # Verify signature before decryption
        if not self.verify_signature(encrypted_data, signature):
            raise SecurityError("Model signature verification failed")
        
        decrypted_model = self.cipher.decrypt(encrypted_data)
        return pickle.loads(decrypted_model)
                </code></pre>
            </section>
            
            <div class="project-links">
                <a href="https://github.com/reedjordanvrb4237/secure-ml-pipeline" 
                   class="btn">View on GitHub</a>
            </div>
        </div>
    </main>
</body>
</html>

Customizing Styling

Edit assets/css/style.css to modify the site appearance:

/* Security-focused dark theme example */
:root {
    --primary-bg: #0d1117;
    --secondary-bg: #161b22;
    --accent-color: #58a6ff;
    --danger-color: #f85149;
    --success-color: #3fb950;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
}

body {
    background-color: var(--primary-bg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--secondary-bg);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--accent-color);
}

nav a {
    color: var(--text-primary);
    text-decoration: none;
    margin-right: 2rem;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--accent-color);
}

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

.vulnerability {
    border-left: 3px solid var(--danger-color);
    padding-left: 1rem;
    margin: 1rem 0;
}

.mitigation {
    border-left: 3px solid var(--success-color);
    padding-left: 1rem;
    margin: 1rem 0;
}

Configuration

GitHub Pages Deployment

Go to repository Settings → Pages
Set Source to "Deploy from a branch"
Select branch: main, folder: / (root)
Save and wait for deployment

The site will be available at: https://reedjordanvrb4237.github.io/0xcarnemuerta-security-hub/

Custom Domain (Optional)

Add a CNAME file to the repository root:

security.yourdomain.com

Then configure your DNS provider:

Type: CNAME
Host: security
Value: reedjordanvrb4237.github.io

Navigation Updates

Update navigation links across all pages when adding new sections. Create a shared navigation component in assets/js/main.js:

// Dynamic navigation injection
document.addEventListener('DOMContentLoaded', function() {
    const navHTML = `
        <nav class="main-nav">
            <a href="/index.html">Home</a>
            <a href="/portfolio/">Portfolio</a>
            <a href="/blog/">Blog</a>
            <a href="/resources/">Resources</a>
            <a href="/contact/">Contact</a>
        </nav>
    `;
    
    const header = document.querySelector('header');
    if (header && !header.querySelector('nav')) {
        header.innerHTML = navHTML + header.innerHTML;
    }
});

Common Patterns

Security Blog Post Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Security analysis and technical discussion">
    <title>Article Title - 0xcarnemuerta</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/prism.css">
</head>
<body>
    <header></header>
    
    <main class="blog-post">
        <article>
            <header class="post-header">
                <h1>Article Title</h1>
                <div class="post-meta">
                    <time datetime="2026-08-03">August 3, 2026</time>
                    <span class="tags">
                        <a href="/blog/tags/ai-security">AI Security</a>
                        <a href="/blog/tags/prompt-injection">Prompt Injection</a>
                    </span>
                </div>
            </header>
            
            <div class="post-content">
                <!-- Content here -->
            </div>
            
            <footer class="post-footer">
                <div class="share-buttons">
                    <!-- Social sharing -->
                </div>
            </footer>
        </article>
    </main>
    
    <script src="../assets/js/main.js"></script>
    <script src="../assets/js/prism.js"></script>
</body>
</html>

Code Example with Syntax Highlighting

Include Prism.js for syntax highlighting:

<!-- In <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">

<!-- Before </body> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>

<!-- Usage -->
<pre><code class="language-python">
import jwt
import os
from datetime import datetime, timedelta

def generate_token(user_id):
    """Generate secure JWT token"""
    secret = os.getenv('JWT_SECRET_KEY')
    payload = {
        'user_id': user_id,
        'exp': datetime.utcnow() + timedelta(hours=1),
        'iat': datetime.utcnow()
    }
    return jwt.encode(payload, secret, algorithm='HS256')
</code></pre>

Blog Index Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Security Blog - 0xcarnemuerta</title>
    <link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
    <header></header>
    
    <main class="blog-index">
        <h1>Security Research & Technical Blog</h1>
        
        <div class="blog-posts">
            <article class="post-preview">
                <h2><a href="./prompt-injection-vulnerabilities.html">
                    Prompt Injection Vulnerabilities in LLM Applications
                </a></h2>
                <time datetime="2026-08-03">August 3, 2026</time>
                <p>Deep dive into prompt injection attack vectors and mitigation strategies...</p>
                <a href="./prompt-injection-vulnerabilities.html" class="read-more">Read more →</a>
            </article>
            
            <article class="post-preview">
                <h2><a href="./token-authentication-best-practices.html">
                    Token Authentication Best Practices
                </a></h2>
                <time datetime="2026-08-01">August 1, 2026</time>
                <p>Comprehensive guide to implementing secure token-based authentication...</p>
                <a href="./token-authentication-best-practices.html" class="read-more">Read more →</a>
            </article>
        </div>
    </main>
    
    <script src="../assets/js/main.js"></script>
</body>
</html>

Troubleshooting

Site Not Loading Locally

Problem: Opening index.html directly shows broken styles/links.

Solution: Always use a local web server instead of file:// protocol:

# Use Python server
python3 -m http.server 8000

# Or Node http-server
npx http-server -p 8000

# Or PHP
php -S localhost:8000

Relative Path Issues

Problem: Navigation breaks when moving between sections.

Solution: Use root-relative paths consistently:

<!-- Bad - breaks in subdirectories -->
<link rel="stylesheet" href="assets/css/style.css">

<!-- Good - works from any depth -->
<link rel="stylesheet" href="/assets/css/style.css">

<!-- Alternative - explicit relative paths -->
<link rel="stylesheet" href="../assets/css/style.css">

GitHub Pages 404 Errors

Problem: Pages not found after deployment.

Solution:

Ensure all file names are lowercase
Check that index.html exists in each directory
Verify paths don't have trailing slashes where not needed
Wait 2-3 minutes after pushing for Pages to rebuild

Missing Syntax Highlighting

Problem: Code blocks show as plain text.

Solution: Include Prism.js and use correct class names:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>

<pre><code class="language-python">
# Your code here
</code></pre>

Mobile Responsiveness Issues

Problem: Site doesn't display well on mobile devices.

Solution: Add responsive meta tag and media queries:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (max-width: 768px) {
    nav a {
        display: block;
        margin: 0.5rem 0;
    }
    
    pre code {
        font-size: 0.875rem;
    }
}

Best Practices

Keep it Static: No databases or server-side processing needed—security through simplicity
Version Control: Commit regularly with descriptive messages about content changes
Content Organization: Separate blog posts, portfolio items, and resources into dedicated directories
SEO Friendly: Include meta descriptions, semantic HTML, and descriptive titles
Security Focus: Use HTTPS, implement CSP headers via GitHub Pages, avoid inline scripts where possible
Accessibility: Use semantic HTML, alt text for images, ARIA labels where appropriate

0xcarnemuerta-security-hub-portfolio

About