Skip to content

feat: add modern animated landing page for GitHub Pages #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fiozxr wants to merge 1 commit into
base: main
Choose a base branch
from
+290 −0
Open

feat: add modern animated landing page for GitHub Pages #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions docs/assets/README.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Place an optimized, muted, looping MP4 at assets/loop.mp4. Recommended: 1920x1080 or 1280x720, H.264, 24-30fps, 5-10MB, no audio. The site gracefully falls back to the dark CSS background if the video is absent.
192 changes: 192 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#070707">
<meta name="description" content="PentestCode — autonomous penetration testing, orchestrated by intelligent security agents.">
<title>PentestCode — Security, Orchestrated.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="noise"></div>
<div class="cursor cursor-dot"></div>
<div class="cursor cursor-ring"></div>

<div class="site-bg" aria-hidden="true">
<video autoplay muted loop playsinline preload="metadata">
<source src="assets/loop.mp4" type="video/mp4">
</video>
<div class="bg-vignette"></div>
<div class="grid"></div>
</div>

<header class="nav">
<a class="brand magnetic" href="#" data-strength="12">
<span class="brand-mark">P</span>
<span>PENTEST<span class="dim">CODE</span></span>
</a>
<div class="nav-meta">
<span class="status"><i></i> SYSTEM ONLINE</span>
<a class="nav-link magnetic" data-strength="8" href="https://github.com/s0ld13rr/pentestcode" target="_blank" rel="noreferrer">GITHUB ↗</a>
</div>
</header>

<main>
<section class="hero section">
<div class="hero-copy">
<p class="eyebrow"><span>01</span> AUTONOMOUS SECURITY OPERATIONS</p>
<h1 data-scramble="PENTESTCODE">PENTEST<span>CODE</span></h1>
<p class="hero-sub">Security,<br><em>orchestrated.</em></p>
<div class="hero-actions">
<a href="https://github.com/s0ld13rr/pentestcode" target="_blank" rel="noreferrer" class="button button-primary magnetic" data-strength="18">
<span>VIEW ON GITHUB</span><b>↗</b>
</a>
<a href="#architecture" class="button button-ghost magnetic" data-strength="12">
<span>EXPLORE SYSTEM</span><b>↓</b>
</a>
</div>
</div>

<div class="hero-visual" aria-hidden="true">
<div class="orbital o1"></div>
<div class="orbital o2"></div>
<div class="orbital o3"></div>
<div class="core">
<span class="core-pulse"></span>
<span class="core-label">PENTEST</span>
<span class="core-code">COORDINATOR</span>
</div>
<div class="agent a1"><i></i><span>RECON</span></div>
<div class="agent a2"><i></i><span>SCANNER</span></div>
<div class="agent a3"><i></i><span>WEB APP</span></div>
<div class="agent a4"><i></i><span>ENUM</span></div>
<svg class="hero-lines" viewBox="0 0 600 600">
<path d="M300 300 L105 130 M300 300 L495 170 M300 300 L485 455 M300 300 L120 470"/>
</svg>
</div>

<div class="scroll-note"><span></span> SCROLL TO ENGAGE</div>
</section>

<section class="architecture section" id="architecture">
<div class="section-head">
<p class="eyebrow"><span>02</span> THE ARCHITECTURE</p>
<p class="section-note">One coordinator.<br>Specialized agents.<br>Shared context.</p>
</div>

<div class="architecture-stage">
<div class="arch-word">AGENTS</div>
<div class="arch-center">
<div class="center-ring"></div>
<strong>PENTEST</strong>
<small>ORCHESTRATOR</small>
</div>
<div class="arch-node n1"><b>01</b><span>RECON</span></div>
<div class="arch-node n2"><b>02</b><span>SCANNER</span></div>
<div class="arch-node n3"><b>03</b><span>WEB APP</span></div>
<div class="arch-node n4"><b>04</b><span>IDENTITY</span></div>
<div class="arch-node n5"><b>05</b><span>EXPLOIT</span></div>
<div class="arch-node n6"><b>06</b><span>REPORT</span></div>
<svg class="arch-svg" viewBox="0 0 1000 600" preserveAspectRatio="none">
<path d="M500 300 C360 180 220 130 80 100"/>
<path d="M500 300 C390 210 350 110 290 55"/>
<path d="M500 300 C455 210 455 100 470 35"/>
<path d="M500 300 C610 210 650 100 710 55"/>
<path d="M500 300 C640 220 780 160 920 110"/>
<path d="M500 300 C650 370 790 460 925 520"/>
</svg>
</div>
</section>

