scuffed birthday thing

src/App.css

@@ -37,6 +37,7 @@
   margin: 1em;
 }
 
+
 .musicdiv {
   background-color: rgba(0, 0, 0, 0.731);
   position: fixed;
@@ -111,15 +112,12 @@
 }
 
 .header {
-  margin-top: 2em;
+  margin-top: 6em;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.header img:hover {
-  animation: bigsmall .5s infinite;
-}
 
 .cardchild h1 {
   font-size: 3em;
@@ -305,7 +303,6 @@
   border-radius: 25%;
   margin-right: 1em;
   vertical-align: middle;
-  max-width: 10em;
   animation: slide-left 1.5s;
 }
 

src/App.tsx

@@ -1,13 +1,15 @@
 import './App.css'
-import HoverComponent from './components/name.tsx'
 import AdvancedBr from './components/comps.tsx'
 import { createSignal, onMount } from 'solid-js';
 import Reviews from './components/api.tsx';
 import Music, { MusicEntry } from './components/music.tsx';
+import {Bdpfp, Normalpfp} from './components/pfp.tsx';
 export const [shouldpopup, setpopup] = createSignal(false)
 export const [ishover, setishover] = createSignal(false)
 
-function getRandomVivsieWord(){
+const isitmybd = () => new Date().toISOString().slice(5, 10) === '08-22';
+
+function getRandomVivsieWord() {
   const words = [
     "fuck",
     "shit",
@@ -31,18 +33,7 @@ function vivsiepop() {
 }
 
 function App() {
-  function remov() {
-    for (let i = 0; i < document.styleSheets.length; i++) {
-      let styleSheet = document.styleSheets[i];
-      let rules = styleSheet.cssRules || styleSheet.rules;
-      for (let j = 0; j < rules.length; j++) {
-        let rule = rules[j];
-        if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
-          styleSheet.deleteRule(j);
-        }
-      }
-    }
-  }
+
   const [musicList, setMusicList] = createSignal<string[]>([]);
   const [isLoading, setIsLoading] = createSignal(true);
   const [isAnimating, setIsAnimating] = createSignal(false);
@@ -67,11 +58,13 @@ function App() {
   }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
   return (
     <>
-      <div class='header'>
-        <img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" />
-        <HoverComponent />
+      {/* <div onmouseenter={remov} class='header'>
+        <div>
+          <Normalpfp />
         </div>
-
+        <HoverComponent />
+      </div> */}
+      {isitmybd() ? <Bdpfp /> : <Normalpfp/>}
 
       <p style={{ display: "none" }}>AdvancedBr my beloved</p>
       <AdvancedBr count={6} />

src/components/pfp.css

@@ -0,0 +1,27 @@
+.birthdayparent {
+    position: relative;
+}
+
+.header .bd {
+    flex-direction: column;
+    margin-left: 10em;
+}
+
+.birthday {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-left: -12em;
+}
+
+.birthdaypfp {
+    z-index: 1;
+    max-width: 10em;
+}
+
+.birthdayhat {
+    z-index: 2;
+    width: 14em;
+    top: -3em;
+    left: -1em;
+}

src/components/pfp.tsx

@@ -0,0 +1,34 @@
+import HoverComponent from "./name"
+import "./pfp.css"
+
+function remov() {
+    for (let i = 0; i < document.styleSheets.length; i++) {
+        let styleSheet = document.styleSheets[i];
+        let rules = styleSheet.cssRules || styleSheet.rules;
+        for (let j = 0; j < rules.length; j++) {
+            let rule = rules[j];
+            if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
+                styleSheet.deleteRule(j);
+            }
+        }
+    }
+}
+
+export function Bdpfp() {
+    return <div onmouseenter={remov} class='header bd' >
+        <div class="birthdayparent">
+            <img class='birthdaypfp birthday' src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" />
+            <img class='birthdayhat birthday' src="./birthday.png" alt="" />
+            <HoverComponent />
+        </div>
+    </div>
+
+}
+
+export function Normalpfp() {
+    return <div class="birthdayparent header normal">
+        <img src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" />
+        <HoverComponent />
+    </div>
+
+}