Dynamic Team Rosters
Built structured roster sections for Varsity, Jr. Varsity, and Fresh/Soph teams, connecting shared Google data to a responsive interface that can accommodate long player lists.
Website project
CHS Boys Soccer
A responsive team website with Google API-powered rosters, an interactive match calendar, and a schedule-driven homepage countdown.
Website previews
Overview
About the website
CHS Boys Soccer gives players, families, supporters, and prospective team members a central place for current rosters, schedules, forms, galleries, and contact details. Google API integrations connect shared team data to responsive roster sections, upcoming-match summaries, an interactive season calendar, and the homepage match countdown.
- Audience
- Players, families, coaches, supporters, and prospective members of the Cypress Centurion Boys Soccer program.
- Scope
- Multi-page public website with dynamic schedules and rosters, media galleries, document discovery, social content, and protected contact handling.
Project work
What I Worked On
- Built the responsive multi-page frontend
- Integrated Google APIs for shared roster and schedule data
- Created dynamic Varsity, Jr. Varsity, and Fresh/Soph roster sections
- Built upcoming-match summaries and an interactive season calendar
- Connected the homepage countdown to the next scheduled match
- Implemented Cloudflare Pages Functions for schedules, rosters, forms, gallery, Instagram, and contact workflows
- Integrated R2-hosted assets and forms
- Added Turnstile-protected contact delivery through Resend
Selected features
Connected team information
Team information changes throughout the season, so the website was designed around maintainable shared data rather than static page updates. Roster and schedule integrations keep the public experience current while presenting each team level, upcoming match, and calendar date in a clear responsive interface.
Interactive Schedule & Match Calendar
Combined upcoming-match summaries with a navigable monthly calendar, including separate game times for each team level and controls for moving through the season.
Calendar-Driven Match Countdown
Connected the homepage to the current schedule so visitors can immediately see the next opponent, match date, and a live countdown to kickoff.
Technology
Technology stack
Frontend development, Google API integrations, and Cloudflare infrastructure are separated clearly.
Frontend
- HTML
- CSS
- JavaScript
- Responsive Design
Data & APIs
- Google APIs
- Google Sheets
- Meta Graph API
Infrastructure
- Cloudflare Pages
- Pages Functions
- Cloudflare R2
- Turnstile
- Resend
Responsive design
Designed for desktop and mobile
The project presentation pairs desktop and mobile captures so navigation, hierarchy, and content behavior can be reviewed across screen sizes. Real screenshots replace labeled placeholders as project captures are supplied.
Live website
Explore CHS Boys Soccer
Visit the public website to see the current production experience.