https://github.com/pixelrocket-shop/personal-portfolio-html-tailwind
HTML Tailwind Version 4 Personal Portfolio with CSS scroll animations and light/dark mode support
https://github.com/pixelrocket-shop/personal-portfolio-html-tailwind
darkmode free-portfolio-template free-tailwind-responsive-portfolio free-tailwind-template-html free-tailwind-v4 free-tailwind-version-4 html-portfolio html-template light-mode-toggle lightmode portfolio portfolio-site portfolio-website responsive-portfolio-website tailwind-css tailwindcss tailwindcssversion4 tailwindv4
Last synced: 2 months ago
JSON representation
HTML Tailwind Version 4 Personal Portfolio with CSS scroll animations and light/dark mode support
- Host: GitHub
- URL: https://github.com/pixelrocket-shop/personal-portfolio-html-tailwind
- Owner: PixelRocket-Shop
- License: mit
- Created: 2024-12-13T14:10:50.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-14T10:52:53.000Z (6 months ago)
- Last Synced: 2025-01-31T17:53:20.254Z (4 months ago)
- Topics: darkmode, free-portfolio-template, free-tailwind-responsive-portfolio, free-tailwind-template-html, free-tailwind-v4, free-tailwind-version-4, html-portfolio, html-template, light-mode-toggle, lightmode, portfolio, portfolio-site, portfolio-website, responsive-portfolio-website, tailwind-css, tailwindcss, tailwindcssversion4, tailwindv4
- Language: HTML
- Homepage: https://personal-portfolio-html-tailwind.vercel.app
- Size: 21.5 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
[](https://personal-portfolio-html-tailwind.vercel.app)
[](https://personal-portfolio-html-tailwind.vercel.app)
---
## 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](https://nodejs.org/) (v16 or higher)
- [npm](https://www.npmjs.com/)
### Steps
1. **Clone the Repository**
```bash
git clone https://github.com/PixelRocket-Shop/personal-portfolio-html-tailwind.git
cd personal-portfolio-html-tailwind
```
2. **Install Dependencies**
```bash
npm install
```
3. **Run the Development Server**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view your project.
4. **Build for Production**
```bash
npm run build
```
The final production files will be available in the `dist` folder.
5. **Preview Production Build**
```bash
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:
```bash
npm run dev
```
---
## Credits
This project utilizes the screenshots for the portfolio thumbnails the following Figma templates:
1. [Design #1](https://www.figma.com/community/file/1119800724233920173)
2. [Design #2](https://www.figma.com/community/file/1024566846450249486)
3. [Design #3](https://www.figma.com/community/file/1160643318126575855)
---
## License
This project is licensed under the MIT License.
---
## Contact Me
You can find my website [here](https://www.pixelrocket.store) with more frontend web developer resources and tutorials or you can email me at [email protected]