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

Compare commits

base: fosc:12fbb048f4bf989c929c42c2e04417a23577550d
Branches Tags
fosc:main
..
compare: fosc:70b7242199e26cb450aec5d049feac49ccf94254
Branches Tags
fosc:main

No commits in common. "12fbb048f4bf989c929c42c2e04417a23577550d" and "70b7242199e26cb450aec5d049feac49ccf94254" have entirely different histories.
12fbb048f4 ... 70b7242199

6 changed files with 19 additions and 108 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/img/fosc-logo-old.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 147 KiB

88
src/components/Badge.astro
View File

@ -1,88 +0,0 @@
---
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" />
</div>
<style>
#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 */
}
#container {
perspective: 400px; /* Add perspective to the container for 3D effect */
}
</style>
<script>
// script.ts
interface LogoElement extends HTMLElement {
rotationX: number;
rotationY: number;
}
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;
function updateLogoRotation() {
const { left, top, width, height } = logoContainer.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const dx = (mouseX - centerX) / sensitivity;
const dy = (mouseY - centerY) / sensitivity;
targetRotationX = -dy;
targetRotationY = dx;
}
function animateRotation() {
const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions
const dx = targetRotationX - logo.rotationX;
const dy = targetRotationY - logo.rotationY;
logo.rotationX += dx * smoothingFactor;
logo.rotationY += dy * smoothingFactor;
logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;
requestAnimationFrame(animateRotation);
}
document.addEventListener('mousemove', (e: MouseEvent) => {
mouseX = e.clientX;
mouseY = e.clientY;
updateLogoRotation();
});
document.addEventListener('mouseleave', () => {
mouseX = 0;
mouseY = 0;
targetRotationX = 0;
targetRotationY = 0;
updateLogoRotation();
});
// 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="mt-4 text-center text-white text-7xl font-['Researcher']">{text}</p>
<script>
// Code I stole

8
src/components/NavItem.astro
View File

@ -6,4 +6,10 @@ interface Props {
const { href, title } = Astro.props;
---
<li><a href={href}>{title}</a></li>
<li>
<a
href={href}
class=""
>{title}
</a>
</li>

12
src/components/Navbar.astro
View File

@ -6,7 +6,7 @@ import NavItem from "./NavItem.astro";
import foscLogo from '../assets/img/fosc-logo-new.png'
---
<div class="navbar bg-base-100 backdrop-blur backdrop-brightness-50 drop-shadow-lg">
<div class="navbar backdrop-blur backdrop-brightness-50 drop-shadow-lg">
<div class="navbar-start">
<!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->
@ -48,15 +48,7 @@ import foscLogo from '../assets/img/fosc-logo-new.png'
<div class="navbar-end">
<select class="select select-ghost" data-choose-theme>
<option value="">Default</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="cyberpunk">Cyberpunk</option>
<option value="black">Black</option>
<option value="retro">Retro</option>
<option value="synthwave">Synthwave</option>
</select>
<button class="btn btn-ghost" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS">🌚</button>
</div>

15
src/pages/index.astro
View File

@ -3,7 +3,6 @@ import "@/styles/globals.css";
import Navbar from "../components/Navbar.astro";
import HackerText from "../components/HackerText.astro";
import Badge from "../components/Badge.astro"
// Image imports
import { Image } from "astro:assets";
@ -49,15 +48,17 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
<!-- Floating center items -->
<div class="container-sm mx-auto px-4 flex flex-col justify-center items-center">
<div class="mt-[10vh]">
<Badge></Badge>
<div class="mt-[10vh] h-[30vh]">
<Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
</div>
<div class="mt-[5vh]">
<HackerText text="FOSC"></HackerText>
</div>
</div>
<div class="container mx-auto flex justify-center items-center">
<button class="btn" data-set-theme="" data-act-class="ACTIVECLASS">none</button>
<button class="btn" data-set-theme="light" data-act-class="ACTIVECLASS">light</button>
<button class="btn" data-set-theme="dark" data-act-class="ACTIVECLASS">dark</button>
<button class="btn" data-set-theme="cyberpunk" data-act-class="ACTIVECLASS">cyber</button>
</div>
@ -67,9 +68,9 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
</html>
<style>
/* body {
body {
background-color: black !important;
background-image: url(../img/coreboot2.webp);
} */
}
</style>