diff --git a/package-lock.json b/package-lock.json
index 04dc048..0aa28b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
"@vitejs/plugin-vue": "^6.0.4",
"@vue/tsconfig": "^0.8.1",
"typescript": "~5.9.3",
- "vite": "^7.3.1",
+ "vite": "^7.3.5",
"vue-tsc": "^3.1.5"
}
},
@@ -1544,9 +1544,9 @@
"license": "MIT"
},
"node_modules/vite": {
- "version": "7.3.2",
- "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
- "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
+ "version": "7.3.5",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.5.tgz",
+ "integrity": "sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==",
"dev": true,
"license": "MIT",
"dependencies": {
diff --git a/package.json b/package.json
index f60b670..415a5ff 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"@vitejs/plugin-vue": "^6.0.4",
"@vue/tsconfig": "^0.8.1",
"typescript": "~5.9.3",
- "vite": "^7.3.1",
+ "vite": "^7.3.5",
"vue-tsc": "^3.1.5"
}
}
diff --git a/src/components/sections/ImageSection.vue b/src/components/sections/ImageSection.vue
index 7a4be40..e405323 100644
--- a/src/components/sections/ImageSection.vue
+++ b/src/components/sections/ImageSection.vue
@@ -13,10 +13,12 @@ import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/dist/Flip";
+
(gsap.registerPlugin(ScrollTrigger), gsap.registerPlugin(Flip));
const section = ref(null);
const gallery = ref(null);
+const img_daten = ref(null);
let ctx;
let flipCtx;
@@ -48,7 +50,10 @@ const createTween = () => {
.add(flip);
};
+
onMounted(() => {
+
+
ctx = gsap.context(() => {
createTween();
@@ -75,7 +80,7 @@ onUnmounted(() => {
ref="gallery"
>
-
![]()
+
![]()
diff --git a/src/components/sections/IntroductionSection.vue b/src/components/sections/IntroductionSection.vue
index 286045f..df62d60 100644
--- a/src/components/sections/IntroductionSection.vue
+++ b/src/components/sections/IntroductionSection.vue
@@ -2,9 +2,10 @@
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
-import SplitText from "gsap/SplitText";
+// import SplitText from "gsap/SplitText";
+import ScrambleTextPlugin from "gsap/ScrambleTextPlugin";
-gsap.registerPlugin(ScrollTrigger, SplitText);
+gsap.registerPlugin(ScrollTrigger, ScrambleTextPlugin);
const section = ref(null);
@@ -15,32 +16,43 @@ const date = ref("--:--");
const time = ref("");
let interval;
+const textHeader = "Welcome to my page. This space is currently under construction."
+const texteSub = "Here you’ll find creative projects and ideas that inspire me at the moment."
+
function createTween() {
animation?.kill();
- split = SplitText.create(".text", {
- type: "words",
- });
- animation = gsap.from(split.words, {
- y: 30,
- opacity: 0,
- duration: 0.9,
- ease: "power2.out",
- stagger: 0.05,
+
+ //use the defaults
+// gsap.to(".textblock__header", {duration: 1, scrambleText: "THIS IS NEW TEXT"});
+ animation = gsap.timeline();
+
+ animation.to(".textblock__header", {
+ duration: 1,
+ scrambleText: {
+ text: textHeader,
+ chars: "TH",
+ revealDelay: 0.5,
+ speed: 0.7,
+ newClass: "myClass"
+ }
+}).to(".textblock__subheader", {
+ duration :1,
+ scrambleText: {
+ text: texteSub,
+ chars: "TH",
+ revealDelay: 0.5,
+ speed: 0.7,
+ newClass: "myClass"
+ }
+});
- scrollTrigger: {
- trigger: section.value,
- start: "top 10%",
- toggleActions: "play none none none",
- },
- });
}
onMounted(() => {
ctx = gsap.context(() => {
createTween();
-
- window.addEventListener("resize", handleResize);
+ window.addEventListener(".text", handleResize);
}, section.value);
requestAnimationFrame(() => {
@@ -65,6 +77,7 @@ onUnmounted(() => {
window.removeEventListener("resize", handleResize);
ctx?.revert();
clearInterval(interval);
+
});
function getTimeDate() {
@@ -92,21 +105,19 @@ function getTimeDate() {
-
+
-
+
Tom Alexander Herpel
-
Oldenburg, Germany
+
Oldenburg, Germany
{{time}} {{date.value}}
@@ -131,7 +142,7 @@ function getTimeDate() {
.b-three,
.b-four,
.b-five {
- background: var(--black-clr);
+ background: #ffffff;
}
.b-one {
@@ -156,7 +167,14 @@ function getTimeDate() {
.b-five {
grid-column: 30 / 34;
- grid-row: 1 / 11;
+ grid-row: 4 / 11;
+}
+.b-six {
+
+ grid-column: 30 / 34;
+ grid-row: 12/ 13;
+ font-size: 0.85rem;
+
}
/* Textbereich */
@@ -168,7 +186,7 @@ function getTimeDate() {
color: var(--black-clr);
}
-.textblock__subheader {
+.fontStyle {
font-size: 1rem;
font-weight: 500;
margin-bottom: 1rem;
@@ -193,4 +211,9 @@ function getTimeDate() {
font-family: Courier New;
font-size: clamp(1.5rem, 3vw, 5rem);
}
+
+a {
+ color: #ffffff;
+ white-space:nowrap;
+}