{"id":24857379,"url":"https://github.com/pixelrocket-shop/personal-portfolio-html-tailwind","last_synced_at":"2025-03-26T15:52:35.484Z","repository":{"id":267964672,"uuid":"902906573","full_name":"PixelRocket-Shop/personal-portfolio-html-tailwind","owner":"PixelRocket-Shop","description":"HTML Tailwind Version 4 Personal Portfolio with CSS scroll animations and light/dark mode support","archived":false,"fork":false,"pushed_at":"2024-12-14T10:52:53.000Z","size":22525,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-31T17:53:20.254Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://personal-portfolio-html-tailwind.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PixelRocket-Shop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-13T14:10:50.000Z","updated_at":"2024-12-30T17:59:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"f696a01f-a480-4f20-a7b2-612c85144de7","html_url":"https://github.com/PixelRocket-Shop/personal-portfolio-html-tailwind","commit_stats":null,"previous_names":["pixelrocket-shop/personal-portfolio-html-tailwind"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Fpersonal-portfolio-html-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Fpersonal-portfolio-html-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Fpersonal-portfolio-html-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Fpersonal-portfolio-html-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PixelRocket-Shop","download_url":"https://codeload.github.com/PixelRocket-Shop/personal-portfolio-html-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245689455,"owners_count":20656414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-01-31T17:53:20.423Z","updated_at":"2025-03-26T15:52:35.471Z","avatar_url":"https://github.com/PixelRocket-Shop.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Personal Portfolio HTML Tailwind Template\n\nThis 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).\n\n## App Preview\n\n[![Live Demo](https://img.shields.io/badge/Live_Demo-Visit-brightgreen?style=for-the-badge)](https://personal-portfolio-html-tailwind.vercel.app)\n\n[![Tailwind Version 4 HTML Personal Portfolio Template](https://github.com/PixelRocket-Shop/personal-portfolio-html-tailwind/blob/main/public/images/preview.png 'Tailwind Version 4 HTML Personal Portfolio Template')](https://personal-portfolio-html-tailwind.vercel.app)\n\n---\n\n## Features\n\n- **Responsive Design**: Optimized for all devices.\n- **Dark mode**: Light and dark mode support.\n- **Easy Customization**: Modify styles and content effortlessly.\n- **Built with TailwindCSS**: Fast and flexible utility-first CSS.\n- **Swiper.js Integration**: Add smooth carousels and sliders.\n- **Handlebars Templating**: Manage reusable components efficiently.\n- **Hot Module Reload**: Speed up development.\n- **JSON Files for dynamic data**: Use the JSON files in the data folder to customise the content.\n\n---\n\n## Installation \u0026 Usage\n\n### Prerequisites\n\nEnsure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (v16 or higher)\n- [npm](https://www.npmjs.com/)\n\n### Steps\n\n1. **Clone the Repository**\n\n   ```bash\n   git clone https://github.com/PixelRocket-Shop/personal-portfolio-html-tailwind.git\n   cd personal-portfolio-html-tailwind\n   ```\n\n2. **Install Dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Run the Development Server**\n\n   ```bash\n   npm run dev\n   ```\n\n   Open [http://localhost:5173](http://localhost:5173) in your browser to view your project.\n\n4. **Build for Production**\n\n   ```bash\n   npm run build\n   ```\n\n   The final production files will be available in the `dist` folder.\n\n5. **Preview Production Build**\n   ```bash\n   npm run preview\n   ```\n\n---\n\n## Troubleshooting\n\n### Hot Module Reload (HMR) Issues\n\nSometimes, Hot Module Reload may stop working during development. To resolve this:\n\n1. Quit the development server.\n2. Restart the server by running:\n   ```bash\n   npm run dev\n   ```\n\n---\n\n## Credits\n\nThis project utilizes the screenshots for the portfolio thumbnails the following Figma templates:\n\n1. [Design #1](https://www.figma.com/community/file/1119800724233920173)\n2. [Design #2](https://www.figma.com/community/file/1024566846450249486)\n3. [Design #3](https://www.figma.com/community/file/1160643318126575855)\n\n---\n\n## License\n\nThis project is licensed under the MIT License.\n\n---\n\n## Contact Me\n\nYou can find my website [here](https://www.pixelrocket.store) with more frontend web developer resources and tutorials or you can email me at support@pixelrocket.store\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelrocket-shop%2Fpersonal-portfolio-html-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelrocket-shop%2Fpersonal-portfolio-html-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelrocket-shop%2Fpersonal-portfolio-html-tailwind/lists"}