Skip to content

README.md

Latest commit

 

History

History
280 lines (213 loc) · 7.29 KB

README.md

File metadata and controls

280 lines (213 loc) · 7.29 KB

Ternity Education

Education for the 22nd Century

A refined minimalist website for Ternity Education, showcasing AI safety and literacy programs for international schools across Asia-Pacific.

🎯 Project Overview

This website is designed with a sophisticated minimalist approach, focusing on:

  • Clean, professional design
  • Strategic use of Ternity Blue (#7DD3E8)
  • Large, bold typography
  • Smooth animations and micro-interactions
  • Exceptional user experience
  • Performance and accessibility

🎨 Design Philosophy

The website embodies "intelligent restraint" - using minimal visual elements to create maximum impact. Every element serves a purpose, guided by:

  • Minimalist Color Palette: Primarily white and Ternity Blue with strategic accents
  • Typography as Visual System: Large, bold headlines with generous spacing
  • Subtle, Intelligent Motion: Purposeful animations that enhance UX
  • Generous Whitespace: Let designs breathe
  • Responsive Design: Optimized for all devices

📁 Project Structure

ternity/
├── index.html          # Main HTML structure
├── styles.css          # Complete design system and styles
├── script.js           # Interactive behaviors and animations
├── img/                # Logo and images
│   ├── header_logo.svg
│   └── favicon files
├── README.md           # This file
└── CNAME              # Domain configuration

🚀 Key Features

Sections

  1. Hero Section

    • Full viewport height
    • Animated geometric background
    • Bold headline with staggered animations
    • Clear CTAs
    • Trust badges (MIT, Harvard, Boston College)

  2. Problem Section ("The Challenge")

    • Two-column layout
    • Animated statistics counter
    • Visual chart showing the gap
    • Compelling narrative

  3. Solution Section ("How We're Different")

    • Three rotating cards
    • Hover effects with straightening
    • Teacher training, student curriculum, school consulting

  4. Meet Haihao Section

    • Split layout with diagonal divider
    • Professional credentials
    • Image placeholder (ready for photo)
    • CTA to book a call

  5. Process Timeline

    • 4-step process
    • Animated connecting line
    • Clear, actionable steps

  6. Booking Section

    • Centered, focused form
    • Clean input fields
    • Form validation
    • Alternative contact option

  7. Footer

    • Navigation links
    • Social/contact info
    • Copyright and location

Interactive Elements

  • Smooth Scroll Navigation: Animated scrolling to sections
  • Sticky Navigation: Becomes solid on scroll with smooth transition
  • Mobile Menu: Full-screen overlay menu for mobile devices
  • Counter Animations: Stats count up when entering viewport
  • Chart Line Drawing: SVG path animation
  • Card Hover Effects: Rotate and lift effects
  • Parallax Background: Subtle movement on hero section
  • Floating CTA: Appears after hero, hides at booking section
  • Form Handling: Real-time validation and submission feedback

🎨 Design System

Colors

--color-white: #FFFFFF
--color-ternity-blue: #7DD3E8
--color-light-gray: #F3F4F6
--color-text-gray: #6B7280
--color-dark-gray: #374151
--color-almost-black: #1F2937

Typography

  • Font: Inter (400, 500, 600, 700, 900)
  • Hero: clamp(3rem, 8vw, 7rem)
  • H2: clamp(2rem, 5vw, 4rem)
  • Body: clamp(1rem, 2vw, 1.25rem)
  • Line Heights: 1.1 (tight), 1.5 (normal), 1.7 (relaxed)

Spacing

--space-xs: 0.5rem   (8px)
--space-sm: 1rem     (16px)
--space-md: 2rem     (32px)
--space-lg: 4rem     (64px)
--space-xl: 6rem     (96px)
--space-2xl: 8rem    (128px)

📱 Responsive Breakpoints

  • Desktop: 1024px+
  • Tablet: 768px - 1023px
  • Mobile: < 768px

All sections adapt gracefully with:

  • Stacked layouts on mobile
  • Adjusted spacing
  • Touch-friendly interactions
  • Optimized typography

⚡ Performance

The website is optimized for:

  • Fast Load Times: Minimal dependencies, optimized assets
  • Smooth Animations: 60fps animations using GPU acceleration
  • Efficient Code: Debounced scroll handlers, Intersection Observer
  • Progressive Enhancement: Works without JavaScript

♿ Accessibility

  • Semantic HTML structure
  • ARIA labels where appropriate
  • Keyboard navigation support
  • Focus visible styles
  • Reduced motion support
  • Color contrast compliance (WCAG AA)

🛠️ Technologies Used

  • HTML5: Semantic markup
  • CSS3: Modern features (Grid, Flexbox, Custom Properties)
  • Vanilla JavaScript: No frameworks needed
  • SVG: Scalable icons and illustrations
  • Google Fonts: Inter font family

📝 Content Management

To Update Content

  1. Hero Section: Edit lines 64-87 in index.html
  2. Statistics: Update data-count attributes in lines 148, 152, 156
  3. Cards: Modify card content in lines 196-233
  4. Credentials: Update list items in lines 264-281
  5. Form: Customize fields in lines 360-390

To Add Haihao's Photo

Replace the SVG placeholder (lines 246-251) with:

<img src="img/haihao-photo.jpg" alt="Haihao Liu" />

Recommended specs:

  • Format: WebP with JPG fallback
  • Resolution: 800px width minimum
  • File size: < 200KB
  • Style: Professional, neutral background

🚀 Deployment

This is a static website that can be deployed to:

  • GitHub Pages (already configured with CNAME)
  • Netlify
  • Vercel
  • Any static hosting service

GitHub Pages Setup

The site is configured to work with GitHub Pages. Simply push to the main branch and enable Pages in repository settings.

🔧 Customization

Changing Brand Colors

Update CSS variables in styles.css (lines 31-40):

--color-ternity-blue: #7DD3E8;  /* Your brand color */

Adjusting Animations

Modify animation durations in styles.css (lines 71-73):

--transition-fast: 200ms;
--transition-normal: 400ms;
--transition-slow: 600ms;

Form Submission

The form currently logs to console. To connect to a backend:

  1. Update handleFormSubmit() in script.js (line 286)
  2. Replace the setTimeout with actual API call:
fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
    // Handle success
});

Or integrate with:

  • Formspree
  • Netlify Forms
  • EmailJS
  • Custom backend

📊 Performance Metrics

Target metrics:

  • First Contentful Paint: < 1.2s
  • Largest Contentful Paint: < 2s
  • Cumulative Layout Shift: < 0.05
  • First Input Delay: < 100ms

🎯 Conversion Optimization

The website is designed to drive consultations through:

  • Clear CTAs throughout
  • Low-friction booking form
  • Trust signals (credentials, statistics)
  • Floating CTA for persistent visibility
  • Optimized user flow

📞 Support & Questions

For questions or support:

📄 License

Copyright © 2025 Ternity Education. All rights reserved.

🎨 Design Credits

Inspired by:

  • Apple's product pages (restraint, whitespace)
  • Linear's website (sophisticated minimalism)
  • Stripe's design system (purposeful design)
  • Swiss design principles (typography-first, grid-breaking)

Built with attention to detail and modern web standards.