Skip to content
LAM
Read Home Blog
Make Projects HTML Tools Games
Touch grass Notes Resume Links
Home Blog HTML Projects
Tools Games Notes Resume Links
Back Penguin Protocol | The Road to 1M Finance
Download Open
Show description 1,385 chars · Finance

Penguin Protocol | The Road to 1M

Penguin Protocol | The Road to 1M

















Penguin Trader

Quant-Driven Accumulation



Goal: $100 ➜ $1,000,000



Timeframe
~12 Months



Risk Profile
Extreme



Strategy
Narrative Rotation










The Protocol




To turn 100 into 1M, we cannot simply hold BTC. We must catch volatility and rotate aggressively.







RSI Divergence:
Entering high-beta alts when Daily RSI < 30 but price makes higher lows.








Volume & Liquidity:
Tracking CEX/DEX volume disparity. Buying when volume precedes price.








Narrative Front-running:
Positioning in AI & RWA 3 weeks before major conferences.








The Iceberg (Cash):
Moving to USDC/USDT immediately after 200%+ moves to preserve capital.











Watchlist
CoinGecko API




Scanning market...
















Projected Equity Curve

Simulated path based on 85% Strike Rate & Compounding




$1,001,420

+1,000,000%












Total Trades

16




Win Rate

81.2%




Max Drawdown

-22%




Avg Hold Time

18 Days










Simulation Journal: The Path to 1M





Phase

Coin

Setup/Trigger

Entry

Exit

% Gain

Balance











*This is a theoretical simulation based on optimal decision making. Real markets involve slippage, fees, and emotional error.

Penguin Protocol | The Road to 1M

