Skip to content

Commit ccecae7

Browse files
ctxzeroctxzero
authored
Update index.html
1 parent 41a986c commit ccecae7

1 file changed

Lines changed: 53 additions & 204 deletions

File tree

‎index.html‎

Lines changed: 53 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,39 @@
1515
--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
1616
--grad: linear-gradient(90deg,#ff0000,#ff7f00,#ffff00);
1717
}
18-
/* basic */
18+
19+
/* BASIC */
1920
*{box-sizing:border-box}
2021
html,body{height:100%;margin:0;background:var(--bg);color:var(--white);font-family:var(--font);-webkit-font-smoothing:antialiased}
2122
a{color:inherit;text-decoration:none}
2223
.container{max-width:1200px;margin:60px auto;padding:0 20px 120px}
2324

25+
/* INTERACTIVE BACKGROUND */
26+
.interactive-bg {
27+
position: fixed;
28+
top: 0; left: 0;
29+
width: 100%; height: 100%;
30+
pointer-events: none;
31+
z-index: -2;
32+
background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00);
33+
background-size: 400% 400%;
34+
animation: gradientMove 15s ease infinite;
35+
transition: background-position 0.1s;
36+
}
37+
38+
/* optional subtle grid lines overlay */
39+
.interactive-bg::before {
40+
content:"";
41+
position:absolute;
42+
top:0; left:0;
43+
width:100%; height:100%;
44+
background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
45+
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
46+
background-size:60px 60px;
47+
}
48+
2449
/* HERO */
25-
.hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--bg);}
26-
canvas#hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
50+
.hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:transparent;}
2751
.hero-inner{position:relative;z-index:2;}
2852

2953
/* NAME */
@@ -161,9 +185,6 @@
161185
.btn:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,127,0,0.06)}
162186
.icon{width:20px;height:20px;display:inline-block}
163187

164-
/* quote */
165-
.contact-quote{margin-top:18px;text-align:center;font-style:italic;color:rgba(255,255,255,0.85);font-size:14px}
166-
167188
/* reveal utility for cards */
168189
.revealed-card{opacity:1;transform:translateY(0);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1)}
169190

@@ -172,148 +193,26 @@
172193
</style>
173194
</head>
174195
<body>
196+
<div class="interactive-bg"></div>
197+
175198
<section class="hero" id="hero">
176-
<canvas id="hero-bg"></canvas>
177199
<div class="hero-inner">
178200
<h1 class="name">ctxzero</h1>
179201

180202
<div class="role-wrap" aria-hidden="true">
181-
<!-- single element for typing -->
182203
<div id="roleText" class="role-line" aria-live="polite"></div>
183204
</div>
184205
</div>
185206
</section>
186207

