Composition Website 🎨

A semi dynamic responsive website built with modern web technologies.

📋 Table of Contents

• Composition Website 🎨
  • 📋 Table of Contents
  • 🎯 Overview
  • ✨ Features
  • 🛠️ Technologies Used
  • 🚀 Getting Started
    • Prerequisites
    • Installation
  • 📁 Project Structure
  • 💻 Usage
  • 🤝 Contributing
  • ⚖️ License
  • 🔄 Development Status
    • V0.4.2

🎯 Overview

Composition is a responsive website that showcases dynamic content. The project emphasizes modern design principles and smooth user interactions. You can communicate with me by sending a message through the contact form.

✨ Features

1. Responsive layout system.
2. Interactive UI elements.
3. Dynamic content depends on json.
4. Contact form API by Web3Forms.
5. Carousel works dynamically.
6. Up modal button works.

🛠️ Technologies Used

• HTML5
  • Web3Forms API in contact form
• CSS3
  • Compiled by Prepros APP
• SCSS
  • Custom variables
  • Nested structures
  • Mixins & Extends
  • Components
  • Layout system
• JavaScript
  • ES6+ features
  • DOM manipulation
  • Components & Handlers
  • Organized code
  • Dynamic content based on JSON

🚀 Getting Started

Prerequisites

• Modern web browser

Installation

1. Clone the repository

git clone https://github.com/ImIsmaeilAlrewany/composition_sass

2. Navigate to project directory

cd composition_sass

3. Run the website using LiveServer

📁 Project Structure

composition_sass/
│
├── assets/
│   ├── images/
│   └── svg/
│
├── css/
│   ├── main.scss
│   ├── main.css
│   ├── main.css.map
│   └── sass/
|       ├── components/
|       |   ├── _blog-card.scss
|       |   ├── _button.scss
|       |   ├── _carousel.scss
|       |   ├── _customer-card.scss
|       |   ├── _input.scss
|       |   ├── _project-card.scss
|       |   ├── _section-heading.scss
|       |   └── _service-card.scss
|       |
|       ├── helpers/
|       |   ├── _global-rules.scss
|       |   ├── _mixins.scss
|       |   ├── _placeholder.scss
|       |   └── _variables.scss
|       |
|       ├── layout/
|       |   ├── _body-styles.scss
|       |   ├── _container.scss
|       |   ├── _footer.scss
|       |   ├── _header.scss
|       |   ├── _navigation.scss
|       |   └── _up-modal.scss
|       |
|       └── pages/
|           └── _home.scss
│
├── javascript/
│   ├── main.js
│   ├── json/
|   |   ├── blog-cards.js
|   |   ├── carousel-data.js
|   |   ├── customer-cards.js
|   |   ├── project-cards.js
|   |   └── service-cards.js
|   |
│   ├── helpers/
|   |   ├── carousel-handler.js
|   |   └── section-cards-handler.js
|   |
│   └── components/
|       ├── blog-card.js
|       ├── carousel.js
|       ├── customer-card.js
|       ├── project-card.js
|       ├── service-card.js
|       └── up-button.js
|
├── index.html
├── .gitignore
└── README.md

💻 Usage

This website is still under development.

You are free to Inform me with any Errors, or Features only use contact form in contact section.

🤝 Contributing

Currently, this project is not accepting contributions.

⚖️ License

This project is currently unlicensed. [It will be licensed in the next versions]

🔄 Development Status

V0.4.2

• New website / brand Logo.
• New UI will be designed from scratch.
• Work on backend using (Deno.js / Node.js).
• Use Fresh, TypeScript, and Tailwind-css.
• Changing the content to content related to site activity.