Hugging Face's logo

Spaces:
api-ix
/
Portfolio
Running

App Files Community
Portfolio / index.html
api-ix's picture
api-ix
Update index.html
3e6f127 verified
Raw
History Blame Contribute Delete
17.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SYSTEM::ARCANE // ROOT_ACCESS</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;800&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
<style>
 :root {
 --bg: #050505;
 --grid: #1a1a1a;
 --primary: #ff003c; /* Cyberpunk Red */
 --primary-dim: rgba(255, 0, 60, 0.2);
 --text: #e0e0e0;
 --text-dim: #666;
 --font-main: 'Rajdhani', sans-serif;
 --font-code: 'JetBrains Mono', monospace;
 }
 * { margin: 0; padding: 0; box-sizing: border-box; cursor: crosshair; }
 body {
 background-color: var(--bg);
 color: var(--text);
 font-family: var(--font-main);
 overflow-x: hidden;
 height: 100vh;
 width: 100vw;
 }
 /* --- CRT OVERLAY EFFECT --- */
 .scanlines {
 position: fixed;
 top: 0; left: 0; width: 100%; height: 100%;
 background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
 background-size: 100% 4px;
 z-index: 999;
 pointer-events: none;
 opacity: 0.6;
 }
/* --- CANVAS BACKGROUND --- */
 #network-canvas {
 position: fixed;
 top: 0; left: 0;
 z-index: 0;
 opacity: 0.4;
 }
 /* --- UI CONTAINER --- */
 .ui-layer {
 position: relative;
 z-index: 10;
 padding: 2rem;
 height: 100%;
 overflow-y: auto;
 scrollbar-width: none; /* Firefox */
 }
 .ui-layer::-webkit-scrollbar { display: none; }
 /* --- HEADER / HUD --- */
 header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 border-bottom: 1px solid var(--primary);
 padding-bottom: 1rem;
 margin-bottom: 4rem;
 position: relative;
 }
 header::after {
 content: 'SYS.VER.4.0 // ONLINE';
 position: absolute;
 bottom: -20px; right: 0;
 font-family: var(--font-code);
 font-size: 0.7rem;
 color: var(--primary);
 background: var(--bg);
 padding-left: 10px;
 }
 .brand {
 font-family: var(--font-code);
 font-weight: 800;
 font-size: 2.5rem;
 letter-spacing: -2px;
 color: var(--text);
 text-transform: uppercase;
 }
 .brand span { color: var(--primary); }
 .status-block {
 text-align: right;
 font-family: var(--font-code);
 font-size: 0.7rem;
 color: var(--primary);
 }
 /* --- HERO SECTION --- */
 .hero-section {
 display: grid;
 grid-template-columns: 300px 1fr;
 gap: 4rem;
 align-items: start;
 margin-bottom: 8rem;
 }
 /* Profile Image: HUD Style */
 .profile-frame {
 width: 100%;
 height: 350px;
 border: 1px solid var(--primary);
 position: relative;
 padding: 5px;
 background: rgba(255, 0, 60, 0.05);
 }
.profile-frame::before {
 content: ''; position: absolute; top: -1px; left: -1px;
 width: 20px; height: 20px;
 border-top: 3px solid var(--primary);
 border-left: 3px solid var(--primary);
 }
 .profile-frame::after {
 content: ''; position: absolute; bottom: -1px; right: -1px;
 width: 20px; height: 20px;
 border-bottom: 3px solid var(--primary);
 border-right: 3px solid var(--primary);
 }
 .profile-img {
 width: 100%; height: 100%;
 object-fit: cover;
 filter: grayscale(100%) contrast(1.2) brightness(0.8);
 transition: 0.3s;
 }
 .profile-frame:hover .profile-img {
 filter: grayscale(0%) sepia(50%) hue-rotate(-50deg) saturate(3);
 }
 .hero-data h1 {
 font-size: 5rem;
 line-height: 0.9;
 text-transform: uppercase;
 margin-bottom: 1rem;
 position: relative;
 }
