-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
259 lines (234 loc) · 15.3 KB
/
Copy pathindex.html
File metadata and controls
259 lines (234 loc) · 15.3 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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structural Sensei | Engineering & Automation Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');
:root {
--silk: #f5f5f0;
--brand-red: #d90429;
--brand-orange: #f3722c;
--dark-grey: #1a1a1a;
}
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #000;
color: var(--silk);
scroll-behavior: smooth;
overflow-x: hidden;
}
.gradient-text {
background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-card {
background: rgba(26, 26, 26, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Modal Logic */
#pythonModal, #hireMenu { display: none; }
#pythonModal.active, #hireMenu.active { display: flex; }
.code-container {
background: #0d1117;
font-family: 'Courier New', Courier, monospace;
}
.btn-hover:hover {
transform: translateY(-2px);
transition: all 0.2s ease;
}
/* Float animation for the mascot hover */
.mascot-hover {
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}
.mascot-hover:hover {
transform: translateY(-10px) scale(1.05);
filter: drop-shadow(0 15px 25px rgba(217, 4, 41, 0.4));
}
</style>
</head>
<body class="selection:bg-red-600 selection:text-white">
<nav class="fixed w-full z-50 px-6 py-4 flex justify-between items-center bg-black/80 backdrop-blur-md border-b border-white/5">
<div class="font-bold tracking-tighter uppercase text-sm">Structural<span class="text-red-600">Sensei</span></div>
<div class="flex gap-6 text-[10px] uppercase font-bold tracking-widest">
<a href="#about" class="hover:text-orange-500 transition">About</a>
<a href="#platforms" class="hover:text-orange-500 transition">Platforms</a>
<a href="game.html" class="text-white hover:text-red-500 transition">Games</a>
<a href="javascript:void(0)" onclick="toggleModal('pythonModal')" class="text-red-500">Python Preview</a>
</div>
</nav>
<header class="pt-40 pb-20 px-6 max-w-6xl mx-auto">
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
<div class="flex-1 text-center lg:text-left">
<div class="inline-block px-3 py-1 mb-6 text-[10px] font-bold tracking-[0.2em] text-orange-500 uppercase border border-orange-500/30 rounded">
Engineering · Career · Finance
</div>
<h1 class="text-5xl md:text-7xl font-bold leading-[0.9] mb-8">
Empowering Engineers, <br>
<span class="gradient-text">Building Mastery.</span>
</h1>
<p class="text-lg md:text-xl text-stone-400 mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
I break the "Technical Wall." From custom Python automation to high-level engineering systems, I bridge the gap between academic theory and financial independence.
</p>
<div class="flex flex-wrap gap-4 justify-center lg:justify-start">
<button onclick="toggleModal('hireMenu')" class="btn-hover bg-red-600 hover:bg-red-700 px-8 py-4 rounded font-bold uppercase text-xs tracking-widest transition">
Get Started / Hire Me
</button>
<a href="#about" class="btn-hover border border-stone-700 px-8 py-4 rounded text-xs font-bold uppercase tracking-widest hover:bg-white/5 transition">
Our Story ↓
</a>
</div>
</div>
<div class="w-full lg:w-2/5 flex justify-center relative group mt-10 lg:mt-0">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-tr from-red-600/30 to-orange-500/20 rounded-full blur-[80px] group-hover:scale-125 group-hover:from-red-600/40 transition-all duration-500 z-0"></div>
<img
src="https://rblpaniosociqnxkxaym.supabase.co/storage/v1/object/public/mascot-images/animations/bb612017-9842-413a-82d1-33e370df0373/wave_720.apng"
alt="Mascot animation"
class="relative z-10 w-64 md:w-80 lg:w-[400px] h-auto object-contain mascot-hover"
>
</div>
</div>
</header>
<section id="about" class="py-24 px-6 max-w-4xl mx-auto border-t border-white/5">
<div class="grid md:grid-cols-2 gap-16">
<div>
<h2 class="text-red-600 font-bold uppercase text-xs tracking-widest mb-6 italic">Background & Mission</h2>
<div class="space-y-4 text-stone-300 text-sm leading-relaxed">
<p>My journey began in structural engineering, where I quickly realized the curriculum missed key lessons on <strong>career negotiation, personal branding, and building wealth.</strong></p>
<p>Structural Sensei is currently expanding into knowledge transfer and professional automation. We bridge the gap to real-world professional success with high-leverage guidance you won't find in a classroom.</p>
</div>
</div>
<div class="glass-card p-8 rounded-2xl border-l-4 border-orange-500">
<h3 class="text-silk font-bold mb-4 uppercase text-xs tracking-widest">The "Sensei" Mentality</h3>
<p class="text-stone-400 text-sm italic leading-relaxed mb-6">
"I distill 13+ years of technical management into practical mastery. I don't just write code; I design systems that ensure data integrity and massive time savings."
</p>
<div class="flex items-center gap-3">
<div class="h-px w-8 bg-red-600"></div>
<span class="text-[10px] font-bold uppercase tracking-widest">Wico B. | Efficiency Architect</span>
</div>
</div>
</div>
</section>
<section id="platforms" class="py-24 px-6 max-w-4xl mx-auto border-t border-white/5">
<h2 class="text-center font-bold uppercase text-[10px] tracking-[0.3em] text-stone-500 mb-16">Global Resource Hub</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="https://wico.gumroad.com/" target="_blank" class="glass-card p-8 rounded-xl hover:border-red-600/50 transition-all group">
<div class="text-red-600 mb-6 text-2xl group-hover:scale-110 transition-transform"><i class="fa-solid fa-cart-shopping"></i></div>
<h4 class="font-bold uppercase text-xs mb-2 tracking-widest">Gumroad Shop</h4>
<p class="text-stone-500 text-[11px] leading-relaxed">Download professional Python scripts, automation tools, and finance guides.</p>
</a>
<a href="https://www.youtube.com/@StructuralSensei1" target="_blank" class="glass-card p-8 rounded-xl hover:border-orange-600/50 transition-all group">
<div class="text-orange-500 mb-6 text-2xl group-hover:scale-110 transition-transform"><i class="fa-brands fa-youtube"></i></div>
<h4 class="font-bold uppercase text-xs mb-2 tracking-widest">YouTube Channel</h4>
<p class="text-stone-500 text-[11px] leading-relaxed">Watch video tutorials, deep-dives, and discussions on engineering concepts.</p>
</a>
<a href="https://www.upwork.com/freelancers/~01d3526b89af44ad3e?mp_source=share" target="_blank" class="glass-card p-8 rounded-xl hover:border-white/40 transition-all group border-white/10 shadow-xl">
<div class="text-white mb-6 text-2xl group-hover:scale-110 transition-transform"><i class="fa-brands fa-upwork"></i></div>
<h4 class="font-bold uppercase text-xs mb-2 tracking-widest">Upwork Projects</h4>
<p class="text-stone-500 text-[11px] leading-relaxed">Hire me for custom Python automation, web scraping, and technical management.</p>
</a>
</div>
</section>
<footer class="py-20 px-6 text-center border-t border-white/5 bg-stone-950/50">
<p class="text-[10px] text-stone-600 mb-6 tracking-[0.4em] uppercase">Mastering the Art of Design</p>
<a href="mailto:wico.pydev@gmail.com" class="text-xl md:text-2xl font-bold hover:text-orange-500 transition-colors">wico.pydev@gmail.com</a>
<p class="mt-12 text-[10px] text-stone-700 tracking-widest">© 2026 STRUCTURAL SENSEI. ALL RIGHTS RESERVED.</p>
</footer>
<div id="hireMenu" class="fixed inset-0 z-[70] hidden items-center justify-center bg-black/95 p-4 backdrop-blur-md">
<div class="max-w-lg w-full bg-stone-900 border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
<div class="p-6 border-b border-white/5 flex justify-between items-center">
<h3 class="font-bold uppercase tracking-widest text-xs text-orange-500">The Decision Hub</h3>
<button onclick="toggleModal('hireMenu')" class="text-stone-500 hover:text-white text-2xl">×</button>
</div>
<div class="p-8 space-y-6">
<div class="grid grid-cols-2 gap-4">
<a href="https://www.upwork.com/freelancers/~01d3526b89af44ad3e?mp_source=share" target="_blank" class="p-5 bg-white/5 border border-white/10 rounded-xl hover:border-green-500 transition text-center">
<i class="fa-brands fa-upwork text-green-500 text-2xl mb-2"></i>
<p class="text-[10px] font-bold uppercase tracking-tighter">Upwork Hire</p>
</a>
<a href="https://wico.gumroad.com/" target="_blank" class="p-5 bg-white/5 border border-white/10 rounded-xl hover:border-pink-500 transition text-center">
<i class="fa-solid fa-cart-shopping text-pink-500 text-2xl mb-2"></i>
<p class="text-[10px] font-bold uppercase tracking-tighter">Buy Tools</p>
</a>
</div>
<hr class="border-white/5">
<div>
<label class="block text-[10px] uppercase font-bold text-stone-500 mb-4 tracking-widest text-center">Custom Inquiry: Can I do the job?</label>
<textarea id="jobInquiry" rows="3" class="w-full bg-black border border-white/10 rounded-xl p-4 text-sm text-silk focus:border-red-600 outline-none transition" placeholder="Tell me your technical challenge..."></textarea>
<div class="mt-4 flex flex-wrap gap-2 justify-center">
<button onclick="suggest('Can you automate my messy Excel workflows?')" class="text-[9px] bg-white/5 px-3 py-1.5 rounded-full hover:bg-white/10 border border-white/5">Excel Automation</button>
<button onclick="suggest('I need a custom Streamlit dashboard for my data.')" class="text-[9px] bg-white/5 px-3 py-1.5 rounded-full hover:bg-white/10 border border-white/5">Internal Tools</button>
</div>
<button onclick="sendInquiry()" class="w-full mt-6 bg-red-600 hover:bg-red-500 py-4 rounded-xl font-bold uppercase text-[10px] tracking-[0.2em] transition shadow-lg shadow-red-900/20">
Send Inquiry to Sensei
</button>
</div>
</div>
</div>
</div>
<div id="pythonModal" class="fixed inset-0 z-[70] hidden items-center justify-center bg-black/90 p-4">
<div class="max-w-2xl w-full glass-card rounded-2xl overflow-hidden border border-white/10 shadow-2xl">
<div class="p-4 bg-stone-900 flex justify-between items-center border-b border-white/5">
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">automation_logic.py</span>
<button onclick="toggleModal('pythonModal')" class="text-stone-500 hover:text-white">×</button>
</div>
<div class="p-8 code-container text-[12px] md:text-sm overflow-x-auto">
<pre class="text-blue-300">
<span class="text-stone-500"># Engineering Efficiency Logic</span>
<span class="text-purple-400">class</span> <span class="text-yellow-400">StructuralSensei</span>:
<span class="text-purple-400">def</span> <span class="text-blue-400">__init__</span>(self):
self.mindset = <span class="text-orange-400">"Management Precision"</span>
self.tools = [<span class="text-orange-400">"Python"</span>, <span class="text-orange-400">"SQL"</span>, <span class="text-orange-400">"Streamlit"</span>]
<span class="text-purple-400">def</span> <span class="text-blue-400">optimize_workflow</span>(self, task_type):
<span class="text-purple-400">if</span> task_type == <span class="text-orange-400">"Manual"</span>:
<span class="text-purple-400">return</span> <span class="text-orange-400">"Automate via Custom Script"</span>
<span class="text-purple-400">return</span> <span class="text-orange-400">"Scale Professional Freedom"</span>
<span class="text-stone-500"># Initializing 13 years of expertise...</span>
sensei = StructuralSensei()
print(sensei.optimize_workflow(<span class="text-orange-400">"Manual"</span>))</pre>
</div>
<div class="p-4 bg-red-600/10 text-center border-t border-white/5">
<p class="text-[10px] text-red-500 font-bold uppercase tracking-widest">Logic-driven results for every contract.</p>
</div>
</div>
</div>
<script>
function toggleModal(id) {
const modal = document.getElementById(id);
if (modal.classList.contains('hidden')) {
modal.classList.remove('hidden');
modal.classList.add('active');
} else {
modal.classList.add('hidden');
modal.classList.remove('active');
}
}
function suggest(text) {
document.getElementById('jobInquiry').value = text;
}
function sendInquiry() {
const text = document.getElementById('jobInquiry').value;
if (!text) {
alert("Please describe your project first!");
return;
}
const subject = encodeURIComponent("Structural Sensei: Project Inquiry");
const body = encodeURIComponent(text);
window.location.href = `mailto:wico.pydev@gmail.com?subject=${subject}&body=${body}`;
}
// Close modals when clicking background
window.onclick = function(event) {
if (event.target.classList.contains('active')) {
event.target.classList.add('hidden');
event.target.classList.remove('active');
}
}
</script>
</body>
</html>