FRACTAL BOOTCAMP WEBSITE PROTOTYPE

Status: Functional vanilla HTML/CSS/JS prototype Created: December 4, 2025 Based on: Complete redesign specifications in /fractal-website/ documentation

---

📁 WHAT'S INCLUDED

This prototype implements the redesigned Fractal Bootcamp website with:

✅ Homepage (index.html) - Complete 7-section structure ✅ Outcomes/Alumni Page (outcomes.html) - Graduate stories and stats ✅ FAQ Page (faq.html) - Comprehensive Q&A with accordions ✅ Full CSS Design System (/css) - All styles, components, utilities ✅ JavaScript Functionality (/js/main.js) - Mobile menu, accordions, animations

---

🎨 DESIGN SYSTEM

The prototype borrows the existing Fractal Bootcamp aesthetic while improving:

Color Palette

• Background: #191919 (dark theme)
• Text: #e1e1e1 (light gray)
• Accent: #ffba7d (peachy orange)
• Cards: #262626 (slightly lighter)

Typography

• Font: Inter (clean, modern sans-serif)
• Sizes: 40px (H1), 24px (H2), 16px (body)
• Weights: Bold (700), Semibold (600), Medium (500), Regular (400)

Components

• Buttons: 3 variants (primary, secondary, outline)
• Cards: Hover effects with lift and glow
• Accordions: Smooth expand/collapse for FAQs
• Navigation: Sticky header with mobile menu

See STYLE-PROFILE.md in the parent directory for complete design specs.

---

📂 FILE STRUCTURE

/prototype
├── index.html                 # Homepage (7 sections)
├── outcomes.html              # Alumni stories page
├── faq.html                   # FAQ page with accordions
├── README.md                  # This file
│
├── /css
│   ├── main.css              # Main import file
│   │
│   ├── /base
│   │   ├── variables.css     # All CSS custom properties
│   │   ├── reset.css         # Browser reset
│   │   ├── typography.css    # Font styles
│   │   └── layout.css        # Layout utilities
│   │
│   └── /components
│       ├── buttons.css       # Button styles
│       ├── navigation.css    # Header/nav styles
│       ├── cards.css         # Card components
│       └── accordions.css    # Accordion/FAQ styles
│
└── /js
    └── main.js               # All JavaScript functionality

---

🚀 HOW TO RUN

Option 1: Simple HTTP Server (Recommended)

Using Python 3:

cd /Users/derekrazo/Claude_Projects/fractal-website/prototype
python3 -m http.server 8000

Then open: http://localhost:8000

Using Node.js (http-server):

npx http-server . -p 8000

Using PHP:

php -S localhost:8000

Option 2: Direct File Open

Simply open index.html in your browser. Some features may not work due to CORS restrictions.

---

✨ FEATURES IMPLEMENTED

Homepage (index.html)

1. Hero Section - Clear value prop, 2 CTAs
2. Social Proof Strip - Stats + partner logos
3. Next Cohort Details - Dates, pricing, what you get
4. How It Works - 3 pillars (Experience, Instruction, AI-First)
5. Student Outcomes - 2 featured alumni stories
6. Objection Crusher - 3 key FAQs with accordions
7. Final CTA - Application push with urgency

Navigation

• Sticky header with scroll effect
• Mobile-responsive hamburger menu
• Active page indicators
• Smooth scroll to anchors

Outcomes Page (outcomes.html)

• Placement statistics dashboard
• Detailed alumni case studies
• Company logos grid
• CIRR methodology section

FAQ Page (faq.html)

• Organized by category (Program, Admissions, Cost, Outcomes)
• Expandable accordions
• 12+ questions answered
• CTA to schedule call

JavaScript Features (js/main.js)

• Mobile menu toggle
• Accordion expand/collapse
• Smooth scroll for anchor links
• Scroll-based animations (fade in)
• Header scroll effect
• Form validation helpers
• Lazy image loading
• External link handling

---

🎯 KEY IMPROVEMENTS FROM ORIGINAL SITE

Simplified Structure

• Before: 20+ sections on homepage
• After: 7 focused sections

Reduced Decision Paralysis

• Before: 30+ competing CTAs
• After: 3 primary CTAs (Apply, Roadmap, Schedule Call)

Focused Messaging

• Before: Mixed bootcamp + coworking content
• After: Bootcamp-only focus

Better Value Messaging

• Before: Emphasized difficulty ("hardest you've ever worked")
• After: Emphasized transformation ("$100K jobs in 12 weeks")

Mobile Optimization

• Before: Long scroll, 15+ sections
• After: 5 scrolls, streamlined content

---

📋 PAGES NOT YET BUILT

These pages are specified in the documentation but not yet implemented in this prototype:

