npm run dev in this folder, then open http://localhost:8788.
2026-27 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>/<player-slug>.png — for example headshots/Hawks/trae-young.png, headshots/Hawks/dyson-daniels.png. The slug is the player's name lowercased with hyphens; the team folder is the franchise nickname (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.
Jersey photos live in player/<Team>/<player-slug>/<TEAM>.jpg — e.g. player/Hawks/aaron-wiggins/ATL.jpg. When a player is traded, move their folder to the new team bucket.
Year-by-year timeline photos go in headshots/<Team>/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.