Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/styles.css

Large diffs are not rendered by default.

71 changes: 53 additions & 18 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
<!-- CSS -->
<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Expand Down Expand Up @@ -149,6 +150,58 @@ <h1 class="glitch" data-text="Pelle Nyberg">Pelle Nyberg</h1>
</div>
</section>


<!-- Featured Project Section -->
<section id="featured-project" style="padding-top: 4rem; padding-bottom: 2rem;">
<div class="featured-project-container">

<div class="header-section">
<div class="icon-container">
<i class="fa-solid fa-robot"></i>
</div>
<div>
<h2 class="project-title">Agent-Commit Tracker</h2>
<p class="project-subtitle">Automated Transparency for AI-Generated Code</p>
</div>
</div>

<div class="tech-badges">
<span class="badge"><i class="fa-brands fa-python"></i> Python / FastAPI</span>
<span class="badge"><i class="fa-brands fa-google"></i> Google Cloud Run</span>
<span class="badge"><i class="fa-brands fa-github"></i> GitHub Webhooks</span>
<span class="badge"><i class="fa-solid fa-server"></i> Serverless</span>
</div>

<div class="project-description">
<p>As AI agents increasingly write our code, human reviewers lose the critical context behind the commits. I built the Agent-Commit Tracker to solve this blind spot. It is a production-grade, serverless microservice that intercepts GitHub webhooks in real-time, parsing hidden AI metadata to inject perfectly formatted context reports directly into Pull Requests.</p>
</div>

<ul class="features-list">
<li>
<i class="fa-solid fa-bolt"></i>
<strong>Zero Latency Parsing</strong>
<span>Built with Python and robust Regex, it instantly extracts embedded context markers from PR descriptions without delaying the CI/CD pipeline.</span>
</li>
<li>
<i class="fa-solid fa-cloud"></i>
<strong>100% Serverless</strong>
<span>Containerized and deployed on Google Cloud Run. It scales from zero to handle webhook spikes securely and cost-effectively.</span>
</li>
<li>
<i class="fa-solid fa-shield-halved"></i>
<strong>Enterprise Security</strong>
<span>Enforces strict validation of <code>X-Hub-Signature-256</code> headers to guarantee payload authenticity before any processing begins.</span>
</li>
</ul>

<div class="action-buttons">
<a href="https://github.com/PelleNybe/agent-commit-tracker" target="_blank" class="btn btn-primary"><i class="fa-brands fa-github"></i> Install GitHub App</a>
<a href="https://github.com/PelleNybe/agent-commit-tracker" target="_blank" class="btn btn-secondary"><i class="fa-solid fa-code"></i> View Source Architecture</a>
</div>

</div>
</section>

<!-- Platform & GAPbot Section -->
<section id="architectures">
<h2 class="section-title">🤖 Architectures & Innovation</h2>
Expand Down Expand Up @@ -432,15 +485,6 @@ <h2 class="section-title">Open Source & Developer Tools</h2>
</p>

<div class="projects-grid">
<project-card
name="Agent-Commit Tracker"
url="https://github.com/PelleNybe/agent-commit-tracker"
description="A production-grade, serverless GitHub App built with Python and FastAPI, deployed on Google Cloud Run for autonomous CI/CD webhook handling."
language="Python"
color="#3572A5"
topics='["Python", "FastAPI", "CI/CD", "Serverless"]'
tag="Developer Tool">
</project-card>

