Client Project: Part 1

Project Overview

This web application is designed to serve as a professional and approachable online platform for personal trainer Jaylee Vasquez. The site promotes her training services, provides resources for clients, and allows users to explore program options, view rates, locate nearby training locations, and get in touch directly. It provides a responsive and dynamic experience that bridges online and in-person training opportunities.

• Intended Users: Prospective fitness clients, returning clients, and partners interested in collaborating with Jaylee.
• Overview of Content: The site includes a homepage overview, an about section, detailed training programs, pricing, physical locations with maps, contact functionality, and a secure member login for client access.

Client Information

• Name: Jaylee Vasquez
• Organization: BuiltBunny Personal Training
• Email: jvasqu12@charlotte.edu
• Phone: [private]

Wireframe

View the wireframe on Draw.io: Wireframe Link

Site Map

View the sitemap on Draw.io: Sitemap Link

Page Designs

1. Home (index.html)
   Purpose: Introduce Jaylee’s brand and direct users to key parts of the site
   Audience: General visitors and prospective clients
   Content: Hero section, About preview, Program highlights, Testimonials, Location teaser, CTA
   User Data Input: No
   Validation Needed: N/A
   Interactive Elements: Buttons, navigation links
   Actions: Scroll or navigate to other pages
   
2. About (index.html)
   Purpose: Share Jaylee’s story and qualifications
   Audience: Visitors, potential clients
   Content: Bio, training philosophy, certifications, fun facts, professional photo
   User Data Input: No
   Validation Needed: N/A
   Interactive Elements: Navigation links
   Actions: Navigate to related pages
   
3. Programs (index.html)
   Purpose: Overview of available training services
   Audience: Prospective clients
   Content: Online training, in-person sessions, group classes, summary descriptions with icons or cards
   User Data Input: No
   Validation Needed: N/A
   Interactive Elements: Buttons/links
   Actions: Navigate to more detailed service sections
   
4. Locations (index.html)
   Purpose: Help users find training locations
   Audience: In-person clients
   Content: Address, hours, parking info, gym rules, location images
   User Data Input: No
   Validation Needed: N/A
   Interactive Elements: Google Map, links
   Actions: Open map, navigate to contact or programs page
   
5. Rates (index.html)
   Purpose: Display pricing tiers and packages
   Audience: Interested clients or buyers
   Content: Packages, individual session rates, group class pricing, nutrition add-ons, CTAs
   User Data Input: No
   Validation Needed: N/A
   Interactive Elements: Pricing cards, booking buttons
   Actions: Navigate to contact page or booking form
   
6. Contact (contact.html)
   Purpose: Enable user inquiries and session booking
   Audience: Potential clients and partners
   Content: Contact form, direct email, FAQ
   User Data Input: Yes (form)
   Validation Needed: Yes (required fields, email format)
   Interactive Elements: Form inputs, submit button
   Actions: Form validation, optional AJAX send
   
7. Member Login (login.html)
   Purpose: Allow access to private content
   Audience: Registered members
   Content: Login form, forgot password link
   User Data Input: Yes (username/password)
   Validation Needed: Yes (required fields)
   Interactive Elements: Form fields, login button
   Actions: Navigate to mock dashboard or show login error
   

Dynamic Functionality

• Home Page: Smooth scroll and animated CTA buttons that guide users to other sections of the site.
• Programs Page: Interactive cards or tabs that expand with more details on hover or click.
• Locations Page: Embedded interactive Google Map showing training locations with clickable markers.
• Rates Page: Expandable pricing tables or accordions for detailed package info using jQuery UI.
• Contact Page: JavaScript form validation (required fields, proper email format) with visual feedback on submission.
• Member Login: Mock login validation that redirects to a dashboard or displays error feedback if credentials are incorrect.

Example inspiration from: W3Schools Tab Example, jQuery UI Accordion, Form Validation Example

Notes

Created by: Benjamin Taylor
Date: 3/31/2025
References used: Class resources, freeCodeCamp material.