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

big style update

Browse Source
This commit is contained in:
Daniel Ledda
2025-12-20 21:16:00 +01:00
parent 51e44db779
commit 498cb37561
17 changed files with 562 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app/home/DjHomeRoot.tsx
View File

@@ -1,63 +1,88 @@
import { defineComponent, computed, ref, type Ref } from "vue";
import { defineComponent, ref, type Ref } from "vue";
import useHead from "@/useHead.ts";
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
import DjEmail from "@/DjEmail.tsx";
import { addCSS, css } from "@/util.ts";
const styles = css`
:root {
--subject-spacing: 40px;
}
.resource {
margin-bottom: 10px;
}
.title_name {
font-size: 48px;
color: var(--dj-palette3);
text-align: center;
}
.supercontainer {
padding-top: 3em;
margin: auto;
}
.main {
width: 50em;
margin: 20px auto;
text-align: center;
}
@media only screen and (max-width: 1024px) {
.main {
width: 35em;
padding: 20px;
}
:root {
--subject-spacing: 20px;
}
}
@media only screen and (max-width: 768px) {
.title_name {
font-size: 30px;
}
.main {
width: 20em;
padding: 20px;
}
}
a {
color: var(--dj-palette3);
&:visited {
color: var(--dj-visited);
}
}
`;
export default defineComponent({
name: "app-root",
name: "DjHomeRoot",
setup() {
useHead({ title: "DJ Ledda's Homepage" });
addCSS('DjHomeRoot', styles);
useHead({ title: "djledda" });
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>
<div>
<div class="dj-title title_name">
<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) } />
<span>dj ledda</span>
</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/index.html">
<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
<a href="/blog">
<DjTooltip class="resource" tooltip="My musings, my losings, my winnings, my thoughts">
Blog
</DjTooltip>
</a>
<a href="/generative-energy">
@@ -65,6 +90,11 @@ export default defineComponent({
Generative Energy - Ray Peat Resources
</DjTooltip>
</a>
<a href="https://git.djledda.net/Ledda">
<DjTooltip class="resource" tooltip="Check out what I'm coding!">
My git projects
</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
@@ -74,6 +104,16 @@ export default defineComponent({
M&uuml;nchen auf Englisch - Munich in English
</DjTooltip>
</a>
<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/index.html">
<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="/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
@@ -81,11 +121,6 @@ export default defineComponent({
K A D I: Online Yatzy Scoresheets
</DjTooltip>
</a>
<a href="https://git.djledda.net/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
@@ -94,7 +129,6 @@ export default defineComponent({
</div>
</div>
</div>
<div id="tooltipCarrier"></div>
</div>
</div>
</>;