African Foundation Scholars Network (AFSN)

A modern, responsive website platform designed to empower African communities through education, innovation, and leadership development.

Overview

The AFSN website showcases success stories, impact statistics, and provides opportunities for users to join the movement of transforming African communities through education and leadership programs.

Enhanced Features

Core Features

• Dynamic Loading Animation: Engaging loading screen with progress bar and animated phrases
• Responsive Navigation: Modern navbar with theme toggle and mobile-friendly design
• Hero Section: Animated text, call-to-action buttons, and video background
• Success Stories: Inspiring scholar stories with images, locations, and tags
• Impact Statistics: Animated counters showcasing AFSN's achievements
• Interactive Elements: Scroll animations and smooth transitions

Recent Enhancements

• Enhanced Video Background: Improved visibility with optimized overlays
• Interactive Leadership Section: Animated dots with wave effects on hover
• Professional Color Scheme: Dark blue (#00008B) and orange (#D2691E) theme
• Improved Contact Page: Fixed styling and consistent footer design
• Enhanced Registration: Better form design with glassmorphism effects
• Donation Page: Coming soon notice with professional design

Project Structure

AFSN001/
├── Africa/                  # Main project folder
│   ├── index.html          # Homepage
│   ├── about.html          # About page
│   ├── contact.html        # Contact page
│   ├── register.html       # Registration page
│   ├── donation.html       # Donation page
│   ├── sections.html       # Spotlight page
│   ├── speak-Africa.html   # Speak Africa page
│   ├── impact.css          # Main stylesheet
│   ├── animations.css      # Animation styles
│   ├── contact.css         # Contact page styles
│   ├── donation.css        # Donation page styles
│   ├── script.js           # Main JavaScript
│   ├── interactive-dots.js # Interactive animations
│   ├── theme.js            # Theme switching
│   ├── images/             # Image assets
│   └── backend/            # Backend services (Node.js)
└── README.md               # This file

Technologies Used

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Styling: Custom CSS with CSS Variables, Glassmorphism effects
• Icons: Font Awesome 6.0
• Animations: AOS (Animate On Scroll), Custom CSS animations
• Backend: Node.js, Express.js (for future payment processing)
• Deployment: Netlify ready with configuration

Quick Start

Local Development

1. Clone the repository

   git clone https://github.com/KhotKeys/AFSN001.git
   cd AFSN001/Africa

2. Open with Live Server

   • Use VS Code with Live Server extension
   • Or serve with any local server
   • Open http://localhost:5500

3. View the website

   • Navigate through different pages
   • Test responsive design on various devices

Deployment

The project is ready for deployment on:

• Netlify: Configuration included (netlify.toml)
• Vercel: Zero-config deployment
• GitHub Pages: Static hosting ready

Design System

Color Palette

• Primary: Dark Blue (#00008B)
• Secondary: Orange (#D2691E)
• Accent: Light variations of primary colors
• Background: Dynamic gradients and glassmorphism

Typography

• Font Family: Segoe UI, system fonts
• Headings: Bold, gradient text effects
• Body: Clean, readable typography

Animations

• Loading: Custom phrases with progress bar
• Scroll: AOS library integration
• Interactive: Hover effects and micro-interactions
• Leadership Section: Interactive dots with wave animations

Responsive Design

• Mobile First: Optimized for all screen sizes
• Breakpoints: 480px, 768px, 992px, 1200px
• Touch Friendly: Large tap targets and smooth interactions
• Performance: Optimized images and efficient CSS

🔧 Key Improvements Made

UI/UX Enhancements

• Enhanced video background visibility
• Professional color scheme implementation
• Interactive leadership section with animated dots
• Improved glassmorphism effects throughout
• Better mobile navigation experience

Technical Improvements

• Fixed file path issues for local development
• Consistent footer across all pages
• Optimized CSS structure and organization
• Enhanced form designs with better validation
• Improved loading animations and transitions

Page-Specific Updates

• Index: Enhanced hero section and interactive elements
• Contact: Fixed styling issues and improved form design
• Register: Professional glassmorphism design with better UX
• Donation: Clean design with "Coming Soon" payment notice

Contact Information

• Email: africanfoundationsn@gmail.com
• Phone: +211 977 123 456
• Location: Juba, South Sudan
• Website: AFSN Official

Social Media

• Facebook: AFSN Facebook
• LinkedIn: AFSN LinkedIn
• WhatsApp: Join Community

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

We welcome contributions! Please feel free to submit a Pull Request or open an Issue for any improvements or bug fixes.

---