Christopher Hsu's Submission#5
Open
christopherhsuu wants to merge 34 commits into
Open
Conversation
This commit cleans up the repository by: - Removing node_modules from version control (reduces repo size) - Removing .env files with sensitive MongoDB credentials - Adding .gitignore files to prevent future accidental commits - Adding .env.example files to document required environment variables 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Rebrand from "Sabermetrics 101" to "DiamondIQ" - Modern teal/cyan color scheme with clean design - Remove emoji icons, add professional SVG logo - Cleaner card designs with gradient accents - Update fonts to Space Grotesk and Inter - Add Vercel serverless configuration for backend - Update all styling to modern, sleek aesthetic 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Changed quiz IDs in all page components from "*-question" format to match backend API routes. This fixes 404 errors when fetching quiz data. - WAR.tsx: "war-question" → "war" - Offense.tsx: "offense-question" → "offense" - Pitching.tsx: "pitching-question" → "pitching" - Defense.tsx: "defense-question" → "defense" - Statcast.tsx: "statcast-question" → "statcast" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Complete visual redesign with distinctive typography, color scheme, and animations: TYPOGRAPHY: - Zilla Slab (bold display headings) replacing generic Space Grotesk - JetBrains Mono (scoreboard numbers) for technical flair - Merriweather (body text) for editorial quality COLOR PALETTE: - Deep field green (#1a4d2e, #0f2818) - classic baseball outfield - Clay red (#a14a3a) - pitcher's mound - Neon yellow (#f4e409) - stadium lights & scoreboard - Cream & chalk white (#f5f1e8, #fdfbf7) - vintage aesthetic - Scoreboard black (#0a0e0d) - classic displays HOME PAGE: - Stadium night lights hero with animated glow effects - Scoreboard-style badges with neon yellow accents - Baseball card-inspired topic cards with 3D hover effects - Diamond pattern backgrounds throughout - Dramatic typography with extreme weight contrasts (900 vs 300) NAVIGATION: - Scoreboard aesthetic with border lighting - Baseball diamond logo with geometric accents - Bold uppercase mono navigation links - Yellow highlight on active pages ANIMATIONS: - Floating stadium lights (glow keyframes) - Card hover with 3D rotation - Staggered reveals on scroll - Spring physics for interactive elements BACKGROUNDS: - Diamond pattern CSS gradients - Radial spotlight effects - Clay-colored accents - Field line patterns 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Updated WAR page hero section with navy/orange/yellow color scheme - Added data visualization grid background elements - Redesigned example boxes and comparison tables with new colors - Updated StatCard component with new color palette and design - Redesigned Quiz component with bold borders and accent colors - Updated Comments component with consistent STATHEAD styling - Applied monospace fonts for labels and serif fonts for content 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Redesigned Offense page with navy hero and cyan accents - Redesigned Pitching page with orange hero and yellow accents - Redesigned Defense page with navy hero and cyan accents - Redesigned Statcast page with dark navy hero and yellow accents - Updated all callout boxes and comparison sections with new color palette - Applied consistent typography (monospace for labels, serif for content) - Added data visualization grid backgrounds to all hero sections All pages now have a cohesive STATHEAD brand identity with bold colors, data-driven aesthetics, and distinctive typography. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Date: 12/1/2025
BU Email: cmhsu@bu.edu
Class Year: 2029
Favorite Hobby: Watching sports
Requirements
Please check off which features you have implemented:
A catchy name and title with a cool font!
An interesting and beautiful frontend design with a catchy title and cool fonts and colors that looks good on any screen size.
A home page with a summary about the interesting thing you want to teach me about. I was originally planning for this to be purely academic (e.g. math, CS, physics, engineering) topics but I am expanding it to include anything. However, you should be able to teach about whatever you choose in a clear way and go in-depth about it. If your subject matter is particularly engaging, that will reflect positively on your application.
Extra pages with more detailed information on certain topics. Make your website intuitive to navigate through, both within the pages themselves and in your choice of pages. You can structure your website however you see fit.
A poll/quiz feature where you can check that the user is aborbing the information your website teaches about well. These quiz questions should be scattered throughout the website, and they should tell the user whether they got the answer right or not once they select it. Additionally, it should show a live count of results (like a social media poll) with the names of the users who have voted for each option. You should take time to make sure your UI for this component is intuitive to use while still including all of the features listed. A user should be able to change their result if they want, and this should be reflected in the result count.
A comment feature on each page where users can offer feedback or ask questions based on the lesson on the page. The home page does not need a comment section, but every other page should have one.
Deploy the frontend and backend if you can using some of the free deployment tools we talked about in the workshops!
Screen Recording
Link: https://drive.google.com/drive/folders/1eOHBObK1z8e0Zyoj9rwRN-4M0K0EBfN9
Written Portion
How did the project go? What parts of it did you most enjoy / find yourself good at?
Overall, I think my project went pretty well, even though it definitely wasn’t smooth sailing the entire time. Having experimented with web development before helped a lot, because I wasn’t starting completely from scratch. I found myself really enjoying working with UI/UX. I had never added animations to buttons in any of my past projects, but this time I learned how to make elements react when you hover over them, which I thought looked really cool. I also liked playing around with the layout and design, pulling ideas from other sites and then implementing them with my own style. The parts that challenged me the most were the quiz and poll features. I had never used MongoDB or anything similar before, so implementing a database for the first time was rather difficult. I struggled with getting the results to display consistently on the page and had to look things up online and use LLMs to figure out what I was doing wrong.
Was this technical assessment what you expected? If you had another two weeks to work on it, what would you add or change?
This technical assessment was pretty much what I expected. I figured we would be asked to build a full website, and I liked that we had the freedom to choose a topic we cared about and turn it into something educational. That made it a lot more enjoyable. If I had another two weeks to work on it, I would add more visuals to the website. Right now, there’s a lot of text and numbers, which works, but I think visualizations would make the concepts much easier to understand. Since baseball analytics often involves interpreting movement and angles, being able to show things like a bat path or a heat map would give users a clearer picture of what metrics like “barrel rate” really represent.