Documentation

Setup and Installation

Follow these steps to set up the Craftpixel Astro Portfolio Template on your local machine and start showcasing your design work.

Step 1: Prepare Your Tools

Ensure you have the following tools installed before setting up the template. Node.js is required and can be downloaded from nodejs.org, which includes npm, the Node Package Manager. Verify npm installation by running npm -v in your terminal. We recommend using Visual Studio Code as your code editor, available at code.visualstudio.com.

Step 2: Open the Project

After downloading the Craftpixel Portfolio Template, unzip the project folder. Open the folder in Visual Studio Code or your preferred code editor. Open a terminal in Visual Studio Code by selecting Terminal > New Terminal and ensure you are in the project root directory.

Step 3: Install Dependencies and Run the Project

To install and run the project, use npm commands in the terminal. Run the following commands:

npm install: Installs all required dependencies listed in package.json.
npm run dev: Starts the development server. Access the app at http://localhost:4321.
npm run build: Creates a production-ready build in the dist folder.

Customization

Personalize the Craftpixel Portfolio Template to reflect your design brand with the following customization options.

Custom Tailwind Classes

Modify or add Tailwind CSS classes directly in the HTML files to adjust styling. For example, change colors, spacing, or layouts using utilities like bg-lime-500 or p-8. Refer to the Tailwind CSS documentation for a full list of available classes and their usage.

Modify Tailwind Configuration

Customize global styles, fonts, colors, and breakpoints in the Tailwind configuration file located at src/styles/style.css. Below is an example of how to define custom fonts and colors:


@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 *));

Edit the @theme directive to include custom values and apply them across the template for consistent styling.

Custom Classes and Plugins

Define custom CSS classes or integrate Tailwind plugins in src/styles/style.css. Below is an example of a custom button class:


.btn-custom {
    background-color: #D4FF00;
    color: #1F2937;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
}

You can also include plugins for typography or forms to enhance the template’s functionality.

Custom JavaScript

Enhance interactivity by editing JavaScript files in src/scripts/, **.js.

Additional features like sliders, modals, or form validation can be implemented in these files.

Replace Images

Showcase your design portfolio by replacing placeholder images in public/img/ with your own assets, such as project1.jpg or profile.jpg. Optimize images using tools like TinyPNG and prefer WebP format for faster loading. Maintain consistent aspect ratios, such as 4:3 or 16:9, to align with the template’s layouts.

Need Help?

If you encounter issues or have questions about setting up or customizing the Craftpixel Portfolio 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 design work beautifully.

Menu