Created
February 5, 2026 16:53
-
-
Save rlivsey/fa9a2678ffd459b82ae949e5672a22b6 to your computer and use it in GitHub Desktop.
Fin Hackathon Insights Report - richardlivsey
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fin Hackathon Insights - richardlivsey</title> | |
| <style> | |
| :root { | |
| --bg-primary: #0f172a; | |
| --bg-secondary: #1e293b; | |
| --bg-card: #334155; | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --accent-blue: #3b82f6; | |
| --accent-green: #22c55e; | |
| --accent-orange: #f97316; | |
| --accent-purple: #a855f7; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| padding: 2rem; | |
| } | |
| .container { max-width: 1200px; margin: 0 auto; } | |
| .hero { | |
| text-align: center; | |
| padding: 3rem 2rem; | |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%); | |
| border-radius: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; } | |
| .hero .subtitle { color: var(--text-secondary); font-size: 1.2rem; } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin: 2rem 0; | |
| } | |
| .stat-card { | |
| background: var(--bg-secondary); | |
| padding: 1.5rem; | |
| border-radius: 0.75rem; | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: var(--accent-blue); | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-top: 0.5rem; | |
| } | |
| .score-breakdown { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-top: 1rem; | |
| } | |
| .score-box { | |
| background: var(--bg-card); | |
| padding: 1rem 2rem; | |
| border-radius: 0.5rem; | |
| } | |
| .score-box .label { color: var(--text-secondary); font-size: 0.8rem; } | |
| .score-box .value { font-size: 1.5rem; font-weight: bold; } | |
| .score-box.simple .value { color: var(--accent-green); } | |
| .score-box.complex .value { color: var(--accent-purple); } | |
| section { | |
| background: var(--bg-secondary); | |
| border-radius: 1rem; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| section h2 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .section-intro { | |
| color: var(--text-secondary); | |
| margin-bottom: 1.5rem; | |
| font-size: 1rem; | |
| } | |
| .achievements-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .achievement { | |
| background: var(--bg-card); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| } | |
| .achievement.locked { opacity: 0.4; } | |
| .achievement.silly { border: 1px dashed var(--accent-orange); } | |
| .achievement .icon { font-size: 2rem; } | |
| .achievement .details h3 { font-size: 1rem; margin-bottom: 0.25rem; } | |
| .achievement .details .quip { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| font-style: italic; | |
| } | |
| .roast-section { | |
| background: linear-gradient(135deg, #7c2d12 0%, #451a03 100%); | |
| border: 1px solid #f97316; | |
| } | |
| .roast-item { | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| background: rgba(0,0,0,0.2); | |
| border-radius: 0.5rem; | |
| } | |
| .roast-item:last-child { margin-bottom: 0; } | |
| .footer { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| padding: 2rem; | |
| font-size: 0.9rem; | |
| } | |
| /* CSS Bar Charts */ | |
| .chart-card { | |
| background: var(--bg-card); | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .chart-title { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| margin-bottom: 0.75rem; | |
| } | |
| .bar-row { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 0.4rem; | |
| } | |
| .bar-label { | |
| width: 120px; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .bar-track { | |
| flex: 1; | |
| height: 6px; | |
| background: var(--bg-secondary); | |
| border-radius: 3px; | |
| margin: 0 0.5rem; | |
| } | |
| .bar-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| } | |
| .bar-value { | |
| width: 50px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| text-align: right; | |
| } | |
| .fun-ending { | |
| background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); | |
| border: 1px solid #fbbf24; | |
| border-radius: 1rem; | |
| padding: 1.5rem 2rem; | |
| margin-top: 2rem; | |
| text-align: center; | |
| } | |
| .fun-headline { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: #78350f; | |
| margin-bottom: 0.5rem; | |
| } | |
| .fun-detail { | |
| font-size: 0.9rem; | |
| color: #92400e; | |
| } | |
| /* Architecture Section */ | |
| .arch-section { | |
| background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%); | |
| border: 1px solid var(--accent-blue); | |
| } | |
| .arch-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .arch-card { | |
| background: rgba(0,0,0,0.3); | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| } | |
| .arch-card h3 { | |
| font-size: 0.9rem; | |
| color: var(--accent-blue); | |
| margin-bottom: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .arch-card ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .arch-card li { | |
| padding: 0.25rem 0; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .arch-card li.strength { color: var(--accent-green); } | |
| .arch-card li.concern { color: var(--accent-orange); } | |
| .arch-card li::before { margin-right: 0.5rem; } | |
| .arch-card li.strength::before { content: "β"; } | |
| .arch-card li.concern::before { content: "β "; } | |
| .pattern-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .pattern-tag { | |
| background: var(--bg-card); | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Git Activity */ | |
| .git-stats { | |
| display: flex; | |
| gap: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .git-stat { | |
| text-align: center; | |
| } | |
| .git-stat .value { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--accent-blue); | |
| } | |
| .git-stat .label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Leaderboard */ | |
| .leaderboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .rank-card { | |
| background: var(--bg-card); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| text-align: center; | |
| } | |
| .rank-card .rank { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: var(--accent-green); | |
| } | |
| .rank-card .context { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .rank-card .percentile { | |
| font-size: 0.75rem; | |
| color: var(--accent-blue); | |
| margin-top: 0.25rem; | |
| } | |
| /* Experiments */ | |
| .experiment-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .experiment-card { | |
| background: var(--bg-card); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| } | |
| .experiment-card.helped { border-left: 3px solid var(--accent-green); } | |
| .experiment-card.hurt { border-left: 3px solid #ef4444; } | |
| .experiment-card.neutral { border-left: 3px solid var(--text-secondary); } | |
| .experiment-card h4 { | |
| font-size: 0.9rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .experiment-card p { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| .experiment-badge { | |
| display: inline-block; | |
| padding: 0.15rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .experiment-badge.helped { background: rgba(34, 197, 94, 0.2); color: var(--accent-green); } | |
| .experiment-badge.hurt { background: rgba(239, 68, 68, 0.2); color: #ef4444; } | |
| /* API Usage */ | |
| .api-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .api-card { | |
| background: var(--bg-card); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| text-align: center; | |
| } | |
| .api-card .value { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--accent-purple); | |
| } | |
| .api-card .label { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Narrative boxes */ | |
| .narrative-box { | |
| background: var(--bg-card); | |
| border-radius: 0.5rem; | |
| padding: 1.25rem; | |
| margin-bottom: 1rem; | |
| } | |
| .narrative-box h3 { | |
| font-size: 0.9rem; | |
| color: var(--accent-blue); | |
| margin-bottom: 0.75rem; | |
| } | |
| .narrative-box p { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .hidden { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="hero"> | |
| <h1>π Fin Hackathon Insights</h1> | |
| <p class="subtitle">richardlivsey's journey</p> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value">16.33</div> | |
| <div class="stat-label">Best Score</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">24</div> | |
| <div class="stat-label">Hypotheses</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">6</div> | |
| <div class="stat-label">Sessions</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">24.2h</div> | |
| <div class="stat-label">Hours</div> | |
| </div> | |
| </div> | |
| <div class="score-breakdown"> | |
| <div class="score-box simple"> | |
| <div class="label">Simple</div> | |
| <div class="value">8.22</div> | |
| </div> | |
| <div class="score-box complex"> | |
| <div class="label">Complex</div> | |
| <div class="value">7.85</div> | |
| </div> | |
| </div> | |
| <p style="margin-top: 1.5rem; color: var(--text-secondary);"> | |
| "The methodical experimenter who discovered that sometimes simpler is better" | |
| </p> | |
| </header> | |
| <!-- At a Glance Section --> | |
| <section> | |
| <h2>π― At a Glance</h2> | |
| <div class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));"> | |
| <div class="narrative-box"> | |
| <h3>What's Working</h3> | |
| <p>Your multilingual support with language detection and translation gave the biggest Complex improvement (+0.32). The discovery that Haiku outperforms Sonnet for reranking tasks shows real insight into model selection. Query expansion with HyDE and your sophisticated retrieval pipeline are solid foundations.</p> | |
| </div> | |
| <div class="narrative-box"> | |
| <h3>What Backfired</h3> | |
| <p>The eternal Simple vs Complex tradeoff bit you - many improvements help one category but hurt the other. Rigid rules hurt Complex questions which need nuanced handling. And the source count optimization revealed that 8 is the magic number - both 5 and 10 made things worse.</p> | |
| </div> | |
| <div class="narrative-box"> | |
| <h3>Key Insight</h3> | |
| <p>Simpler models can outperform sophisticated ones for narrow tasks. Your finding that Haiku beats Sonnet for reranking challenges conventional wisdom about "bigger is better" in AI.</p> | |
| </div> | |
| <div class="narrative-box"> | |
| <h3>The Journey</h3> | |
| <p>From skeleton to sophisticated RAG pipeline in 24 hours across 2 intense days. 24 commits tell the story: multilingual support, HyDE query expansion, question decomposition, complexity detection, and the hard-won wisdom that "improved prompts" sometimes hurt scores.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Leaderboard Section --> | |
| <section> | |
| <h2>π Leaderboard Ranking</h2> | |
| <p class="section-intro">Your position among 396 hackathon participants.</p> | |
| <div class="leaderboard-grid"> | |
| <div class="rank-card"> | |
| <div class="rank">#52</div> | |
| <div class="context">of 396 Global</div> | |
| <div class="percentile">Top 13%</div> | |
| </div> | |
| <div class="rank-card"> | |
| <div class="rank">#3</div> | |
| <div class="context">of 11 on Team</div> | |
| <div class="percentile">Bronze Medal</div> | |
| </div> | |
| <div class="rank-card"> | |
| <div class="rank">#3</div> | |
| <div class="context">of 36 in Group</div> | |
| <div class="percentile">Top 8%</div> | |
| </div> | |
| <div class="rank-card"> | |
| <div class="rank">100</div> | |
| <div class="context">Submissions</div> | |
| <div class="percentile">Iteration Champion</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Architecture Section --> | |
| <section class="arch-section"> | |
| <h2>ποΈ Architecture Review</h2> | |
| <p class="section-intro">You didn't just call an API - you built a full retrieval pipeline with 25 different techniques working together. Let's break down what you created.</p> | |
| <div class="arch-grid"> | |
| <div class="arch-card"> | |
| <h3>π Retrieval Stack (6 techniques)</h3> | |
| <ul> | |
| <li>TF-IDF vectorization for semantic search</li> | |
| <li>Vector embeddings for similarity matching</li> | |
| <li>Keyword extraction for precise matching</li> | |
| <li>Query expansion techniques</li> | |
| <li>Title boosting in ranking</li> | |
| <li>HyDE (Hypothetical Document Embeddings)</li> | |
| </ul> | |
| </div> | |
| <div class="arch-card"> | |
| <h3>π― Re-ranking Layer (4 techniques)</h3> | |
| <ul> | |
| <li>LLM-based re-ranking with Haiku</li> | |
| <li>Cross-encoder re-ranking</li> | |
| <li>Relevance filtering</li> | |
| <li>Language detection/filtering</li> | |
| </ul> | |
| </div> | |
| <div class="arch-card"> | |
| <h3>π§ Question Analysis (4 techniques)</h3> | |
| <ul> | |
| <li>Complexity detection</li> | |
| <li>Multi-part question handling</li> | |
| <li>Intent classification</li> | |
| <li>Topic detection</li> | |
| </ul> | |
| </div> | |
| <div class="arch-card"> | |
| <h3>π¬ Answer Generation (4 techniques)</h3> | |
| <ul> | |
| <li>Answer verification</li> | |
| <li>Hallucination prevention guardrails</li> | |
| <li>Safety guardrails</li> | |
| <li>Tone/style control</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="arch-card" style="margin-top: 1.5rem;"> | |
| <h3>β Notable Implementations</h3> | |
| <div class="pattern-tags"> | |
| <span class="pattern-tag">rerank_with_cross_encoder()</span> | |
| <span class="pattern-tag">rerank_with_llm()</span> | |
| <span class="pattern-tag">search_with_decomposition()</span> | |
| <span class="pattern-tag">detect_and_translate()</span> | |
| <span class="pattern-tag">detect_multipart_query()</span> | |
| <span class="pattern-tag">detect_question_complexity()</span> | |
| <span class="pattern-tag">expand_query_with_hyde()</span> | |
| <span class="pattern-tag">validate_citations()</span> | |
| </div> | |
| </div> | |
| <div class="arch-grid" style="margin-top: 1.5rem;"> | |
| <div class="arch-card"> | |
| <h3>β Strengths</h3> | |
| <ul> | |
| <li class="strength">Impressive 6-technique retrieval stack</li> | |
| <li class="strength">Smart LLM-based re-ranking with cost optimization</li> | |
| <li class="strength">Sophisticated question analysis pipeline</li> | |
| <li class="strength">Hallucination prevention guardrails</li> | |
| <li class="strength">Answer verification for quality assurance</li> | |
| <li class="strength">Type hints throughout for clarity</li> | |
| <li class="strength">Retry logic for API resilience</li> | |
| </ul> | |
| </div> | |
| <div class="arch-card"> | |
| <h3>π‘ Suggestions</h3> | |
| <ul> | |
| <li class="concern">Adding logging could help debug those mysterious score drops</li> | |
| <li class="concern">A few tests could catch regressions when experimenting</li> | |
| </ul> | |
| <p style="margin-top: 1rem; font-size: 0.85rem; color: var(--text-secondary);"> | |
| <em>Mild roast: You wrote 2,032 lines of Python but 0 tests. Living dangerously, I see.</em> | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experiments Section --> | |
| <section> | |
| <h2>π§ͺ The Experiment Lab</h2> | |
| <p class="section-intro">24 hypotheses tested. 7 helped, 3 hurt, 14 taught you that the universe is indifferent.</p> | |
| <div class="experiment-grid"> | |
| <div class="experiment-card helped"> | |
| <span class="experiment-badge helped">HELPED</span> | |
| <h4>Multilingual is critical</h4> | |
| <p>Language detection + translation gave biggest Complex improvement (+0.32)</p> | |
| </div> | |
| <div class="experiment-card helped"> | |
| <span class="experiment-badge helped">HELPED</span> | |
| <h4>Query Processing</h4> | |
| <p>Conversation parsing (extract search query + preserve full context)</p> | |
| </div> | |
| <div class="experiment-card helped"> | |
| <span class="experiment-badge helped">HELPED</span> | |
| <h4>Haiku vs Sonnet for reranking</h4> | |
| <p>Haiku works better than Sonnet - simpler models can be better for narrow tasks</p> | |
| </div> | |
| <div class="experiment-card helped"> | |
| <span class="experiment-badge helped">HELPED</span> | |
| <h4>Research doesn't always translate</h4> | |
| <p>Techniques that work in research may not help for this specific domain/task</p> | |
| </div> | |
| <div class="experiment-card hurt"> | |
| <span class="experiment-badge hurt">HURT</span> | |
| <h4>Simple vs Complex tradeoff</h4> | |
| <p>Many improvements help one category but hurt the other</p> | |
| </div> | |
| <div class="experiment-card hurt"> | |
| <span class="experiment-badge hurt">HURT</span> | |
| <h4>Flexibility matters</h4> | |
| <p>Rigid rules/constraints hurt Complex questions which need nuanced handling</p> | |
| </div> | |
| <div class="experiment-card hurt"> | |
| <span class="experiment-badge hurt">HURT</span> | |
| <h4>8 sources is optimal</h4> | |
| <p>Both fewer (5) and more (10) sources hurt performance</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Battle Stats Section --> | |
| <section> | |
| <h2>βοΈ Battle Stats</h2> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value">548</div> | |
| <div class="stat-label">Tool Calls</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">24</div> | |
| <div class="stat-label">Commits</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">8,059</div> | |
| <div class="stat-label">Lines Added</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">2,032</div> | |
| <div class="stat-label">Lines of Python</div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title">Tool Usage</div> | |
| <div class="bar-row"> | |
| <span class="bar-label">Bash</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 100%; background: var(--accent-blue);"></div></div> | |
| <span class="bar-value">188</span> | |
| </div> | |
| <div class="bar-row"> | |
| <span class="bar-label">Edit</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 77%; background: var(--accent-green);"></div></div> | |
| <span class="bar-value">144</span> | |
| </div> | |
| <div class="bar-row"> | |
| <span class="bar-label">Read</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 51%; background: var(--accent-purple);"></div></div> | |
| <span class="bar-value">95</span> | |
| </div> | |
| <div class="bar-row"> | |
| <span class="bar-label">TodoWrite</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 30%; background: var(--accent-orange);"></div></div> | |
| <span class="bar-value">56</span> | |
| </div> | |
| <div class="bar-row"> | |
| <span class="bar-label">TaskOutput</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 17%; background: var(--text-secondary);"></div></div> | |
| <span class="bar-value">32</span> | |
| </div> | |
| <div class="bar-row"> | |
| <span class="bar-label">Grep</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 11%; background: var(--text-secondary);"></div></div> | |
| <span class="bar-value">21</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- API Usage Section --> | |
| <section> | |
| <h2>π° API Cost Analysis</h2> | |
| <p class="section-intro">Where did your $19.81 go? Spoiler: Opus is expensive.</p> | |
| <div class="api-grid"> | |
| <div class="api-card"> | |
| <div class="value">$19.81</div> | |
| <div class="label">Total Spent</div> | |
| </div> | |
| <div class="api-card"> | |
| <div class="value">6.08M</div> | |
| <div class="label">Tokens Used</div> | |
| </div> | |
| <div class="api-card"> | |
| <div class="value">7,675</div> | |
| <div class="label">API Requests</div> | |
| </div> | |
| <div class="api-card"> | |
| <div class="value">81%</div> | |
| <div class="label">Haiku Usage</div> | |
| </div> | |
| </div> | |
| <div class="chart-card" style="margin-top: 1rem;"> | |
| <div class="chart-title">Cost by Model</div> | |
| <div class="bar-row"> | |
| <span class="bar-label">Opus</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 100%; background: var(--accent-purple);"></div></div> | |
| <span class="bar-value">$14.97</span> | |
| </div> | |
| <div class="bar-row"> | |
| <span class="bar-label">Haiku</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 30%; background: var(--accent-green);"></div></div> | |
| <span class="bar-value">$4.53</span> | |
| </div> | |
| <div class="bar-row"> | |
| <span class="bar-label">Sonnet</span> | |
| <div class="bar-track"><div class="bar-fill" style="width: 2%; background: var(--accent-blue);"></div></div> | |
| <span class="bar-value">$0.31</span> | |
| </div> | |
| </div> | |
| <p style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); text-align: center;"> | |
| 81% of requests used Haiku but 76% of cost was Opus - the math of AI pricing in action. | |
| </p> | |
| </section> | |
| <!-- Achievements Section --> | |
| <section> | |
| <h2>π Achievements</h2> | |
| <p class="section-intro">29 badges earned through blood, sweat, and LLM tokens.</p> | |
| <div class="achievements-grid"> | |
| <div class="achievement"> | |
| <span class="icon">π</span> | |
| <div class="details"> | |
| <h3>Marathon Runner</h3> | |
| <p class="quip">24.2 hours of hacking - this is a marathon!</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π§ͺ</span> | |
| <div class="details"> | |
| <h3>Hypothesis Machine</h3> | |
| <p class="quip">Tested 24 different hypotheses</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π</span> | |
| <div class="details"> | |
| <h3>Score Surgeon</h3> | |
| <p class="quip">Found 7 improvements through experimentation</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π οΈ</span> | |
| <div class="details"> | |
| <h3>Tool Master</h3> | |
| <p class="quip">548 tool calls - Claude is an extension of your brain</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π</span> | |
| <div class="details"> | |
| <h3>Top Quarter</h3> | |
| <p class="quip">#52 of 396 - in the top 13%</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π€</span> | |
| <div class="details"> | |
| <h3>Team Podium</h3> | |
| <p class="quip">Team ranked #3 - bronze medal!</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π</span> | |
| <div class="details"> | |
| <h3>Comeback Kid</h3> | |
| <p class="quip">Had 3 setbacks but found 7 wins - never gave up!</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π</span> | |
| <div class="details"> | |
| <h3>Full Spectrum</h3> | |
| <p class="quip">Used Opus, Sonnet, AND Haiku - the complete Claude experience</p> | |
| </div> | |
| </div> | |
| <div class="achievement"> | |
| <span class="icon">π</span> | |
| <div class="details"> | |
| <h3>Submission Surfer</h3> | |
| <p class="quip">Submitted 100 times - iterate and improve</p> | |
| </div> | |
| </div> | |
| <div class="achievement silly"> | |
| <span class="icon">π¦</span> | |
| <div class="details"> | |
| <h3>Sideways Scientist</h3> | |
| <p class="quip">14 hypotheses made no difference</p> | |
| </div> | |
| </div> | |
| <div class="achievement silly"> | |
| <span class="icon">π¦</span> | |
| <div class="details"> | |
| <h3>Penny Pincher</h3> | |
| <p class="quip">81% Haiku usage - knows when to save a buck</p> | |
| </div> | |
| </div> | |
| <div class="achievement silly"> | |
| <span class="icon">π¦</span> | |
| <div class="details"> | |
| <h3>Code Monster</h3> | |
| <p class="quip">Wrote 2,032 lines of Python</p> | |
| </div> | |
| </div> | |
| <div class="achievement silly"> | |
| <span class="icon">π΄</span> | |
| <div class="details"> | |
| <h3>Technique Collector</h3> | |
| <p class="quip">25 different techniques - gotta catch 'em all</p> | |
| </div> | |
| </div> | |
| <div class="achievement silly"> | |
| <span class="icon">π§</span> | |
| <div class="details"> | |
| <h3>Bash Wizard</h3> | |
| <p class="quip">5 shell scripts - you could've built the whole bot in bash</p> | |
| </div> | |
| </div> | |
| <div class="achievement silly"> | |
| <span class="icon">π¦</span> | |
| <div class="details"> | |
| <h3>Token Millionaire</h3> | |
| <p class="quip">6,084,991 tokens - you're rich in tokens</p> | |
| </div> | |
| </div> | |
| <div class="achievement silly"> | |
| <span class="icon">π°</span> | |
| <div class="details"> | |
| <h3>Submission Spammer</h3> | |
| <p class="quip">100 submissions - that's dedication (or desperation)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Roast Section --> | |
| <section class="roast-section"> | |
| <h2>π₯ The Roast Corner</h2> | |
| <div class="roast-item"> | |
| <strong>The Null Hypothesis Champion</strong><br> | |
| 14 of your 24 hypotheses made absolutely no difference. You've conducted the world's most thorough study on "things that don't matter." | |
| </div> | |
| <div class="roast-item"> | |
| <strong>The Revert Specialist</strong><br> | |
| Your commit history includes "Revert improved prompt (hurt scores)" - when your improvements make things worse, that's not an improvement, that's just extra typing. | |
| </div> | |
| <div class="roast-item"> | |
| <strong>The Budget CFO</strong><br> | |
| 81% of your 7,675 API requests used Haiku. You discovered that the cheap model often works better. Congratulations, you've found a way to feel good about being frugal. | |
| </div> | |
| </section> | |
| <!-- Fun Ending --> | |
| <div class="fun-ending"> | |
| <div class="fun-headline">π― Your Hackathon in One Sentence</div> | |
| <div class="fun-detail"> | |
| 24 hours, 24 commits, 24 hypotheses - and the wisdom that sometimes the cheap model wins and "improved" prompts lose. #3 on the team, top 13% globally, and a full RAG pipeline to show for it. | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| <p>Generated by fin-hackathon-insights | 2026-02-05 16:51 UTC</p> | |
| <p>Good luck in the hackathon! π</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment