Documentation

Mint is a free React template made by Graphberry. Comes in a modern, minimalistic style. This landing page is great for creative agencies or other types of websites.

Installation

# Extract .ZIP file or Clone the repo

$ git clone https://github.com/RokvicSasa/Mint-Template-Public-.git

# Go to your project folder from your terminal

$ cd mint-portfolio-react-template

# install app's dependencies

$ npm install or $ yarn install

# Start local server

$ npm start

# It will open template in your browser(http://localhost:3000)

# Edite template in your favorite code editor

# After editing is finished,build required files for server

$npm run build

Project Structure

• This project is bootstrapped using Create React App.
• All primary components are located inside src/components .Each component have own .scss file for styling
• All images are located inside src/assets.
• After a build, all files required for hosting can be found inside /public folder

Navbar & Images

• There is 2 components for navbar "desktop-nav.jsx" and "mobile-nav.jsx" make sure to properly set navigation in both components
• Make sure to replace all placeholders found on /assets folder. Name and type of images should be exactly like placeholders.

Portfolio Section

• All data and logic for portfolio can be found inside the state of the portfolio class component.
• Each project has its own:
• id: (required for properly rendering, make sure that you don't have 2 projects with the same id.)
• preview: (image for preview imported from /assets/portfolio folder.)
• title: (title for project visible on hover.)
• tag: (category of the project required for project filtering, it's also visible on hover.)

Partners Section

• All data and logic for partners swiper can be found inside the state of partners/swipper class component.
• Each partner has its own:
• image: (image for preview imported from /assets/partners folder.)
• id: (required for properly rendering, make sure that you don't have 2 partners with the same id.)

Blog Section

• All data and logic for the blog can be found inside the state of the blog class component.
• Each post has its own:
• image: (image for preview imported from /assets/blog folder.)
• id: (required for properly rendering, make sure that you don't have 2 posts with the same id.)
• title: (title for the post.)
• description: (short description of the post.)
• date: (date of post.)

Contact Section

• All data and logic for contact can be found inside the state of contact class component.
• Email sending service is powered by Email.js
• Make sure to register at Email.js
• There you will need to create your own template

• Please make sure to add your own API key from Email.js and template id also

Build

• After you finish with all editing you can run "npm run build" for building required files for the server
• You must add your patch to the destination folder on the server. Inside package.json "homepage:" before build