-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathabout.html
More file actions
216 lines (189 loc) · 13.9 KB
/
Copy pathabout.html
File metadata and controls
216 lines (189 loc) · 13.9 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
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | NothingButTyler</title>
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="NBT" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<script src="https://kit.fontawesome.com/eeb01edac2.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;800&display=swap" rel="stylesheet">
<style>
:root {
--snow: #f8fafc; --ice-blue: #38bdf8; --deep-midnight: #0f172a;
--glass: rgba(56, 189, 248, 0.05); --glass-border: rgba(56, 189, 248, 0.2);
}
/* CURSOR SYSTEM */
* { cursor: none; }
#cursor-dot, #cursor-outline { position: fixed; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); }
#cursor-dot { width: 8px; height: 8px; background: var(--ice-blue); border-radius: 50%; box-shadow: 0 0 10px var(--ice-blue); }
#cursor-outline { width: 30px; height: 30px; border: 2px solid var(--ice-blue); border-radius: 50%; transition: transform 0.15s ease-out; opacity: 0.5; }
@media (pointer: coarse), (max-width: 768px) { #cursor-dot, #cursor-outline { display: none !important; } * { cursor: auto !important; } }
body { margin: 0; font-family: 'Inter', sans-serif; background: #0f172a; color: var(--snow); line-height: 1.6; overflow-x: hidden; }
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
.mountain-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=2000') center/cover; opacity: 0.22; z-index: -2; }
#snow-canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
.container { max-width: 850px; margin: 0 auto; padding: 20px; }
/* NAVIGATION - EXACT HOMEPAGE STYLE */
nav {
position: fixed; top: 0; width: 100%; z-index: 2000;
background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(15px);
border-bottom: 2px solid var(--ice-blue); transition: 0.4s ease;
transform: translateY(-100%); opacity: 0;
}
nav.scrolled { transform: translateY(0); opacity: 1; }
.nav-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; }
.nav-brand { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: white; display: flex; align-items: center; gap: 10px; }
.nav-brand i { color: var(--ice-blue); filter: drop-shadow(0 0 12px var(--ice-blue)); }
.nav-links { display: flex; gap: 20px; }
.nav-link { text-decoration: none; color: white; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; transition: 0.3s; }
.nav-link:hover, .active-page { opacity: 1; color: var(--ice-blue) !important; }
#menu-toggle { display: none; font-size: 1.5rem; color: var(--ice-blue); cursor: pointer; }
/* HERO & BRAND */
header { text-align: center; padding: 80px 0 20px; }
h1 { font-weight: 800; font-size: 4rem; margin: 0; letter-spacing: -2px; }
#tagline { color: var(--ice-blue); font-weight: 700; text-transform: uppercase; letter-spacing: 6px; font-size: 1rem; margin-top: 15px; }
/* CONTENT GRID - FOR ABOUT PAGE */
.content-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; margin-bottom: 40px; }
.card-section { background: var(--glass); border: 1px solid var(--glass-border); padding: 40px; border-radius: 28px; margin-bottom: 35px; }
h2 { color: var(--ice-blue); filter: drop-shadow(0 0 8px var(--ice-blue)); font-weight: 800; display: flex; align-items: center; gap: 12px; }
/* ABOUT PAGE UNIQUE ELEMENTS */
.skill-tag { background: rgba(56, 189, 248, 0.08); border: 1px solid var(--glass-border); padding: 12px 18px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.timeline { border-left: 2px solid var(--ice-blue); padding-left: 20px; margin-left: 10px; }
.time-node { position: relative; padding-bottom: 30px; }
.time-node::before { content: ''; position: absolute; left: -21px; top: 8px; width: 10px; height: 10px; background: var(--ice-blue); border-radius: 50%; box-shadow: 0 0 10px var(--ice-blue); }
/* UNIVERSAL FOOTER STYLES */
.social-links { display: flex; justify-content: center; align-items: center; gap: 30px; margin: 80px 0 20px; }
.social-links a { color: white; font-size: 2rem; opacity: 0.6; transition: 0.3s ease; }
.social-links a:hover { opacity: 1; color: var(--ice-blue); filter: drop-shadow(0 0 10px var(--ice-blue)); transform: translateY(-3px); }
footer { text-align: center; opacity: 0.4; padding: 20px 0 80px; font-size: 0.8rem; letter-spacing: 1px; width: 100%; }
/* PORTRAIT FIXES - EXACT COPIED FROM HOMEPAGE */
@media screen and (max-width: 768px) {
.content-grid { grid-template-columns: 1fr; }
#menu-toggle { display: block !important; }
.nav-links {
display: flex !important; position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important;
background: #0f172a !important; flex-direction: column !important;
clip-path: inset(0 0 100% 0); opacity: 0; transition: 0.4s;
text-align: left !important;
}
.nav-links.mobile-open { clip-path: inset(0 0 0 0) !important; opacity: 1 !important; padding: 20px 0 20px 30px !important; }
h1 { font-size: 2.3rem !important; }
}
</style>
</head>
<body>
<div id="cursor-dot"></div><div id="cursor-outline"></div>
<div class="mountain-bg"></div><canvas id="snow-canvas"></canvas>
<nav id="mainNav">
<div class="nav-container">
<a href="/" class="nav-brand"><i class="fa-solid fa-cross"></i> NothingButTyler</a>
<div id="menu-toggle" onclick="toggleMenu()"><i class="fa-solid fa-bars"></i></div>
<div class="nav-links" id="navLinks">
<a href="/about" class="nav-link active-page">About</a>
<a href="/birthdaycountdown" class="nav-link">Birthday</a>
<a href="/projects" class="nav-link">Projects</a>
<a href="https://nothingbuttylermovies.github.io/" class="nav-link">Movies</a>
</div>
</div>
</nav>
<div class="container">
<header class="reveal">
<h1>The Architect</h1>
<p id="tagline">Beyond the Digital Horizon</p>
</header>
<div class="content-grid">
<div class="card-section reveal">
<h2>The Evolution</h2>
<p>I started out like a lot of creators—just making cringey videos, messing around with CapCut templates, and honestly, even stealing a few videos here and there. It was all just for fun, but eventually, I wanted to do more than just edit what other people made. I wanted to build my own worlds.</p>
<p>That’s when things changed. I started teaching myself how to code and how to use <strong>Roblox Studio</strong> properly. I went from clicking "export" on templates to actually engineering systems like <strong>Epic Verification</strong> and <strong>SocialConnect</strong>. My music taste evolved too—getting into sounds like <strong>BloomerSound</strong>—and I started putting effort into making my own high-quality edits and cinematic videos from scratch.</p>
<p>Today, <strong>NothingButTyler</strong> is about that growth. It’s the journey of moving from low-effort content to high-effort creation. Whether it's a website, a game, or a video edit, I’m focused on learning new things and making sure every project is better than the last.</p>
<p style="margin-top: 20px; font-weight: 700; color: var(--ice-blue);">I hope you'll enjoy the new me, as I am moving on from the past. <3</p>
</div>
<div class="sidebar">
<div class="card-section reveal" style="margin-bottom: 30px; padding: 25px;">
<h2 style="font-size: 1.3rem;">Tech Arsenal</h2>
<div class="skill-tag"><i class="fa-brands fa-html5"></i> Web Architecture</div>
<div class="skill-tag"><i class="fa-solid fa-gamepad"></i> Roblox Engineering</div>
<div class="skill-tag"><i class="fa-brands fa-discord"></i> Bot Systems</div>
<div class="skill-tag"><i class="fa-solid fa-scissors"></i> Professional Editing</div>
</div>
<div class="card-section reveal" style="padding: 25px;">
<h2 style="font-size: 1.3rem;">The Ascent</h2>
<div class="timeline">
<div class="time-node">
<span style="font-weight: 800; color: var(--ice-blue); font-size: 0.7rem;">APRIL 7, 2023 • START</span>
<p style="margin: 5px 0; font-size: 0.8rem; opacity: 0.6;">First steps into creation.</p>
</div>
<div class="time-node">
<span style="font-weight: 800; color: var(--ice-blue); font-size: 0.7rem;">MAY 16, 2024 • PIVOT</span>
<p style="margin: 5px 0; font-size: 0.8rem; opacity: 0.6;">Decided to explore a new path.</p>
</div>
<div class="time-node">
<span style="font-weight: 800; color: var(--ice-blue); font-size: 0.7rem;">2026 • THE RIDGE</span>
<p style="margin: 5px 0; font-size: 0.8rem; opacity: 0.6;">Current Era. Faith & Vision.</p>
</div>
</div>
</div>
</div>
</div>
<div class="reveal" style="text-align: center; margin-top: 40px;">
<div style="display: inline-block; padding: 15px 45px; border: 1px solid var(--ice-blue); border-radius: 50px; background: rgba(56, 189, 248, 0.05); box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);">
<span style="font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--ice-blue); letter-spacing: 3px; display: flex; align-items: center; gap: 15px;">
<i class="fa-solid fa-person-digging"></i> Current Objective: NothingButTyler+
</span>
</div>
</div>
<div class="social-links reveal">
<a href="https://youtube.com/@nothingbuttyler"><i class="fa-brands fa-youtube"></i></a>
<a href="https://github.com/nothingbuttyler"><i class="fa-brands fa-github"></i></a>
<a href="https://discord.gg/s2KB2FSFpZ"><i class="fa-brands fa-discord"></i></a>
<a href="https://www.roblox.com/users/3112388514/profile" style="display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; opacity: 0.8;">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill: white; width: 32px; height: 32px;"><path d="M18.926 23.998 0 18.892 5.075.002 24 5.108ZM15.348 10.09l-5.282-1.453-1.414 5.273 5.282 1.453z"></path></svg>
</a>
<a href="https://x.com/N0th2ngB4tT2l3r"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://guns.lol/nothingbuttyler"><i class="fa-solid fa-share-nodes"></i></a>
</div>
<footer><p>NothingButTyler © 2026 | Built with Faith & Vision</p></footer>
</div>
<script>
function toggleMenu() { document.getElementById('navLinks').classList.toggle('mobile-open'); }
function reveal() {
document.querySelectorAll(".reveal").forEach(el => {
if (el.getBoundingClientRect().top < window.innerHeight - 50) el.classList.add("active");
});
}
window.onscroll = () => {
const nav = document.getElementById('mainNav');
const tagline = document.getElementById('tagline');
if (tagline && tagline.getBoundingClientRect().bottom < 0) nav.classList.add('scrolled');
else nav.classList.remove('scrolled');
reveal();
};
const canvas = document.getElementById('snow-canvas');
const ctx = canvas.getContext('2d');
let w, h, flakes = [];
function init() {
w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight;
flakes = Array.from({length: 40}, () => ({ x: Math.random() * w, y: Math.random() * h, r: Math.random() * 2 + 1, d: Math.random() * 0.5 + 0.5 }));
}
function draw() {
ctx.clearRect(0,0,w,h); ctx.fillStyle = "rgba(255,255,255,0.4)"; ctx.beginPath();
flakes.forEach(f => { ctx.moveTo(f.x, f.y); ctx.arc(f.x, f.y, f.r, 0, Math.PI*2); f.y += f.d; if (f.y > h) f.y = -10; });
ctx.fill(); requestAnimationFrame(draw);
}
const dot = document.getElementById('cursor-dot'), out = document.getElementById('cursor-outline');
window.onmousemove = (e) => {
dot.style.left = out.style.left = e.clientX + "px";
dot.style.top = out.style.top = e.clientY + "px";
};
window.onload = () => { init(); draw(); reveal(); };
window.onresize = init;
</script>
</body>
</html>