<section class="terminal-section section">
<div class="terminal-wrap">
<div class="terminal-top">
<span><i></i><i></i><i></i></span>
<small>engagement://active</small>
<small>01:42:17</small>
</div>
<div class="terminal-body">
<p><span class="muted">$</span> pentestcode <span class="target">--target</span> 10.0.0.42</p>
<p class="log"><b>01</b> coordinator initialized</p>
<p class="log"><b>02</b> dispatching reconnaissance agent <span>●</span></p>
<p class="log"><b>03</b> service enumeration synchronized <span>●</span></p>
<p class="log"><b>04</b> vulnerability analysis in progress <span>●</span></p>
<p class="log dimmed"><b>05</b> awaiting agent state...</p>
<div class="terminal-caret"></div>
</div>
</div>
<div class="terminal-caption">
<p class="eyebrow"><span>03</span> ONE COMMAND</p>
<h2>LET THE<br><span>AGENTS</span> WORK.</h2>
</div>
</section>

<section class="state-section section">
<div class="section-head">
<p class="eyebrow"><span>04</span> ENGAGEMENT STATE</p>
<p class="section-note">Context persists.<br>Relationships emerge.</p>
</div>
<div class="state-graph" aria-hidden="true">
<div class="graph-node host"><small>HOST</small><strong>10.0.0.42</strong></div>
<div class="graph-node service"><small>SERVICE</small><strong>443 / HTTPS</strong></div>
<div class="graph-node vuln"><small>VULNERABILITY</small><strong>AUTH BYPASS</strong></div>
<div class="graph-node cred"><small>CREDENTIAL</small><strong>SESSION TOKEN</strong></div>
<div class="graph-node access"><small>ACCESS</small><strong>USER → ROOT</strong></div>
<svg viewBox="0 0 1200 520" preserveAspectRatio="none">
<path d="M160 260 C310 130 390 130 505 240"/>
<path d="M595 260 C720 110 780 110 930 215"/>
<path d="M1000 290 C900 390 770 410 620 300"/>
<path d="M510 320 C400 440 290 425 160 320"/>
</svg>
</div>
</section>

<section class="capabilities section">
<div class="section-head">
<p class="eyebrow"><span>05</span> SYSTEM CAPABILITIES</p>
</div>
<div class="cap-list">
<div class="cap"><span>01</span><strong>MULTI-AGENT</strong><i>COORDINATED SPECIALISTS</i></div>
<div class="cap"><span>02</span><strong>PERSISTENT STATE</strong><i>CONTEXT THAT SURVIVES</i></div>
<div class="cap"><span>03</span><strong>PARALLEL OPERATIONS</strong><i>MORE WORK, LESS WAIT</i></div>
<div class="cap"><span>04</span><strong>20+ PROVIDERS</strong><i>MODEL FLEXIBILITY</i></div>
<div class="cap"><span>05</span><strong>ATTACK PATHS</strong><i>RELATIONSHIPS, NOT JUST FINDINGS</i></div>
<div class="cap"><span>06</span><strong>REPORTING</strong><i>FROM ENGAGEMENT TO OUTPUT</i></div>
</div>
</section>

<section class="install section">
<div class="install-inner">
<p class="eyebrow"><span>06</span> START AN ENGAGEMENT</p>
<h2>ONE COMMAND.<br><span>THEN EVERYTHING MOVES.</span></h2>
<div class="install-code magnetic" data-strength="4">
<span class="prompt">$</span>
<code>npm install -g pentestcode-ai</code>
<button class="copy" type="button" aria-label="Copy install command">COPY</button>
</div>
</div>
</section>

<section class="final section">
<div class="final-mark">P</div>
<p class="eyebrow"><span>07</span> PENTESTCODE</p>
<h2>RUN THE<br><em>ENGAGEMENT.</em></h2>
<a class="button button-primary magnetic" data-strength="20" href="https://github.com/s0ld13rr/pentestcode" target="_blank" rel="noreferrer">
<span>OPEN GITHUB</span><b>↗</b>
</a>
</section>
</main>

<footer>
<span>PENTESTCODE</span>
<span>OPEN SOURCE SECURITY TOOLING</span>
<a href="https://github.com/s0ld13rr/pentestcode" target="_blank" rel="noreferrer">GITHUB ↗</a>
</footer>

