From 9a4c2220d310a9bc7b7a01943bf925ed38265665 Mon Sep 17 00:00:00 2001
From: littleblack111 <littleblack11111@gmail.com>
Date: Tue, 3 Oct 2023 07:59:00 +0800
Subject: added more features & fixed border(radius)bug from vanilla tilt

---
 index.html                   | 3 ++-
 pages/repo/github/repos.html | 5 +++--
 src/css/index.css            | 2 ++
 src/css/style.css            | 4 ++++
 src/js/tilt.conf.js          | 5 +++++
 5 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 src/js/tilt.conf.js

diff --git a/index.html b/index.html
index d7850459..886cba46 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
         <div class="wrapper">
           <section class="indexPage">
               <div class="window slowScroll animate slideInTop animate--fast">
-                <div data-tilt>
+                <div class='tilt'>
                   <div class="placeholder" id="infos">
                       <div class="text fastScroll">
                           <h2>Hello! This is</h2>
@@ -34,5 +34,6 @@
 
         <script src="/src/js/index.js"></script>
         <script src="/src/js/tilt.js"></script>
+        <script src="/src/js/tilt.conf.js"></script>
     </body>
 </html>
diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html
index 6c637606..575f0cf4 100644
--- a/pages/repo/github/repos.html
+++ b/pages/repo/github/repos.html
@@ -20,7 +20,7 @@
     <script>includeHeader();</script>
 
     <!-- main Github Functions -->
-    <main class="container" data-tilt data-tilt-glare>
+    <main class="container tilt">
         <h1>All Of My Projects</h1>
         <section class="intro">
             <div class="user-info animate animation--fast slideInTop"></div>
@@ -32,10 +32,11 @@
 
         <section class="repos">
             <input type="text" class="filter-repos animate animate--slow slideInTop hide" placeholder="Search Projects" />
-            <ul class="repo-list animate slideInTop"></ul>
+            <ul class="repo-list animate slideInTop tilt"></ul>
         </section>
     </main>
     <script src="/src/js/tilt.js" />
+    <script src="/src/js/tilt.conf.js"></script>
 </body>
 
 </html>
diff --git a/src/css/index.css b/src/css/index.css
index 4666c95b..5ba0659a 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -25,6 +25,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    /* transform-style: preserve-3d; */
+    /* perspective: 1000px; */
 }
 
 .window .placeholder {
diff --git a/src/css/style.css b/src/css/style.css
index 71e9adaa..a4e608fb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -101,6 +101,10 @@ body {
   transition: all 0.3s
 }
 
+.js-tilt-glare {
+  border-radius: 18px;
+}
+
 /* topbar styles ========================================== */
 
 header {
diff --git a/src/js/tilt.conf.js b/src/js/tilt.conf.js
new file mode 100644
index 00000000..d0ef14ad
--- /dev/null
+++ b/src/js/tilt.conf.js
@@ -0,0 +1,5 @@
+VanillaTilt.init(document.querySelectorAll(".tilt"),{
+  glare: true,
+  reverse: true,
+  "max-glare": 0.5,
+})
-- 
cgit v1.2.3