README.md

BR Architects Portfolio Website

A modern, responsive architectural portfolio website showcasing projects and team members.

🌐 Live Demo

View the live website: https://youssefali2002.github.io/VisionOne/

📸 Website Preview

�️ About

BR Architects is a professional portfolio website designed to present architectural projects and team information in an elegant, modern layout. This project demonstrates frontend development skills using HTML5, CSS3, and responsive design principles.

✨ Features

• Responsive Design: Fully responsive layout that works on all devices
• Smooth Navigation: Smooth scrolling between sections
• Project Gallery: Grid-based project showcase with hover effects
• Team Section: Professional team member profiles
• Contact Form: Functional contact interface (frontend only)
• Modern UI: Clean, minimalist design with subtle animations

🛠️ Technologies Used

• HTML5: Semantic markup and structure
• CSS3: Modern styling with Grid and Flexbox
• Font Awesome: Icon library
• CSS Normalize: Cross-browser compatibility

📁 Project Structure

VisionOne-main/
├── index.html          # Main HTML file
├── css/
│   ├── template.css    # Main stylesheet
│   ├── all.min.css     # Font Awesome
│   └── normalize.css   # CSS reset
├── images/             # Project and team images
└── webfonts/           # Font files

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/youssefali2002/VisionOne.git

2. Navigate to the project directory:

   cd VisionOne-main

3. Open in browser:

   # Simply open index.html in your preferred browser
   open index.html

📱 Sections

• Header: Fixed navigation with smooth scrolling
• Hero: Eye-catching introduction with architectural imagery
• Projects: Grid layout showcasing 8 architectural projects
• About: Team member profiles with contact information
• Contact: Contact form and location map
• Footer: Simple footer with attribution

🎨 Design Highlights

• Color Scheme: Minimalist black and white with subtle grays
• Typography: Clean, professional fonts optimized for readability
• Layout: CSS Grid for responsive project galleries
• Animations: Smooth transitions and hover effects
• Mobile-First: Responsive breakpoints for tablets and phones

🔧 Customization

Adding New Projects

1. Add your image to the images/ folder
2. Duplicate a .box element in the projects section
3. Update the image source and project name

Updating Team Information

1. Replace team images in the images/ folder
2. Update names, roles, and descriptions in the about section

Modifying Colors

Edit CSS variables in template.css:

:root {
  --main-transition: 0.3s;
  --main-padding-top: 40px;
  --main-padding-bottom: 40px;
}

🌐 Browser Compatibility

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+

📋 Known Issues

• Contact form requires backend implementation for actual email functionality
• Some images may need optimization for faster loading
• Form validation could be enhanced with JavaScript

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Youssef Yasser Ismail

• First web development project
• Passionate about creating beautiful, functional websites

---

This project represents my first steps in web development. Constructive feedback and suggestions are always welcome!