th/th-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

naja neon

Browse Source
This commit is contained in:
T-A-H-prog
2026-05-06 20:11:55 +02:00
parent c3075328a3
commit 0c91356320
4 changed files with 93 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>th</title> <title>th</title>

BIN
src/assets/fonts/IBMPlexMono-Medium.woff2 Normal file
View File

Binary file not shown.

9
src/components/sections/ImageSection.vue
View File

@@ -130,15 +130,6 @@ onUnmounted(() => {
richtet, damit dies ein schön belebter Wohnort für die selber in richtet, damit dies ein schön belebter Wohnort für die selber in
Schönheit vollendete Menschheit sei. (Ebd.) Schönheit vollendete Menschheit sei. (Ebd.)
</p> </p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p> <p>
Nach Hegel (1770–1831) offenbart sich Gott in Natur und Kunst unter der Nach Hegel (1770–1831) offenbart sich Gott in Natur und Kunst unter der
Form der Schönheit. Gott äußert sich auf zweierlei Weise: in dem Objekt Form der Schönheit. Gott äußert sich auf zweierlei Weise: in dem Objekt

132
src/components/sections/IntroductionSection.vue
View File

@@ -13,22 +13,51 @@ let split;
let animation; let animation;
function createTween() { function createTween() {
split = SplitText.create(".text", { type: "chars,words,lines" }); split = SplitText.create(".text", { type: "words" });
animation = gsap.from(split.lines, { const tl = gsap.timeline({
rotationX: -100,
transformOrigin: "50% 50% -160px",
opacity: 0,
duration: 0.8,
ease: "power3",
stagger: 0.25,
scrollTrigger: { scrollTrigger: {
trigger: ".text", trigger: ".text",
start: "top 80%", start: "top 75%",
toggleActions: "play none none none", toggleActions: "play none none none",
// markers: true
}, },
}); });
tl.set(".block", {
borderColor: "#fff",
boxShadow: "0 0 0px #fff",
opacity: 0.3,
});
// Flicker
tl.to(".block", {
opacity: 1,
duration: 0.05,
stagger: 0.1,
})
.to(".block", { opacity: 0.4, duration: 0.05, stagger: 0.1 })
.to(".block", { opacity: 1, duration: 0.1 })
.to(".block", { opacity: 0.6, duration: 0.05 })
.to(".block", { opacity: 1, duration: 0.2 });
// Glow aufbauen
tl.to(
".block",
{
boxShadow: "0 0 20px #fff, 0 0 10px #fff",
duration: 0.6,
ease: "power2.out",
},
"-=0.3",
);
tl.from(split.words, {
y: 30, // kleine Bewegung statt Rotation
opacity: 0,
duration: 0.8,
ease: "power2.out", // weicher als power3
stagger: 0.05, // subtiler
});
} }
onMounted(() => { onMounted(() => {
@@ -51,51 +80,76 @@ function handleResize() {
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", handleResize); window.removeEventListener("resize", handleResize);
ctx?.revert(); // killt ALLES inkl. ScrollTrigger & SplitText sauber ctx?.revert();
}); });
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<div class="text"> <div class="grid">
Welcome to my page!<br /> <div class="block header text">
This site is currently under construction, and I’ll be adding new things Welcome to my page!<br />
over time.<br /> This site is currently under construction, and I’ll be adding new things
I’m a full-stack developer who wants to improve in design and front-end over time.
development.<br /> </div>
This space is where I’ll build projects, experiment, and share what I
create along the way. <div class="block mid text">
I’m a full-stack developer who wants to improve in design and front-end
development.<br />
</div>
<div class="block sidebar text">
This space is where I’ll build projects, experiment, and share what I
create along the way.
</div>
<!-- <div class="block footer">Footer</div> -->
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.container { .container {
position: relative;
width: 100vw; width: 100vw;
display: flex; min-height: 1vh;
flex-direction: column; padding: 20px;
align-items: center; box-sizing: border-box;
justify-content: space-evenly; }
border-radius: 9px;
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 1fr auto;
gap: 40px;
height: 100%;
}
.block {
border: 2px solid #fff;
padding: 20px;
border-radius: 8px;
color: white;
} }
.text { .text {
font-family: Courier New; font-family: Courier New;
color: #ffffff; font-size: clamp(1.5rem, 3vw, 5rem);
font-size: clamp(2rem, 4vw, 9rem); }
line-height: 1.2; .header {
box-sizing: border-box; grid-column: 1 / -1;
padding: 5%;
width: 100%;
text-align: center;
perspective: 500px; perspective: 500px;
} }
.button-wrapper { .mid {
display: flex; grid-column: 2;
align-items: center; line-height: 1.2;
justify-content: center; perspective: 500px;
gap: 10px; }
flex-wrap: wrap;
.sidebar {
grid-column: 1/ -1;
perspective: 500px;
}
.footer {
grid-column: 1 / -1;
} }
</style> </style>