Personal Portfolio HTML Tailwind Template

This is a single-page website template designed to showcase your portfolio in a clean and professional way. Built using TailwindCSS Version 4, Vite as the build tool, and Handlebar.js as the template engine, it’s lightweight, responsive, and fully customizable. In addition, the template supports light and dark mode and uses CSS scroll animations (only in browsers that support animate-timeline).

App Preview

Features

• Responsive Design: Optimized for all devices.
• Dark mode: Light and dark mode support.
• Easy Customization: Modify styles and content effortlessly.
• Built with TailwindCSS: Fast and flexible utility-first CSS.
• Swiper.js Integration: Add smooth carousels and sliders.
• Handlebars Templating: Manage reusable components efficiently.
• Hot Module Reload: Speed up development.
• JSON Files for dynamic data: Use the JSON files in the data folder to customise the content.

Installation & Usage

Prerequisites

Ensure you have the following installed:

• Node.js (v16 or higher)
• npm

Steps

1. Clone the Repository

   git clone https://github.com/PixelRocket-Shop/personal-portfolio-html-tailwind.git
   cd personal-portfolio-html-tailwind
   

2. Install Dependencies

   npm install
   

3. Run the Development Server

   npm run dev
   

   Open http://localhost:5173 in your browser to view your project.

4. Build for Production

   npm run build
   

   The final production files will be available in the dist folder.

5. Preview Production Build

   npm run preview
   

Troubleshooting

Hot Module Reload (HMR) Issues

Sometimes, Hot Module Reload may stop working during development. To resolve this:

1. Quit the development server.
2. Restart the server by running:

   npm run dev
   

Credits

This project utilizes the screenshots for the portfolio thumbnails the following Figma templates:

1. Design #1
2. Design #2
3. Design #3

License

This project is licensed under the MIT License.

Contact Me

You can find my website here with more frontend web developer resources and tutorials or you can email me at support@pixelrocket.store