Blendify - Creative Digital Agency Website

A modern, responsive Digital Agency Landing Page built with HTML, CSS, and vanilla JavaScript

Live Demo · Report Bug · Request Feature

---

Preview

Features

Core Functionality

• Fully Responsive Design - Seamless experience across all devices (mobile, tablet, desktop)
• Modern UI/UX - Clean, professional interface with smooth animations
• Optimized Performance - Fast loading times with vanilla JavaScript
• SEO Optimized - Perfect 100/100 SEO score on Lighthouse
• Accessibility Focused - WCAG compliant with 92/100 accessibility score
• Interactive Elements - Smooth scrolling, hover effects, and dynamic content

Google Lighthouse Score

Performance:     95/100
Accessibility:   92/100
Best Practices:  96/100
SEO:            100/100

📊 View Lighthouse Report Details

• First Contentful Paint: < 1.5s
• Time to Interactive: < 2.5s
• Speed Index: < 2.0s
• Total Blocking Time: < 150ms
• Cumulative Layout Shift: < 0.1

---

Technologies Used

Tech Stack Details

• HTML5 - Semantic markup for better SEO and accessibility
• CSS3 - Modern styling with Flexbox, Grid, and custom properties
• Vanilla JavaScript - Lightweight interactivity without frameworks
• CSS Animations - Smooth transitions and micro-interactions
• Google Fonts - Professional typography
• Font Awesome/Icons - Scalable vector icons

---

Project Structure

Blendify/
│
├── index.html
├── style.css
├── index.js
├── assets/
│   ├── bannar.jpg
│   ├── branding.jpg
│   ├── corporate-office.png
│   ├── e-commerce.jpg
│   ├── logo.svg
│   ├── mobile-banking.jpg
└── README.md

---

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Basic text editor (VS Code recommended)
• [Optional] Live Server extension for development

Installation

1. Clone the repository

   git clone https://github.com/electra51/Blendify.git

2. Navigate to the project directory

   cd Blendify

3. Open in browser

   • Simply open index.html in your browser
   • Or use Live Server in VS Code for development

Development Setup

# Install Live Server (optional)
npm install -g live-server

# Run development server
live-server

---

Sections Included

Hero Section

• Eye-catching headline with CTA buttons
• Professional hero image
• Smooth scroll to sections

Stats Section

• Completed projects counter
• Client satisfaction rate
• Team members count
• 24/7 support available

Services Section

Cards for 6 core services:

• Web Design
• Web Development
• Mobile Apps
• Digital Marketing
• Brand Strategy
• UI/UX Design

Recent Projects

• Grid layout of 4 project showcases
• Hover effects on project cards
• Responsive image gallery

CTA Section

• Compelling call-to-action
• Consultation button
• Gradient background design

Footer

• Company information
• Service links
• Support links
• Social media icons

---

Key Highlights

Performance Optimization

• Minified CSS/JS for faster loading
• Optimized Images with proper compression
• Lazy Loading for below-the-fold content
• Minimal Dependencies - No heavy frameworks

Code Quality

• Clean Code - Well-commented and organized
• Mobile-First Approach - Responsive from the ground up
• Accessible - ARIA labels and semantic HTML
• SEO Friendly - Proper meta tags and structure

Design Principles

• Modern Aesthetics - Contemporary design trends
• Consistent Color Scheme - Brand-aligned palette
• Proper Spacing - Balanced whitespace
• Typography Hierarchy - Clear content structure

---

📱 Responsive Breakpoints

Mobile:     320px - 768px
Tablet:     768px - 1024px
Desktop:    1024px - 1440px
Large:      1440px+

---

Future Improvements

• Add dark mode toggle
• Implement form validation with backend integration
• Add blog section
• Include testimonials carousel
• Add loading animations (GSAP/AOS)
• Integrate analytics dashboard
• Add multi-language support

---

Contributing

Contributions are always welcome! Here's how you can help:

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

Author

Electra51

• Portfolio: https://nextjs-my-portfolio-electra51.vercel.app/
• GitHub: @electra51
• LinkedIn: https://www.linkedin.com/in/safayet-nur/

---

Acknowledgments

• Design inspiration from modern agency websites
• Icons from Font Awesome
• Fonts from Google Fonts
• Images from Unsplash/Pexels

---

Star this repository if you found it helpful!

Made with ❤️ by Electra51

Happy Coding! 🚀