DOCUMENTATION

Setup and Installation

Step 1: Prepare Your Tools

• Node.js (v16 or later): Download from nodejs.org.
• Code Editor: VS Code (recommended) or Sublime Text.
• Terminal: Use your OS’s default terminal or iTerm2 (Mac).

Step 2: Open the Project

1. Unzip the creatifolio.zip file.
2. Open the folder in your code editor.
3. In the terminal, navigate to the project directory:

   cd path/to/creatifolio

Step 3: Install Dependencies & Run

npm install

npm run dev

npm run build

Step 4: Customize Content & Images

• Edit content in /*.html for portfolio content.
• Replace placeholder images in /src/img/.

Customization

1. Customize Tailwind CSS

• Edit colors, fonts, and spacing in src/tailwind/tailwindcss.css:

  
  @import "tailwindcss";
  @theme {
      --font-sans: 'Space Grotesk', sans-serif;
      
      --blur-*: initial;
      --perspective-*: initial;
      --drop-shadow-*: initial; 
  }
  @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 *));
  
  /* plugins */
  @import "./vendors/theme.css";
                      

• Use Tailwind’s utility classes directly in HTML files.

2. Add Custom CSS

• Add Custom styles in /src/tailwind/vendor/theme.css:

  /* Custom animations */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .custom-animation {
    animation: fadeIn 1s ease-in;
  }