npm run dev in this folder, then open http://localhost:8788.
2025-26 season depth charts. Click a team to see its current roster, then click any player to dive into their career.
This HTML file lives in your project folder. Create a player/ folder, then inside it make one subfolder per player (using their ID) and save each team jersey photo as the team abbreviation:
(your folder)/
nba-careers.html
player/
durant/
OKC.jpg ← KD in Thunder jersey
GSW.jpg ← KD in Warriors jersey
BKN.jpg
PHX.jpg
HOU.jpg ← KD in Rockets jersey
james/
CLE.jpg
MIA.jpg
LAL.jpg
...
Player headshots for the team depth charts go in headshots/<Team>_25-26/<player-slug>.png — for example headshots/Hawks_25-26/trae-young.png, headshots/Hawks_25-26/dyson-daniels.png. The slug is the player's name lowercased with hyphens; the team bucket is the franchise nickname plus _25-26 (Hawks, Celtics, Bulls, Lakers, Blazers, 76ers, etc.). JPG/JPEG/WEBP also fine — the loader tries every extension. The flat path headshots/<slug>.png still works as a fallback.
Year-by-year timeline photos go in headshots/<Team>_25-26/timeline/<player-slug>-<YYYY-YY>.png. Hover any year card on a player page to see that season's photo. Flat headshots/timeline/ also still works.
The player IDs are: durant, james, paul, harden, leonard, irving, butler, westbrook, cj-mccollum. JPG or PNG both work. Reload the page and your photo replaces the placeholder.