Petitfour

Dynamic portfolio builder, using ReactJS, Laravel, and Jquery, with a high design layout, a Powerful API structure, and a detailed dashboard editor for each section in the portfolio.

iSemary
7
0
CSS

Petitfour

N.B. This project took me about month or more to finish it, Just because I didn’t have enough time for it, i just gave it 1 hour/day, some days I didn’t open it; cause i work as full time and i also have another side projects for my clients, So it wasn’t on my top priorities.

Hope you enjoy it and find it helpful!

Features

✅ Dynamic Dashboard

✅ Responsive Design

✅ SEO Friendly

✅ [Skills - Projects - Blogs] Editor

🌟 MidJourney Images

Postman Collection APIs

Open with postman

Technologies Used

The following technologies were used in the dashboard:

  • Intervention
  • Bootstrap
  • jQuery
  • jQueryUI
  • Select2
  • DataTables
  • Tagify
  • Image-Uploadify
  • ApexCharts
  • CKEditor
  • FontAwesome
  • SweetAlert
  • intlTelInput

The website utilizes the following technologies:

  • react-icons [Icons]
  • AOS [Animation]
  • react-lottie [JSON Animation Canvas Library]
  • react-spring [Animation Library]
  • react-content-loader [Lazy Loading Components]
  • axios [HTTP Requests]
  • Redux [State Managment]
  • Splide [Carousel]
  • node-sass [Importing vars from sass files to react]

Laravel Commands

First, run the following command only once:

First use only

Create a link for storage folder into public to access it

php artisan storage:link

Migrate the database tables

php artisan migrate

Setting up server permissions for storage folder

chmod -R 775 storage
chmod -R 775 bootstrap/cache
chown -R www-data:www-data storage bootstrap/cache

Cronjobs Commands

php artisan generate:sitemap

React Commands

Install required dependencies 
npm install

Start react project on localhost

npm start

Gulp Commands

Keep watching SASS/SCSS files on changes to be converted to css

gulp watch-sass

OR

sass --watch resources/js/src/assets/styles/style.scss:resources/js/src/assets/styles/style.css

Convert SASS/SCSS files to css after long work

gulp css

OR

sass resources/js/src/assets/styles/style.scss:resources/js/src/assets/styles/style.css

For Building a new production version all you have to do is :

npm install

npm audit fix -force

npm run build

OR

npm run build-linux

And it will do everything :

  • Generate a new bundle file
  • Convert SCSS files into one css file
  • Copy All media and styles to public dircectory

Contact

For any inquiries or support, please email me at [email protected] or visit my website at abdelrahman.online.