Sarahfolio Documentation

Setup and Installation

Follow these steps to set up and run the Sarahfolio template on your local development.

Step 1: Prepare Your Tools

Before starting, ensure you have the following tools installed:

• Node.js and npm: Download and install from nodejs.org. Sarahfolio requires Node.js version 16 or higher.
• Code Editor: Use a code editor like Visual Studio Code for editing files.

Step 2: Open the Project

Obtain the Sarahfolio template files and open the project in your code editor:

1. Download the Sarahfolio template from the provided source (purchased package).
2. Unzip the files to a directory of your choice (e.g., sarahfolio).
3. Open the project folder in your code editor (e.g., in VS Code, select File > Open Folder and choose the sarahfolio directory).

Step 3: Install Dependencies and Run the Project

Sarahfolio uses npm for dependency management and includes scripts to run and build the project. Run the following commands in your terminal from the project directory:

1. Install Dependencies: Install all required packages, including Tailwind CSS and other dependencies listed in package.json.

npm install

2. Run Development Server: Start the development server to preview the site locally (typically at http://localhost:3000).

npm run dev

3. Build for Production: When ready to deploy, create an optimized production build.

npm run build

The dist folder will contain the css files ready for deployment.

Step 4: Customize Appearance and Data

Sarahfolio is highly customizable. Update the appearance and content to match your personal brand:

• Content: Edit HTML files (e.g., index.html, blogs.html) to update text, images, and links. Replace placeholder content (e.g., project descriptions, blog posts) with your own.
• Images: Replace images in the src/img folder with your own. Ensure images are optimized for web (e.g., use PNG or WebP, resize to appropriate dimensions).
• Styles: Customize Tailwind CSS styles or add custom CSS (see Customization section below).

After making changes, re-run npm run dev to preview or npm run build to update the production build.

Customization

Sarahfolio is built with Tailwind CSS, making it easy to customize styles and layouts. Below are the primary ways to personalize the template.

1. Customize Tailwind Styles

Tailwind CSS is configured in src/tailwind/tailwindcss.css. You can modify styles in two ways:

• Customize in src/tailwind/tailwindcss.css: Adjust the Tailwind configuration to change colors, fonts, or other theme settings. For example, to change the primary color from pink-500 to blue-500
• Customize Directly in HTML Files: Sarahfolio uses Tailwind’s utility classes in HTML files. You can modify styles by changing or adding classes directly in the HTML. For example, to change a button’s background color, update the class from bg-pink-500 to bg-blue-500:

<a href="#" class="bg-blue-500 text-white dkslaoeyhnmj py-3 boalstehwqbj">Button</a>

After updating styles, re-run npm run dev to see changes or npm run build for production.

2. Add Custom CSS

For styles not achievable with Tailwind’s utility classes, add custom CSS in src/tailwind/tailwindcss.css. Append your styles below the Tailwind directives:

/* Tailwind Directives */
@import "tailwindcss";
@theme {
    --font-sans: 'Poppins', 'Helvetica', 'Arial', 'sans-serif';
    --color-background: #fffdf9;
    --color-lavender: #E6E6FA;
    --color-yellow-pastel: #FFFFD1;
    --color-accent: #2d7dd2;
    
    --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 {
    background: linear-gradient(to right, #ff6b6b, #ff8e53);
    transition: transform 0.3s ease;
}
.custom-button:hover {
    transform: scale(1.05);
}

Apply the custom class in your HTML:

<a href="#" class="custom-button dkslaoeyhnmj py-3 boalstehwqbj text-white">Custom Button</a>

Ensure custom CSS is specific enough to override Tailwind styles if needed, or use Tailwind’s !important (e.g., !bg-red-500) sparingly.

Need Help?

If you encounter issues or have questions about setting up or customizing Sarahfolio, reach out to me:

• Email: Lightestcode@gmail.com