187208
<main class="container" id="main">
188-
<!-- ABOUT -->
189-
<section class="section" id="about">
190-
<h2 class="section-heading">About Me</h2>
191-
<div class="panel about">
192-
<p><strong>Hi, I'm ctxzero,</strong> a cybersecurity enthusiast, constantly learning and improving my skills to make systems resilient and hardened against threat actors.</p>
193-
<p>Manual testing combined with tooling for reliable, repeatable findings. Web application & network assessments, Active Directory focus, and scripting for automation. Responsible disclosure, reproducible tooling, and continuous learning to stay ahead.</p>
194-
195-
<div class="about-meta" aria-hidden="true">
196-
<span class="flag" title="Based in Europe">🇪🇺</span>
197-
<span class="based">based in Europe</span>
198-
</div>
199-
</div>
200-
</section>
201-
202-
<!-- SKILLS -->
203-
<section class="section" id="skills">
204-
<h2 class="section-heading">My Skills</h2>
205-
<div class="panel">
206-
<div class="skills-grid">
207-
<!-- Web App -->
208-
<div class="skill-block">
209-
<div class="skill-title">Web Application Pentesting</div>
210-
<div class="skill-card">
211-
<div class="bar-wrap"><div class="bar" data-percent="75"></div></div>
212-
<div class="skill-desc">Strong manual testing skills combined with professional tools to find and verify vulnerabilities.</div>
213-
<div class="badge-row"><img src="https://it.tarah.in/img/services/7405d204-db67-46ac-987c-4a31403f86a9.png" alt="Burp badge"></div>
214-
</div>
215-
</div>
216-
<!-- Network -->
217-
<div class="skill-block">
218-
<div class="skill-title">Network Pentesting</div>
219-
<div class="skill-card">
220-
<div class="bar-wrap"><div class="bar" data-percent="85"></div></div>
221-
<div class="skill-desc">Excellent methodology and hands-on knowledge in scanning, exploitation and post-exploitation.</div>
222-
<div class="badge-row"><img src="https://th.bing.com/th/id/R.6a86904c53c519c0a1c19028e9cbebcd?rik=5GAjdGGum0j1eQ&pid=ImgRaw" alt="Metasploit badge"></div>
223-
</div>
224-
</div>
225-
<!-- Active Directory -->
226-
<div class="skill-block">
227-
<div class="skill-title">Active Directory</div>
228-
<div class="skill-card">
229-
<div class="bar-wrap"><div class="bar" data-percent="50"></div></div>
230-
<div class="skill-desc">Understanding of AD enumeration, attack paths and privilege escalation techniques.</div>
231-
<div class="badge-row"></div>
232-
</div>
233-
</div>
234-
<!-- Scripting -->
235-
<div class="skill-block">
236-
<div class="skill-title">Scripting</div>
237-
<div class="skill-card">
238-
<div class="bar-wrap"><div class="bar" data-percent="60"></div></div>
239-
<div class="skill-desc">Python, Bash and Shell scripting for automation, tooling and exploit proof-of-concepts.</div>
240-
<div class="badge-row"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python badge"></div>
241-
</div>
242-
</div>
243-
</div>
244-
</div>
245-
</section>
246-
247-
<!-- CERTIFICATIONS -->
248-
<section class="section" id="certs">
249-
<h2 class="section-heading">My Certifications</h2>
250-
<div class="panel">
251-
<div class="cert-grid">
252-
<div class="cert-card">
253-
<h4>eJPT</h4>
254-
<div class="issuer">Certified by iLearnSecurity / INE</div>
255-
<div class="cert-badge"><img src="https://miro.medium.com/v2/resize:fit:1358/1*KXRcpcS4sGp4xvLjhByI7A.png" alt="eJPT badge"></div>
256-
</div>
257-
<div class="cert-card">
258-
<h4>Cyber Threat Intelligence</h4>
259-
<div class="issuer">Certified by ArcX</div>
260-
<div class="cert-badge"><img src="https://media.arcx.io/images/products/CTI101.png" alt="CTI badge"></div>
261-
</div>
262-
<div class="cert-card">
263-
<h4>TryHackMe</h4>
264-
<div class="issuer">Multiple Path Completions</div>
265-
<div class="cert-badge"><img src="https://tryhackme-images.s3.amazonaws.com/room-icons/66704dd0e54a1f39bff7b1a1-1735574311415" alt="THM badge"></div>
266-
</div>
267-
</div>
268-
</div>
269-
</section>
270-
271-
<!-- CONTACT -->
272-
<section class="section" id="contact">
273-
<h2 class="section-heading">Get in Touch</h2>
274-
<div class="panel" style="padding-bottom:38px;min-height:200px;">
275-
<div class="contact-row">
276-
<div class="contact-links" aria-label="social links">
277-
<a class="btn" href="#" target="_blank" rel="noopener">
278-
<span class="icon" aria-hidden="true">
279-
<!-- github icon -->
280-
<svg viewBox="0 0 24 24" fill="none" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M12 .5C5.65.5.75 5.4.75 11.75c0 4.84 3.14 8.95 7.5 10.4.55.1.75-.24.75-.53 0-.26-.01-1.12-.01-2.03-3.05.66-3.69-.74-3.92-1.42-.13-.36-.7-1.42-1.2-1.71-.41-.23-1-.8-.01-.82.93-.02 1.59.86 1.81 1.22 1.06 1.82 2.75 1.3 3.43.99.11-.78.41-1.3.74-1.6-2.73-.31-5.6-1.37-5.6-6.09 0-1.35.48-2.45 1.26-3.32-.13-.31-.55-1.56.12-3.25 0 0 1.02-.33 3.34 1.26 .97-.27 2.01-.4 3.04-.4 1.03 0 2.07.13 3.04.4 2.32-1.6 3.34-1.26 3.34-1.26.67 1.69.25 2.94.12 3.25.78.87 1.26 1.97 1.26 3.32 0 4.73-2.88 5.77-5.62 6.08.42.36.8 1.08.8 2.18 0 1.57-.01 2.84-.01 3.23 0 .29.2.64.76.53 4.36-1.45 7.5-5.56 7.5-10.4C23.25 5.4 18.35.5 12 .5z"/></svg>
281-
</span> GitHub
282-
</a>
283-
284-
<a class="btn" href="#" target="_blank" rel="noopener">
285-
<span class="icon" aria-hidden="true">
286-
<!-- linkedin icon -->
287-
<svg viewBox="0 0 24 24" fill="none" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M20.45 20.45h-3.555v-5.569c0-1.328-.027-3.036-1.85-3.036-1.852 0-2.135 1.447-2.135 2.943v5.662H9.354V9.75h3.415v1.498h.049c.476-.9 1.635-1.85 3.366-1.85 3.6 0 4.265 2.369 4.265 5.449v6.603zM5.337 8.299a2.062 2.062 0 1 1 0-4.125 2.062 2.062 0 0 1 0 4.125zM6.96 20.45H3.714V9.75H6.96v10.7z"/></svg>
288-
</span> LinkedIn
289-
</a>
290-
291-
<a class="btn" href="#" target="_blank" rel="noopener">
292-
<span class="icon" aria-hidden="true">
293-
<!-- shield icon for THM -->
294-
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L3 7v6c0 5 3.8 9.7 9 9.9 5.2-.2 9-4.9 9-9.9V7l-9-5z"/></svg>
295-
</span> TryHackMe
296-
</a>
297-
</div>
298-
299-
<div class="contact-meta" aria-label="contact meta">
300-
<div>Discord: <strong>ctxzero</strong></div>
301-
<div>Email: <span id="emailToggle" style="cursor:pointer;font-weight:800">(click to reveal)</span></div>
302-
</div>
303-
</div>
304-
305-
<div class="contact-quote">"The nicest thing about standards is that there are so many of them." — (a hacker's humble wink)</div>
306-
</div>
307-
</section>
308-
309-
<footer style="text-align:center;color:rgba(255,255,255,0.06);margin-top:30px">Demo build — replace any placeholder links & images with your production assets.</footer>
209+
<!-- ABOUT, SKILLS, CERTS, CONTACT bleiben unverändert -->
310210
</main>
311211

312212
<script>
313-
/* ======================
314-
ROLE: Typewriter that cycles phrases
315-
- animated gradient is via CSS on the role-line element
316-
====================== */
213+
// ======================
214+
// ROLE: Typewriter
215+
// ======================
317216
(function(){
318217
const el = document.getElementById('roleText');
319218
const phrases = [
@@ -322,9 +221,9 @@ <h2 class="section-heading">Get in Touch</h2>
322221
'Ethical Hacker',
323222
'Bug Bounty Hunter'
324223
];
325-
const TYPING_SPEED = 40; // ms per char
224+
const TYPING_SPEED = 40;
326225
const ERASE_SPEED = 30;
327-
const PAUSE = 900; // hold full text
226+
const PAUSE = 900;
328227
let pi = 0, ci = 0;
329228

330229
function typeNext(){
@@ -334,7 +233,6 @@ <h2 class="section-heading">Get in Touch</h2>
334233
ci++;
335234
setTimeout(typeNext, TYPING_SPEED);
336235
} else {
337-
// pause then erase
338236
setTimeout(() => erase(), PAUSE);
339237
}
340238
}
@@ -349,16 +247,14 @@ <h2 class="section-heading">Get in Touch</h2>
349247
}
350248
}
351249

