Major Changes+ canvas+ different page CF

TCP-Tech · Oct 2, 2023 · adaf5e2 · adaf5e2
1 parent c5c7a64
commit adaf5e2
Show file tree

Hide file tree

Showing 13 changed files with 691 additions and 420 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,8 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="./favicon.svg" type="image/x-icon" />
-    <!-- <link rel="stylesheet" href="./preloader.css" /> -->
-    <link rel="stylesheet" href="./mouse.css" />
+    <link rel="stylesheet" href="./preloader.css" />
     <link
       rel="stylesheet"
       type="text/css"
@@ -27,7 +26,7 @@
     <meta name="description" content="CodeUtsava 7.0" />
     <title>CodeUtsava 7.0</title>
   </head>
-  <body>
+  <body class="hehe">
     <!-- <div id="ghost" class="ghost">
       <div class="ghost__head">
         <div class="ghost__eyes"></div>
@@ -66,7 +65,7 @@
         </filter>
       </defs>
     </svg> -->
-    <!-- <div class="intro-container1">
+    <div class="intro-container1">
       <img src="./codeutsavaTitle.svg"/ class="preloader-img">
       <div class="button shift-camera-button">
         <div class="border">
@@ -75,12 +74,9 @@
         </div>
         <div class="text">ENTER</div>
       </div>
-      <div class="pre-container">
-        <div class="lin l-1"></div>
-        <div class="lin l-3"></div>
-      </div>
     </div>
-    <div class="sky-container"></div> -->
+    <div class="sky-container"></div>
+    <canvas id="canvas"></canvas>
     <div id="root"></div>
     <!-- Google tag (gtag.js) -->
     <script
@@ -104,12 +100,12 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"
       crossorigin="anonymous"
     ></script>
-    <!-- <script
+    <script
       src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"
       crossorigin="anonymous"
-    ></script> -->
+    ></script>
     <script defer async src="https://apply.devfolio.co/v2/sdk.js"></script>
     <!-- <script type="module" src="/mouse.js"></script> -->
-    <!-- <script type="module" src="/preloader.js"></script> -->
+    <script type="module" src="/preloader.js"></script>
   </body>
 </html>
diff --git a/public/preloader.css b/public/preloader.css
@@ -20,9 +20,15 @@
   --secondary-c: #b200ee;
 }
 
+.hehe{
+  overflow: hidden;
+}
+
+.intro-container1 img {
+  height: 100px;
+}
+
 .intro-container1 {
-  background-repeat: no-repeat;
-  background-size: cover;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -37,15 +43,16 @@
   width: max-content;
 }
 
-.intro-container1 img {
-  height: 100px;
+#canvas{
+  position: absolute;
+  z-index: -2;
 }
 
-/* #root {
+#root {
   display: none;
   opacity: 0;
-} */
-
+}
+/* 
 .pre-container {
   position: absolute;
   right: 30%;
@@ -94,6 +101,13 @@
   background: black;
   box-shadow: none !important;
   right: 0;
+} */
+
+.sky-container {
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  opacity: 0;
 }
 
 .button {
@@ -149,12 +163,6 @@
   transition: 0.15s ease-out;
 }
 
-.sky-container {
-  width: 100%;
-  height: 100vh;
-  background-image: url('./loader_bg.png');
-}
-
 @media screen and (min-width: 860px) {
   .sky-container__left h2,
   .sky-container__right h2 {