<project-card
name="Crypto MCP Server"
Expand Down Expand Up @@ -478,15 +522,6 @@ <h3 style="color: var(--text-secondary); margin-bottom: 2rem;">Platform Dashboar
<div class="project-card"><img src="images/1773185420660.png" style="width: 100%; border-radius: var(--border-radius-small);" alt="Platform preview 1773185420660.png"></div>
<div class="project-card"><img src="images/1773185446305.png" style="width: 100%; border-radius: var(--border-radius-small);" alt="Platform preview 1773185446305.png"></div>
<div class="project-card"><img src="images/1773242699963.png" style="width: 100%; border-radius: var(--border-radius-small);" alt="Platform preview 1773242699963.png">
<project-card
name="Agent-Commit Tracker"
url="/agent-commit-tracker/"
description="Agent-Commit Tracker - An automated transparency microservice for AI-generated Pull Requests, built by Corax CoLAB."
language="HTML/CSS"
color="#e34c26"
topics='["AI", "GitHub App", "Transparency"]'
tag="Developer Tool">
</project-card>
</div>
</div>
</section>
Expand Down
16 changes: 8 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"jsdom": "^29.1.0",
"lunr": "^2.3.9",
"marked": "^18.0.2",
"playwright": "^1.58.2",
"playwright": "^1.60.0",
"terser": "^5.46.1",
"web-vitals": "^5.2.0"
}
Expand Down
193 changes: 193 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -2430,3 +2430,196 @@ nav.scrolled {
.glow-card:hover::after {
opacity: 1;
}

/* Featured Project Section - Agent-Commit Tracker */
.featured-project-container {
background-color: var(--card-bg);
border: 1px solid rgba(0, 255, 194, 0.2);
border-radius: var(--border-radius);
padding: 40px;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
transition: var(--transition);
}

.featured-project-container:hover {
border-color: rgba(0, 255, 194, 0.4);
box-shadow: var(--shadow-glow);
}

#featured-project .header-section {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}

#featured-project .icon-container {
width: 64px;
height: 64px;
background-color: rgba(0, 255, 194, 0.1); /* Deep tech primary tint */
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0, 255, 194, 0.4);
}

#featured-project .icon-container i {
font-size: 32px;
color: var(--primary-color);
}

#featured-project .project-title {
margin: 0;
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
}

#featured-project .project-subtitle {
margin: 5px 0 0 0;
font-size: 16px;
color: var(--primary-color);
font-family: monospace;
}

#featured-project .tech-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}

#featured-project .badge {
background-color: rgba(0, 255, 194, 0.05);
border: 1px solid rgba(0, 255, 194, 0.3);
color: var(--text-primary);
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-family: monospace;
display: flex;
align-items: center;
gap: 6px;
transition: var(--transition);
}

#featured-project .badge:hover {
background-color: rgba(0, 255, 194, 0.15);
border-color: var(--primary-color);
}

#featured-project .badge i {
font-size: 14px;
color: var(--primary-color);
}

#featured-project .project-description {
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 30px;
font-size: 16px;
}

#featured-project .features-list {
list-style: none;
padding: 0;
margin: 0 0 35px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

#featured-project .features-list li {
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 255, 194, 0.1);
padding: 20px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 10px;
transition: var(--transition);
}

#featured-project .features-list li:hover {
border-color: rgba(0, 255, 194, 0.3);
background-color: rgba(0, 255, 194, 0.03);
}

#featured-project .features-list li i {
color: var(--primary-color);
font-size: 24px;
}

#featured-project .features-list li strong {
color: var(--text-primary);
font-size: 16px;
}

#featured-project .features-list li span {
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
}

#featured-project .action-buttons {
display: flex;
gap: 15px;
}

#featured-project .btn {
text-decoration: none;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
cursor: pointer;
}

#featured-project .btn-primary {
background: var(--gradient-primary);
color: var(--dark-bg);
border: none;
box-shadow: 0 4px 15px rgba(0, 255, 194, 0.2);
}

#featured-project .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 255, 194, 0.4);
}

#featured-project .btn-secondary {
background-color: transparent;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}

#featured-project .btn-secondary:hover {
background-color: rgba(0, 255, 194, 0.1);
transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
#featured-project .header-section {
flex-direction: column;
align-items: flex-start;
}
#featured-project .action-buttons {
flex-direction: column;
}
#featured-project .btn {
justify-content: center;
}
.featured-project-container {
padding: 20px;
}
}
Loading