Merge pull request #74 from SupritBehera/react-rendering

React rendering
ACM-Thapar · Aug 18, 2021 · bc61918 · bc61918
2 parents 7cda7f3 + c15d0b0
commit bc61918
Show file tree

Hide file tree

Showing 16 changed files with 6,667 additions and 689 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -32,7 +32,25 @@
       crossorigin="anonymous"
     />
 
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <!-- Cruip stylesheet which seems to be required for Events and Projects page -->
+    <!-- <link
+      rel="stylesheet"
+      href="https://preview.cruip.com/solid/dist/css/style.css"
+    /> -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600"
+    />
+
+    <!-- <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
+      crossorigin="anonymous"
+    /> -->
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
@@ -50,11 +68,29 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
+      crossorigin="anonymous"
+    />
+
+    <!-- Add the slick-theme.css if you want default styling -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css"
+    />
+    <!-- Add the slick-theme.css if you want default styling -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css"
+    />
 
     <title>ACM Thapar</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.
@@ -67,13 +103,25 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
-    <!-- <script src="./js/think.js"></script> -->
+    <script
+      src="https://code.jquery.com/jquery-3.6.0.min.js"
+      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+      crossorigin="anonymous"
+    ></script>
+
     <script
       src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
       integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
       crossorigin="anonymous"
     ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
+      crossorigin="anonymous"
+    ></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
+    <!-- <script src="./js/think.js"></script> -->
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
       integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
@@ -85,11 +133,29 @@
       crossorigin="anonymous"
     ></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
 
     <script src="./js/carousel.js"></script>
     <script src="./js/think.js"></script>
+    <script src="./js/evan.js"></script>
+    <script src="./js/student.js"></script>
+
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/client/public/js/carousel.js b/client/public/js/carousel.js
@@ -1,11 +1,51 @@
-var indexToGet = $('.slider .slick-slide').index($('#center_on_me'));
-
-$('.slider-nav').slick({
-  slidesToShow: 3,
-  infinite: true,
-  centerMode: true,
-  slidesToScroll: 1,
-  initialSlide: indexToGet,
-  dots: true,
-  focusOnSelect: true,
+var viewport_width = window.innerWidth;
+$(window).resize(function () {
+  viewport_width = window.innerWidth;
 });
+if (viewport_width > 780) {
+  var indexToGet = $('.slider .slick-slide').index($('#center_on_me'));
+
+  $('.slider-nav').slick({
+    autoplay: true,
+    autoplaySpeed: 5000,
+    slidesToShow: 3.68,
+    speed: 1000,
+    infinite: true,
+    centerMode: true,
+    slidesToScroll: 1,
+    initialSlide: indexToGet,
+    dots: true,
+    focusOnSelect: true,
+  });
+} else if (viewport_width > 500) {
+  var indexToGet = $('.slider .slick-slide').index($('#center_on_me'));
+
+  $('.slider-nav').slick({
+    autoplay: true,
+    autoplaySpeed: 5000,
+    slidesToShow: 3,
+    speed: 1000,
+    infinite: true,
+    centerMode: true,
+    slidesToScroll: 1,
+    initialSlide: indexToGet,
+    dots: true,
+    focusOnSelect: true,
+  });
+} else {
+  var indexToGet = $('.slider .slick-slide').index($('#center_on_me'));
+
+  $('.slider-nav').slick({
+    autoplay: true,
+    autoplaySpeed: 5000,
+    slidesToShow: 1.65,
+    speed: 1000,
+    infinite: true,
+    centerMode: true,
+    slidesToScroll: 1,
+    initialSlide: indexToGet,
+    dots: true,
+    focusOnSelect: true,
+  });
+  $('.slick-slide').style.width = 300;
+}
diff --git a/client/public/js/evan.js b/client/public/js/evan.js
@@ -0,0 +1,117 @@
+var fullAnimation = (function () {
+  var bigDarkRectangle = anime
+    .timeline({
+      targets: '.hero-figure-box-05',
+      autoplay: false,
+      begin: function (anim) {
+        smallDarkRectangles.play();
+        colouredRectangles.play();
+      },
+    })
+    .add({
+      duration: 400,
+      easing: 'easeInOutExpo',
+      scaleX: [0.05, 0.05],
+      scaleY: [0, 1],
+      perspective: '500px',
+    })
+    .add({
+      duration: 400,
+      easing: 'easeInOutExpo',
+      scaleX: 1,
+    })
+    .add({
+      duration: 800,
+      rotateY: '-15deg',
+      rotateX: '8deg',
+      rotateZ: '-1deg',
+    });
+
+  var smallDarkRectangles = anime
+    .timeline({
+      targets: '.hero-figure-box-06, .hero-figure-box-07',
+      autoplay: false,
+    })
+    .add({
+      duration: 400,
+      easing: 'easeInOutExpo',
+      scaleX: [0.05, 0.05],
+      scaleY: [0, 1],
+      perspective: '500px',
+    })
+    .add({
+      duration: 400,
+      easing: 'easeInOutExpo',
+      scaleX: 1,
+    })
+    .add({
+      duration: 800,
+      rotateZ: '20deg',
+    });
+
+  var colouredRectangles = anime
+    .timeline({
+      targets:
+        '.hero-figure-box-01, .hero-figure-box-02, .hero-figure-box-03, .hero-figure-box-04, .hero-figure-box-08, .hero-figure-box-09, .hero-figure-box-10',
+      autoplay: false,
+    })
+    .add({
+      duration: anime.random(600, 800),
+      delay: anime.random(600, 800),
+      rotate: [
+        anime.random(-360, 360),
+        function (el) {
+          return el.getAttribute('data-rotation');
+        },
+      ],
+      scale: [0.7, 1],
+      opacity: [0, 1],
+      easing: 'easeInOutExpo',
+    });
+
+  function init() {
+    setTimeout(function () {
+      bigDarkRectangle.play();
+    }, 1000);
+  }
+
+  function restart() {
+    bigDarkRectangle.restart();
+    smallDarkRectangles.restart();
+    colouredRectangles.restart();
+  }
+
+  function seek() {
+    bigDarkRectangle.seek(
+      bigDarkRectangle.duration * (seekProgressEl.value / 100),
+    );
+    smallDarkRectangles.seek(
+      smallDarkRectangles.duration * (seekProgressEl.value / 100),
+    );
+    colouredRectangles.seek(
+      colouredRectangles.duration * (seekProgressEl.value / 100),
+    );
+  }
+
+  return {
+    init: init,
+    restart: restart,
+    seek: seek,
+  };
+})();
+
+// Start on load
+window.onload = function () {
+  fullAnimation.init();
+};
+
+// Re-run
+document.getElementById('run-trigger').addEventListener('click', function (e) {
+  fullAnimation.restart();
+});
+
+// Seek
+var seekProgressEl = document.querySelector('.progress');
+seekProgressEl.addEventListener('input', function () {
+  fullAnimation.seek();
+});