crapthings/index.html at main · crapthings/crapthings · 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
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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>crapthings - Fullstack JavaScript Developer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              olive: {
                50: "#f8faf4",
                100: "#edf2df",
                200: "#d7e1b8",
                300: "#bccf8b",
                400: "#9fb15f",
                500: "#7f8f42",
                600: "#667236",
                700: "#4f592b",
                800: "#3c4423",
                900: "#2a301a",
              },
            },
          },
        },
      };
    </script>
    <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=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <style>
      :root {
        --bg: #070a06;
      }

      body {
        font-family: "Chakra Petch", sans-serif;
        background:
          radial-gradient(circle at 20% 10%, rgba(159, 177, 95, 0.22), transparent 34%),
          radial-gradient(circle at 85% 85%, rgba(188, 207, 139, 0.16), transparent 36%),
          linear-gradient(170deg, #0b0f08, #070a06);
      }

      .mono {
        font-family: "JetBrains Mono", monospace;
      }

      .grid-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(159, 177, 95, 0.14) 1px, transparent 1px),
          linear-gradient(90deg, rgba(159, 177, 95, 0.14) 1px, transparent 1px);
        background-size: 38px 38px;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 85%);
        pointer-events: none;
      }

      .scanline::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent 3px);
        background-size: 100% 5px;
        opacity: 0.18;
        pointer-events: none;
      }

      @keyframes blink {
        0%,
        49% {
          opacity: 1;
        }
        50%,
        100% {
          opacity: 0;
        }
      }

      .cursor {
        animation: blink 1s step-end infinite;
      }

      @keyframes bounceSoft {
        0%,
        100% {
          transform: translateY(0);
          opacity: 0.75;
        }
        50% {
          transform: translateY(8px);
          opacity: 1;
        }
      }

      .scroll-cue {
        animation: bounceSoft 1.6s ease-in-out infinite;
      }
    </style>
  </head>
  <body class="text-olive-100">
    <main class="relative grid-bg min-h-screen">
      <section class="relative mx-auto flex min-h-screen w-full max-w-7xl flex-col justify-center px-5 py-12 sm:px-8 lg:px-12">
        <div class="mb-8 flex items-center gap-3 text-xs uppercase tracking-[0.28em] text-olive-300/90">
          <span class="h-2 w-2 rounded-full bg-olive-400"></span>
          <span class="mono">online</span>
          <span class="text-olive-500">/</span>
          <span class="mono">portfolio.system</span>
        </div>

        <div class="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
          <div>
            <p class="mono text-sm text-olive-300">$ whoami</p>
            <h1 class="mt-3 text-5xl font-bold leading-none text-olive-50 sm:text-6xl lg:text-7xl">crapthings</h1>
            <p class="mt-4 max-w-2xl text-xl text-olive-200 sm:text-2xl">
              Fullstack JS engineer. React-first frontend, Next.js / Meteor.js fullstack, Mastra agent runtime, and cloud infrastructure.
            </p>
            <p class="mono mt-5 text-sm text-olive-300">
              email: crapthings@gmail.com
            </p>

            <div class="mt-8 flex flex-wrap gap-3 text-sm">
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">React</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">Next.js</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">Meteor.js</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">Mastra (Agent Framework)</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">Tailwind CSS</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">JavaScript</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">TypeScript</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">Python</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">LLM-Augmented Agents</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">Cross-Platform Apps</span>
              <span class="rounded-full border border-olive-500/50 bg-olive-900/60 px-3 py-1">Cloud Architecture</span>
            </div>
          </div>

          <aside class="scanline relative rounded-2xl border border-olive-500/35 bg-black/45 shadow-[0_0_35px_rgba(127,143,66,0.25)] backdrop-blur">
            <div class="flex items-center justify-between border-b border-olive-600/40 px-4 py-3">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">shell://capabilities</p>
              <div class="flex gap-2">
                <span class="h-2.5 w-2.5 rounded-full bg-olive-300/60"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-olive-500/60"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-olive-700/60"></span>
              </div>
            </div>
            <div class="border-b border-olive-600/40 px-4 py-3">
              <p class="mono mb-2 text-xs text-olive-300">click command</p>
              <div class="flex flex-wrap gap-2 mono text-xs">
                <button data-cmd="stack" class="rounded border border-olive-500/50 px-2 py-1 text-olive-200 transition hover:bg-olive-800/60">stack --show</button>
                <button data-cmd="runtime" class="rounded border border-olive-500/50 px-2 py-1 text-olive-200 transition hover:bg-olive-800/60">runtime --show</button>
                <button data-cmd="frontend" class="rounded border border-olive-500/50 px-2 py-1 text-olive-200 transition hover:bg-olive-800/60">frontend --show</button>
                <button data-cmd="ai" class="rounded border border-olive-500/50 px-2 py-1 text-olive-200 transition hover:bg-olive-800/60">ai --show</button>
                <button data-cmd="cloud" class="rounded border border-olive-500/50 px-2 py-1 text-olive-200 transition hover:bg-olive-800/60">cloud --show</button>
              </div>
            </div>
            <div class="mono space-y-3 px-4 py-5 text-sm leading-relaxed text-olive-200">
              <p id="shell-command"><span class="text-olive-400">$</span> stack --show</p>
              <div id="shell-output" class="space-y-1 text-olive-100"></div>
              <p><span class="text-olive-400">$</span> ready<span class="cursor">_</span></p>
            </div>
          </aside>
        </div>
        <div class="pointer-events-none absolute inset-x-0 bottom-7 flex justify-center sm:bottom-9">
          <a href="#build-capabilities" class="scroll-cue pointer-events-auto mono inline-flex items-center gap-2 rounded-full border border-olive-500/50 bg-olive-900/40 px-4 py-2 text-xs uppercase tracking-[0.22em] text-olive-200 transition hover:bg-olive-800/60">
            Scroll Down
            <span aria-hidden="true">↓</span>
          </a>
        </div>
      </section>

      <section id="build-capabilities" class="mx-auto w-full max-w-7xl px-5 pb-16 sm:px-8 lg:px-12">
        <div class="mb-6 mono text-xs uppercase tracking-[0.24em] text-olive-300/80">section://build-capabilities</div>
        <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
          <article class="rounded-2xl border border-olive-500/35 bg-olive-900/35 p-5 backdrop-blur">
            <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Clarity Under Pressure</p>
            <h3 class="mt-2 text-xl font-semibold text-olive-50">When Scope Is Fuzzy</h3>
            <p class="mt-3 text-sm leading-relaxed text-olive-200">
              I turn ambiguous requirements into a clear execution path, so teams stop debating and start shipping.
            </p>
          </article>
          <article class="rounded-2xl border border-olive-500/35 bg-olive-900/35 p-5 backdrop-blur">
            <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Delivery Velocity</p>
            <h3 class="mt-2 text-xl font-semibold text-olive-50">When Deadlines Are Tight</h3>
            <p class="mt-3 text-sm leading-relaxed text-olive-200">
              I build fast without creating chaos, balancing speed with architecture choices that still hold up months later.
            </p>
          </article>
          <article class="rounded-2xl border border-olive-500/35 bg-olive-900/35 p-5 backdrop-blur">
            <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">AI Productization</p>
            <h3 class="mt-2 text-xl font-semibold text-olive-50">When AI Must Be Real</h3>
            <p class="mt-3 text-sm leading-relaxed text-olive-200">
              I design LLM-augmented agent workflows that move from demo to reliable product behavior.
            </p>
          </article>
          <article class="rounded-2xl border border-olive-500/35 bg-olive-900/35 p-5 backdrop-blur">
            <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Operational Confidence</p>
            <h3 class="mt-2 text-xl font-semibold text-olive-50">When Reliability Matters</h3>
            <p class="mt-3 text-sm leading-relaxed text-olive-200">
              I harden systems with observability, deployment discipline, and cloud patterns built for growth.
            </p>
          </article>
        </div>
      </section>

      <section class="mx-auto w-full max-w-7xl px-5 pb-16 sm:px-8 lg:px-12">
        <div class="mb-6 mono text-xs uppercase tracking-[0.24em] text-olive-300/80">section://mission-control</div>
        <article class="rounded-3xl border border-olive-500/35 bg-olive-900/30 p-6 sm:p-8 backdrop-blur">
          <h2 class="text-3xl font-bold text-olive-50 sm:text-4xl">Mission Control</h2>
          <p class="mt-4 max-w-3xl text-olive-200">
            I do more than implement tickets. I help teams make better technical bets, execute them quickly, and deliver outcomes users can feel.
          </p>
          <div class="mt-6 grid gap-4 md:grid-cols-3">
            <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">01 Diagnose</p>
              <p class="mt-2 text-sm text-olive-100">Identify bottlenecks, hidden risks, and leverage points before they become expensive mistakes.</p>
            </div>
            <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">02 Build</p>
              <p class="mt-2 text-sm text-olive-100">Ship production-grade systems with clean interfaces, resilient services, and practical architecture.</p>
            </div>
            <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">03 Scale</p>
              <p class="mt-2 text-sm text-olive-100">Improve reliability and iteration speed through automation, monitoring, and focused performance work.</p>
            </div>
          </div>
        </article>
      </section>

      <section class="mx-auto w-full max-w-7xl px-5 pb-16 sm:px-8 lg:px-12">
        <div class="mb-6 mono text-xs uppercase tracking-[0.24em] text-olive-300/80">section://system-map</div>
        <div class="grid gap-5 lg:grid-cols-[1.25fr_0.75fr]">
          <article class="rounded-2xl border border-olive-500/35 bg-olive-900/30 p-6 backdrop-blur">
            <h2 class="text-2xl font-bold text-olive-50">System Map</h2>
            <div class="mt-5 grid gap-3 sm:grid-cols-2">
              <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
                <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Product Surfaces</p>
                <p class="mt-2 text-sm text-olive-100">Interfaces that guide users clearly and convert complexity into usable flows.</p>
              </div>
              <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
                <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Application Core</p>
                <p class="mt-2 text-sm text-olive-100">Business logic, data flow, and APIs engineered for real-world change.</p>
              </div>
              <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
                <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Intelligence Layer</p>
                <p class="mt-2 text-sm text-olive-100">Agent experiences with tool orchestration, memory, and controlled behavior in production.</p>
              </div>
              <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
                <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Infrastructure Layer</p>
                <p class="mt-2 text-sm text-olive-100">Cloud foundations designed for stability, observability, and controlled scale.</p>
              </div>
            </div>
          </article>
          <article class="rounded-2xl border border-olive-500/35 bg-black/35 p-6 backdrop-blur">
            <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">business impact</p>
            <ul class="mt-4 space-y-3 text-sm text-olive-100">
              <li class="rounded-lg border border-olive-500/25 bg-olive-900/25 p-3">Shorter path from idea to production.</li>
              <li class="rounded-lg border border-olive-500/25 bg-olive-900/25 p-3">Fewer rewrites caused by weak early decisions.</li>
              <li class="rounded-lg border border-olive-500/25 bg-olive-900/25 p-3">Faster feature delivery without reliability debt.</li>
              <li class="rounded-lg border border-olive-500/25 bg-olive-900/25 p-3">A technical partner who can execute and lead.</li>
            </ul>
          </article>
        </div>
      </section>

      <section class="mx-auto w-full max-w-7xl px-5 pb-16 sm:px-8 lg:px-12">
        <div class="mb-6 mono text-xs uppercase tracking-[0.24em] text-olive-300/80">section://build-modes</div>
        <article class="rounded-2xl border border-olive-500/35 bg-olive-900/30 p-6 backdrop-blur">
          <h2 class="text-2xl font-bold text-olive-50">Build Modes</h2>
          <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Mode A</p>
              <h3 class="mt-2 text-lg font-semibold text-olive-50">Launch Track</h3>
              <p class="mt-2 text-sm text-olive-100">For teams starting from zero and needing momentum immediately.</p>
            </div>
            <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Mode B</p>
              <h3 class="mt-2 text-lg font-semibold text-olive-50">Stabilize Track</h3>
              <p class="mt-2 text-sm text-olive-100">For products slowed down by legacy decisions and fragile code paths.</p>
            </div>
            <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Mode C</p>
              <h3 class="mt-2 text-lg font-semibold text-olive-50">Intelligence Track</h3>
              <p class="mt-2 text-sm text-olive-100">For teams adding agent capabilities that must work beyond prototype quality.</p>
            </div>
            <div class="rounded-xl border border-olive-500/30 bg-black/30 p-4">
              <p class="mono text-xs uppercase tracking-[0.2em] text-olive-300">Mode D</p>
              <h3 class="mt-2 text-lg font-semibold text-olive-50">Scale Track</h3>
              <p class="mt-2 text-sm text-olive-100">For systems that need better uptime, lower risk, and cleaner operations.</p>
            </div>
          </div>
        </article>
      </section>

      <section class="mx-auto w-full max-w-7xl px-5 pb-24 sm:px-8 lg:px-12">
        <div class="mb-6 mono text-xs uppercase tracking-[0.24em] text-olive-300/80">section://signal-contact</div>
        <article class="rounded-3xl border border-olive-400/45 bg-gradient-to-br from-olive-900/50 to-black/45 p-7 shadow-[0_0_55px_rgba(127,143,66,0.2)] sm:p-10">
          <p class="mono text-xs uppercase tracking-[0.22em] text-olive-300">signal://open-channel</p>
          <h2 class="mt-3 text-3xl font-bold text-olive-50 sm:text-4xl">Let’s Build Something Difficult</h2>
          <p class="mt-4 max-w-3xl text-olive-100">
            If your team is facing technical complexity, delivery pressure, or AI integration risk, I can step in and turn it into a working system.
          </p>
          <div class="mt-6 flex flex-wrap items-center gap-3">
            <a href="mailto:crapthings@gmail.com" class="mono rounded-full border border-olive-300/60 bg-olive-300/15 px-5 py-2 text-sm text-olive-50 transition hover:bg-olive-300/25">
              crapthings@gmail.com
            </a>
            <span class="mono rounded-full border border-olive-500/40 bg-black/35 px-4 py-2 text-xs uppercase tracking-[0.18em] text-olive-200">
              available for product builds, ai integration, and infrastructure modernization
            </span>
          </div>
        </article>
      </section>
    </main>
    <script>
      const shellData = {
        stack: [
          "fullstack frameworks: next.js, meteor.js",
          "frontend primary: react + js ecosystem ui stacks",
          "backend: node.js api + realtime + service integration",
          "languages: javascript, typescript, python",
        ],
        runtime: [
          "mastra: agent framework runtime for llm workflows",
          "agent orchestration, tools, memory, execution flows",
          "production-minded integration into web products",
        ],
        frontend: [
          "primary: react",
          "also build across js ecosystem frameworks when needed",
          "focus on performance, maintainability, and rapid delivery",
        ],
        ai: [
          "llm-augmented agents across product stack",
          "agentic workflows with tools, memory, and orchestration",
          "ship ai-native features fast in multi-language environments",
        ],
        cloud: [
          "cloud infrastructure: compute / data / observability / cicd",
          "cross-platform app delivery and scalable deployment patterns",
          "architecture decisions based on reliability + cost + speed",
        ],
      };

      const cmdMap = {
        stack: "stack --show",
        runtime: "runtime --show",
        frontend: "frontend --show",
        ai: "ai --show",
        cloud: "cloud --show",
      };

      const commandEl = document.getElementById("shell-command");
      const outputEl = document.getElementById("shell-output");
      const buttons = document.querySelectorAll("[data-cmd]");
      let activeRenderToken = 0;

      function sleep(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      }

      async function typeWords(targetEl, text, token) {
        const words = text.split(" ");
        targetEl.textContent = "";
        for (let i = 0; i < words.length; i += 1) {
          if (token !== activeRenderToken) return;
          targetEl.textContent += (i === 0 ? "" : " ") + words[i];
          await sleep(36);
        }
      }

      async function renderShell(key) {
        activeRenderToken += 1;
        const currentToken = activeRenderToken;
        commandEl.innerHTML = '<span class="text-olive-400">$</span> ' + cmdMap[key];
        outputEl.innerHTML = "";
        for (const line of shellData[key]) {
          if (currentToken !== activeRenderToken) return;
          const p = document.createElement("p");
          outputEl.appendChild(p);
          await typeWords(p, line, currentToken);
          await sleep(80);
        }
      }

      buttons.forEach((button) => {
        button.addEventListener("click", () => {
          buttons.forEach((b) => b.classList.remove("bg-olive-800/60", "text-olive-50"));
          button.classList.add("bg-olive-800/60", "text-olive-50");
          renderShell(button.dataset.cmd);
        });
      });

      renderShell("stack");
      buttons[0].classList.add("bg-olive-800/60", "text-olive-50");
    </script>
  </body>
</html>