Klear Vision Solutions Website

A professional consulting website for Klear Vision Solutions, a manufacturing consulting firm dedicated to helping businesses scale their operations with clarity and precision.

🌟 Features

• Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile devices
• Modern UI: Clean, professional design with smooth animations and transitions
• Multiple Pages:
  • Home - Landing page with hero section and service overview
  • About Us - Company mission, vision, and impact statistics
  • Services - Detailed service offerings
  • Team - Meet the professionals behind Klear Vision
  • Contact - Contact form with validation and location map

🚀 Live Site

The website is deployed using GitHub Pages and can be accessed at: https://kharigardner.github.io/klear-vision-web/

🛠️ Technologies Used

• HTML5: Semantic markup
• SCSS/CSS3: Styling with Sass preprocessor
• JavaScript: Interactive functionality
• Font Awesome: Icons
• Google Fonts: Montserrat and Open Sans typography

📁 Project Structure

klear-vision-web/
├── .github/
│   └── workflows/
│       └── pages.yml          # GitHub Pages deployment workflow
├── components/
│   ├── header.html            # Reusable header component
│   └── footer.html            # Reusable footer component
├── images/
│   ├── logo.png               # Main logo
│   ├── logo-icon.png          # Small logo for navigation
│   ├── icon.png               # Favicon
│   └── service*.jpg           # Service images
├── js/
│   ├── loadComponents.js      # Component loading utility
│   ├── testimonialSlider.js   # Testimonial carousel
│   └── contactFormHandler.js  # Contact form validation
├── scss/
│   ├── main.scss              # Main stylesheet
│   ├── _variables.scss        # Color and font variables
│   ├── _content.scss          # Content section styles
│   ├── _services.scss         # Service-specific styles
│   ├── _testimonials.scss     # Testimonial slider styles
│   └── components/
│       └── _header.scss       # Header/navigation styles
├── compiled_sass/
│   └── main.css               # Compiled CSS (generated)
├── index.html                 # Home page
├── about.html                 # About Us page
├── services.html              # Services page
├── team.html                  # Team page
├── contact.html               # Contact page
└── README.md                  # This file

🔧 Development

Prerequisites

• Node.js (for Sass compilation)
• Sass compiler

Setup

1. Clone the repository:

   git clone https://github.com/kharigardner/klear-vision-web.git
   cd klear-vision-web

2. Install Sass globally:

   npm install -g sass

3. Compile SCSS to CSS:

   sass scss/main.scss:compiled_sass/main.css --style=compressed

4. Open index.html in your browser or use a local server:

   python3 -m http.server 8000
   # or
   npx serve

Making Changes

1. Edit SCSS files in the scss/ directory
2. Recompile CSS:

   sass scss/main.scss:compiled_sass/main.css --style=compressed

3. Test your changes locally
4. Commit and push to trigger automatic deployment

🎨 Color Palette

• Primary Color: #1F2C3F (Deep Navy)
• Secondary Color: #8FB7CC (Sky Blue)
• Tertiary Color: #D5E1E9 (Light Blue)
• Quaternary Color: #F9FAFB (Off White)
• Quinary Color: #5B6B7F (Slate Gray)

📝 License

© 2025 Klear Vision Solutions. All rights reserved.

👤 Author

Korron Gardner - CEO, Klear Vision Solutions

📧 Contact

For inquiries, please visit the Contact page or email info@klearvision.com