Follow these steps to set up and run the Matrix Tailwind css landingpage template for Cyber security on your local machine.

Step 1: Prepare Your Tools

Ensure you have the following tools installed:

  • Node.js: Download and install from nodejs.org (includes npm).
  • npm: Node Package Manager, included with Node.js, used to manage dependencies.
  • Visual Studio Code (VS Code): Recommended code editor, available at code.visualstudio.com.

Step 2: Open the Project

Extract the Matrix template folder to your desired location and open it in VS Code:

  • Unzip the template package.
  • Open VS Code, go to File > Open Folder, and select the matrix project folder.

Step 3: Install Dependencies and Run

Use the terminal in VS Code (or your preferred terminal) to install dependencies and start the development server:

  1. Install Dependencies: Run npm install to install all required packages listed in package.json.
  2. Start Development Server: Run npm run dev to launch the local server. Open http://localhost:3000 in your browser to view the site.
  3. Build for Production: Run npm run build to generate optimized files in the dist folder for deployment.

Customization

Matrix is built with Tailwind CSS and allows flexible customization to match your cybersecurity brand. Tailor the Matrix template to your brand by modifying styles, content, and assets. See the Customization section below for details.

Custom Tailwind Classes

Apply Tailwind utility classes directly in HTML files to adjust styling:

  • Edit .html files in the project root.
  • Example: Change a button’s color by updating bg-hacker-green to bg-blue-500.

Modify Tailwind Configuration

Customize global styles, fonts, and colors in the Tailwind configuration:

  • Open src/tailwind/tailwindcss.css to modify variables like colors (e.g., --hacker-green), fonts, or other Tailwind settings.

Custom Classes

Add plugin classes or custom styles in the theme file:

  • Edit src/tailwind/vendors/theme.css to define custom CSS classes or integrate third-party plugins.
  • Example: Add a custom glitch effect or animation by defining new classes.

Custom JavaScript, Icons, and Google Fonts

Modify interactive elements and typography directly in HTML files:

  • JavaScript: Update or add scripts in HTML files or external JS files in src/js.
  • Icons: Replace Font Awesome icons by updating <i class="fas fa-icon"> with your preferred icon library classes.
  • Google Fonts: Change fonts by updating the Google Fonts import in the HTML <head> and CSS files src/tailwind/tailwind.css.

Replace Images

Update images to reflect your brand:

  • Replace images in the src/img folder with your own assets (e.g., hero images, blog thumbnails).
  • Ensure new images match the file names and paths referenced in HTML or CSS to avoid broken links.

Need Help?

If you encounter issues or have questions about customizing Matrix, contact our support team: