Home

Tech Stack Overview

This page provides an overview of the main technologies used in our website project, which is built with modern JavaScript libraries and frameworks for performance and scalability.

Main Technologies

---

1. JavaScript

• Description: JavaScript is the primary programming language used to build the website. It is used both for the front-end and for handling user interactions, animations, and logic. We use ECMAScript 6+ syntax (ES6+) to take advantage of modern JavaScript features such as arrow functions, modules, and async/await.

• Resources to Learn More:

  • JavaScript Documentation (MDN)
  • JavaScript ES6+ Cheatsheet

---

2. React

• Description: React is our front-end library for building user interfaces. It allows us to create reusable components and manage the state efficiently. The website is structured using React components, and data is passed through props and states.

• Key Concepts:

  • Components: Reusable UI building blocks that can be functional or class-based.
  • State & Props: Manage dynamic data and pass it between components.
  • Hooks: We use React hooks like useState and useEffect for state management and side effects.
  • Routing: The website uses React Router for navigation between different pages.

• Folder Structure:

  • /src/components – Contains reusable React components.
  • /src/pages – Contains the different pages of the website.

• Example:

  • useEffect(() => {
        setText("");
        setIndex(0);
    }, [wordIndex, messages]);

• Resources to Learn More:

  • Official React Documentation
  • React Hooks Overview

---

3. TailwindCSS

• Description: TailwindCSS is our utility-first CSS framework that allows us to style components with ease by using pre-defined utility classes.

• Key Concepts:

  • Utility Classes: TailwindCSS uses a set of classes for padding, margin, text size, colors, etc.
  • Customization: Custom styles are handled through Tailwind’s configuration file (tailwind.config.js), where we can define custom themes, colors, and breakpoints.
  • Responsive Design: Tailwind makes it simple to implement responsive design by offering mobile-first CSS classes (e.g., sm:, md:, lg:).

• Example:

  <div class="bg-blue-500 text-white p-4">
    This is a TailwindCSS-styled div.
  </div>

• Resources to Learn More:

  • TailwindCSS Official Documentation
  • TailwindCSS Cheat Sheet

4. GSAP (GreenSock Animation Platform)

• Description: GSAP is used for creating high-performance, customizable animations on the website. GSAP allows us to animate elements in the DOM, from simple transitions to complex sequences.

• Key Concepts:

  • Tween: The basic animation unit in GSAP that handles animating a property from one value to another.
  • Timeline: A sequence of tweens that can be played in order or with overlap.
  • Ease: Controls the rate of change in an animation (e.g., ease-in, ease-out).

• Example:

  import { gsap } from "gsap";
  
  gsap.to(".box", { x: 100, duration: 2, ease: "power2.out" });

• Resources:

  • Official Docs

5. Three.js

Description:
Three.js is a powerful JavaScript library used to render 3D graphics in the browser. In our project, Three.js is utilized to create interactive 3D elements and visualizations. It's built on top of WebGL, making it easier to create 3D scenes, models, and animations without dealing directly with WebGL APIs.

Key Concepts:

• Scene: The container where objects, cameras, and lights are placed.
• Camera: Defines what part of the 3D space the viewer sees.
• Renderer: Responsible for rendering the scene using WebGL.
• Meshes: 3D objects that are rendered in the scene, usually consisting of geometry and materials.

Example:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

• Resources:
  • Offical Docs