-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog.html
More file actions
118 lines (110 loc) · 7.01 KB
/
blog.html
File metadata and controls
118 lines (110 loc) · 7.01 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog | 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; font-family: 'JetBrains Mono', monospace; color: var(--matrix-green); overflow-x: hidden; }
.crt-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 100; }
.screen-flicker { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,255,65,0.02); pointer-events: none; z-index: 101; animation: flicker 0.15s infinite; }
@keyframes flicker { 0% { opacity: 0.97; } 50% { opacity: 1; } 100% { opacity: 0.98; } }
.container { position: relative; z-index: 10; min-height: 100vh; padding: 2rem; max-width: 800px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0,255,65,0.2); }
.logo { font-size: 1.8rem; font-weight: 700; }
.logo a { color: var(--matrix-green); text-decoration: none; }
.logo::before { content: '<'; color: var(--accent-cyan); }
.logo::after { content: '/>'; color: var(--accent-cyan); animation: blink 1s infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
nav { display: flex; gap: 1.5rem; }
nav a { color: var(--matrix-green); text-decoration: none; font-size: 0.8rem; opacity: 0.7; }
nav a:hover, nav a.active { opacity: 1; text-shadow: 0 0 10px var(--matrix-green); }
main { padding: 2rem 0; }
.hero h1 { font-size: 3rem; margin-bottom: 0.5rem; text-shadow: 0 0 20px var(--matrix-green); }
.hero p { opacity: 0.7; margin-bottom: 2rem; }
.blog-list { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-post { border: 1px solid rgba(0,255,65,0.2); padding: 1.5rem; transition: all 0.3s; }
.blog-post:hover { border-color: var(--matrix-green); background: rgba(0,255,65,0.03); box-shadow: 0 0 15px rgba(0,255,65,0.2); }
.post-date { font-size: 0.75rem; opacity: 0.5; margin-bottom: 0.5rem; }
.blog-post h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.blog-post p { font-size: 0.85rem; opacity: 0.7; line-height: 1.6; margin-bottom: 0.8rem; }
.blog-post a { color: var(--accent-cyan); text-decoration: none; font-size: 0.85rem; }
.blog-post a:hover { text-shadow: 0 0 10px var(--accent-cyan); }
.coming-soon { opacity: 0.4; }
.coming-soon::after { content: ' [COMING SOON]'; font-size: 0.7rem; }
footer { padding-top: 1.5rem; border-top: 1px solid rgba(0,255,65,0.15); display: flex; justify-content: space-between; font-size: 0.75rem; opacity: 0.5; }
footer a { color: var(--matrix-green); text-decoration: none; }
.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; }
@media (max-width: 768px) { header { flex-direction: column; gap: 1rem; } nav { flex-wrap: wrap; } }
</style>
</head>
<body>
<div class="crt-overlay"></div>
<div class="screen-flicker"></div>
<div class="custom-cursor" id="cursor"></div>
<div class="container">
<header>
<div class="logo"><a href="index.html">BlockOne987</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" class="active">Blog</a>
<a href="labs.html">Labs</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<div class="hero">
<h1>BLOG</h1>
<p>Tech writeups and tutorials.</p>
</div>
<div class="blog-list">
<article class="blog-post">
<div class="post-date">2026-04-22</div>
<h3>Building a Matrix-Themed Developer Portal</h3>
<p>How I created this website with WebGL effects, custom cursors, and interactive knowledge graph visualization.</p>
<p>This project started as a simple "choose your destiny" landing page inspired by The Matrix movie.</p>
<a href="#">Read More →</a>
</article>
<article class="blog-post">
<div class="post-date">2026-04-22</div>
<h3>Knowledge Graph with graphify</h3>
<p>Using graphify to extract entities and relationships from code and documentation.</p>
<p>The graph shows how all components connect.</p>
<a href="graphify-out/graph.html">View Graph →</a>
</article>
<article class="blog-post">
<div class="post-date">2026-04-22</div>
<h3>WebGL vs Canvas 2D Performance</h3>
<p>Comparing WebGL and Canvas 2D for the Matrix rain effect on high-DPI displays.</p>
<p>Initial tests showed canvas 2D chugging at 60fps on 4K, while WebGL maintained smooth frame rates.</p>
<a href="#">Read More →</a>
</article>
<article class="blog-post coming-soon">
<div class="post-date">Coming Soon</div>
<h3>CSS Animation Deep Dive</h3>
<p>Breaking down the glitch animations.</p>
<a href="#">Coming Soon</a>
</article>
</div>
</main>
<footer>
<div><a href="index.html">← Home</a> / Blog</div>
<div>SYSTEM ONLINE</div>
</footer>
</div>
<script>
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; });
document.querySelectorAll('a, .blog-post').forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); });
</script>
</body>
</html>