BlockOne987.com/labs.html at main · nine1one/BlockOne987.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Labs | BlockOne987</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=Fira+Code:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root { --matrix-green: #00ff41; --accent-cyan: #00fff5; --accent-pink: #ff00ff; }
        body { background: #000; overflow-x: hidden; font-family: 'JetBrains Mono', 'Fira Code', monospace; color: var(--matrix-green); cursor: crosshair; }
        #canvas { position: fixed; top: 0; left: 0; z-index: 0; }
        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; z-index: 1; }
        .scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 3px); pointer-events: none; z-index: 2; opacity: 0.3; }
        .container { position: relative; z-index: 10; min-height: 100vh; padding: 2rem; display: flex; flex-direction: column; }
        header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid rgba(0, 255, 65, 0.2); animation: slideDown 0.8s ease-out; }
        @keyframes slideDown { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .logo { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.1rem; }
        .logo a { color: var(--matrix-green); text-decoration: none; }
        .logo a:hover { text-shadow: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green); }
        .logo::after { content: '_'; animation: blink 1s infinite; }
        @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
        nav { display: flex; gap: 2rem; }
        nav a { color: var(--matrix-green); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.15rem; text-transform: uppercase; padding: 0.5rem 0; transition: all 0.3s; opacity: 0.7; }
        nav a:hover, nav a.active { opacity: 1; text-shadow: 0 0 15px var(--matrix-green); }
        nav a::before { content: '[ '; opacity: 0; }
        nav a::after { content: ' ]'; opacity: 0; }
        nav a:hover::before, nav a:hover::after, nav a.active::before, nav a.active::after { opacity: 0.7; }
        main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 4rem 0; }
        .hero h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; margin-bottom: 1rem; }
        .hero h1 .glitch { position: relative; animation: glitch 2s infinite; }
        .hero h1 .glitch::before, .hero h1 .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        .hero h1 .glitch::before { color: var(--accent-cyan); animation: glitch-1 0.3s infinite; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); }
        .hero h1 .glitch::after { color: var(--accent-pink); animation: glitch-2 0.3s infinite; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); }
        @keyframes glitch { 0%, 90%, 100% { transform: translate(0); } }
        @keyframes glitch-1 { 0%, 100% { transform: translate(0); } }
        @keyframes glitch-2 { 0%, 100% { transform: translate(0); } }
        .hero p { font-size: 1rem; opacity: 0.7; max-width: 500px; line-height: 1.8; animation: fadeIn 1s ease-out 0.3s both; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 0.7; transform: translateY(0); } }
        .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
        .card { background: rgba(0, 20, 0, 0.6); border: 1px solid rgba(0, 255, 65, 0.2); padding: 1.8rem; transition: all 0.4s; position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); animation: cardIn 0.6s ease-out forwards; }
        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }
        .card:nth-child(4) { animation-delay: 0.4s; }
        @keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
        .card:hover { border-color: var(--matrix-green); box-shadow: 0 0 30px rgba(0, 255, 65, 0.2); transform: translateY(-5px); }
        .card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--matrix-green); }
        .card p { font-size: 0.85rem; opacity: 0.6; margin-bottom: 1rem; line-height: 1.6; }
        .card-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
        .tag { background: rgba(0, 255, 65, 0.1); border: 1px solid rgba(0, 255, 65, 0.3); padding: 0.2rem 0.6rem; font-size: 0.7rem; border-radius: 3px; text-transform: uppercase; }
        .lab-status { display: inline-block; padding: 0.2rem 0.5rem; font-size: 0.7rem; border-radius: 3px; margin-left: 0.5rem; }
        .lab-status.experimental { background: rgba(255, 0, 255, 0.2); border: 1px solid var(--accent-pink); color: var(--accent-pink); }
        .lab-status.stable { background: rgba(0, 255, 65, 0.2); border: 1px solid var(--matrix-green); }
        .card-link { color: var(--accent-cyan); text-decoration: none; font-size: 0.85rem; }
        .card-link:hover { text-shadow: 0 0 10px var(--accent-cyan); }
        .coming-soon { opacity: 0.5; }
        .coming-soon::after { content: 'COMING SOON'; position: absolute; top: 1rem; right: 1rem; background: rgba(0, 255, 65, 0.2); padding: 0.2rem 0.5rem; font-size: 0.6rem; border-radius: 3px; }
        footer { margin-top: auto; padding-top: 2rem; border-top: 1px solid rgba(0, 255, 65, 0.15); display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; opacity: 0.5; }
        .breadcrumbs a { color: var(--matrix-green); text-decoration: none; }
        .status { display: flex; align-items: center; gap: 0.5rem; }
        .status-dot { width: 8px; height: 8px; background: var(--matrix-green); border-radius: 50%; animation: pulse 2s infinite; box-shadow: 0 0 10px var(--matrix-green); }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
        .custom-cursor { position: fixed; width: 20px; height: 20px; border: 1px solid var(--matrix-green); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; }
        .custom-cursor.hover { width: 50px; height: 50px; border-color: var(--accent-cyan); }
        @media (max-width: 768px) { header { flex-direction: column; gap: 1rem; } nav { flex-wrap: wrap; gap: 1rem; } .card-grid { grid-template-columns: 1fr; } footer { flex-direction: column; gap: 1rem; } }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="overlay"></div>
    <div class="scanlines"></div>
    <div class="custom-cursor" id="cursor"></div>
    <div class="container">
        <header>
            <div class="logo"><a href="index.html">&lt;BlockOne987/&gt;</a></div>
            <nav>
                <a href="index.html">Home</a>
                <a href="projects.html">Projects</a>
                <a href="graphify-out/graph.html">Graph</a>
                <a href="snippets.html">Snippets</a>
                <a href="docs.html">Docs</a>
                <a href="blog.html">Blog</a>
                <a href="labs.html" class="active">Labs</a>
                <a href="contact.html">Contact</a>
            </nav>
        </header>
        <main>
            <div class="hero">
                <h1><span class="glitch" data-text="LABS">LABS</span></h1>
                <p>Experimental projects and prototypes.</p>
            </div>
            <div class="card-grid">
                <div class="card">
                    <h3>WebGL Matrix Rain <span class="lab-status experimental">Experimental</span></h3>
                    <p>GPU-accelerated matrix rain using WebGL shaders instead of Canvas 2D.</p>
                    <p>2-3x better performance on high-DPI displays.</p>
                    <div class="card-meta">
                        <span class="tag">WebGL</span>
                        <span class="tag">GLSL</span>
                    </div>
                    <a href="#" class="card-link">View Experiments &rarr;</a>
                </div>
                <div class="card">
                    <h3>Interactive Graph <span class="lab-status stable">Stable</span></h3>
                    <p>D3.js force-directed graph with zoom, pan, and drag.</p>
                    <p>Built for graphify visualization.</p>
                    <div class="card-meta">
                        <span class="tag">D3.js</span>
                        <span class="tag">Visualization</span>
                    </div>
                    <a href="graphify-out/graph.html" class="card-link">Open Graph &rarr;</a>
                </div>
                <div class="card coming-soon">
                    <h3>AI Code Review <span class="lab-status experimental">Experimental</span></h3>
                    <p>Integrate AI for automated code review.</p>
                    <div class="card-meta">
                        <span class="tag">AI</span>
                        <span class="tag">ML</span>
                    </div>
                    <span class="card-link">Coming Soon</span>
                </div>
                <div class="card coming-soon">
                    <h3>CLI Tools <span class="lab-status experimental">Experimental</span></h3>
                    <p>Developer CLI utilities.</p>
                    <div class="card-meta">
                        <span class="tag">CLI</span>
                        <span class="tag">Python</span>
                    </div>
                    <span class="card-link">Coming Soon</span>
                </div>
            </div>
        </main>
        <footer>
            <div class="breadcrumbs"><a href="index.html">&larr; Home</a> / Labs</div>
            <div class="status"><span class="status-dot"></span><span>SYSTEM ONLINE</span></div>
        </footer>
    </div>
    <script>
        const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth; canvas.height = window.innerHeight;
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()*&^%+-=[]{}|;:,.<>?/~';
        const charArray = chars.split(''), fontSize = 14, drops = Array(Math.floor(canvas.width / fontSize)).fill(1);
        function draw() { ctx.fillStyle = 'rgba(0,0,0,0.03)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#00ff41'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { ctx.fillText(charArray[Math.floor(Math.random() * charArray.length)], i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0; drops[i]++; } }
        setInterval(draw, 50); window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; });
        const cursor = document.getElementById('cursor');
        document.addEventListener('mousemove', e => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; });
        document.querySelectorAll('a, .card').forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); });
    </script>
</body>
</html>