-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
127 lines (127 loc) · 10.5 KB
/
contact.html
File metadata and controls
127 lines (127 loc) · 10.5 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
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | 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); } }
.hero p { font-size: 1rem; opacity: 0.7; max-width: 500px; line-height: 1.8; animation: fadeIn 1s ease-out 0.3s both; margin-bottom: 3rem; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 0.7; transform: translateY(0); } }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; opacity: 0.8; }
.form-group input, .form-group textarea { width: 100%; background: rgba(0, 20, 0, 0.8); border: 1px solid rgba(0, 255, 65, 0.3); padding: 1rem; color: var(--matrix-green); font-family: 'JetBrains Mono', monospace; font-size: 1rem; transition: all 0.3s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--matrix-green); box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); }
.btn-submit { background: rgba(0, 255, 65, 0.2); border: 2px solid var(--matrix-green); color: var(--matrix-green); padding: 1rem 2rem; font-family: 'JetBrains Mono', monospace; font-size: 1rem; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.1rem; }
.btn-submit:hover { background: var(--matrix-green); color: #000; box-shadow: 0 0 30px rgba(0, 255, 65, 0.5); }
.contact-info h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--matrix-green); }
.contact-info p { margin-bottom: 1rem; opacity: 0.7; line-height: 1.8; }
.contact-info a { color: var(--accent-cyan); text-decoration: none; }
.social-links { display: flex; gap: 1rem; margin-top: 2rem; }
.social-links a { padding: 0.8rem 1.5rem; border: 1px solid var(--matrix-green); color: var(--matrix-green); text-decoration: none; transition: all 0.3s; }
.social-links a:hover { background: var(--matrix-green); color: #000; }
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; } nav { flex-wrap: wrap; gap: 1rem; } .contact-grid { grid-template-columns: 1fr; } footer { flex-direction: column; } }
</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"><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">Blog</a>
<a href="labs.html">Labs</a>
<a href="contact.html" class="active">Contact</a>
</nav>
</header>
<main>
<div class="hero">
<h1><span class="glitch" data-text="CONTACT">CONTACT</span></h1>
<p>Get in touch or collaborate.</p>
</div>
<div class="contact-grid">
<div class="contact-form">
<form>
<div class="form-group"><label>Name</label><input type="text" placeholder="Your name"></div>
<div class="form-group"><label>Email</label><input type="email" placeholder="your@email.com"></div>
<div class="form-group"><label>Subject</label><input type="text" placeholder="What's this about?"></div>
<div class="form-group"><label>Message</label><textarea placeholder="Your message..."></textarea></div>
<button class="btn-submit">Send Message</button>
</form>
</div>
<div class="contact-info">
<h3>Let's Connect</h3>
<p>Interested in collaborating on a project, have a question, or just want to say hello?</p>
<h3 style="margin-top:2rem;">Direct Contact</h3>
<p>Email: <a href="mailto:blockone987@email.com">blockone987@email.com</a></p>
<p>GitHub: <a href="https://github.com/blockone987" target="_blank">@blockone987</a></p>
<div class="social-links">
<a href="https://github.com/blockone987" target="_blank">GitHub</a>
<a href="https://twitter.com/blockone987" target="_blank">Twitter</a>
</div>
</div>
</div>
</main>
<footer>
<div class="breadcrumbs"><a href="index.html">← Home</a> / Contact</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, button, input, textarea').forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); });
</script>
</body>
</html>