18,625 bytes · HTML source
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Penguin Protocol | The Road to 1M</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- Phosphor Icons for that clean, futuristic look -->
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    :root {
      --bg-deep: #020408;
      --bg-card: #0d111c;
      --bg-card-hover: #131a29;
      --accent-primary: #00f2ea; /* Cyber Ice */
      --accent-secondary: #7000ff; /* Deep Ocean */
      --text-main: #e2e8f0;
      --text-muted: #64748b;
      --success: #00e0b8;
      --danger: #ff3366;
      --warning: #facc15;
      --font-body: 'Inter', system-ui, -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background-color: var(--bg-deep);
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 242, 234, 0.08) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(112, 0, 255, 0.08) 0%, transparent 20%);
      color: var(--text-main);
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.6;
      padding: 20px;
    }

    /* Layout */
    .container {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    @media (min-width: 1024px) {
      .container {
        grid-template-columns: 300px 1fr; /* Sidebar + Main Content */
      }
    }

    /* Typography */
    h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; color: #fff; }
    .mono { font-family: var(--font-mono); }
    .text-sm { font-size: 12px; }
    .text-xs { font-size: 10px; }
    .text-accent { color: var(--accent-primary); }
    .text-green { color: var(--success); }
    .text-red { color: var(--danger); }
    .text-muted { color: var(--text-muted); }

    /* Cards */
    .card {
      background: var(--bg-card);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
      transition: transform 0.2s, border-color 0.2s;
    }
    
    .card:hover {
      border-color: rgba(0, 242, 234, 0.2);
    }

    /* Sidebar / Profile */
    .profile-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
    }

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fff, #bde0ff);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50px;
      box-shadow: 0 0 20px rgba(0, 242, 234, 0.4);
      position: relative;
    }
    
    .avatar::after {
      content: '🐧';
      position: absolute;
    }

    .badge {
      background: rgba(0, 242, 234, 0.1);
      color: var(--accent-primary);
      padding: 4px 12px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid rgba(0, 242, 234, 0.2);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Stats Grid */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }

    .stat-box {
      background: rgba(255,255,255,0.03);
      padding: 12px;
      border-radius: 12px;
    }

    /* Strategy Console */
    .strategy-list {
      list-style: none;
      margin-top: 10px;
    }
    
    .strategy-list li {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .strategy-icon {
      color: var(--accent-primary);
      min-width: 20px;
    }

    /* Table Styles */
    .table-container {
      overflow-x: auto;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    th {
      text-align: left;
      padding: 12px;
      color: var(--text-muted);
      font-weight: 600;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      font-family: var(--font-mono);
    }

    td {
      padding: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }

    tr:hover td {
      background: rgba(255,255,255,0.02);
    }

    /* Live Ticker */
    .ticker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 10px;
    }
    
    .ticker-item {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      padding: 10px;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Utilities */
    .hidden { display: none; }
    .flex-between { display: flex; justify-content: space-between; align-items: center; }
    .mb-4 { margin-bottom: 16px; }
    .mt-4 { margin-top: 16px; }
    
    /* Animations */
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(0, 242, 234, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(0, 242, 234, 0); }
      100% { box-shadow: 0 0 0 0 rgba(0, 242, 234, 0); }
    }
    
    .live-dot {
      width: 8px;
      height: 8px;
      background: var(--success);
      border-radius: 50%;
      display: inline-block;
      margin-right: 6px;
      animation: pulse 2s infinite;
    }

  </style>
</head>
<body>

<div class="container">
  
  <!-- LEFT SIDEBAR: IDENTITY & STRATEGY -->
  <aside style="display: flex; flex-direction: column; gap: 24px;">
    
    <!-- Profile -->
    <div class="card profile-card">
      <div class="avatar"></div>
      <div>
        <h2>Penguin Trader</h2>
        <p class="text-muted text-sm">Quant-Driven Accumulation</p>
      </div>
      <div class="badge">Goal: $100 ➜ $1,000,000</div>
      <div style="width: 100%; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 10px; padding-top: 15px;">
        <div class="flex-between mb-4">
          <span class="text-muted text-sm">Timeframe</span>
          <span class="mono">~12 Months</span>
        </div>
        <div class="flex-between mb-4">
          <span class="text-muted text-sm">Risk Profile</span>
          <span class="text-red mono">Extreme</span>
        </div>
        <div class="flex-between">
          <span class="text-muted text-sm">Strategy</span>
          <span class="text-accent mono">Narrative Rotation</span>
        </div>
      </div>
    </div>

    <!-- The Playbook -->
    <div class="card">
      <h3 class="flex-between mb-4">
        <span><i class="ph ph-strategy"></i> The Protocol</span>
        <i class="ph ph-info text-muted"></i>
      </h3>
      <p class="text-muted text-sm mb-4">
        To turn 100 into 1M, we cannot simply hold BTC. We must catch volatility and rotate aggressively.
      </p>
      <ul class="strategy-list">
        <li>
          <div class="strategy-icon"><i class="ph ph-chart-line-up"></i></div>
          <div>
            <strong style="color:#fff">RSI Divergence:</strong>
            Entering high-beta alts when Daily RSI < 30 but price makes higher lows.
          </div>
        </li>
        <li>
          <div class="strategy-icon"><i class="ph ph-waves"></i></div>
          <div>
            <strong style="color:#fff">Volume & Liquidity:</strong>
            Tracking CEX/DEX volume disparity. Buying when volume precedes price.
          </div>
        </li>
        <li>
          <div class="strategy-icon"><i class="ph ph-newspaper"></i></div>
          <div>
            <strong style="color:#fff">Narrative Front-running:</strong>
            Positioning in AI & RWA 3 weeks before major conferences.
          </div>
        </li>
        <li>
          <div class="strategy-icon"><i class="ph ph-snowflake"></i></div>
          <div>
            <strong style="color:#fff">The Iceberg (Cash):</strong>
            Moving to USDC/USDT immediately after 200%+ moves to preserve capital.
          </div>
        </li>
      </ul>
    </div>

    <!-- Live Ticker Panel -->
    <div class="card">
      <h3 class="flex-between mb-4">
        <span><span class="live-dot"></span> Watchlist</span>
        <span class="text-xs text-muted">CoinGecko API</span>
      </h3>
      <div class="ticker-grid" id="ticker-container">
        <!-- Injected via JS -->
        <div class="text-muted text-sm">Scanning market...</div>
      </div>
    </div>

  </aside>


  <!-- MAIN CONTENT: CHARTS & LOGS -->
  <main style="display: flex; flex-direction: column; gap: 24px;">

    <!-- Equity Chart -->
    <div class="card">
      <div class="flex-between mb-4">
        <div>
          <h2>Projected Equity Curve</h2>
          <p class="text-muted text-sm">Simulated path based on 85% Strike Rate & Compounding</p>
        </div>
        <div style="text-align: right;">
          <h2 class="text-accent mono" id="current-equity">$1,001,420</h2>
          <span class="badge" style="background: rgba(0,255,0,0.1); color: var(--success);">+1,000,000%</span>
        </div>
      </div>
      
      <div style="height: 300px; width: 100%;">
        <canvas id="equityChart"></canvas>
      </div>

      <div class="stats-grid mt-4">
        <div class="stat-box">
          <div class="text-muted text-xs">Total Trades</div>
          <div class="mono" style="font-size: 18px;">16</div>
        </div>
        <div class="stat-box">
          <div class="text-muted text-xs">Win Rate</div>
          <div class="text-green mono" style="font-size: 18px;">81.2%</div>
        </div>
        <div class="stat-box">
          <div class="text-muted text-xs">Max Drawdown</div>
          <div class="text-red mono" style="font-size: 18px;">-22%</div>
        </div>
        <div class="stat-box">
          <div class="text-muted text-xs">Avg Hold Time</div>
          <div class="mono" style="font-size: 18px;">18 Days</div>
        </div>
      </div>
    </div>

    <!-- Trade Journal -->
    <div class="card">
      <h3 class="mb-4">Simulation Journal: The Path to 1M</h3>
      <div class="table-container">
        <table id="trade-table">
          <thead>
            <tr>
              <th>Phase</th>
              <th>Coin</th>
              <th>Setup/Trigger</th>
              <th>Entry</th>
              <th>Exit</th>
              <th>% Gain</th>
              <th>Balance</th>
            </tr>
          </thead>
          <tbody>
            <!-- JS Injection -->
          </tbody>
        </table>
      </div>
      <p class="text-muted text-xs mt-4" style="text-align: center;">
        *This is a theoretical simulation based on optimal decision making. Real markets involve slippage, fees, and emotional error.
      </p>
    </div>

  </main>
</div>

<script>
  // ==========================================
  // CONFIGURATION & DATA
  // ==========================================
  
  // The futuristic portfolio watchlist
  const WATCHLIST = [
    { id: 'bitcoin', symbol: 'BTC', name: 'Bitcoin' },
    { id: 'solana', symbol: 'SOL', name: 'Solana' },
    { id: 'bittensor', symbol: 'TAO', name: 'Bittensor' }, // AI Leader
    { id: 'render-token', symbol: 'RNDR', name: 'Render' }, // DePIN
    { id: 'fetch-ai', symbol: 'FET', name: 'Artificial Superintel' }, // AI Merge
    { id: 'ondo-finance', symbol: 'ONDO', name: 'Ondo' }, // RWA
    { id: 'pepe', symbol: 'PEPE', name: 'Pepe' }, // High Beta Meme
    { id: 'sui', symbol: 'SUI', name: 'Sui' }, // Speed L1
    { id: 'helium', symbol: 'HNT', name: 'Helium' } // DePIN
  ];

  // The Roadmap: Turn $100 -> $1M
  // Strategy:
  // 1. Ignition ($100-$1k): High leverage/High Beta Memes (PEPE/WIF) during mania.
  // 2. Build ($1k-$20k): Rotate to Speed L1s (SOL/SUI) and AI (TAO).
  // 3. Scale ($20k-$200k): DePIN and Infrastructure (RNDR/ONDO).
  // 4. Wealth ($200k-$1M): Swing trading BTC/ETH + Stablecoin yield farming.
  
  const SIMULATION_TRADES = [
    { 
      phase: "Ignition", coin: "PEPE", 
      setup: "Meme Supercycle / Social Volume Spike", 
      entry: "0.0000012", exit: "0.0000085", 
      gain: 608, balance: 708 
    },
    { 
      phase: "Ignition", coin: "SOL", 
      setup: "L1 Rotation / Firedancer News", 
      entry: "22.00", exit: "110.00", 
      gain: 400, balance: 3540 
    },
    { 
      phase: "Build", coin: "TAO", 
      setup: "AI Narrative / Binance Listing Rumor", 
      entry: "45.00", exit: "380.00", 
      gain: 744, balance: 29877 
    },
    { 
      phase: "Build", coin: "USDC", 
      setup: "Market Overheated / RSI > 85 reset", 
      entry: "1.00", exit: "1.00", 
      gain: 0, balance: 29877 
    },
    { 
      phase: "Scale", coin: "RNDR", 
      setup: "Apple Partnership Rumor / Compute Shortage", 
      entry: "1.80", exit: "11.50", 
      gain: 538, balance: 190615 
    },
    { 
      phase: "Scale", coin: "ONDO", 
      setup: "RWA Institutional Flow / Blackrock News", 
      entry: "0.20", exit: "0.95", 
      gain: 375, balance: 905421 
    },
    { 
      phase: "Wealth", coin: "BTC", 
      setup: "ETF Inflows / Halving Supply Shock", 
      entry: "62000", exit: "69000", 
      gain: 11, balance: 1005017 
    }
  ];

  // ==========================================
  // LOGIC & RENDERING
  // ==========================================

  // 1. Fetch Live Prices (CoinGecko)
  async function updateTicker() {
    const container = document.getElementById('ticker-container');
    const ids = WATCHLIST.map(c => c.id).join(',');
    
    try {
      const response = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd&include_24hr_change=true`);
      const data = await response.json();
      
      container.innerHTML = ''; // Clear loading
      
      WATCHLIST.forEach(coin => {
        const coinData = data[coin.id];
        if(!coinData) return;
        
        const price = coinData.usd < 1 ? coinData.usd.toFixed(6) : coinData.usd.toFixed(2);
        const change = coinData.usd_24h_change.toFixed(2);
        const isUp = coinData.usd_24h_change >= 0;
        
        const div = document.createElement('div');
        div.className = 'ticker-item';
        div.innerHTML = `
          <div>
            <div style="font-weight:700; font-size:12px;">${coin.symbol}</div>
            <div class="text-muted text-xs">${coin.name}</div>
          </div>
          <div style="text-align:right;">
            <div class="mono">$${price}</div>
            <div class="mono text-xs ${isUp ? 'text-green' : 'text-red'}">
              ${isUp ? '+' : ''}${change}%
            </div>
          </div>
        `;
        container.appendChild(div);
      });
    } catch (e) {
      container.innerHTML = '<div class="text-red text-xs">API Limit Reached. Retrying...</div>';
    }
  }

  // 2. Render Trade Table
  function renderTable() {
    const tbody = document.querySelector('#trade-table tbody');
    SIMULATION_TRADES.forEach((trade, index) => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td><span class="badge" style="background: rgba(255,255,255,0.05); color: #fff;">${trade.phase}</span></td>
        <td class="mono text-accent"><strong>${trade.coin}</strong></td>
        <td class="text-xs text-muted" style="max-width: 200px;">${trade.setup}</td>
        <td class="mono text-muted">$${trade.entry}</td>
        <td class="mono text-muted">$${trade.exit}</td>
        <td class="mono ${trade.gain > 0 ? 'text-green' : 'text-muted'}">+${trade.gain}%</td>
        <td class="mono" style="color:#fff;">$${trade.balance.toLocaleString()}</td>
      `;
      tbody.appendChild(tr);
    });
  }

  // 3. Render Equity Chart
  function initChart() {
    const ctx = document.getElementById('equityChart').getContext('2d');
    
    // Extract data points
    const labels = SIMULATION_TRADES.map((_, i) => `Trade ${i+1}`);
    const dataPoints = SIMULATION_TRADES.map(t => t.balance);

    // Gradient
    const gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(0, 242, 234, 0.2)');
    gradient.addColorStop(1, 'rgba(0, 242, 234, 0)');

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Start', ...labels],
        datasets: [{
          label: 'Portfolio Value (USD)',
          data: [100, ...dataPoints],
          borderColor: '#00f2ea',
          backgroundColor: gradient,
          borderWidth: 2,
          pointBackgroundColor: '#0d111c',
          pointBorderColor: '#00f2ea',
          pointRadius: 4,
          pointHoverRadius: 6,
          fill: true,
          tension: 0.4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            mode: 'index',
            intersect: false,
            backgroundColor: 'rgba(13, 17, 28, 0.9)',
            titleColor: '#64748b',
            bodyFont: { family: 'JetBrains Mono' },
            callbacks: {
              label: function(context) {
                return '$ ' + context.parsed.y.toLocaleString();
              }
            }
          }
        },
        scales: {
          x: {
            grid: { display: false },
            ticks: { color: '#64748b', font: { size: 10 } }
          },
          y: {
            grid: { color: 'rgba(255,255,255,0.05)' },
            ticks: { 
              color: '#64748b',
              font: { size: 10, family: 'JetBrains Mono' },
              callback: function(value) {
                if(value >= 1000) return '$' + value/1000 + 'k';
                return '$' + value;
              }
            }
          }
        }
      }
    });
  }

  // Initialization
  window.addEventListener('load', () => {
    renderTable();
    initChart();
    updateTicker();
    
    // Refresh prices every 60s
    setInterval(updateTicker, 60000);
  });

</script>
</body>
</html>