<script src="script.js"></script>
</body>
</html>
96 changes: 96 additions & 0 deletions docs/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
const $ = s => document.querySelector(s);
const $$ = s => [...document.querySelectorAll(s)];

const dot = $('.cursor-dot');
const ring = $('.cursor-ring');
let mx = innerWidth/2, my = innerHeight/2, rx = mx, ry = my;

window.addEventListener('pointermove', e => {
mx=e.clientX; my=e.clientY;
if(dot){dot.style.left=mx+'px';dot.style.top=my+'px'}
});
function cursorLoop(){
rx += (mx-rx)*.13; ry += (my-ry)*.13;
if(ring){ring.style.left=rx+'px';ring.style.top=ry+'px'}
requestAnimationFrame(cursorLoop);
}
cursorLoop();

$$('.magnetic').forEach(el=>{
el.addEventListener('pointermove',e=>{
const r=el.getBoundingClientRect(), s=+(el.dataset.strength||10);
const x=(e.clientX-(r.left+r.width/2))/r.width*s;
const y=(e.clientY-(r.top+r.height/2))/r.height*s;
el.style.transform=`translate(${x}px,${y}px)`;
ring?.classList.add('hover');
});
el.addEventListener('pointerleave',()=>{el.style.transform='';ring?.classList.remove('hover')});
});

$$('a,button,.arch-node,.graph-node,.cap').forEach(el=>{
el.addEventListener('mouseenter',()=>ring?.classList.add('hover'));
el.addEventListener('mouseleave',()=>ring?.classList.remove('hover'));
});

// Subtle parallax without a framework.
const heroVisual=$('.hero-visual');
window.addEventListener('pointermove',e=>{
if(!heroVisual || innerWidth<901)return;
const x=(e.clientX/innerWidth-.5), y=(e.clientY/innerHeight-.5);
heroVisual.style.transform=`translate(${x*18}px,calc(-50% + ${y*12}px)) rotateY(${x*4}deg) rotateX(${-y*3}deg)`;
},{passive:true});

// Scroll choreography: sections translate their internal systems rather than simple reveal.
const arch=$('.architecture-stage'), terminal=$('.terminal-wrap'), graph=$('.state-graph');
function clamp(v,a,b){return Math.max(a,Math.min(b,v))}
function scrollFX(){
const vh=innerHeight;
const a=arch?.getBoundingClientRect();
if(a){
const p=clamp((vh-a.top)/(vh+a.height),0,1);
arch.style.transform=`perspective(1300px) rotateX(${(p-.5)*7}deg) translateY(${(p-.5)*-22}px)`;
}
const t=terminal?.getBoundingClientRect();
if(t){
const p=clamp((vh-t.top)/(vh+t.height),0,1);
terminal.style.transform=`perspective(1200px) rotateY(${(p-.5)*-9}deg) rotateX(${(p-.5)*3}deg) translateX(${(p-.5)*18}px)`;
}
const g=graph?.getBoundingClientRect();
if(g){
const p=clamp((vh-g.top)/(vh+g.height),0,1);
graph.style.transform=`perspective(1100px) rotateX(${(p-.5)*5}deg)`;
graph.querySelectorAll('.graph-node').forEach((n,i)=>{
n.style.transform=`translate3d(${Math.sin(p*6+i)*5}px,${Math.cos(p*5+i)*5}px,${i*3}px)`;
});
}
requestAnimationFrame(scrollFX);
}
scrollFX();

const copy=$('.copy');
copy?.addEventListener('click',async()=>{
try{
await navigator.clipboard.writeText('npm install -g pentestcode-ai');
copy.textContent='COPIED';
setTimeout(()=>copy.textContent='COPY',1400);
}catch{copy.textContent='SELECT MANUALLY';}
});

// Tiny live terminal clock.
const clock=$('.terminal-top small:last-child');
let start=Date.now();
setInterval(()=>{
if(!clock)return;
const s=Math.floor((Date.now()-start)/1000);
const h=String(Math.floor(s/3600)).padStart(2,'0');
const m=String(Math.floor(s%3600/60)).padStart(2,'0');
const sec=String(s%60).padStart(2,'0');
clock.textContent=`${h}:${m}:${sec}`;
},1000);

// Smooth active section accent.
const sections=$$('section');
const observer=new IntersectionObserver(entries=>{
entries.forEach(e=>e.target.classList.toggle('active',e.isIntersecting));
},{threshold:.35});
sections.forEach(s=>observer.observe(s));
Loading