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).
- 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.
Ensure you have the following installed:
-
Clone the Repository
git clone https://github.com/PixelRocket-Shop/personal-portfolio-html-tailwind.git cd personal-portfolio-html-tailwind -
Install Dependencies
npm install
-
Run the Development Server
npm run dev
Open http://localhost:5173 in your browser to view your project.
-
Build for Production
npm run build
The final production files will be available in the
distfolder. -
Preview Production Build
npm run preview
Sometimes, Hot Module Reload may stop working during development. To resolve this:
- Quit the development server.
- Restart the server by running:
npm run dev
This project utilizes the screenshots for the portfolio thumbnails the following Figma templates:
This project is licensed under the MIT License.
You can find my website here with more frontend web developer resources and tutorials or you can email me at [email protected]