Add hax0r message

This commit is contained in:
Pablo Moyano 2023-09-11 03:04:11 +02:00
parent 8cce061cf5
commit a8f61d97ea
4 changed files with 63 additions and 1 deletions

BIN
public/fonts/Researcher.otf Normal file

Binary file not shown.

View File

@ -0,0 +1,54 @@
---
interface Props {
text: string;
}
const { text } = Astro.props;
---
<p id="text" data-value={text} class="mt-4 text-center text-white font-mono text-7xl">{text}</p>
<script>
// Code I stole
const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const targetElement = document.querySelector("#text") as HTMLElement;
function performTrick() {
let interval = 0;
let iteration = 0;
clearInterval(interval);
const originalText = targetElement.dataset.value || "";
interval = setInterval(() => {
targetElement.innerText = originalText
.split("")
.map((letter, index) => {
if (index < iteration) {
return originalText[index];
}
return alphabet[
Math.floor(Math.random() * alphabet.length)
];
})
.join("");
if (iteration >= originalText.length) {
clearInterval(interval);
}
iteration += 1 / 3;
}, 30);
}
performTrick();
// Rerun trick on mouseover
if (targetElement) {
targetElement.addEventListener("mouseover", (event) => {
performTrick();
});
}
</script>

View File

@ -3,6 +3,7 @@ import "@/styles/globals.css";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import HackerText from "../components/HackerText.astro";
import foscLogo from "../assets/img/fosc-logo-old.png"; import foscLogo from "../assets/img/fosc-logo-old.png";
--- ---
@ -30,7 +31,7 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
<div class="mt-[10vh] h-[30vh]"> <div class="mt-[10vh] h-[30vh]">
<Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo" /> <Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
</div> </div>
<p class="mt-4 text-center text-white">Welcome to FOSC</p> <HackerText text="FOSC"></HackerText>
</div> </div>
</div> </div>
@ -40,6 +41,8 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
<style> <style>
body { body {
background-color: black !important;
background-image: url(../img/coreboot2.webp); background-image: url(../img/coreboot2.webp);
} }
</style> </style>

View File

@ -1,4 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = { module.exports = {
darkMode: ["class"], darkMode: ["class"],
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
@ -11,6 +13,9 @@ module.exports = {
}, },
}, },
extend: { extend: {
fontFamily: {
mono: ["Researcher", ...defaultTheme.fontFamily.sans],
},
colors: { colors: {
border: "hsl(var(--border))", border: "hsl(var(--border))",
input: "hsl(var(--input))", input: "hsl(var(--input))",