SPA project using Marionette.js and Handlebars,
as long with Webpack 5, grunt, ESlint and Typescript.
Explore the docs »
Open
·
Donate
Table of Contents
Much of what you do today is the result of knowledge spread across the internet, and that's why I decided to publish my repository to help you as it helped me when I was building it. If this repository helped you, don't hesitate to leave a star!
Here are some of the features:
- Single page application behavior using marionette.js and handlebars.js
- Typescript support
- Componentization and focus on code reuse
- Input and mask reactive validations
- Overwrite of native html tags like input file and scrollbar
- Aspect ratio SCSS logic which almost mitigates the needs of media queries
- SCSS written using BEM methodology
- Captcha integration
- Grunt and webpack5 bundling
- Npm tasks to watch/build/deploy/test
- ESlint and prettier with custom rules
- Favicon cli generator
- Generation and replacement of webp images through client-side
- TinyPNG api conversion via cli
- IE 11 support
- Lazy loading
- And more
This section shows what technologies are used in this particular project.
- NodeJS
- Yarn
- Marionette.js
- Handlebars.js
- Typescript
- ESlint
- Sass
- Webpack 5
- Grunt
- Autoprefixer
- Cssmin
- Htmlmin
- Uglify
- Usemin
- Favicon Generator
After cloning the project, you need to do a few things to be able to run it.
You need to have the following requirements:
-
node 16 (download here)
-
npm
npm install -g npm
-
yarn
npm install -g yarn
-
grunt cli
npm install -g grunt-cli
Below is an example of how you can run the project.
- Clone the repo
git clone https://github.com/rinaldilucas/personal-portfolio.git
- Install the dependencies via yarn
yarn install
- Build the project to develop
yarn dev
- Build the dist folder
yarn build --tiny-key={apikey}
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/amazing-feature
) - Commit your Changes (
git commit -m 'feat: add some amazing feature'
) - Push to the Branch (
git push origin feature/amazing-feature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Project Link: https://github.com/rinaldilucas/personal-portfolio
If you feel that this project has helped you in any way, whether it's attracting clients or teaching you about the technologies used, feel free to make a donation. It helps me a lot to continue developing open source codes.
- Metamask (USDT):
0xA0410641515F06fF6a9AdAFf1c3e90a3905ba271
- PIX (BRL):
72140bc8-fadc-42f5-abb6-9c13cc80a59f