diff --git a/ultrawork-manifesto-web/src/index.html b/ultrawork-manifesto-web/src/index.html index 245cb2c77..2bd32a656 100644 --- a/ultrawork-manifesto-web/src/index.html +++ b/ultrawork-manifesto-web/src/index.html @@ -3,17 +3,43 @@ - Ultrawork Manifesto + + + Ultrawork Manifesto | The Philosophy of High-Output Engineering + + + + + + + + + + + + + + + + + + + + + + + + - +
- Ultrawork Hero -

Manifesto

+ Ultrawork Hero +

Ultrawork Manifesto

@@ -42,11 +68,11 @@

...that's not "human-AI collaboration." That's the AI failing to do its job.

-

Oh My OpenCode is built on this premise: Human intervention during agentic work is fundamentally a wrong signal. If the system is designed correctly, the agent should complete the work without requiring you to babysit it.

+

Oh My OpenCode is built on this premise: Human intervention during agentic work is fundamentally a wrong signal. If the system is designed correctly, the agent should complete the work without requiring you to babysit it.

- Divider + Divider
@@ -70,7 +96,7 @@
- Divider + Divider
@@ -103,7 +129,7 @@
- Divider + Divider
@@ -115,32 +141,42 @@

Two approaches to achieve this:

-
-

Approach 1: Prometheus (Interview Mode)

-

You say: "I want to add authentication."

-

Prometheus:

+
+

Approach 1: Ultrawork

+

Just say "ulw" and walk away.

+

You say: ulw add authentication

+

The agent autonomously:

    -
  • Researches your codebase to understand existing patterns
    • -
  • Asks clarifying questions based on actual findings
    • -
  • Surfaces edge cases you hadn't considered
    • -
  • Documents decisions as you make them
    • -
  • Generates a complete work plan
    • +
  • Analyzes your codebase patterns and architecture
    • +
  • Researches best practices from official docs
    • +
  • Plans the implementation strategy internally
    • +
  • Implements following your existing conventions
    • +
  • Verifies with tests and LSP diagnostics
    • +
  • Self-corrects when something goes wrong
    • +
  • Keeps bouldering until 100% complete
-

You provide intent. The agent provides structure.

+

Zero intervention. Full autonomy. Just results.

-
-

Approach 2: Ultrawork (Just Do It Mode)

-

You say: "ulw add authentication"

-

The agent:

+
+

Approach 2: Prometheus + Atlas

+

When you want strategic control.

+

You say: 프로메테우스 에이전트 add authentication

+

Prometheus (Strategic Planner):

    -
  • Figures out the right approach
    • -
  • Researches best practices
    • -
  • Implements following conventions
    • -
  • Verifies everything works
    • -
  • Keeps going until complete
    • +
  • Conducts deep codebase research via parallel agents
    • +
  • Interviews you with intelligent, contextual questions
    • +
  • Identifies edge cases and architectural implications
    • +
  • Generates a detailed YAML work plan with dependencies
-

You provide intent. The agent handles everything.

+

Atlas (Master Orchestrator):

+
    +
  • Executes the plan via /start-work
    • +
  • Delegates tasks to specialized agents (Oracle, Frontend Engineer, etc.)
    • +
  • Manages parallel execution waves for efficiency
    • +
  • Tracks progress, handles failures, ensures completion
    • +
+

You architect. Agents execute. Full transparency.

@@ -148,7 +184,7 @@
- Divider + Divider
@@ -187,7 +223,7 @@
- Divider + Divider
@@ -201,7 +237,7 @@ Human Intent → Agent Execution → Verified Result (intervention only on true failure)
-

Everything in Oh My OpenCode is designed to make this loop work:

+

Everything in Oh My OpenCode is designed to make this loop work:

