Documentation - Andreas Studio

Setup and Installation

Follow these steps to set up the Capture portfolio template 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, installed with Node.js. Verify with npm -v.
Visual Studio Code: Recommended code editor, available at code.visualstudio.com.

Step 2: Open the Project

After downloading or cloning the Capture template repository:

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 site.
Run npm run build to generate optimized production files in the dist folder, ready for deployment.

Customization

Personalize the Capture template to reflect your photography brand with the following customization options.

Custom Tailwind Classes

Add or modify Tailwind CSS classes directly in the .astro files to adjust styling. For example, change colors, spacing, or layouts using utilities like bg-blue-500 or p-6. 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-heading: 'JetBrains Mono', sans-serif;
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-neutral-800, currentColor);
  }
  input::placeholder,
  textarea::placeholder {
    color: theme(--color-neutral-600);
  }
  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-custom) or include plugin styles like typography or forms.

Example custom class:

.btn-custom {
  @apply bg-orange-400 text-neutral-900 rounded-full py-2 px-5 hover:bg-orange-500;
}

Update icons or Google Fonts in the <head> section of .astro layout.

Replace Images

Showcase your photography by updating images:

Replace placeholder images in public/src/img with your own assets (e.g., portfolio1.jpg, hero-bg.jpg).
Ensure images are optimized (e.g., use WebP format, compress with tools like TinyPNG).
Maintain aspect ratios (e.g., 4:3, 16:9) for consistency with template layouts.

Need Help?

If you encounter issues or have questions about customizing the Capture template, our support team is here to assist. Contact us at: Lightestcode@gmail.com

We’re committed to helping you create a portfolio that showcases your photography beautifully!