Artists of Tomorrow - Project Showcase
Here is a summary of the major features and technical upgrades completed on the Artists of Tomorrow website, along with screenshots showing the changes in action.
Key Achievements
-
Site-wide Asia & India Regional Refactoring
The Goal: Cleanly transition the website structure from a single-country profile (India) to a continent/country format (Asia/India) to match the Latin America profile format.
What changed:
Renamed all regional files dynamically via Git: nathupur-india.html → nathupur-asia.html, india-competition-gallery.html → asia-competition-gallery.html, and their respective JS support files.
Restructured the Asia Partner School profile to match the Latin America format: removed the localized winner gallery and replaced it with a dynamic 37-item Student Artwork Submission carousel.
Updated navigation menus, footers, headers, metadata, Leaflet map pins, and data attributes across all 13 HTML pages.
Asia Partner School Profile
Review
Asia Partner School Profile -
Dual-Currency Prize Money Display
The Goal: Present prize structures clearly for both regional cohorts (INR ₹ for India, USD $ for Latin America) without cluttering the UI.
What changed:
Redesigned the prize cards on the Home and Competition pages to support side-by-side dual currencies:
1st Place: ₹3,000 / $50
2nd Place: ₹2,000 / $30
3rd Place: ₹1,000 / $15
Implemented a flexible layout system (.prize-amounts CSS class) using flexbox, ensuring a clean horizontal display on desktop and responsive vertical stacking on mobile.
Dual Currency Prize Cards
Review
Dual Currency Prize Cards -
Cloudflare Pages CDN & Dynamic Image Pathing
The Goal: Render over 2,000+ student submission images without overloading Git or pushing massive file structures to GitHub.
What changed:
Deployed the entire project (including the git-ignored images/latin-america folder) to Cloudflare Pages using Wrangler CLI.
Integrated a dynamic resolution path utility in the codebase: when window.AOT_CDN_BASE_URL is set to https://aot-images.pages.dev/, the site dynamically redirects all requests for git-ignored Latin American images to load instantly from the Cloudflare Pages CDN.
Added a development fallback to local paths, enabling fully offline local development. -
Interactive Directory Search & Dynamic Division Listing
The Goal: Ensure that searches in the school directories behave predictably and layout correctly, and hide empty content boxes.
What changed:
Fixed a bug where filtered/hidden school card wrappers were still showing as blank space by adding CSS rules (.school-directory-card[hidden] { display: none !important; }).
Optimized the school profile lists so they dynamically format active age ranges (e.g. showing Ages 8-11, 12-15 and automatically hiding any age division with 0 submissions).
School Directory Search
Review
School Directory Search -
Year Rollover
Rolled over the campaign, art prompt headers, and copyright documentation from 2025 to 2026 site-wide.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.