Webfusion Solutions Website

Welcome to the Webfusion Solutions website! This repository contains the source code for the company's website, which specializes in AI, Automation, and Digital Services such as web design, social media, and marketing.

Table of Contents

1. Overview
2. Project Structure
3. How to Add New Content
   • Adding a New Service
   • Adding a New Product
   • Adding a New Page
4. How Changes Impact the Site
5. Development and Deployment

Overview

The Webfusion Solutions website is built using Jekyll, a static site generator. The site is designed to be easy to scale, allowing you to add new sections, elements, and animations with minimal changes to the existing files.

Project Structure

The project is organized as follows:

• _includes/: Contains partial HTML files that can be included in other files. Commonly used for headers, footers, and reusable sections like the hero banner, services, and products.

• _layouts/: Defines the overall structure of the pages. The default.html layout includes the header, footer, and main content areas. All pages on the site use this layout.

• _sass/: Contains all the Sass (CSS preprocessor) files organized into subfolders:

  • base/: Global styles, such as resets and typography, are stored here.
  • components/: Styles for individual components like buttons, cards, and forms.
  • layout/: Styles for the layout of the site, including the header, footer, and grid system.
  • utilities/: Utility classes and helper functions, including animations and responsive design.

• _data/: Stores data files in YAML format. You can use this directory to store data that can be used in your templates (e.g., services, products).

• _services/: Contains individual Markdown files for each service offered by Webfusion Solutions.

• _products/: Contains individual Markdown files for each product offered by Webfusion Solutions.

• assets/: Contains static assets like CSS, JavaScript, and images.

  • css/: Stores the compiled CSS file, generated from the Sass files.
  • js/: Stores JavaScript files.
  • images/: Stores images used throughout the site.

• Gemfile: Defines the Ruby gems (libraries) that the project depends on, including Jekyll and any plugins.

• _config.yml: The main configuration file for the Jekyll site. This file sets various site-wide options, such as the site's title, URL, and any plugins used.

---

How to Add New Content

Adding a New Service

Example command

1. Create a New Markdown File:

   • Navigate to the _services/ directory.
   • Create a new Markdown file named after the service (e.g., ai-solutions.md).

2. Add the Service Details:

   • Add the following front matter to the file:

     ---
     title: "AI Solutions"
     description: "Harness the power of AI to optimize your business processes."
     ---

   • Write the content of the service below the front matter.

3. Update the Services Section:

   • The new service will automatically appear in the "Our Services" section of the site, as it pulls data from the _services/ directory.

Adding a New Product

1. Create a New Markdown File:

   • Navigate to the _products/ directory.
   • Create a new Markdown file named after the product (e.g., automation-tools.md).

2. Add the Product Details:

   • Add the following front matter to the file:

     ---
     title: "Automation Tools"
     description: "Streamline your workflow with our advanced automation tools."
     price: "$199"
     ---

   • Write the content of the product below the front matter.

3. Update the Products Section:

   • The new product will automatically appear in the "Our Products" section of the site, as it pulls data from the _products/ directory.

4. Create a New Markdown or HTML File:

   • In the root directory, create a new file for the page (e.g., about.md or contact.html).

5. Add Front Matter:

   • Add the following front matter at the top of the file:

     ---
     layout: default
     title: "About Us"
     ---

6. Write the Page Content:

   • Below the front matter, write the content of the page.

7. Link the Page:

   • Add a link to the new page in the site's navigation (usually in _includes/header.html).

---

How Changes Impact the Site

• _includes/: Changes to files in this directory affect all pages that include these files. For example, updating the _includes/header.html file will change the header on all pages.
• _layouts/: Changing a layout file will impact all pages that use that layout. For example, modifying default.html will affect the overall structure of the entire site.
• _sass/: Changes to Sass files will regenerate the site's CSS. Updating files in _sass/base/ will generally affect the entire site, while changes in _sass/components/ or _sass/layout/ will only impact specific elements or layouts.
• _data/: Updating data files in _data/ can automatically update sections of the site that rely on this data, like lists of services or products.
• _config.yml: Changes to this file will affect site-wide settings and configurations. For example, changing the baseurl will alter how URLs are generated across the site.

---

Styling and Animations

1. Colors (_sass/utilities/_colors.scss)

• Defines the color palette used across the site, reflecting the dark terminal theme.

2. Typography (_sass/base/_typography.scss)

• Manages font sizes, weights, and styles.

3. Animations (_sass/utilities/_animations.scss and assets/js/animations.js)

• Contains SCSS and JS files that control animations using GSAP, focusing on a nostalgic yet modern experience that mimics the feel of navigating through an old PC terminal.

---

Development and Deployment

Prerequisites

• Ruby: Ensure you have Ruby installed. You can check by running ruby -v in your terminal.
• Bundler: Install Bundler if it's not already installed: gem install bundler.

Setup

1. Install Dependencies: Run the following command to install all required gems:

   bundle install

---

Deployment

1. Build the Site:
   • Run bundle exec jekyll build to generate the static files.

---

Thank you for visiting Webfusion Solutions!

---