.hero-data h1::before {
 content: 'TARGET_ID:';
 font-family: var(--font-code);
 font-size: 1rem;
 color: var(--primary);
 display: block;
 margin-bottom: 0.5rem;
 letter-spacing: 2px;
 }
 .bio-text {
 font-family: var(--font-code);
 color: var(--text-dim);
 max-width: 600px;
 margin-bottom: 2rem;
 border-left: 2px solid var(--primary);
 padding-left: 1rem;
 }
 /* --- SKILL MATRIX --- */
 .section-header {
 font-family: var(--font-code);
 color: var(--primary);
 font-size: 1.2rem;
 margin-bottom: 2rem;
 display: flex;
 align-items: center;
 gap: 1rem;
 }
 .section-header::after {
 content: ''; flex: 1; height: 1px; background: var(--primary-dim);
 }
 .grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1rem;
 margin-bottom: 6rem;
 }
 .data-card {
 background: rgba(20,20,20,0.8);
 border: 1px solid #333;
 padding: 1.5rem;
 transition: 0.2s;
 position: relative;
 overflow: hidden;
 }
 .data-card:hover {
 border-color: var(--primary);
 box-shadow: 0 0 15px var(--primary-dim);
 }
 .data-card h3 {
 font-family: var(--font-code);
 font-size: 0.9rem;
 color: var(--primary);
 margin-bottom: 1rem;
 text-transform: uppercase;
 }
 .data-card ul {
 list-style: none;
 font-family: var(--font-code);
 font-size: 0.85rem;
 color: var(--text-dim);
 }
 .data-card li { margin-bottom: 5px; }
 .data-card li::before { content: '> '; color: var(--primary); }
 /* --- GLITCH BUTTON --- */
 .cy-btn {
 display: inline-block;
 padding: 15px 40px;
 background: var(--primary);
 color: #000;
 font-family: var(--font-code);
 font-weight: 700;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 2px;
 position: relative;
 clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
 transition: 0.2s;
 }
 .cy-btn:hover {
 background: #fff;
 color: var(--primary);
 transform: translateX(5px);
 }
 /* --- BOOT ANIMATION OVERLAY --- */
 #boot-screen {
 position: fixed;
 top: 0; left: 0; width: 100%; height: 100%;
 background: #000;
 z-index: 9999;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 font-family: var(--font-code);
 color: var(--primary);
 }
 .typing-line {
 font-size: 0.9rem;
 margin-bottom: 0.5rem;
 opacity: 0;
 animation: fadeIn 0.1s forwards;
 }
 @keyframes fadeIn { to { opacity: 1; } }
 /* --- RESPONSIVE --- */
 @media (max-width: 900px) {
 .hero-section { grid-template-columns: 1fr; }
 .hero-data h1 { font-size: 3.5rem; }
 .profile-frame { height: 250px; width: 250px; margin: 0 auto; }
 }
 </style>
</head>
<body>
<div class="scanlines"></div>
<div id="boot-screen">
 </div>
<canvas id="network-canvas"></canvas>
<div class="ui-layer" style="display: none;" id="main-interface">
<header>
 <div class="brand">ARCANE<span>_SYS</span></div>
 <div class="status-block">
 <div>MEM: 64TB // OK</div>
 <div>NET: SECURE</div>
 <div>LOC: UNKNOWN</div>
 </div>
 </header>
<section class="hero-section">
 <div class="hero-data">
 <h1>Arcane<br><span style="color:transparent; -webkit-text-stroke: 1px var(--primary);">Developer</span></h1>
<div class="bio-text">
 <p>> SPECIALIZATION: BACKEND ARCHITECTURE</p>
 <p>> STATUS: AVAILABLE FOR DEPLOYMENT</p>
 <br>
 <p>My code runs where the light doesn't touch. I construct the invisible logic that powers global systems. If the server stays up, I did my job.</p>
 </div>
<a href="mailto:arcane@system.dev" class="cy-btn">Initialize Link</a>
 </div>
<div class="profile-frame">
 <img src="./profile.jpg" alt="User" class="profile-img">
 <div style="position:absolute; bottom:10px; left:10px; font-size:0.6rem; color:var(--primary); font-family:var(--font-code);">IMG_REF_001</div>
 </div>
 </section>
<h2 class="section-header">01 // SYSTEM MODULES</h2>
 <div class="grid-container">
 <div class="data-card">
 <h3>// CORE_LOGIC</h3>
 <ul>
 <li>Node.js (NestJS)</li>
 <li>Rust [System Level]</li>
 <li>Python [Algorithmic]</li>
 </ul>
 </div>
 <div class="data-card">
 <h3>// PERSISTENCE</h3>
 <ul>
 <li>PostgreSQL Cluster</li>
 <li>Redis In-Memory</li>
 <li>Mongo Aggregations</li>
 </ul>
 </div>
 <div class="data-card">
 <h3>// DEPLOYMENT</h3>
 <ul>
 <li>Docker / K8s</li>
 <li>AWS Infrastructure</li>
 <li>CI/CD Automation</li>
 </ul>
 </div>
 </div>
