Neodev Template

Setup and Installation

Follow these steps to set up and run the Neodev portfolio template on your local machine. Ensure you have the necessary tools and dependencies before starting.

Step 1: Prepare Your Tools

Before you begin, make sure you have the following tools installed:

• Node.js: Version 16.x or higher. Download from nodejs.org.
• npm: Included with Node.js, used for package management.
• Code Editor: Recommended: Visual Studio Code (VS Code).

Step 2: Open the Project

Obtain the Neodev template files and open them in your development environment:

1. Download the template ZIP file
2. Navigate to the project directory:

cd neodev

3. Open the project in your code editor (e.g., VS Code).

Step 3: Install Dependencies and Run the Project

Install the required dependencies and start the development server:

1. Install dependencies using npm:

npm install

2. Start the development server to preview the template locally:

npm run dev

This will launch the site at http://localhost:3000

3. Build the project for production:

npm run build

The production-ready files will be output to the dist/ directory.

Step 4: Customize Appearance and Data

Personalize the template by updating styles, content, and data to reflect your portfolio. See the Customization section below for details.

Key areas to customize:

• Update content in HTML files (e.g., index.html, about.html).
• Replace images in the src/img/ directory.
• Modify styles in src/tailwind/tailwindcss.css.
• Edit project data in relevant files (e.g., project details in projects.html).

Customization

The Neodev template is built with flexibility in mind. Customize its appearance and behavior using Tailwind CSS and custom styles to match your personal brand.

1. Customize Style with Tailwind CSS

Tailwind CSS is the primary styling framework for Neodev. You can customize styles in two ways:

• Customize in src/tailwind/tailwindcss.css:

  The main Tailwind configuration is located in src/tailwind/tailwindcss.css. Modify this file to adjust global styles, such as colors, typography, or spacing.

  After updating, re-run npm run dev or npm run build to apply changes.

• Custom Direct in HTML Files:

  You can apply Tailwind utility classes directly in HTML files to style specific elements. For example, to change a button’s background color:

  <button class="bg-blue-500 hover:bg-blue-600 text-white dkslaoeyhnmj py-3 rounded">Click Me</button>

2. Add Custom CSS

For styles beyond Tailwind’s utilities, add custom CSS to src/tailwind/tailwindcss.css. This file is where you can define unique styles or override existing ones.

Example: Add a custom animation for a neon glow effect:

.custom-glow {
    animation: neon-glow 1.5s ease-in-out infinite alternate;
}

@keyframes neon-glow {
    from {
        box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
    }
    to {
        box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    }
}

Apply the custom class in your HTML:

<div class="custom-glow">Glowing Element</div>

Ensure custom styles are added after Tailwind’s @tailwind directives in src/tailwind/tailwindcss.css to avoid conflicts.