Documentation

Setup and Installation

Architecture Template is a Architect portfolio template designed for Architect. This guide provides detailed instructions on setup, installation, and customization to help you tailor Architecture 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 Architecture Template (provided via secure link or client portal):

1. Download and unzip the project folder.
2. Open the project folder in Visual Studio Code or your preferred editor.
3. 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:

npm install
npm run dev
npm run build

Open http://localhost:4321 in your browser to preview the portal.
npm run build generates optimized production files in the dist folder, ready for deployment to a secure server.

---

Customization

Personalize the Architecture 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 .astro files within the /src folder 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 other styles. Example:

@import "tailwindcss";
@theme {
    --font-sans: 'Poppins', sans-serif;
}
@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 *));

---

Deployment

When your site is ready, deploy it to a secure and scalable platform:

• Vercel: Seamless integration with Astro projects. vercel.com
• Netlify: Continuous deployment and edge functions. netlify.com
• Custom Server: Upload the dist/ folder to your server via FTP, SSH, or CI/CD pipelines.

---

Project Folder Structure

Here’s an overview of the recommended folder structure:

src/
 ├── components/     # Reusable UI components
 ├── data/           # MDX/Markdown data files (privacy, terms, docs, etc.)
 ├── layouts/        # Layout components
 ├── pages/          # Page routes (e.g., /privacy, /terms, /docs)
 ├── styles/         # Global styles and Tailwind config
 └── utils/          # Helper functions

---

Advanced Usage

Adding New Pages

Create .astro or .mdx files in src/pages/ or src/data/pages/ depending on whether the page is static or content-driven.

---

Best Practices

• Keep components small and reusable for easier maintenance.
• Enable SEO tags in your layout for better discoverability.
• Use Image optimization (Astro’s Image component) for performance.
• Regularly run npm audit to check security vulnerabilities.

---

Next Steps

• Explore the component library inside /src/components/.
• Add your own blog posts in /src/data/blog/.

---