0xcarnemuerta-security-hub-portfolio
Browser-based security portfolio and technical blog covering AI security, data protection, ML threats, and secure engineering practices
소스 정보
- 저장소
- reason-machines/security-skills
- 최근 소스 활동
- 2026년 8월 3일 20:50
- 감지된 SKILL.md 언어
- 영어
- 스타
- 12
- 포크
- 1
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- 0xcarnemuerta-security-hub-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 customize the security hub portfolio","serve the security portfolio website","modify the AI security blog content","configure the 0xcarnemuerta portfolio site","add new security articles to the portfolio","deploy the security hub to GitHub Pages","update security blog navigation"]
# 0xcarnemuerta Security Hub Portfolio
> Skill by [ara.so](https://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:
```bash
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):
```bash
python3 -m http.server 8000
```
Then open `http://localhost:8000/` in your browser.
Alternative with Node.js `http-server`:
```bash
npx http-server -p 8000
```
Alternative with PHP:
```bash
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:
```html
<!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>© 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:
```html
<!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:
```css
/* 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
1. Go to repository Settings → Pages
2. Set Source to "Deploy from a branch"
3. Select branch: `main`, folder: `/ (root)`
4. 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`:
```javascript
// 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
```html
<!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:
```html
<!-- 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
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Security Blog - 0xcarnemuerta</title>
GitHub에서 보기이 SKILL.md는 매우 커서 SkillsMP가 여기에는 첫 섹션만 미리 보여줍니다. GitHub에서 보기