• curriculum.html - Full curriculum breakdown
• team.html - Instructor bios
• apply.html - Multi-step application form
• roadmap.html - Lead magnet landing page
• scholarship.html - Scholarship application
• externship.html - Hiring partner info
• blog.html - Content hub
• about.html - Founder story

To implement these: Follow the detailed specifications in /fractal-website/supporting-pages-breakdown.md (40,000+ words of guidance).

---

🛠️ CUSTOMIZATION GUIDE

Colors

Edit /css/base/variables.css:

:root {
  --color-bg-primary: #191919;      /* Main background */
  --color-text-primary: #e1e1e1;    /* Main text */
  --color-accent-primary: #ffba7d;  /* Links, CTAs */
}

Typography

Edit /css/base/variables.css:

:root {
  --font-size-h1: 40px;
  --font-size-body: 16px;
  --font-weight-bold: 700;
}

Spacing

Edit /css/base/variables.css:

:root {
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
}

---

🔧 BROWSER COMPATIBILITY

Tested and working in:

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

Note: Uses modern CSS (custom properties, Grid, Flexbox) and ES6 JavaScript. Does not support IE11.

---

📱 RESPONSIVE BREAKPOINTS

/* Mobile */
@media (max-width: 640px)

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px)

/* Desktop */
@media (min-width: 1025px)

All layouts are mobile-first and responsive.

---

🎨 ADDING NEW COMPONENTS

Example: Adding a New Card Style

1. Add to /css/components/cards.css:

.card-special {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-accent-primary);
  padding: var(--space-xl);
  /* ... */
}

2. Use in HTML:

<div class="card-special">
  <h3>Special Card</h3>
  <p>Content here</p>
</div>

Example: Adding a New Page

1. Copy faq.html as a template
2. Update <title> and meta tags
3. Update nav active state
4. Add your content in <main>
5. Footer is consistent across all pages

---

⚡ PERFORMANCE

Current prototype metrics (approximate):

• CSS Size: ~35KB uncompressed
• JS Size: ~8KB uncompressed
• HTML (homepage): ~25KB
• Total Page Weight: ~70KB (without images)
• Load Time: <1s on fast connection

Production optimizations needed:

• Minify CSS/JS
• Compress images (WebP format)
• Add lazy loading for images
• Implement caching headers
• Use CDN for assets

---

🐛 KNOWN ISSUES & TODOs

Minor Issues

• No actual form submission handling (apply form not built)
• Placeholder images (need real photos)
• Some links go to # (waiting for pages to be built)
• No analytics tracking implemented

Future Enhancements

• Add VSL (Video Sales Letter) to hero
• Implement multi-step application form
• Add blog functionality
• Integrate with email platform (ConvertKit)
• Add A/B testing framework
• Implement heatmap tracking

---

📚 DOCUMENTATION REFERENCE

This prototype implements designs from these documents (in /fractal-website/):

1. STYLE-PROFILE.md - Complete design system
2. recommended-homepage-structure.md - Homepage specifications
3. funnel-stage-breakdown.md - Conversion funnel
4. supporting-pages-breakdown.md - All page specs (40K words)
5. MASTER-IMPLEMENTATION-PLAN.md - Full project roadmap

---

🚢 PRODUCTION DEPLOYMENT CHECKLIST

Before deploying to production:

• Replace all placeholder content with real content
• Add real images (compressed, optimized)
• Build remaining pages (curriculum, team, apply, etc.)
• Implement form submission handling
• Add analytics (GA4, Hotjar)
• Set up email automation
• Minify and compress assets
• Add meta tags for SEO
• Test on all devices/browsers
• Set up hosting (Vercel, Netlify, etc.)
• Configure custom domain
• Add SSL certificate
• Set up monitoring/uptime checks

---

💡 DESIGN PHILOSOPHY

This prototype follows these principles:

1. Content First - Clear hierarchy, scannable
2. Mobile-First - Designed for small screens first
3. Performance - Minimal JS, fast load times
4. Accessibility - Semantic HTML, ARIA labels, keyboard nav
5. Maintainability - Modular CSS, clear structure
6. Simplicity - Vanilla stack, no frameworks

---

🤝 CONTRIBUTING

To extend this prototype:

1. Read the design documentation first
2. Follow existing naming conventions
3. Keep CSS modular (component-based)
4. Test responsiveness at all breakpoints
5. Maintain accessibility standards
6. Document new components

---

📧 CONTACT

Questions about this prototype?

• Email: hello@fractalbootcamp.com
• Documentation: /fractal-website/ directory
• Original Site: https://fractalbootcamp.com

---

📄 LICENSE

This prototype is for Fractal Bootcamp internal use.

---

Prototype built with ❤️ using vanilla HTML, CSS, and JavaScript. No frameworks. No dependencies. Just clean, modern web development.