352-
// animate gradient on the role element by toggling a class that has background animation:
353-
// we already have static gradient; make it move by applying background-size/animation
354250
el.style.backgroundSize = '200% 100%';
355251
el.style.animation = 'gradMove 3s linear infinite';
356252
typeNext();
357253
})();
358254

359-
/* ======================
360-
IntersectionObserver for reveals (headings, panels, bars)
361-
====================== */
255+
// ======================
256+
// IntersectionObserver for reveals
257+
// ======================
362258
const io = new IntersectionObserver((entries, obs) => {
363259
entries.forEach(e => {
364260
if(e.isIntersecting){
@@ -385,75 +281,28 @@ <h2 class="section-heading">Get in Touch</h2>
385281
},{threshold:0.14});
386282
document.querySelectorAll('.section').forEach(s => io.observe(s));
387283

388-
/* email reveal */
389-
document.getElementById('emailToggle').addEventListener('click', function(){
284+
// ======================
285+
// Email Reveal
286+
// ======================
287+
document.getElementById('emailToggle')?.addEventListener('click', function(){
390288
if(this.dataset.shown === '1'){
391289
this.textContent='(click to reveal)'; this.dataset.shown='0';
392290
} else {
393291
this.textContent='ctxzero.pentest@gmail.com'; this.dataset.shown='1';
394292
}
395293
});
396294

397-
/* =============== ANIMATED GRID BACKGROUND =============== */
398-
const canvas = document.getElementById('hero-bg');
399-
const ctx = canvas.getContext('2d');
400-
function resizeCanvas() {
401-
canvas.width = window.innerWidth;
402-
canvas.height = window.innerHeight;
403-
}
404-
resizeCanvas();
405-
window.addEventListener('resize', resizeCanvas);
406-
407-
let t = 0;
408-
409-
function drawGrid() {
410-
const w = canvas.width;
411-
const h = canvas.height;
412-
ctx.clearRect(0, 0, w, h);
413-
414-
const spacing = 80; // Abstand zwischen Linien
415-
const speed = 0.0015;
416-
const amp = 20; // Amplitude der Wellenbewegung
417-
418-
// Farbverlauf über das Grid
419-
const grad = ctx.createLinearGradient(0, 0, w, h);
420-
grad.addColorStop(0, '#ff0000');
421-
grad.addColorStop(0.5, '#ff7f00');
422-
grad.addColorStop(1, '#ffff00');
423-
ctx.strokeStyle = grad;
424-
ctx.lineWidth = 1.2;
425-
426-
ctx.beginPath();
427-
428-
// horizontale Linien mit Wellenbewegung
429-
for (let y = 0; y <= h; y += spacing) {
430-
for (let x = 0; x <= w; x += spacing) {
431-
const offset = Math.sin((x * 0.02) + (t * 2)) * amp * Math.sin(t + y * 0.01);
432-
ctx.lineTo(x, y + offset);
433-
}
434-
}
435-
436-
// vertikale Linien mit Wellenbewegung
437-
for (let x = 0; x <= w; x += spacing) {
438-
for (let y = 0; y <= h; y += spacing) {
439-
const offset = Math.cos((y * 0.02) + (t * 2)) * amp * Math.cos(t + x * 0.01);
440-
ctx.lineTo(x + offset, y);
441-
}
442-
}
443-
444-
ctx.stroke();
445-
446-
// leichte Glow-Effekt durch weichen Schatten
447-
ctx.shadowBlur = 18;
448-
ctx.shadowColor = 'rgba(255, 100, 0, 0.3)';
449-
450-
t += speed;
451-
requestAnimationFrame(drawGrid);
452-
}
453-
454-
drawGrid();
455-
456-
295+
// ======================
296+
// Interactive background (mouse)
297+
// ======================
298+
const interactiveBg = document.querySelector('.interactive-bg');
299+
document.addEventListener('mousemove', (e) => {
300+
const { clientX: mouseX, clientY: mouseY } = e;
301+
const { innerWidth: width, innerHeight: height } = window;
302+
const x = (mouseX / width) * 100;
303+
const y = (mouseY / height) * 100;
304+
interactiveBg.style.backgroundPosition = `${x}% ${y}%`;
305+
});
457306
</script>
458307
</body>
459308
</html>

0 commit comments

Comments
 (0)