Videograph is a sleek, modern portfolio Astro template designed specifically for professional videographers. Inspired by the interfaces of premium video editing software, this template features a sophisticated dark mode aesthetic with vibrant accent colors that make your video thumbnails pop. The design mimics a professional video editor's software, creating a cohesive brand experience that resonates with creative clients and agencies.

Follow these steps to set up and run the Videograph template on your local machine:

1. Prepare Your Tools

  • Install Node.js (includes npm)
  • Install a code editor (recommend VS Code)

2. Open the Project

  • Extract the videograph-astro template zip file
  • Open the folder in your code editor

3. Run Project Commands

  • Install dependencies: npm install
  • Run development server: npm run dev
  • Build for production: npm run build

4. Customization

Customize the template to match your brand and style:

  • Custom Tailwind Classes

    Apply Tailwind classes directly in .astro files as needed.

  • Modify Tailwind Configuration

    Edit style, fonts, colors and other variables in:src/styles/style.css

  • Custom Classes

    Add plugin classes or custom classes in:src/styles/style.css

  • Custom JavaScript

    Modify scripts in: src/layouts/MainLayout.astro

    Update icons and Google fonts in the head section of HTML files.

  • Replace Images

    Update portfolio images by replacing files in:public/img/

    Use your own image assets while maintaining the same file names or update the references in HTML files.

    Image placeholder credit by Unsplash.com and Chatgpt.com

Need Help?

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

Email: Lightestcode@gmail.com