• Make a new branch name "gh-pages" as a production branch
• On Github repo > Settings > Pages > Branch > choose branch "gh-pages", folder "/(root)" > Save
• Everytime you commit to "main" branch, GitHub will automatically deploy to "gh-pages" branch
• Access your live page at "https://<your-account-id>.github.io/<github-repo-name>/"

How to intergrate Three.js?

• Create visual canvas in html

<canvas class="webgl"></canvas>

• Import ThreeJS in index.js

import * as THREE from "https://cdn.skypack.dev/three@0.148.0"

• Create scene & camera

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);
camera.position.z = 5;
scene.add(camera);

• Create object

const geometry = new THREE.SphereGeometry(1, 32, 16); 
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
const mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

• Create renderer

const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);

• Create animate function

const animate = () => {
  window.requestAnimationFrame(animate);
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
};

• Initiate ThreeJS

animate();

How to set up EmailJS?

• Go to emailjs.com and create a free account
• Click on "Email Services" > "Add New Servive" and follow to connect to your personal email. In the tab you can find your "SERVICE_ID"
• Click on "Email Templates" > "Create New Template" and follow to create a template for the mail that send to you. In the tab you can find your "TEMPLATE_ID"
• Click on "Account" > "Public Key" is your "USER_ID"
• In Javascript, send the email by fetching POST to emailjs api:

fetch('https://api.emailjs.com/api/v1.0/email/send', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({
      user_id: <USER_ID>,
      service_id: <SERVICE_ID>,
      template_id: <TEMPLATE_ID>,
      template_params: {
        'name': <name-input>,
        'email': <email-input>,
        'subject': <subject-input>,
        'message': <message-input>
      }
    })
  })
  .then((httpResponse) => {
    if (httpResponse.ok) {
      <your-success-handle-function>
    } else {
      <your-fail-handle-function>
    }
  })
  .catch((error) => {
    <your-error-handle-function>
  })

More questions? Please send email to hovinhthanh7893@gmail.com or text me on LinkedIn