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.
- 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.
- 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.
- Dynamic Content: Render blog posts from JSON data.
- Pagination: Navigate through multiple blog pages.
- Carousel: Highlight services with images and descriptions.
- Reveal Animations: Smooth animations for service cards.
- Contact Form: Collect user inquiries with validation.
- Dynamic Icons: Display contact details with icons.
- Custom Animation: Animated loading screen for improved user experience.
- 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.
- JSON: Store and manage data for FAQs, blogs, services, and testimonials.
- Vite: Fast build tool for development.
- ESLint: Code quality and linting.
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
The project follows a component-based architecture inspired by MVC principles:
- Model: JSON files in the
datadirectory serve as the data source for components. - View: React components in the
componentsdirectory render the user interface. - Controller: Logic within components handles user interactions and updates the view dynamically.
- Clone the repository:
git clone <repository-url>
- Install dependencies:
npm install
- Start the development server:
npm run dev
- 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.
- 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.
- 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.
- Dynamic Content: Render blog posts from JSON data.
- Pagination: Navigate through multiple blog pages.
- Carousel: Highlight services with images and descriptions.
- Reveal Animations: Smooth animations for service cards.
- Contact Form: Collect user inquiries with validation.
- Dynamic Icons: Display contact details with icons.
- Custom Animation: Animated loading screen for improved user experience.
- 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.
- JSON: Store and manage data for FAQs, blogs, services, and testimonials.
- Vite: Fast build tool for development.
- ESLint: Code quality and linting.
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
The project follows a component-based architecture inspired by MVC principles:
- Model: JSON files in the
datadirectory serve as the data source for components. - View: React components in the
componentsdirectory render the user interface. - Controller: Logic within components handles user interactions and updates the view dynamically.
- Clone the repository:
git clone <repository-url>
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open the application in your browser at
http://localhost:3000.
Let me know if you need further adjustments!