From dd03f1f69fef39d35e397906b810d31a56de7cfe Mon Sep 17 00:00:00 2001 From: thinkpad Date: Fri, 19 Jun 2026 22:57:17 +0200 Subject: [PATCH] swiss layout --- package-lock.json | 8 +- package.json | 2 +- src/components/sections/ImageSection.vue | 7 +- .../sections/IntroductionSection.vue | 83 ++++++++++++------- 4 files changed, 64 insertions(+), 36 deletions(-) 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() {
- +
Die Schweizer** https://en.wikipedia.org/wiki/Swiss_Style_(design)
-

Tom Alexander Herpel

+

Tom Alexander Herpel

- Welcome to my page.
- This space is currently under construction. +

-

- Here you’ll find creative projects and ideas that inspire me at the - moment. +

+

-

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; +}