📌 Notes:

Current website analysis score with PageSpeed:

Desktop:

Mobile:

Soon to be implemented:

• Motion element and animations are not implemented yet.
• Responsive design has only been implemented for mobile and desktop, not for tablets.

Initial Setup

Make sure you have installed Node.js and npm on your machine.

• To install Node modules:

$ npm install

Development

• Run development server:

$ npm run dev

or

• Run development server to be accessible from other devices (like phones):

$ npm run dev -- --host

Linting and Formatting

This project uses ESLint, Prettier, and Prettier for TailwindCSS for linting and formatting. Please install the respective plugins for your code editor.

• Run ESLint:

$ npm run lint

If there are any errors, you can try to fix them automatically by running:

$ npm run lint -- --fix

• Run Prettier and Prettier for TailwindCSS (just for src):

$ npx prettier --check src

If there are any errors, you can try to fix them automatically by running:

$ npx prettier --write src

Don't forget to run them before pushing your code.

Image Optimization (Bash Script)

Install webp and svgo globally on your machine.

$ sudo apt install webp svgo -y

• To optimize images:

$ ./compress-optimize.sh

Production

• Build for production:

$ npm run build

• Build for production (Heroku):

$ npm start