fosc/new.fosc.space
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
Pablo Moyano 2023-10-06 20:10:26 +02:00
parent 12fbb048f4
commit 4f44e0f880
4 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -20,6 +20,7 @@
"lucide-react": "^0.274.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.69.0",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3",
"tailwindcss-animate": "^1.0.7",
@ -2507,6 +2508,11 @@
}
]
},
"node_modules/immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
},
"node_modules/import-meta-resolve": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
@ -5212,6 +5218,22 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"node_modules/sass": {
"version": "1.69.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.0.tgz",
"integrity": "sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sax": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",

1
package.json
View File

@ -22,6 +22,7 @@
"lucide-react": "^0.274.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.69.0",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3",
"tailwindcss-animate": "^1.0.7",

70
src/components/Badge.astro
View File

@ -1,44 +1,42 @@
---
import foscLogo from "../assets/img/fosc-logo-old.png";
import { Image } from "astro:assets";
---
<div id="container" class="h-[30vh]">
<Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
<Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
</div>
<style>
#logo {
#logo {
/* Add border styles to create thickness */
border: -2px solid #ccc; /* Adjust border width for thickness */
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
}
/* Add border styles to create thickness */
border: -2px solid #ccc; /* Adjust border width for thickness */
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
}
#container {
perspective: 400px; /* Add perspective to the container for 3D effect */
}
#container {
perspective: 400px; /* Add perspective to the container for 3D effect */
}
</style>
<script>
// script.ts
interface LogoElement extends HTMLElement {
// script.ts
interface LogoElement extends HTMLElement {
rotationX: number;
rotationY: number;
}
}
const logo = document.querySelector("#logo") as LogoElement;
const logoContainer = document.querySelector("#container") as HTMLElement;
const logo = document.querySelector("#logo") as LogoElement;
const logoContainer = document.querySelector("#container") as HTMLElement;
let sensitivity = 100; // Adjust the sensitivity as needed
let mouseX = 0;
let mouseY = 0;
let targetRotationX = 0;
let targetRotationY = 0;
let sensitivity = 100; // Adjust the sensitivity as needed
let mouseX = 0;
let mouseY = 0;
let targetRotationX = 0;
let targetRotationY = 0;
function updateLogoRotation() {
function updateLogoRotation() {
const { left, top, width, height } = logoContainer.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
@ -48,9 +46,9 @@ function updateLogoRotation() {
targetRotationX = -dy;
targetRotationY = dx;
}
}
function animateRotation() {
function animateRotation() {
const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions
const dx = targetRotationX - logo.rotationX;
@ -62,27 +60,25 @@ function animateRotation() {
logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;
requestAnimationFrame(animateRotation);
}
}
document.addEventListener('mousemove', (e: MouseEvent) => {
document.addEventListener("mousemove", (e: MouseEvent) => {
mouseX = e.clientX;
mouseY = e.clientY;
updateLogoRotation();
});
});
document.addEventListener('mouseleave', () => {
document.addEventListener("mouseleave", () => {
mouseX = 0;
mouseY = 0;
targetRotationX = 0;
targetRotationY = 0;
updateLogoRotation();
});
// Initial rotation values
logo.rotationX = 0;
logo.rotationY = 0;
animateRotation();
});
// Initial rotation values
logo.rotationX = 0;
logo.rotationY = 0;
animateRotation();
</script>

2
src/components/HackerText.astro
View File

@ -6,7 +6,7 @@ interface Props {
const { text } = Astro.props;
---
<p id="text" data-value={text} class="mt-4 text-center text-7xl font-['Researcher']">{text}</p>
<p id="text" data-value={text} class="drop-shadow-lg mt-4 text-center text-7xl font-['Researcher']">{text}</p>
<script>
// Code I stole