Web-Development-Group

Project Overview

This responsive portfolio website was developed as part of the Power Learn Project Web Development Challenge. It showcases professional skills, projects, and contact information, designed to be fully responsive and user-friendly across all devices.

Team Members

This project was completed by:

• Sydwell Lebeloane
• Dzel Babu

Features

• Responsive design using modern CSS techniques
• Interactive UI elements for improved user experience
• Dynamic navigation with dropdown menus
• Animated "Web Developer" text with typing effect
• Skills visualization with animated progress bars
• Animated counter stats that count up when scrolled into view
• Portfolio section with hover effects
• Client logo carousel
• Dark/light mode toggle with persistent settings
• SEO optimized structure
• Mobile-friendly interface

Technologies Used

• HTML5
• CSS3 (Flexbox and Grid)
• JavaScript (ES6+)
• Font Awesome for icons
• Google Fonts (Poppins, DM Sans)
• CSS Animations

Project Structure

Web-Development-Group/
├── index.html                  # Main HTML file
├── assets/
│   ├── css/                    # CSS files
│   │   ├── style.css           # Main styles
│   │   └── responsive.css      # Media queries
│   ├── js/                     # JavaScript files
│   │   ├── main.js             # Main functionality
│   │   └── animations.js       # UI animations
│   └── images/                 # Image assets
│       └── clients/            # Client logos
├── README.md                   # Documentation
└── LICENSE                     # MIT License

Setup and Installation

1. Clone the repository: git clone https://github.com/alphac137/web-Development-Group.git
2. Open index.html in your browser

Key Sections

• Navigation: Responsive menu with dropdowns
• Hero Section: Animated typing effect with outlined text
• About: Personal information and social links
• Services: Expandable services grid
• Skills: Animated progress bars
• Services Features: Grid layout of key features
• Stats: Animated counters
• Portfolio: Project showcases with hover effects
• Clients: Sliding logo carousel
• Contact: Contact form and information (Extra section)
• Footer: Simplified layout with contact information and social links

Responsive Design

The website is fully responsive with carefully crafted breakpoints:

• Large devices (desktops)
• Medium devices (tablets)
• Small devices (landscape phones)
• Extra small devices (portrait phones)

License

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

Acknowledgements

• Power Learn Project for the opportunity
• All open-source tools and libraries used in this project
• Team members for participation