Documentation

Welcome to the documentation for the Persona Resume Portfolio Tailwind Template. This guide provides step-by-step instructions to set up, install, and customize the template to create a professional portfolio website. Whether you’re a developer or a non-technical user, this documentation will help you get started.

Setup and Installation

Follow these steps to set up and run the Persona template on your local machine.

Step 1: Prepare Your Tools

Before you begin, ensure you have the following tools installed:

Node.js and npm: Required to manage dependencies and run the development server. Download from nodejs.org.
Code Editor: Use a code editor like Visual Studio Code, Sublime Text, or any editor of your choice.
Git (Optional): For cloning the repository, if applicable. Download from git-scm.com.

Step 2: Open the Project

Obtain the Persona template files (either via purchase, download, or repository clone) and follow these steps:

Unzip the template package to a desired folder on your computer.
Open your code editor and navigate to the project folder (e.g., persona).
Alternatively, open a terminal in the project folder to run commands.

Step 3: Install Dependencies and Run the Project

The Persona template uses Tailwind CSS and other dependencies managed via npm. Run the following commands in your terminal from the project root:

npm install: Installs all required dependencies listed in package.json.
npm run dev: Starts the development server, compiling Tailwind CSS and serving the site locally (typically at http://localhost:3000).
npm run build: Builds the production-ready files, outputting optimized CSS and assets to the dist folder.

After running npm run dev, open your browser to view the site. Make changes to the code, and the browser will auto-refresh.

Step 4: Customize Appearance and Data

Personalize the template by updating content and styles to reflect your brand and portfolio:

Update Content: Edit HTML files (e.g., index.html, blogs.html) to add your name, bio, services, blog posts, and images.
Replace Images: Swap placeholder images in the src/img folder with your own (e.g., profile photo, blog covers).
Customize Colors: Modify Tailwind CSS configuration or inline styles (see Customization section below).
Update Links: Adjust navigation links and form actions to point to your desired endpoints.

Customization

The Persona template is built with Tailwind CSS, offering flexible customization options. Below are the primary ways to customize the template’s appearance.

1. Customize Style with Tailwind CSS

You can customize the template’s styles in two ways:

Customize in src/tailwind/tailwindcss.css:
Edit the tailwindcss.css file to define custom colors, fonts, or other Tailwind configurations. For example, to change the primary color:

After updating, run npm run dev or npm run build to apply changes.
Customize Directly in HTML Files:
Add or modify Tailwind classes directly in the HTML files to adjust styling. For example, to change a button’s color:
```
<button class="bg-blue-600 text-white dkslaoeyhnmj py-3 rounded-md">Hire Now</button>
```
Replace bg-blue-600 with another Tailwind color class (e.g., bg-green-600).

2. Add Custom CSS in `src/tailwind/tailwindcss.css`

For styles not achievable with Tailwind classes, add custom CSS in src/tailwind/tailwindcss.css. For example, to add a custom hover effect:


@import "tailwindcss";
@theme {
    --font-sans: 'Inter', sans-serif;
    --color-dark-blue: #0F3460;
    --color-light-blue: #1A6BBE;
    
    --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";

/* Custom CSS */
.custom-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Apply the custom class in your HTML:

<button class="custom-button bg-dark-blue text-white dkslaoeyhnmj py-3 rounded-md">Hire Now</button>

Run npm run dev or npm run build to compile the updated styles.

Need Help?

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

Email: lightestcode@gmail.com