Diverse Walks

Celebrating Diversity Through Community

---

🌟 About

Diverse Walks is a registered non-profit organization (AMKE) dedicated to celebrating diversity through meaningful connections, cultural exchange, and inclusive initiatives. We believe that by walking together, sharing stories, and experiencing different cultures, we can build bridges and create a more understanding world.

Organization Details:

• Legal Name: "Diverse Walks" Α.Μ.Κ.Ε.
• Registration Number: 1234567890123
• Tax ID: 800123456
• Registration Date: March 15, 2024
• Registry Office: Athens Chamber of Commerce
• Legal Address: 28 Panepistimiou Street, 10679 Athens, Greece

Our main purpose is to bring people with different backgrounds, characteristics, stories, personalities, and goals together to form a community that values their differences and creates an environment of inclusion open to everyone.

🎯 Mission

We aim to celebrate diversity through community walks and cultural exchange, addressing important questions about:

• How can we build genuine connections across different communities?
• What can we learn from each other's stories and experiences?
• How do we create spaces where everyone feels welcome and valued?

Through our diverse walks, we explore different neighborhoods, cultures, and communities, breaking down barriers, challenging stereotypes, and building genuine connections that transcend differences.

✨ Features

🎨 Modern Design

• Responsive Design - Works perfectly on all devices
• Accessibility First - WCAG 2.1 AA compliant
• Performance Optimized - Fast loading and smooth interactions
• Interactive Gallery - Click to enlarge event photos
• Smooth Animations - Engaging user experience

🛠️ Technical Excellence

• Semantic HTML5 - Proper structure and accessibility
• Modern CSS3 - BEM methodology with CSS Grid and Flexbox
• ES6+ JavaScript - Modular, maintainable code
• Mobile-First - Progressive enhancement approach
• SEO Optimized - Search engine friendly

♿ Accessibility Features

• Screen Reader compatible
• Keyboard Navigation support
• High Contrast mode support
• Reduced Motion preferences
• Focus Management and indicators

🚀 Live Website

Visit our website: https://cyberclub-acg.github.io/diversity-website/

📁 Project Structure

diversity-website/
├── 📄 index.html              # Main HTML file
├── 📖 README.md               # Project documentation
├── 🎨 css/                    # Stylesheets
│   ├── main.css              # Core styles & variables
│   ├── components.css        # BEM component styles
│   ├── gallery.css           # Gallery-specific styles
│   └── responsive.css        # Responsive design
├── ⚡ js/                     # JavaScript modules
│   ├── main.js               # Application orchestrator
│   ├── utils.js              # Utility functions
│   ├── navigation.js         # Navigation module
│   └── gallery.js            # Gallery module
└── 📁 assets/                 # Static assets
    ├── images/               # Event photos & logo
    ├── videos/               # Background video
    └── css/                  # Third-party CSS

🛠️ Technologies Used

Frontend

• HTML5 - Semantic markup and structure
• CSS3 - Modern styling with Grid and Flexbox
• JavaScript (ES6+) - Interactive functionality
• Bootstrap 4 - Responsive grid system

Development

• BEM Methodology - Maintainable CSS architecture
• ES6 Modules - Organized JavaScript code
• Mobile-First Design - Responsive approach
• Performance Optimization - Fast loading times

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+)
• No build process required - it's a static website!

Installation

1. Clone the repository

   git clone https://github.com/cyberclub-acg/diversity-website.git
   cd diversity-website

2. Serve the files

   • Option 1: Use a local web server

     # Using Python
     python -m http.server 8000
     
     # Using Node.js
     npx serve .
     
     # Using PHP
     php -S localhost:8000

   • Option 2: Open index.html directly in your browser

3. Visit the website

   • Open your browser and go to http://localhost:8000
   • Or simply open index.html in your browser

📱 Browser Support

Browser	Version	Support
Chrome	60+	✅ Full
Firefox	55+	✅ Full
Safari	12+	✅ Full
Edge	79+	✅ Full
IE	11	⚠️ Limited

🎨 Design System

Color Palette

Inspired by the Diverse Walks logo's vibrant fingerprint design:

Primary:   #8B4513  /* Rich brown */
Secondary: #FFF8DC  /* Cornsilk */
Accent:    #FF6B35  /* Vibrant orange */
Accent Alt: #8A2BE2 /* Blue violet */
Earth Tan: #D2B48C  /* Tan */
Golden:    #DAA520  /* Goldenrod */
Burnt Orange: #CC5500 /* Burnt orange */
Plum:      #8E4585  /* Plum */
Maroon:    #800000  /* Maroon */
Mustard:   #FFDB58  /* Mustard */

Typography

• Font Family: Open Sans, system fonts
• Weights: 300, 400, 500, 600, 700
• Responsive: Scales appropriately on all devices

Spacing

• Consistent scale: 0.25rem to 6rem (4px to 96px)
• Responsive adjustments for different screen sizes

📊 Performance Metrics

Our website is optimized for performance with:

• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1
• First Input Delay: < 100ms

Optimization Techniques

• Critical CSS inlined
• Lazy loading for images
• Efficient event handling
• Minimal JavaScript bundle
• Optimized asset delivery

♿ Accessibility

This website is built with accessibility in mind and follows WCAG 2.1 AA guidelines:

• Semantic HTML structure
• ARIA labels and roles
• Keyboard navigation support
• Screen reader compatibility
• Focus management and indicators
• High contrast mode support
• Reduced motion preferences

🤝 Contributing

We welcome contributions! Here's how you can help:

Development Setup

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes following our coding standards
4. Test your changes across different browsers
5. Commit your changes: git commit -m 'Add amazing feature'
6. Push to the branch: git push origin feature/amazing-feature
7. Open a Pull Request

Coding Standards

• Follow BEM methodology for CSS
• Use ES6+ features for JavaScript
• Include comprehensive comments
• Add error handling for all operations
• Test accessibility features

📧 Contact

Get in Touch

• Instagram: @diversityacg
• Email: dc.diversity@acg.edu
• Website: https://cyberclub-acg.github.io/diversity-website/

Join Our Community

Ready to join our community? Fill out our membership form and become part of our diverse and inclusive community!

🙏 Acknowledgments

• Open Source Community - For the amazing tools and libraries
• Contributors - Everyone who has helped make this project better
• Community Members - For sharing their stories and experiences

📄 Copyright

© 2025 Alexandros Kourtis. All rights reserved.

This project and all its contents are proprietary and confidential. No part of this code, design, or documentation may be reproduced, distributed, or transmitted in any form or by any means without the prior written permission of the copyright owner.

🔗 Links

• Live Website: https://cyberclub-acg.github.io/diversity-website/
• Issues: GitHub Issues
• Discussions: GitHub Discussions

---

Made with ❤️ by the Diverse Walks Community

Celebrating diversity through community walks and cultural exchange.