Crafted-Construct

Crafted-Construct is a modern React-based web application designed for showcasing portfolios, blogs, services, and testimonials. It features a responsive design, dynamic animations, and reusable components.

Features

Portfolio Section

• Grid and Carousel Layouts: Display portfolio items in a grid or carousel format.
• Dynamic Filtering: Filter projects by categories.
• Interactive Animations: Hover effects and reveal animations for portfolio items.

Testimonials Section

• Carousel: Showcase client testimonials in a carousel format.
• Responsive Design: Separate layouts for small and large screens.
• Interactive Controls: Pause and resume carousel on hover.

Blog Section

• Dynamic Content: Render blog posts from JSON data.
• Pagination: Navigate through multiple blog pages.

Services Section

• Carousel: Highlight services with images and descriptions.
• Reveal Animations: Smooth animations for service cards.

Contact Section

• Contact Form: Collect user inquiries with validation.
• Dynamic Icons: Display contact details with icons.

Loading Screen

• Custom Animation: Animated loading screen for improved user experience.

Technologies Used

Frontend

• React.js: Component-based architecture for building the user interface.
• React Router: Dynamic routing for navigation between pages.
• Bootstrap: Responsive design framework.
• SASS: Modular styling with variables and mixins.

Data Management

• JSON: Store and manage data for FAQs, blogs, services, and testimonials.

Tools

• Vite: Fast build tool for development.
• ESLint: Code quality and linting.

Project Structure

Crafted-Construct/
├── .gitignore
├── package.json
├── README.md
├── public/
│   ├── _redirects
│   ├── index.html
│   ├── logo.png
├── src/
│   ├── App.jsx
│   ├── index.js
│   ├── assets/
│   │   ├── images/
│   │   ├── logos/
│   ├── components/
│   │   ├── Loading-screen.jsx
│   │   ├── RevealAnimation.jsx
│   │   ├── Use-loading.jsx
│   │   ├── about/
│   │   ├── blog/
│   │   ├── common/
│   │   ├── contact/
│   │   ├── footer/
│   │   ├── hero/
│   │   ├── navbar/
│   │   ├── portfolio/
│   │   ├── services/
│   │   ├── testimonials/
│   ├── data/
│   │   ├── faqs.json
│   │   ├── logo.json
│   │   ├── privacy.json
│   │   ├── terms.json
│   │   ├── about/
│   │   ├── blog/
│   │   ├── contact/
│   │   ├── hero/
│   │   ├── portfolio/
│   │   ├── services/
│   │   ├── testimonials/
│   ├── pages/
│   │   ├── FAQs.jsx
│   │   ├── Privacy-Policy.jsx
│   ├── styles/
│       ├── css/
│       │   ├── main.css
│       ├── sass/
│           ├── components/
│           │   ├── _projectSection2.scss
│           │   ├── _projectCard.scss
│           │   ├── _testimonialsCarousel.scss
│           │   ├── _portfolioCarousel2.scss
│           │   ├── _project2.scss

MVC Architecture

The project follows a component-based architecture inspired by MVC principles:

• Model: JSON files in the data directory serve as the data source for components.
• View: React components in the components directory render the user interface.
• Controller: Logic within components handles user interactions and updates the view dynamically.

How to Run

1. Clone the repository:

   git clone <repository-url>

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the application in your browser at http://localhost:3000.

Let me know if you need further adjustments!# Crafted-Construct

Crafted-Construct is a modern React-based web application designed for showcasing portfolios, blogs, services, and testimonials. It features a responsive design, dynamic animations, and reusable components.

Features

Portfolio Section

• Grid and Carousel Layouts: Display portfolio items in a grid or carousel format.
• Dynamic Filtering: Filter projects by categories.
• Interactive Animations: Hover effects and reveal animations for portfolio items.

Testimonials Section

• Carousel: Showcase client testimonials in a carousel format.
• Responsive Design: Separate layouts for small and large screens.
• Interactive Controls: Pause and resume carousel on hover.

Blog Section

• Dynamic Content: Render blog posts from JSON data.
• Pagination: Navigate through multiple blog pages.

Services Section

• Carousel: Highlight services with images and descriptions.
• Reveal Animations: Smooth animations for service cards.

Contact Section

• Contact Form: Collect user inquiries with validation.
• Dynamic Icons: Display contact details with icons.

Loading Screen

• Custom Animation: Animated loading screen for improved user experience.

Technologies Used

Frontend

• React.js: Component-based architecture for building the user interface.
• React Router: Dynamic routing for navigation between pages.
• Bootstrap: Responsive design framework.
• SASS: Modular styling with variables and mixins.

Data Management

• JSON: Store and manage data for FAQs, blogs, services, and testimonials.

Tools

• Vite: Fast build tool for development.
• ESLint: Code quality and linting.

Project Structure

Crafted-Construct/
├── .gitignore
├── package.json
├── README.md
├── public/
│   ├── _redirects
│   ├── index.html
│   ├── logo.png
├── src/
│   ├── App.jsx
│   ├── index.js
│   ├── assets/
│   │   ├── images/
│   │   ├── logos/
│   ├── components/
│   │   ├── Loading-screen.jsx
│   │   ├── RevealAnimation.jsx
│   │   ├── Use-loading.jsx
│   │   ├── about/
│   │   ├── blog/
│   │   ├── common/
│   │   ├── contact/
│   │   ├── footer/
│   │   ├── hero/
│   │   ├── navbar/
│   │   ├── portfolio/
│   │   ├── services/
│   │   ├── testimonials/
│   ├── data/
│   │   ├── faqs.json
│   │   ├── logo.json
│   │   ├── privacy.json
│   │   ├── terms.json
│   │   ├── about/
│   │   ├── blog/
│   │   ├── contact/
│   │   ├── hero/
│   │   ├── portfolio/
│   │   ├── services/
│   │   ├── testimonials/
│   ├── pages/
│   │   ├── FAQs.jsx
│   │   ├── Privacy-Policy.jsx
│   ├── styles/
│       ├── css/
│       │   ├── main.css
│       ├── sass/
│           ├── components/
│           │   ├── _projectSection2.scss
│           │   ├── _projectCard.scss
│           │   ├── _testimonialsCarousel.scss
│           │   ├── _portfolioCarousel2.scss
│           │   ├── _project2.scss

MVC Architecture

The project follows a component-based architecture inspired by MVC principles:

• Model: JSON files in the data directory serve as the data source for components.
• View: React components in the components directory render the user interface.
• Controller: Logic within components handles user interactions and updates the view dynamically.

How to Run

1. Clone the repository:

   git clone <repository-url>

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the application in your browser at http://localhost:3000.

Let me know if you need further adjustments!