https://shadowasphodel2919.github.io/projects.js

1export function projects(element) {
2  element.innerHTML = `
3  <div class="projects">
4        <div class="project-rows">
5        <div class="project-1">
6            <a href="https://github.com/shadowasphodel2919/Cryptogrammer">
7            <div class="card">
8            <h3>Cryptogrammer</h3>
9            <p>It is a website containing cipher implementations.</p>
10            </div>
11            </a>
12            <a href="https://techdom.onrender.com/">
13            <div class="card">
14            <h3>TechDome</h3>
15            <p>It is a recommendation system which helps users choose better jobs, internships and courses.</p>
16            </div>
17            </a>
18            <a href="https://github.com/shadowasphodel2919/GameOfBlocks">
19            <div class="card">
20            <h3>Tetris</h3>
21            <p>The classic game of tetris that we all love.</p>
22            </div>
23            </a>
24        </div>
25        <div class="project-2">
26            <a href="https://github.com/shadowasphodel2919/visualise-sort">
27            <div class="card">
28                <h3>Sorting Visualizer</h3>
29                <p>Created a sorting visualizer using Swing framework.</p>
30            </div>
31            </a>
32            <a href="https://github.com/shadowasphodel2919/ContestMate">
33            <div class="card">
34                <h3>ContestMate</h3>
35                <p>Displays contests from various coding websites</p>
36            </div>
37            </a>
38            <a href="https://github.com/shadowasphodel2919/CodingGuru">
39            <div class="card">
40                <h3>CodingGuru</h3>
41                <p>Mandatory Open AI application created during API hype</p>
42            </div>
43            </a>
44        </div>
45        </div>
46        <div class="project-title">
47        <p>Projects</p>
48        </div>
49    </div>
50  `
51
52  const cards = document.querySelectorAll('.card');
53
54  document.addEventListener("mousemove", (e)=>{
55    cards.forEach(card => {
56        tiltElements(e,card);        
57    });
58  });
59  function tiltElements(event, element){
60    const elementRect = element.getBoundingClientRect();
61
62    // get mouse position
63    const mouseX = event.clientX;
64    const mouseY = event.clientY;
65    
66    // calculate offset from element center to mouse position
67    const elementMiddleX = elementRect.left + (elementRect.width / 2);
68    const elementMiddleY = elementRect.top + (elementRect.height / 2);
69    const distanceX = mouseX - elementMiddleX;
70    const distanceY = mouseY - elementMiddleY;
71
72    // calculate rotation based on mouse position relative to element center
73    const rotateX = (distanceY / elementRect.height) * 10;
74    const rotateY = (distanceX / elementRect.width) * -10;
75    element.style.setProperty("--rotateX", rotateX + "deg");
76    element.style.setProperty("--rotateY", rotateY + "deg");
77  }
78//   tiltElements(cards)
79
80//   function rotateElement(event, element){
81//     const x = event.clientX;
82//     const y = event.clientY;
83
84//     const middleX = element.innerWidth / 2;
85//     const middleY = element.innerHeight / 2;
86
87//     const offsetX = ((x-middleX)/middleX)*45;
88//     const offsetY = ((x-middleY)/middleY)*45;
89
90//     element.style.setProperty("--rotateX", offsetX+"deg");
91//     element.style.setProperty("--rotateY", offsetY+"deg");
92//   }
93}
94