Kaysana Creative - The Future of Marketing

Setup and Installation

Stack Template is a futuristic portfolio template designed for Fullstack developers. This guide provides detailed instructions on setup, installation, and customization to help you tailor Stack to your needs.

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, installed with Node.js. Verify with npm -v in your terminal.
Visual Studio Code: Recommended code editor, available at code.visualstudio.com.

Step 2: Clone and Open the Project

After obtaining the Stack Toolkit repository (provided via secure link or client portal):

Download and unzip the project folder.
Open the project folder in Visual Studio Code or your preferred editor.
Open a terminal in VS Code (Terminal > New Terminal) and navigate to the project root if not already there.

Step 3: Install Dependencies and Run the Project

Install and run the project using npm commands:

Run npm install to install all required packages listed in package.json.
Run npm run dev to start the development server. Open http://localhost:4321 in your browser to preview the portal.
Run npm run build to generate optimized production files in the dist folder, ready for deployment to a secure server.

Security Note: Ensure the server hosting the portal uses HTTPS and is configured with strong TLS settings to protect sensitive data.

Customization

Personalize the Stack Client Portal to align with your organization’s branding and security requirements with the following customization options.

Custom Tailwind Classes

Modify Tailwind CSS classes directly in the /src folder .astro files to adjust styling. For example, update colors, fonts, or layouts using utilities like bg-blue-600 or p-8. Refer to the Tailwind CSS documentation for available classes.

Modify Tailwind Configuration

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

Edit src/styles/style.css to define custom colors, fonts, or breakpoints. Example:


@import "tailwindcss";
@theme {
    --font-sans: 'Inter', sans-serif;
    --font-code: 'Fira Code', sans-serif;
    --color-tech-purple: #9333ea;
    --color-tech-teal: #06b6d4;
    --color-tech-dark: #0f0921;
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  input::placeholder,
  textarea::placeholder {
    color: theme(--color-gray-400);
  }
  button, [role="button"] {
    cursor: pointer;
  }
}
@custom-variant dark (&:where(.dark, .dark *));

Custom Classes and Plugins

Define custom CSS classes or integrate Tailwind plugins in:

src/styles/style.css: Add custom classes (e.g., .btn-secure) or include plugin styles like typography or forms.

Example custom class:


.btn-secure {
  @apply bg-blue-600 text-white rounded-lg py-3 px-6 hover:bg-blue-700;
}

Update icons or Google Fonts in the <head> section of .astro layout files to match your branding.

Replace Images

Customize the portal with your organization’s branding assets:

Replace placeholder images in public/src/img with your own assets (e.g., logo.png, dashboard-bg.jpg).
Ensure images are optimized for web (e.g., use WebP format, compress with tools like TinyPNG).
Maintain consistent aspect ratios (e.g., 16:9 for banners, 1:1 for icons) to align with the portal’s layout.

Adding Bootstrap Iconsoot (BI)

Enhance the Stack Client Portal’s user interface by integrating Bootstrap Icons (Bootstrap) for a consistent and professional look. Follow these steps to add Bootstrap icons to your project:

Install Bootstrap Package: Run the following command in your terminal to install the Bootstrap Icons package:
npm install @iconify-json/bi
Update Astro Configuration: Modify astro.config.mjs to include a Vite plugin for importing Bootstrap icons dynamically. Add the following configuration:


import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
    icon({
       include: {
        // Include Bootstrap icons used in the project
        bi: ['github','youtube','envelope-fill','facebook','instagram','twitter','linkedin','telephone-fill','braces','award-fill',
        'code-slash','folder-check','people-fill','check-circle-fill','server','brush','cloud','diagram-2','star-fill',
        'check-lg'
        ],
      }
    })
  ]
});

Need Help?

If you encounter issues or have questions about setting up or customizing the Matrix Template, our support team is here to assist. Contact us at:

Email: Lightestcode@gmail.com

Stack Astro Documentation