Ledda/djledda-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2024-11-01 18:50:26 +01:00
parent 7539e6ed48
commit f8a0cd50f8
7 changed files with 143 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/home/DJHomeRoot.tsx Normal file
View File

@@ -0,0 +1,102 @@
import { defineComponent, computed, ref, type Ref } from "vue";
import useHead from "@/useHead.ts";
import DJTooltip, { setupTooltip } from "@/DJTooltip.tsx";
import DJEmail from "@/DJEmail.tsx";
export default defineComponent({
name: "app-root",
setup() {
useHead({ title: "DJ Ledda's Homepage" });
const tooltipCarrier = ref<HTMLDivElement | null>(null);
setupTooltip({ carrier: tooltipCarrier });
const dude1Spinning = ref(false);
const dude2Spinning = ref(false);
function toggleDude(event: MouseEvent, dudeRef: Ref<boolean>) {
const dude = event.target as HTMLImageElement;
if (dudeRef.value) {
dude.addEventListener("animationiteration", function listener() {
dudeRef.value = false;
dude.removeEventListener("animationiteration", listener as EventListenerOrEventListenerObject);
});
} else {
dudeRef.value = true;
}
}
const shaking = computed(() => dude1Spinning.value || dude2Spinning.value);
return () => <>
<div ref={tooltipCarrier} class="tooltip-carrier" />
<div class="supercontainer">
<div class={{ shakeable: true, shakeMe: shaking.value }}>
<div class="title_name">
<DJTooltip tooltip="I wonder what he's listening to?">
<img src="/home/img/dj.gif" alt="dj legt krasse Mucke auf"
class={{ dude: true, spinMe: dude1Spinning.value }}
onClick={ (e) => toggleDude(e, dude1Spinning)} />
</DJTooltip>
<DJTooltip tooltip="Easily the coolest guy out there.">
<span>DJ Ledda</span>
</DJTooltip>
<DJTooltip tooltip="I once heard this guy played at revs.">
<img src="/home/img/dj.gif" alt="dj laying down some sick beats"
class={{ dude: true, spinMe: dude2Spinning.value }}
onClick={ (e) => toggleDude(e, dude2Spinning) } />
</DJTooltip>
</div>
<div class="main">
<div class="subject">
<div class="resourcelist">
<a href="https://drum-slayer.com">
<DJTooltip class="resource" tooltip="Small app for designing multitrack looped rhythms with local save and multiple files. Originally built using just vanilla TypeScript and CSS, now with Vue.">
Drum Slayer
</DJTooltip>
</a>
<a href="/somaesque">
<DJTooltip class="resource" tooltip="Puzzle solver app for puzzle cubes resembling the original Soma Cube puzzle. Save and edit your own puzzles! Built with Svelte, THREE.js and AssemblyScript.">
Somaesque
</DJTooltip>
</a>
<a href="/generative-energy">
<DJTooltip class="resource" tooltip="Thyroid calculator, German translations, and more...">
Generative Energy - Ray Peat Resources
</DJTooltip>
</a>
<a href="/home/muenchen-auf-englisch.html">
<DJTooltip class="resource" tooltip="
Authentic historically accurate translations of all of Munich's S-Bahn and U-Bahn
stations, as well as the main municipalities, into English. You live in Allach? It's
Axleigh now. Giesing? Nope! Kyesing! This is a WIP.
">
München auf Englisch - Munich in English
</DJTooltip>
</a>
<a href="/kadi/">
<DJTooltip class="resource" tooltip="Make an account and start saving paper and tracking your Yatzy stats with your
friends! Make your own rulesets, and more. Built with React, express.js, and
MongoDB. Currently inactive.">
K A D I: Online Yatzy Scoresheets
</DJTooltip>
</a>
<a href="http://git.djledda.de/Ledda">
<DJTooltip class="resource" tooltip="Check out what I'm coding!">
My git projects
</DJTooltip>
</a>
<DJEmail>
<DJTooltip class="resource" tooltip="You'll see my address when you click here.">
Click here to get in touch
</DJTooltip>
</DJEmail>
</div>
</div>
</div>
<div id="tooltipCarrier"></div>
</div>
</div>
</>;
},
});