@@ -248,7 +284,7 @@ Human Intent → Agent Execution → Verified Result
- Divider + Divider
@@ -273,7 +309,10 @@ Human Intent → Agent Execution → Verified Result diff --git a/ultrawork-manifesto-web/src/styles.css b/ultrawork-manifesto-web/src/styles.css index d5799da42..d79e72c68 100644 --- a/ultrawork-manifesto-web/src/styles.css +++ b/ultrawork-manifesto-web/src/styles.css @@ -1,27 +1,44 @@ /* Design System */ :root { /* Colors */ - --bg-primary: #0a0a0a; - --bg-secondary: #0E1115; + --bg-primary: #030303; /* Darker, deeper black */ + --bg-secondary: #0a0a0a; --text-primary: #ffffff; - --text-muted: #99A1AF; - --text-dim: #6A7282; - --accent: #87F0F2; - --accent-glow: #ABF5F7; + --text-secondary: #a1a1aa; + --text-muted: #52525b; - /* Gold gradient for emphasis */ - --gold-gradient: linear-gradient(180deg, #f0daaf 0%, #e4c380 50%, #5d5135 100%); + /* Accents */ + --accent-cyan: #64D2FF; /* More refined cyan */ + --accent-cyan-dim: rgba(100, 210, 255, 0.1); + --accent-gold: #F5D061; /* Premium gold */ + --accent-gold-dim: rgba(245, 208, 97, 0.1); + + /* Gradients */ + --gold-gradient: linear-gradient(135deg, #F5D061 0%, #E1B32E 100%); + --cyan-gradient: linear-gradient(135deg, #64D2FF 0%, #2E93E1 100%); + --dark-gradient: linear-gradient(to bottom, #050505, #0a0a0a); /* Typography */ - --font-primary: 'Inter', system-ui, sans-serif; + --font-serif: 'Cormorant Garamond', serif; + --font-sans: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; - /* Layout */ - --max-width: 800px; - --spacing-section: 80px; + /* Spacing */ + --spacing-section: 160px; /* Increased breathing room */ + --max-width: 1100px; /* Slightly wider for drama */ + + /* Glassmorphism */ + --glass-bg: rgba(255, 255, 255, 0.03); + --glass-border: rgba(255, 255, 255, 0.08); + --glass-blur: 12px; + + /* Glows */ + --glow-cyan: 0 0 40px rgba(100, 210, 255, 0.15); + --glow-gold: 0 0 40px rgba(245, 208, 97, 0.15); + --radial-glow: radial-gradient(circle at center, rgba(100, 210, 255, 0.08) 0%, transparent 70%); } -/* Reset & Base Styles */ +/* Reset & Base */ * { margin: 0; padding: 0; @@ -31,126 +48,139 @@ body { background-color: var(--bg-primary); color: var(--text-primary); - font-family: var(--font-primary); - line-height: 1.6; + font-family: var(--font-sans); + line-height: 1.7; -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; } -/* Typography */ -h1, h2, h3 { - font-weight: 700; - line-height: 1.2; - margin-bottom: 1.5rem; -} - -h1 { - font-size: 3.5rem; - letter-spacing: -0.02em; -} - -h2 { - font-size: 2.5rem; - color: var(--text-primary); - margin-bottom: 2rem; - letter-spacing: -0.01em; -} - -h3 { - font-size: 1.5rem; - color: var(--accent); - margin-top: 2rem; - margin-bottom: 1rem; -} - -p { - margin-bottom: 1.5rem; - color: var(--text-muted); - font-size: 1.125rem; -} - -strong { - color: var(--text-primary); - font-weight: 600; -} - -ul { - list-style: none; - margin-bottom: 2rem; - padding-left: 1.5rem; -} - -ul li { - position: relative; - margin-bottom: 0.75rem; - color: var(--text-muted); - font-size: 1.125rem; -} - -ul li::before { - content: "→"; - position: absolute; - left: -1.5rem; - color: var(--accent); -} - -code { - font-family: var(--font-mono); - background: var(--bg-secondary); - padding: 0.2em 0.4em; - border-radius: 4px; - font-size: 0.9em; - color: var(--accent); -} - -/* Layout */ -header { - position: relative; - width: 100%; - height: 60vh; - min-height: 400px; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: var(--spacing-section); -} - -.hero-container { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -} - -.hero-image { - position: absolute; +/* Noise Texture Overlay */ +body::before { + content: ""; + position: fixed; top: 0; left: 0; width: 100%; height: 100%; - object-fit: cover; - opacity: 0.6; - mask-image: linear-gradient(to bottom, black 50%, transparent 100%); - -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); + pointer-events: none; + z-index: 9999; + opacity: 0.03; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); +} + +/* Typography */ +h1, h2, h3 { + font-family: var(--font-serif); + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.02em; +} + +h1 { + font-size: clamp(4rem, 8vw, 7rem); + background: linear-gradient(to bottom, #fff 0%, #ccc 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 0 80px rgba(255, 255, 255, 0.1); +} + +h2 { + font-size: 3.5rem; + margin-bottom: 2rem; + color: #fff; +} + +h3 { + font-family: var(--font-sans); + font-size: 1.25rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--accent-gold); + margin-top: 3rem; + margin-bottom: 1.5rem; +} + +p { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2rem; + max-width: 65ch; + line-height: 1.8; +} + +strong { + color: #fff; + font-weight: 600; +} + +a { + color: var(--accent-cyan); + text-decoration: none; + transition: color 0.2s ease; +} + +a:hover { + color: #fff; + text-decoration: underline; +} + +a:focus-visible { + outline: 2px solid var(--accent-cyan); + outline-offset: 2px; + border-radius: 2px; +} + +/* Layout */ +header { + max-width: var(--max-width); + margin: 0 auto; + padding: 8rem 2rem 4rem; + position: relative; +} + +.hero-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 2.5rem; + position: relative; +} + +/* Hero glow effect */ +.hero-container::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 120%; + height: 120%; + background: var(--radial-glow); + pointer-events: none; + z-index: -1; +} + +.hero-image { + width: 100%; + max-width: 700px; + height: auto; + border-radius: 16px; + opacity: 0.95; + animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1); + box-shadow: var(--glow-cyan); } .hero-title { - position: relative; - z-index: 1; - font-size: 5rem; - text-transform: uppercase; - letter-spacing: 0.1em; - text-shadow: 0 0 30px rgba(135, 240, 242, 0.3); - animation: fadeIn 1.5s ease-out; + font-size: clamp(2.5rem, 5vw, 4rem); + margin-bottom: 0; + animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; } main { max-width: var(--max-width); margin: 0 auto; - padding: 0 2rem; + padding: 2rem 2rem 0; } section { @@ -161,176 +191,408 @@ section { .divider { display: flex; justify-content: center; + align-items: center; margin: var(--spacing-section) 0; + position: relative; + height: 2px; +} + +.divider::before { + content: ""; + position: absolute; + width: 100%; + max-width: 400px; + height: 1px; + background: linear-gradient(90deg, transparent 0%, var(--accent-cyan) 20%, var(--accent-gold) 80%, transparent 100%); opacity: 0.5; } -.divider img { - width: 100px; - height: auto; +.divider::after { + content: ""; + position: absolute; + width: 8px; + height: 8px; + background: var(--accent-cyan); + border-radius: 50%; + box-shadow: var(--glow-cyan); } -/* Specific Styles */ +.divider img { + display: none; +} + +/* Feature: Gold Gradient Text */ .gold-gradient-text { font-family: var(--font-mono); - font-weight: 700; - font-size: 1.5rem; - line-height: 1.4; + font-size: 1.2rem; + line-height: 1.6; + text-align: center; + padding: 3rem; + margin: 3rem 0; + border: 1px solid var(--accent-gold-dim); + background: radial-gradient(circle at center, rgba(245, 208, 97, 0.03) 0%, transparent 70%); + border-radius: 2px; + position: relative; +} + +.gold-gradient-text::before, .gold-gradient-text::after { + content: "+"; + position: absolute; + color: var(--accent-gold); + opacity: 0.5; +} +.gold-gradient-text::before { top: -10px; left: -5px; } +.gold-gradient-text::after { bottom: -10px; right: -5px; } + +.bottleneck-text { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; - background-clip: text; - margin-bottom: 2rem; - text-align: center; - border: 1px solid rgba(240, 218, 175, 0.2); - padding: 2rem; - border-radius: 8px; - background-color: rgba(240, 218, 175, 0.05); + font-weight: 700; + letter-spacing: 0.1em; } +/* Feature: Highlight Box */ .highlight-box { - background: var(--bg-secondary); - border-left: 4px solid var(--accent); - padding: 1.5rem; + border-left: 2px solid var(--accent-cyan); + font-style: italic; + color: #fff; + background: linear-gradient(90deg, var(--accent-cyan-dim) 0%, transparent 100%); + padding: 2rem; border-radius: 0 8px 8px 0; - font-size: 1.25rem; - color: var(--text-primary); } +/* Feature: Cards */ .approach-container { display: grid; grid-template-columns: 1fr; gap: 2rem; - margin: 2rem 0; + margin-top: 3rem; } @media (min-width: 768px) { - .approach-container { - grid-template-columns: 1fr 1fr; - } + .approach-container { grid-template-columns: 1fr 1fr; } } .approach { - background: var(--bg-secondary); - padding: 2rem; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.05); - transition: transform 0.3s ease, box-shadow 0.3s ease; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + padding: 3rem; + border-radius: 20px; + transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); + position: relative; + overflow: hidden; + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); } .approach:hover { - transform: translateY(-5px); - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); - border-color: rgba(135, 240, 242, 0.2); + transform: translateY(-8px); + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.12); + box-shadow: 0 25px 50px -15px rgba(0,0,0,0.6); +} + +.ultrawork-approach:hover { + border-color: var(--accent-cyan); + box-shadow: var(--glow-cyan), 0 25px 50px -15px rgba(0,0,0,0.6); +} +.prometheus-approach:hover { + border-color: var(--accent-gold); + box-shadow: var(--glow-gold), 0 25px 50px -15px rgba(0,0,0,0.6); +} + +.approach h3 { + margin-top: 0; + font-size: 1.5rem; + color: #fff; + font-family: var(--font-serif); +} + +.approach-tagline { + font-family: var(--font-mono); + font-size: 0.9rem; + color: var(--text-muted); + margin-bottom: 2rem; +} + +/* Lists */ +ul { + list-style: none; + padding-left: 1rem; +} + +ul li { + position: relative; + padding-left: 1.5rem; + margin-bottom: 1rem; + color: var(--text-secondary); +} + +ul li::before { + content: "•"; + position: absolute; + left: 0; + color: var(--accent-cyan); +} + +.prometheus-approach ul li::before { color: var(--accent-gold); } + +/* Code & ASCII */ +code { + font-family: var(--font-mono); + color: var(--accent-cyan); + background: rgba(100, 210, 255, 0.1); + padding: 0.2em 0.4em; + border-radius: 4px; + font-size: 0.9em; } .ascii-art { font-family: var(--font-mono); - white-space: pre; - overflow-x: auto; - background: var(--bg-secondary); - padding: 2rem; - border-radius: 8px; - color: var(--accent); - margin-bottom: 2rem; - font-size: 0.9rem; + font-size: 0.85rem; line-height: 1.4; - border: 1px solid rgba(135, 240, 242, 0.1); + color: var(--accent-cyan); + background: #000; + padding: 2rem; + border: 1px solid #333; + border-radius: 8px; + overflow-x: auto; + box-shadow: inset 0 0 20px rgba(0,0,0,0.8); } /* Table */ table { width: 100%; border-collapse: collapse; - margin: 2rem 0; - background: var(--bg-secondary); - border-radius: 8px; - overflow: hidden; -} - -th, td { - padding: 1rem 1.5rem; - text-align: left; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); + margin: 3rem 0; + font-family: var(--font-sans); } th { - background: rgba(135, 240, 242, 0.05); - color: var(--accent); - font-weight: 600; + text-align: left; + padding: 1.5rem; + border-bottom: 1px solid #333; + color: var(--accent-gold); + font-family: var(--font-mono); + font-size: 0.9rem; text-transform: uppercase; - font-size: 0.85rem; - letter-spacing: 0.05em; } td { - color: var(--text-muted); -} - -tr:last-child td { - border-bottom: none; + padding: 1.5rem; + border-bottom: 1px solid #222; + color: var(--text-secondary); } tr:hover td { background: rgba(255, 255, 255, 0.02); - color: var(--text-primary); + color: #fff; } /* Footer */ footer { margin-top: var(--spacing-section); - padding: 4rem 0; - background: linear-gradient(to top, #000 0%, transparent 100%); + padding: 8rem 2rem; text-align: center; position: relative; + overflow: hidden; + background: radial-gradient(ellipse at center bottom, rgba(100, 210, 255, 0.05) 0%, transparent 60%); +} + +footer::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-cyan-dim), var(--accent-gold-dim), transparent); } .footer-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 2rem; + position: relative; + z-index: 2; } .footer-pattern { - width: 100%; - max-width: 1200px; - height: auto; - opacity: 0.3; - mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); - -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); + display: none; +} + +.cta-link { + display: inline-block; + padding: 1.2rem 3rem; + background: var(--text-primary); + color: #000; + font-weight: 600; + text-decoration: none; + border-radius: 50px; + transition: all 0.3s ease; + margin-bottom: 2rem; + position: relative; + z-index: 3; +} + +.cta-link:hover { + transform: scale(1.05); + box-shadow: 0 0 40px rgba(255, 255, 255, 0.4), var(--glow-cyan); + color: #000; + text-decoration: none; } .final-statement { - font-size: 2rem; - font-weight: 700; - color: var(--text-primary); - text-align: center; - margin-top: 3rem; - letter-spacing: -0.02em; + font-family: var(--font-serif); + font-size: 2.5rem; + font-style: italic; + color: var(--text-muted); } /* Animations */ -@keyframes fadeIn { - from { opacity: 0; transform: translateY(20px); } +@keyframes fadeUp { + from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } -/* Scrollbar */ -::-webkit-scrollbar { - width: 8px; - height: 8px; +/* ===== RESPONSIVE DESIGN ===== */ + +/* Tablet */ +@media (max-width: 1024px) { + :root { + --max-width: 90%; + --spacing-section: 100px; + } + + h1 { font-size: clamp(3rem, 6vw, 5rem); } + h2 { font-size: 2.5rem; } } -::-webkit-scrollbar-track { - background: var(--bg-primary); +/* Mobile Landscape / Small Tablet */ +@media (max-width: 768px) { + :root { + --spacing-section: 80px; + } + + header { + padding: 4rem 1.5rem 2rem; + } + + main { + padding: 1.5rem 1.5rem 0; + } + + h2 { font-size: 2rem; } + + .hero-image { + max-width: 100%; + } + + .approach-container { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .approach { + padding: 2rem; + } + + .divider::before { + max-width: 250px; + } + + /* Table to card layout */ + table, thead, tbody, th, td, tr { + display: block; + } + + thead { + display: none; + } + + tr { + margin-bottom: 1.5rem; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: 12px; + padding: 1rem; + } + + td { + padding: 0.75rem 0; + border-bottom: none; + position: relative; + } + + td:first-child { + color: var(--accent-gold); + font-weight: 600; + font-size: 1rem; + } + + td:last-child { + color: var(--text-secondary); + font-size: 0.95rem; + } } -::-webkit-scrollbar-thumb { - background: var(--bg-secondary); - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--text-dim); +/* Mobile Portrait */ +@media (max-width: 480px) { + :root { + --spacing-section: 60px; + } + + header { + padding: 2rem 1rem 1rem; + } + + main { + padding: 1rem 1rem 0; + } + + h1 { font-size: 2rem; } + h2 { font-size: 1.75rem; } + h3 { font-size: 1.1rem; } + + p { + font-size: 1.1rem; + } + + .gold-gradient-text { + padding: 1.5rem; + font-size: 0.9rem; + } + + .highlight-box { + padding: 1.25rem; + } + + .approach { + padding: 1.5rem; + } + + .approach h3 { + font-size: 1.25rem; + } + + .approach-tagline { + font-size: 0.8rem; + } + + .ascii-art { + font-size: 0.7rem; + padding: 1rem; + overflow-x: auto; + } + + .cta-link { + padding: 1rem 2rem; + font-size: 0.95rem; + } + + .final-statement { + font-size: 1.75rem; + } + + footer { + padding: 4rem 1rem; + } }