<h2 class="section-header">02 // ARCHIVE_LOGS (PROJECTS)</h2>
 <div class="grid-container">
 <div class="data-card" style="border-left: 3px solid var(--primary);">
 <h3>PROJECT: KITSUNE</h3>
 <p style="font-size:0.8rem; color:#888; margin-bottom:1rem;">High-Frequency Trading Algorithm</p>
 <div style="font-family:var(--font-code); font-size:0.7rem; color:var(--primary);">
 > Latency: 4ms<br>
 > Throughput: 10k/sec<br>
 > Status: DEPLOYED
 </div>
 </div>
 <div class="data-card" style="border-left: 3px solid var(--primary);">
 <h3>PROJECT: RONIN</h3>
 <p style="font-size:0.8rem; color:#888; margin-bottom:1rem;">Distributed Payment Gateway</p>
 <div style="font-family:var(--font-code); font-size:0.7rem; color:var(--primary);">
 > Uptime: 99.999%<br>
 > Architecture: Microservices<br>
 > Status: ACTIVE
 </div>
 </div>
 </div>
<footer style="margin-top: 5rem; border-top: 1px solid #333; padding-top: 1rem; font-family: var(--font-code); font-size: 0.7rem; color: #555; display: flex; justify-content: space-between;">
 <div>SYSTEM ID: ARCANE-2025</div>
 <div>END OF LINE_</div>
 </footer>
</div>
<script>
 /* --- BOOT SEQUENCE SCRIPT --- */
 const bootScreen = document.getElementById('boot-screen');
 const mainInterface = document.getElementById('main-interface');
 const bootLines = [
 "INITIALIZING KERNEL...",
 "LOADING MODULES: [NODE, RUST, PYTHON]...",
 "CHECKING DATABASE INTEGRITY...",
 "ESTABLISHING SECURE CONNECTION...",
 "ACCESS GRANTED.",
 "WELCOME, ARCANE."
 ];
 let lineIndex = 0;
 function typeLine() {
 if (lineIndex < bootLines.length) {
 const p = document.createElement('div');
 p.classList.add('typing-line');
 p.textContent = "> " + bootLines[lineIndex];
 bootScreen.appendChild(p);
 lineIndex++;
 setTimeout(typeLine, 300); // Speed of typing
 } else {
 setTimeout(() => {
 bootScreen.style.display = 'none';
 mainInterface.style.display = 'block';
 initNetworkCanvas(); // Start background after boot
 }, 800);
 }
 }
// Start Boot
 window.onload = typeLine;
 /* --- CANVAS NETWORK ANIMATION (THE BACKEND VISUALIZER) --- */
 function initNetworkCanvas() {
 const canvas = document.getElementById('network-canvas');
 const ctx = canvas.getContext('2d');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 let particles = [];
 const particleCount = 60; // Number of nodes
 class Particle {
 constructor() {
 this.x = Math.random() * canvas.width;
 this.y = Math.random() * canvas.height;
 this.vx = (Math.random() - 0.5) * 0.5;
 this.vy = (Math.random() - 0.5) * 0.5;
 this.size = Math.random() * 2 + 1;
 }
 update() {
 this.x += this.vx;
 this.y += this.vy;
 if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
 if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
 }
 draw() {
 ctx.fillStyle = '#ff003c';
 ctx.beginPath();
 ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
 ctx.fill();
 }
 }
 // Create Particles
 for (let i = 0; i < particleCount; i++) {
 particles.push(new Particle());
 }
 // Mouse Interaction
 let mouse = { x: null, y: null };
 window.addEventListener('mousemove', (e) => {
 mouse.x = e.x;
 mouse.y = e.y;
 });
 function animate() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
 particles[i].update();
 particles[i].draw();
 // Draw connections
 for (let j = i; j < particles.length; j++) {
 const dx = particles[i].x - particles[j].x;
 const dy = particles[i].y - particles[j].y;
 const distance = Math.sqrt(dx * dx + dy * dy);
 if (distance < 150) {
 ctx.beginPath();
 ctx.strokeStyle = `rgba(255, 0, 60, ${1 - distance / 150})`;
 ctx.lineWidth = 0.5;
 ctx.moveTo(particles[i].x, particles[i].y);
 ctx.lineTo(particles[j].x, particles[j].y);
 ctx.stroke();
 }
 }
 // Connect to mouse
 if (mouse.x != null) {
 const dx = particles[i].x - mouse.x;
 const dy = particles[i].y - mouse.y;
 const distance = Math.sqrt(dx * dx + dy * dy);
 if (distance < 200) {
 ctx.beginPath();
 ctx.strokeStyle = `rgba(255, 0, 60, ${1 - distance / 200})`;
 ctx.lineWidth = 0.5;
 ctx.moveTo(particles[i].x, particles[i].y);
 ctx.lineTo(mouse.x, mouse.y);
 ctx.stroke();
 }
 }
 }
 requestAnimationFrame(animate);
 }
 animate();
 // Resize Handler
 window.addEventListener('resize', () => {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 });
 }
 </script>
</body>
</html>