Travel Times Milwaukee - Landing Page

A stunning, modern landing page for the Travel Times Milwaukee iOS mobile application. This static website showcases the app's features, user reviews, and provides easy access to download from the App Store.

🚀 Features

• Modern Design: Clean, responsive design with beautiful gradients and animations
• Mobile-First: Fully responsive design that works perfectly on all devices
• Interactive Elements: Smooth scrolling, hover effects, and animated components
• SEO Optimized: Proper meta tags, semantic HTML, and optimized structure
• Fast Loading: Optimized assets and efficient CSS/JavaScript
• Accessibility: WCAG compliant with proper contrast ratios and keyboard navigation

📱 App Information

• App Name: Travel Times Milwaukee
• Platform: iOS (iPhone, iPad, Mac, Apple Vision)
• Rating: 4.8/5 stars (13 reviews)
• Size: 1.2 MB
• Price: Free
• Requirements: iOS 17.4+
• App Store Link: Download on App Store

🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with CSS Grid, Flexbox, and custom properties
• JavaScript: Interactive functionality and animations
• AWS S3: Static website hosting
• AWS CloudFront: Content delivery network
• Google Fonts: Inter font family

📁 Project Structure

traveltimesapp.com/
├── index.html          # Main HTML file
├── styles.css          # CSS styles
├── script.js           # JavaScript functionality
├── assets/             # Static assets
│   ├── tt-1024.png     # Official app icon
│   ├── logo.svg        # Legacy logo (optional)
│   └── app-screenshot.png # App screenshot (placeholder)
├── privacy.html        # Privacy policy page
├── terms.html          # Terms of use page
├── robots.txt          # SEO optimization
├── deploy.sh           # AWS deployment script
└── README.md           # This file

🚀 Quick Start

Prerequisites

1. AWS CLI: Install and configure AWS CLI

   # Install AWS CLI (macOS)
   brew install awscli
   
   # Configure AWS credentials
   aws configure

2. Domain: Ensure you own the domain traveltimesapp.com

Local Development

1. Clone or download the project files
2. Open index.html in your browser
3. Customize the content as needed

Deployment to AWS

1. Run the deployment script:

   ./deploy.sh

2. Follow the CloudFront setup instructions that appear after deployment

3. Configure your domain to point to the CloudFront distribution

🎨 Customization

Colors

The color scheme is defined in CSS custom properties in styles.css:

:root {
    --primary-color: #2563eb;
    --secondary-color: #f59e0b;
    --accent-color: #10b981;
    /* ... more colors */
}

Content

• Update app information in index.html
• Replace placeholder images in the assets/ folder
• Modify the App Store link to match your app's URL

Styling

• Modify styles.css for design changes
• Add new animations in the CSS file
• Update responsive breakpoints as needed

🌐 AWS Setup

S3 Bucket Configuration

• Bucket name: traveltimesapp.com
• Static website hosting enabled
• Public read access policy
• Error document redirects to index.html

CloudFront Distribution

• Origin: S3 website endpoint
• Custom domain: traveltimesapp.com
• SSL certificate required
• Error pages configured for SPA routing
• Caching optimized for performance

🔒 Security

Security Headers Implemented

• X-Content-Type-Options: nosniff - Prevents MIME type sniffing
• X-Frame-Options: DENY - Prevents clickjacking attacks
• X-XSS-Protection: 1; mode=block - Enables XSS filtering
• Referrer-Policy: strict-origin-when-cross-origin - Controls referrer information
• Permissions-Policy: Restricts access to camera, microphone, and geolocation
• Content-Security-Policy: Restricts resource loading to trusted sources
• Strict-Transport-Security: Enforces HTTPS connections

JavaScript Security

• Input validation for anchor links to prevent XSS
• Secure external link handling with noopener and noreferrer
• DOM element existence checks before manipulation
• Sanitized CSS injection

AWS Security

• CloudFront distribution with security headers
• S3 bucket with proper access controls
• HTTPS enforcement
• Proper cache control headers

Additional Security Measures

• No sensitive data collection or storage
• No third-party analytics or tracking
• External links open in new tabs with security attributes
• Content Security Policy prevents unauthorized resource loading

📊 Performance

• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
• Page Load Time: < 2 seconds
• Mobile Performance: Optimized for mobile devices
• SEO Score: 100/100

🔧 Maintenance

Regular Updates

• Keep app information current
• Update screenshots when app UI changes
• Monitor CloudFront analytics
• Review and update user reviews

Security

• Keep AWS credentials secure
• Regularly rotate access keys
• Monitor CloudFront access logs
• Enable AWS CloudTrail for audit logging

📞 Support

For technical support or questions about the landing page:

• Developer: Vinny Carpenter
• Website: vinny.dev
• Personal Portfolio: https://vinny.dev

📄 License

© 2025 Vinny Carpenter. All rights reserved.

🙏 Acknowledgments

• Wisconsin Department of Transportation for traffic data
• Apple App Store for app distribution
• AWS for hosting infrastructure
• Google Fonts for typography

---

Note: This landing page is designed specifically for the Travel Times Milwaukee iOS app. Please ensure all app store links and information are accurate before deployment.