ultralab/test-warm.html at master · ppcvote/ultralab · 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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TestCreator — Personal Site</title>
<meta name="description" content="I'm on a mission to prove that one person, armed with AI and the right systems, can operate like a team of ten. This isn't just a metaphor; it's a blu">
<meta name="author" content="TestCreator">
<meta property="og:type" content="website">
<meta property="og:title" content="TestCreator — Creator">
<meta property="og:description" content="I'm on a mission to prove that one person, armed with AI and the right systems, can operate like a team of ten. This isn't just a metaphor; it's a blu">
<meta property="og:site_name" content="TestCreator">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="TestCreator — Creator">
<meta name="twitter:description" content="I'm on a mission to prove that one person, armed with AI and the right systems, can operate like a team of ten. This isn't just a metaphor; it's a blu">
<link rel="canonical" href="https://threads.com/@testcreator">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Person","name":"TestCreator","description":"I'm on a mission to prove that one person, armed with AI and the right systems, can operate like a team of ten. This isn't just a metaphor; it's a blu","url":"https://threads.com/@testcreator","sameAs":["https://threads.com/@testcreator"]}
</script>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700;900&family=JetBrains+Mono:wght@300;400;700&family=Noto+Sans+TC:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { theme: { extend: { fontFamily: {
  display: ['Outfit','sans-serif'], mono: ['JetBrains Mono','monospace'], body: ['Noto Sans TC','sans-serif']
}}}}
</script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/lenis@1/dist/lenis.min.js"></script>
<style>
  body {
    background-color: #FAF8F5;
    color: #3D3529;
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
  }
  .grain-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -1; opacity: 0.02;
  }
  h1, h2, h3, .font-display { font-family: 'Fraunces', serif; }
  .gradient-text {
    background: linear-gradient(90deg, #22d3ee, #6366f1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .glass-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(61,53,41,0.1);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(61,53,41,0.06);
    position: relative; overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(61,53,41,0.1);
  }
  .accent-button {
    background-color: #22d3ee; color: #FFFFFF;
    border-radius: 999px;
    transition: all 0.4s ease;
  }
  .accent-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(34,211,238, 0.3);
  }
  .line-grow { height: 1px; background: linear-gradient(to right, transparent, rgba(61,53,41,0.15), transparent); }
  .navbar { background-color: transparent; transition: background-color 0.3s ease, backdrop-filter 0.3s ease; }
  .warm-divider { width: 48px; height: 3px; border-radius: 2px; background: #22d3ee; opacity: 0.5; }
</style>
</head>
<body>

<!-- Grain -->
<div class="grain-overlay">
  <svg viewBox="0 0 256 256" class="w-full h-full">
    <filter id="grain"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter>
    <rect width="100%" height="100%" filter="url(#grain)"/>
  </svg>
</div>

<!-- Navbar -->
<nav class="navbar fixed w-full z-50 py-5 px-6 md:px-12 flex justify-between items-center">
  <a href="#" class="text-xl font-bold font-display" style="color: #3D3529;">TestCreator</a>
  <div class="hidden md:flex space-x-8 text-sm" style="color: #8C8070;">
    <a href="#about" class="hover:opacity-60 transition-colors">About</a>
    <a href="#blog" class="hover:opacity-60 transition-colors">Blog</a>
    <a href="#connect" class="hover:opacity-60 transition-colors">Connect</a>
  </div>
  <button class="md:hidden text-2xl" style="color: #3D3529;">+</button>
</nav>

<main>
  <!-- Hero -->
  <section class="relative min-h-screen flex items-center justify-center p-6 md:p-12 overflow-hidden">
    <div class="parallax-orb absolute w-72 h-72 rounded-full blur-3xl opacity-10 -top-20 -left-20" style="background: #22d3ee" data-speed="0.8"></div>
    <div class="parallax-orb absolute w-64 h-64 rounded-full blur-3xl opacity-8 -bottom-16 -right-16" style="background: #6366f1" data-speed="1.2"></div>

    <div class="text-center max-w-3xl mx-auto z-10">
      <div class="w-32 h-32 md:w-48 md:h-48 rounded-full flex items-center justify-center text-5xl font-black" style="background: linear-gradient(135deg, #22d3ee, #22d3ee88)">TE</div>
      <p class="text-sm uppercase tracking-[0.2em] mt-8 mb-4 reveal-up" style="color: #22d3ee;">Creator</p>
      <h1 class="text-4xl sm:text-6xl md:text-7xl font-bold leading-tight mb-6 font-display hero-title" style="color: #3D3529;">
        <span class="hero-title block gradient-text">AI</span>
<span class="hero-title block gradient-text">Product</span>
<span class="hero-title block gradient-text">Builder</span>
<span class="hero-title block gradient-text">One-Person</span>
<span class="hero-title block gradient-text">Company</span>
      </h1>
      <p class="text-lg md:text-xl leading-relaxed mb-10 reveal-up" style="color: #8C8070;">
        AI product builder, one person company
      </p>
      <a href="#connect" class="accent-button px-10 py-3.5 font-bold text-lg reveal-up inline-block">
        開始連結
      </a>
    </div>
  </section>

  <!-- About -->
  <section id="about" class="relative py-28 px-6 md:px-12 overflow-hidden" style="background: #F5F2EE;">
    <div class="parallax-orb absolute w-72 h-72 rounded-full blur-3xl opacity-8 top-1/4 right-0" style="background: #22d3ee" data-speed="0.7"></div>
    <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-start">
      <div>
        <div class="warm-divider mb-6 reveal-up"></div>
        <h2 class="text-3xl md:text-5xl font-bold mb-8 font-display reveal-up" style="color: #3D3529;">Building autonomous AI systems and scaling solo ventures.</h2>
        <div class="reveal-up" style="color: #6B6358;"><p class="text-lg leading-relaxed text-slate-300 mb-4">I'm on a mission to prove that one person, armed with AI and the right systems, can operate like a team of ten. This isn't just a metaphor; it's a blueprint for efficiency, automation, and impact. My work revolves around leveraging artificial intelligence to create self-healing, intelligent products that solve real problems without constant human oversight.</p>
<p class="text-lg leading-relaxed text-slate-300 mb-4">My approach to building is rooted in pragmatism: talk to users, validate ideas, and then build. I obsess over finding the most cost-effective, powerful AI tools and strategies to achieve ambitious goals, whether it's optimizing a website's SEO in an afternoon or orchestrating a fleet of AI agents to work 24/7. It's about smart building, not just hard building.</p></div>
      </div>
      <div class="card-group grid gap-5">
        <div class="glass-card rounded-2xl p-6">
      <div class="text-3xl mb-3">🤖</div>
      <h3 class="text-lg font-bold text-white mb-1">AI Product Builder</h3>
      <p class="text-sm text-slate-400">Crafting autonomous, intelligent systems that work around the clock.</p>
    </div>
<div class="glass-card rounded-2xl p-6">
      <div class="text-3xl mb-3">💼</div>
      <h3 class="text-lg font-bold text-white mb-1">One-Person Company</h3>
      <p class="text-sm text-slate-400">Scaling impact and operations without the overhead of a large team.</p>
    </div>
<div class="glass-card rounded-2xl p-6">
      <div class="text-3xl mb-3">💡</div>
      <h3 class="text-lg font-bold text-white mb-1">Efficiency Hacker</h3>
      <p class="text-sm text-slate-400">Optimizing workflows and leveraging AI for maximum output at minimal cost.</p>
    </div>
<div class="glass-card rounded-2xl p-6">
      <div class="text-3xl mb-3">🗣️</div>
      <h3 class="text-lg font-bold text-white mb-1">User-Centric Developer</h3>
      <p class="text-sm text-slate-400">Prioritizing user feedback to build features that truly matter.</p>
    </div>
      </div>
    </div>
  </section>

  <!-- Blog -->
  <section id="blog" class="relative py-28 px-6 md:px-12 overflow-hidden">
    <div class="parallax-orb absolute w-96 h-96 rounded-full blur-3xl opacity-6 -bottom-32 left-1/3" style="background: #6366f1" data-speed="1.5"></div>
    <div class="max-w-4xl mx-auto">
      <div class="warm-divider mb-6 reveal-up"></div>
      <h2 class="text-3xl md:text-5xl font-bold mb-12 font-display reveal-up gradient-text">Thoughts</h2>
      <div class="space-y-6">
        <article class="glass-card rounded-2xl p-8 md:p-12 reveal-up">

      <h3 class="text-2xl md:text-3xl font-bold mb-3" style="background: linear-gradient(90deg, #22d3ee, #22d3eecc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Self-Healing AI Systems</h3>
      <div class="flex flex-wrap gap-3 text-xs font-mono text-slate-500 mb-6"><span>❤️ 25</span></div>
      <p class="text-lg leading-relaxed text-slate-300">Just built a self-healing AI system that monitors 4 agents 24/7. No human intervention needed.</p>

    </article>
    <div class="line-grow h-px bg-gradient-to-r from-transparent via-current to-transparent my-12"></div>
<article class="glass-card rounded-2xl p-8 md:p-12 reveal-up">

      <h3 class="text-2xl md:text-3xl font-bold mb-3" style="background: linear-gradient(90deg, #22d3ee, #22d3eecc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Free-Tier AI Secrets</h3>
      <div class="flex flex-wrap gap-3 text-xs font-mono text-slate-500 mb-6"><span>❤️ 18</span></div>
      <p class="text-lg leading-relaxed text-slate-300">The secret to free-tier AI: Gemini Flash for automation, Claude for thinking, Ollama for privacy. Total cost: $0/month.</p>

    </article>
    <div class="line-grow h-px bg-gradient-to-r from-transparent via-current to-transparent my-12"></div>
<article class="glass-card rounded-2xl p-8 md:p-12 reveal-up">

      <h3 class="text-2xl md:text-3xl font-bold mb-3" style="background: linear-gradient(90deg, #22d3ee, #22d3eecc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Build What Users Want</h3>
      <div class="flex flex-wrap gap-3 text-xs font-mono text-slate-500 mb-6"><span>❤️ 15</span></div>
      <p class="text-lg leading-relaxed text-slate-300">Stop building features nobody asked for. Talk to 10 users first. Then build.</p>

    </article>
    <div class="line-grow h-px bg-gradient-to-r from-transparent via-current to-transparent my-12"></div>
<article class="glass-card rounded-2xl p-8 md:p-12 reveal-up">

      <h3 class="text-2xl md:text-3xl font-bold mb-3" style="background: linear-gradient(90deg, #22d3ee, #22d3eecc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">SEO Grade F to A</h3>
      <div class="flex flex-wrap gap-3 text-xs font-mono text-slate-500 mb-6"><span>❤️ 12</span></div>
      <p class="text-lg leading-relaxed text-slate-300">My website went from SEO grade F to A in one afternoon. Here is exactly what I fixed.</p>

    </article>
    <div class="line-grow h-px bg-gradient-to-r from-transparent via-current to-transparent my-12"></div>
<article class="glass-card rounded-2xl p-8 md:p-12 reveal-up">

      <h3 class="text-2xl md:text-3xl font-bold mb-3" style="background: linear-gradient(90deg, #22d3ee, #22d3eecc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">1 Person = Team of 10</h3>
      <div class="flex flex-wrap gap-3 text-xs font-mono text-slate-500 mb-6"><span>❤️ 10</span></div>
      <p class="text-lg leading-relaxed text-slate-300">One person + AI + the right systems = a team of 10. This is not a metaphor.</p>

    </article>

      </div>
      <div class="mt-16 text-center reveal-up">
        <a href="https://threads.com/@testcreator" target="_blank" rel="noopener" class="accent-button px-10 py-3.5 font-bold text-lg inline-flex items-center gap-2">
          Follow on Threads &rarr;
        </a>
      </div>
    </div>
  </section>

  <!-- Connect -->
  <section id="connect" class="relative py-28 px-6 md:px-12 text-center overflow-hidden" style="background: #F5F2EE;">
    <div class="parallax-orb absolute w-80 h-80 rounded-full blur-3xl opacity-10 -top-24 left-1/2 -translate-x-1/2" style="background: #22d3ee" data-speed="1"></div>
    <div class="max-w-xl mx-auto z-10 relative">
      <div class="warm-divider mx-auto mb-6 reveal-up"></div>
      <h2 class="text-3xl md:text-5xl font-bold mb-4 font-display reveal-up" style="color: #3D3529;">公域看觀點，私域聊真的。</h2>
      <p class="text-lg leading-relaxed mb-12 reveal-up" style="color: #8C8070;">歡迎透過以下管道聯繫</p>
      <div class="card-group grid gap-4">
        <a href="mailto:test@example.com" target="_blank" rel="noopener"
        class="glass-card rounded-xl px-6 py-4 flex items-center gap-3 hover:translate-y-[-4px] transition-all"
        >
        <span class="text-2xl">📧</span>
        <span class="font-bold text-white">Email</span>
      </a>
<a href="https://threads.com/@testcreator" target="_blank" rel="noopener"
        class="glass-card rounded-xl px-6 py-4 flex items-center gap-3 hover:translate-y-[-4px] transition-all"
        >
        <span class="text-2xl">🧵</span>
        <span class="font-bold text-white">Threads</span>
      </a>
      </div>
    </div>
  </section>
</main>

<footer class="py-8 text-center text-sm relative" style="color: #B5AC9E;">
  <div class="line-grow mb-8"></div>
  <p class="reveal-up">Built with UltraSite &copy; 2026 TestCreator</p>
</footer>
<script>
document.querySelectorAll('details').forEach(d => {
  d.addEventListener('toggle', () => {
    const s = d.querySelector('summary');
    if (s) s.textContent = d.open ? '收合全文 ▴' : '展開全文 ▾';
  });
});

window.addEventListener('load', () => {
if (typeof gsap === 'undefined' || typeof Lenis === 'undefined') return;
gsap.registerPlugin(ScrollTrigger);

const lenis = new Lenis({ lerp: 0.07, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add(t => lenis.raf(t * 1000));
gsap.ticker.lagSmoothing(0);

gsap.from('.hero-title', {
  y: 100, opacity: 0, duration: 1.2,
  ease: 'power4.out', stagger: 0.1, delay: 0.2
});

gsap.utils.toArray('.reveal-up').forEach(el => {
  gsap.from(el, {
    y: 50, opacity: 0, duration: 0.8, ease: 'power3.out',
    scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }
  });
});

gsap.utils.toArray('.card-group').forEach(group => {
  const cards = group.querySelectorAll('.glass-card');
  if (!cards.length) return;
  gsap.from(cards, {
    y: 30, opacity: 0, duration: 0.6, stagger: 0.12, ease: 'power2.out',
    scrollTrigger: { trigger: group, start: 'top 85%' }
  });
});

gsap.utils.toArray('.parallax-orb').forEach(orb => {
  const speed = parseFloat(orb.dataset.speed || '1');
  gsap.to(orb, {
    y: () => -120 * speed,
    scrollTrigger: { trigger: orb.parentElement, scrub: 1.5 }
  });
});

gsap.utils.toArray('.quote-reveal').forEach(q => {
  gsap.from(q, {
    scale: 0.85, opacity: 0, duration: 1, ease: 'power3.out',
    scrollTrigger: { trigger: q, start: 'top 85%' }
  });
});

gsap.utils.toArray('.line-grow').forEach(line => {
  gsap.fromTo(line,
    { scaleX: 0, transformOrigin: 'center' },
    { scaleX: 1, duration: 1.2, ease: 'power3.out',
      scrollTrigger: { trigger: line, start: 'top 92%' }
    }
  );
});

const nav = document.querySelector('.navbar');
if (nav) {
  ScrollTrigger.create({
    start: 'top -80',
    onUpdate: self => {
      nav.style.backgroundColor = self.progress > 0 ? 'rgba(2,6,23,0.85)' : 'transparent';
      nav.style.backdropFilter = self.progress > 0 ? 'blur(12px)' : 'none';
    }
  });
}

document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener('click', e => {
    e.preventDefault();
    const target = document.querySelector(a.getAttribute('href'));
    if (target) lenis.scrollTo(target);
  });
});

const cursor = document.getElementById('cursor');
if (cursor) {
  document.addEventListener('mousemove', e => {
    gsap.to(cursor, { x: e.clientX - 10, y: e.clientY - 10, duration: 0.4, ease: 'power2.out' });
  });
  document.querySelectorAll('a, button, .glass-card').forEach(el => {
    el.addEventListener('mouseenter', () => gsap.to(cursor, { scale: 2.5, duration: 0.3 }));
    el.addEventListener('mouseleave', () => gsap.to(cursor, { scale: 1, duration: 0.3 }));
  });
}
});
</script>
</body>
</html>