{"id":18331725,"url":"https://github.com/pixelrocket-shop/folio-html-bootstrap","last_synced_at":"2025-04-06T03:33:22.189Z","repository":{"id":161101060,"uuid":"422820911","full_name":"PixelRocket-Shop/folio-html-bootstrap","owner":"PixelRocket-Shop","description":"Bootstrap 5 HTML Responsive Locomotive Scroll Portfolio Template for web developers and designers","archived":false,"fork":false,"pushed_at":"2021-10-30T12:44:19.000Z","size":2015,"stargazers_count":29,"open_issues_count":0,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T16:21:19.478Z","etag":null,"topics":["bootstrap-5-template","bootstrap-dark-mode","bootstrap-portfolio-template","css","free-bootstrap","free-bootstrap-template","html","javascript","locomotive-scroll"],"latest_commit_sha":null,"homepage":"https://folio-html-bootstrap.vercel.app/index.html","language":"SCSS","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":"2021-10-30T08:04:21.000Z","updated_at":"2025-02-15T06:55:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"ecf09d17-cfb8-469a-b7d8-b3d6339c1306","html_url":"https://github.com/PixelRocket-Shop/folio-html-bootstrap","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Ffolio-html-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Ffolio-html-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Ffolio-html-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PixelRocket-Shop%2Ffolio-html-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PixelRocket-Shop","download_url":"https://codeload.github.com/PixelRocket-Shop/folio-html-bootstrap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430837,"owners_count":20937873,"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":["bootstrap-5-template","bootstrap-dark-mode","bootstrap-portfolio-template","css","free-bootstrap","free-bootstrap-template","html","javascript","locomotive-scroll"],"created_at":"2024-11-05T19:34:56.434Z","updated_at":"2025-04-06T03:33:22.176Z","avatar_url":"https://github.com/PixelRocket-Shop.png","language":"SCSS","readme":"# Folio - Bootstrap 5 HTML Responsive Portfolio Template\n\n## Overview\nFolio is a responsive HTML Bootstrap 5 template for web developers and designers to showcase their work.\nThe template uses Locomotive Scroll to animate in sections on scroll, and also comes with light mode/dark mode support.\n\n\u003cstrong\u003e\u003ca href=\"https://folio-html-bootstrap.vercel.app/\"\u003eView Demo\u003c/a\u003e | \u003ca href=\"https://github.com/PixelRocket-Shop/folio-html-bootstrap/archive/main.zip\"\u003eDownload ZIP\u003c/a\u003e\u003c/strong\u003e\n\n![Bootstrap 5 Responsive HTML Portfolio Template](https://pixelrocket-public-assets.s3.eu-west-2.amazonaws.com/github-assets/folio-html/home.jpg \"folio | Responsive Bootstrap 5 Portfolio Template\")\n\n## Table of contents\n\n- [Requirements](#requirements)\n- [Quick Start](#quick-start)\n- [Template Pages](#template-pages)\n- [Demo Link](#demo-link)\n- [Template Key Features](#template-key-features)\n- [Template File Structure](#template-file-structure)\n- [Handlebars](#handlebars)\n- [Template JSON Data](#template-json-data)\n- [Customise Template Styles](#customise-template-styles)\n- [Create New Pages](#create-new-pages)\n- [Bootstrap Documentation](#bootstrap-documentation)\n- [Credits](#credits)\n- [Contact Us](#contact-us)\n\n\n## Requirements\nIf you do not intend to work with the template source code (and that means you will not be compiling it or running the Webpack dev server), you do not need to install anything. You can simply navigate to the dist folder and start editing the files.\n\nMost developers will be editing the source code and will also be running Webpack to recompile the template files. If that's the case, then ensure that you have Node.js installed. [You can download it from here](https://nodejs.org/en/download/)\n\n\n## Quick Start\n- [Download the latest release](https://github.com/PixelRocket-Shop/folio-html-bootstrap/archive/main.zip) OR clone the repo: `git clone https://github.com/PixelRocket-Shop/folio-html-bootstrap.git`\n- Install Node.js if you don't already have it on your system.\n- Open the project root in your command line.\n- run `npm install` in your command line.\n- run `npm start` to start Webpack devserver.\n- if you want to recompile the template files (which output to the dist folder), run `npm run build`\n\n\n## Template Pages\nThe template consists of a single page:\n\n* Homepage\n* About Me\n* My Work (Listing Page)\n* My Work (Single Page)\n* Contact Me\n\nTo keep code repetition to a minimum, we've used Handlebars.js as the templating engine and partials to quickly add the same code to different pages. We also use a Handlebars plugin for JSON data - this allows us to use loops and output a single HTML code block instead of repeating the same HTML.\n\n\n## Demo Link\n[Demo URL](https://folio-html-bootstrap.vercel.app/)\n\n**Please note that this is an HTML template only. It does not connect to a database, and will not automatically work in a content management system (Wordpress etc). You will need to incorporate our code into your application.**\n\n\n## Template Key Features\n\n* Built with Bootstrap 5\n* Fully responsive\n* Locomotive Scroll Integration\n* Light/Dark Mode support\n* My experience component\n* My skills component\n* Client testmonials component\n\n\n## Template File structure\n📁 dist - Generated version of the template. Go here if you do not want to work with the template source code. But be warned: if you customise anything in this folder directly, and then later recompile the template using webpack, unless you move the dist folder out of the template, your changes will be overridden.\n\n📁 node_modules - Directory where NPM installs dependancies. You will not see this folder until you complete the template installation. You do not need to create this folder.\n\n📁 src - Template source code. Go here to customise your template.\n\n📁 src/assets - Template assets such as CSS, JS, Images etc.\n\n📁 src/data - Template JSON Data files. We use these JSON files to make your job easier to insert content into the template. \n\n📁 src/html - Template pages. Go here to edit existing pages or add new pages.\n\n📁 src/partials - Handlebars partial templates. \n\n\n## Handlebars\nHandlebars is a template engine that allows us to keep our template source code as organised and as clean as possible. It cuts down on code duplication and through the use of helper functions, allows template developers to very quickly output large amounts of data with minimal code. [You can read more about it here](https://handlebarsjs.com).\n\n\n## Template JSON Data\nThe Webpack Handlebars plugin that we use comes with a very handy utility that allows us to pass in JSON files as template data.\n\nPlease navigate to: src/data. Here is where our template data JSON files reside. You can edit, remove or add your own to this folder.\n\n\n## Customise Template Styles\nAll of the template's source CSS/SASS files are kept inside the template's assets folder. Navigate to src/assets/scss. Open up theme.scss with your editor.\n\nThis is the main entry point for all other SASS/CSS files.\n\n\n## Create New Pages\nTo create a new page, navigate in your code editor to: src/html. To make it easier to get the correct HTML in place, clone an existing page. Rename the newly-created file to whatever URL you require. And that's it. You are now free to open the new page with your code editor, make your changes, and then save the file. Quit Webpack devserver and restart it for the page to show up.\n\n\n## Bootstrap Documentation\nBootstrap already has a comprehensive documentation site that will guide you in setting up and using all default Bootstrap features. Bootstrap 5 is fully integrated to our template's source code. Please refer to Bootstrap's doc site first for any default Bootstrap features: [Visit Bootstrap's Doc Site](https://getbootstrap.com/docs/5.0/getting-started/introduction/)\n\n\n## Credits\n[Bootstrap](https://getbootstrap.com/)\n\n[Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll)\n\n[Unsplash](https://unsplash.com/)\n\n[Freepik](https://www.freepik.com/)\n\n[Swiper.js](https://swiperjs.com/)\n\n## Contact Us\nYou can find our website [here](https://www.pixelrocket.store) or you can email us at support@pixelrocket.store","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelrocket-shop%2Ffolio-html-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelrocket-shop%2Ffolio-html-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelrocket-shop%2Ffolio-html-bootstrap/lists"}