Initial commit
This commit is contained in:
T-A-H-prog
66
src/components/sections/HeroSection.vue
Normal file
66
src/components/sections/HeroSection.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue"
|
||||
import gsap from "gsap"
|
||||
import ScrollTrigger from "gsap/ScrollTrigger"
|
||||
import { ScrollSmoother } from 'gsap/ScrollSmoother';
|
||||
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const section = ref<HTMLElement | null>(null)
|
||||
let ctx
|
||||
|
||||
onMounted(() => {
|
||||
ctx = gsap.context(() => {
|
||||
gsap.from(".hero-title", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1.2,
|
||||
ease: "power3.out",
|
||||
scrollTrigger: {
|
||||
trigger: section.value,
|
||||
start: "top 80%",
|
||||
end: "top 50%",
|
||||
scrub: true
|
||||
}
|
||||
})
|
||||
|
||||
gsap.from(".hero-sub", {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
delay: 0.3,
|
||||
scrollTrigger: {
|
||||
trigger: section.value,
|
||||
start: "top 80%",
|
||||
end: "top 50%",
|
||||
scrub: true
|
||||
}
|
||||
})
|
||||
}, section)
|
||||
})
|
||||
|
||||
onUnmounted(() => ctx.revert())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section ref="section" class="hero">
|
||||
<h1 class="hero-title">Welcome</h1>
|
||||
<p class="hero-sub">Tom Herpel</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
background: #0f0f0f;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: clamp(3rem, 6vw, 6rem);
|
||||
}
|
||||
</style>
|
||||
151
src/components/sections/ImageSection.vue
Normal file
151
src/components/sections/ImageSection.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<script setup lang="ts">
|
||||
import ski from '../../assets/myself/ski.png'
|
||||
import book from '../../assets/myself/SmartTom.jpeg'
|
||||
import surf from '../../assets/myself/surf.png'
|
||||
import boxen from '../../assets/myself/TOm.jpg'
|
||||
import florencs from '../../assets/myself/15.jpg'
|
||||
import schnee from '../../assets/myself/DSCN1921.jpg'
|
||||
import water from '../../assets/myself/27-2.jpg'
|
||||
import gopro from '../../assets/myself/GOPR0521.png'
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<section class="image-section">
|
||||
<div class="gallery-wrap">
|
||||
<div class="gallery gallery--bento gallery--switch" id="gallery-8">
|
||||
<div class="gallery__item">
|
||||
<img :src=boxen alt="" />
|
||||
</div>
|
||||
<div class="gallery__item">
|
||||
<img :src=gopro alt="" />
|
||||
</div>
|
||||
<div class="gallery__item">
|
||||
<img :src=schnee alt="" />
|
||||
</div>
|
||||
<div class="gallery__item">
|
||||
<img :src=surf alt="" />
|
||||
</div>
|
||||
<div class="gallery__item">
|
||||
<img :src="florencs" alt="" />
|
||||
</div>
|
||||
<div class="gallery__item">
|
||||
<img :src=book alt="" />
|
||||
</div>
|
||||
<div class="gallery__item">
|
||||
<img :src=ski alt="" />
|
||||
</div>
|
||||
<div class="gallery__item">
|
||||
<img :src=water alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Here is some content</h2>
|
||||
<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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.gallery-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.gallery__item {
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
flex: none;
|
||||
position: relative;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery--bento {
|
||||
display: grid;
|
||||
gap: 1vh;
|
||||
grid-template-columns: repeat(3, 32.5vw);
|
||||
grid-template-rows: repeat(4, 23vh);
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.gallery--final.gallery--bento {
|
||||
grid-template-columns: repeat(3, 100vw);
|
||||
grid-template-rows: repeat(4, 49.5vh);
|
||||
gap: 1vh;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(1) {
|
||||
grid-area: 1 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(2) {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(3) {
|
||||
grid-area: 2 / 2 / 4 / 3;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(4) {
|
||||
grid-area: 1 / 3 / 3 / 3;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(5) {
|
||||
grid-area: 3 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(6) {
|
||||
grid-area: 3 / 3 / 5 / 4;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(7) {
|
||||
grid-area: 4 / 1 / 5 / 2;
|
||||
}
|
||||
|
||||
.gallery--bento .gallery__item:nth-child(8) {
|
||||
grid-area: 4 / 2 / 5 / 3;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 2rem 5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
99
src/components/sections/TextSection.vue
Normal file
99
src/components/sections/TextSection.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue"
|
||||
import gsap from "gsap"
|
||||
import ScrollTrigger from "gsap/ScrollTrigger"
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const section = ref(null)
|
||||
let ctx
|
||||
|
||||
onMounted(() => {
|
||||
ctx = gsap.context(() => {
|
||||
|
||||
gsap.from(".fade-text", {
|
||||
opacity: 0,
|
||||
y: 50,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: section.value,
|
||||
start: "top 70%"
|
||||
}
|
||||
})
|
||||
|
||||
gsap.to(".highlight", {
|
||||
backgroundSize: "100% 100%",
|
||||
scrollTrigger: {
|
||||
trigger: ".highlight",
|
||||
start: "top 80%",
|
||||
end: "top 50%",
|
||||
scrub: true
|
||||
}
|
||||
})
|
||||
|
||||
}, section)
|
||||
})
|
||||
|
||||
onUnmounted(() => ctx.revert())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section ref="section" class="text-section">
|
||||
<h2 class="fade-text">
|
||||
Do you want to see where I used to study?
|
||||
<!-- A blog that <span class="highlight">moves with you</span> -->
|
||||
</h2>
|
||||
<p class="fade-text">
|
||||
</p>
|
||||
<router-link to="/experience">
|
||||
<button class="btn">Zur Experience</button>
|
||||
</router-link>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.text-section {
|
||||
min-height: 100vh;
|
||||
background: #111;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 6rem 10%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(90deg, #ffffff, #ffffff);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% 100%;
|
||||
background-position: left;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.btn {
|
||||
background-color: white;
|
||||
color: #1a1a2e; /* dunkler Text */
|
||||
border: none;
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user