Getting Started with Creatorfolio

1. Setup and Installation

Follow these steps to get Creatorfolio up and running on your local machine. It’s designed to be simple and quick!

Step 1: Prepare Your Tools

Creatorfolio requires Node.js and npm to manage dependencies and run the development server. Here’s how to set up:

• Download Node.js: Install the latest LTS version from nodejs.org. This includes npm.
• Verify Installation: Run node -v and npm -v in your terminal to confirm both are installed.

Step 2: Open the Project

After purchasing Creatorfolio, you’ll receive a zip file with the project files. Here’s how to start:

• Unzip the File: Extract the Creatorfolio folder to your preferred directory.
• Open in Editor: Use a code editor like VS Code and open the Creatorfolio folder.

Step 3: Install Dependencies

Install the required packages to run Creatorfolio:

npm install

This command downloads Tailwind CSS, Alpine.js, and other dependencies listed in package.json.

Step 4: Run Development Server

Start the local server to preview your portfolio:

npm run dev

Open http://localhost:3000 (or the provided URL) in your browser to see the theme in action.

Step 5: Customize Appearance and Data

Make Creatorfolio your own by updating content and styles:

• Edit HTML Files: Modify files in the src/ folder to update text, images, and portfolio data.
• Update Images: Replace placeholder images in src/img/ with your own.
• Tweak Data: Adjust portfolio entries in JavaScript files (e.g., for Alpine.js data).

Step 6: Build for Production

When you’re ready to deploy, create an optimized version of your site:

npm run build

This generates a dist/ folder with minified HTML, CSS, and JS files ready for hosting.

“Creatorfolio is built for creators—set it up in minutes and focus on showcasing your work!”

2. Customization

Creatorfolio is highly flexible. Here’s how to tailor the theme to your brand.

Customize Style

Modify the look and feel by adjusting Tailwind CSS configurations and custom styles:

• Edit Tailwind Config: Open src/tailwind/tailwindcss.css to change colors, fonts, or other theme settings (e.g., update --color-primary).
• Add Custom CSS: Include additional styles in src/tailwind/tailwindcss.css. For example:

@layer components {
        .custom-button {
            @apply bg-primary text-white rounded uajskeiolksb py-2 hover:bg-secondary;
        }
    }

Customize Settings

Adjust global settings to match your needs:

• Site Metadata: Update index.html to change the site title, favicon, or meta tags.
• Alpine.js Data: Modify data objects in src/js/ to customize dynamic content like portfolio items.

Add Custom CSS

src/tailwind/tailwindcss.css to extend styles beyond Tailwind:

@layer utilities {
        .hand-drawn-custom {
            border-radius: 200px 10px 180px 10px / 10px 180px 10px 200px;
            border: 3px solid #333;
        }
    }

Apply these classes in your HTML to create unique elements that match the theme’s aesthetic.

<button class="btn-hand-drawn bg-primary text-white">Click Me</button>

<div class="hand-drawn bg-white p-6">
        <h3 class="text-2xl font-bold text-primary">Card Title</h3>
        <p class="text-gray-700">Description here.</p>
    </div>

<form class="space-y-4">
        <input type="text" class="border hand-drawn-sm p-2 w-full" placeholder="Your Name">
        <button type="submit" class="btn-hand-drawn bg-primary text-white">Submit</button>
    </form>

<style type="text/css">
    .portfolio-man {
        --color-background: #f5f5f5;
        --color-primary: #2c3e50;
        --color-secondary: #31adff;
        --color-accent: #e74c3c;
    }
</style>

<i class="fas fa-star text-secondary"></i>
    <svg class="w-6 h-6 text-accent" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 ...." clip-rule="evenodd"></path>
    </svg>