slim landing page
This commit is contained in:
T-A-H-prog
@@ -28,7 +28,6 @@ function createTween() {
|
||||
scrollTrigger: {
|
||||
trigger: ".poster",
|
||||
pin: true,
|
||||
markers: true,
|
||||
start: "top top",
|
||||
end: "+=500",
|
||||
},
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref, nextTick } from "vue";
|
||||
|
||||
import MonitorModel from "/src/components/sections/MonitorModel.vue";
|
||||
import MonitorModel from "../../components/big/MonitorModel.vue";
|
||||
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||
539
src/components/slim/AboutMe.vue
Normal file
539
src/components/slim/AboutMe.vue
Normal file
@@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<main class="page">
|
||||
<div class="parent">
|
||||
<!-- TOP LEFT -->
|
||||
<div class="div3">
|
||||
<span>Portfolio / 01</span>
|
||||
</div>
|
||||
|
||||
<!-- TOP CENTER -->
|
||||
<div class="div12">
|
||||
<span>About me</span>
|
||||
</div>
|
||||
|
||||
<!-- TOP RIGHT -->
|
||||
<div class="div10">
|
||||
<span>Back ↗</span>
|
||||
</div>
|
||||
|
||||
<!-- MAIN -->
|
||||
<section class="div2">
|
||||
<div>
|
||||
<p class="eyebrow">Hello, I'm</p>
|
||||
|
||||
<h1 class="hero-title">
|
||||
Tom
|
||||
<span class="accent">Herpel</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="portrait">
|
||||
<img :src="tom_img" />
|
||||
</div>
|
||||
|
||||
<p class="intro">
|
||||
Designerin, Creative Thinker und jemand, der gute Ideen gerne einfach
|
||||
macht.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- RED STATEMENT -->
|
||||
<section class="div4">
|
||||
<p class="statement">
|
||||
how <br />
|
||||
am <br />
|
||||
i<br />
|
||||
?
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- SKILLS -->
|
||||
<section class="div5">
|
||||
<div>
|
||||
<span class="number">02 / 04</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="label">Skills</span>
|
||||
|
||||
<ul class="skill-list">
|
||||
<li>Branding</li>
|
||||
<li>Art Direction</li>
|
||||
<li>Web Design</li>
|
||||
<li>Typography</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LOCATION -->
|
||||
<section class="div6">
|
||||
<div>
|
||||
<span class="number">03 / 04</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="label">Based in</span>
|
||||
|
||||
<p class="small location">
|
||||
Germany<br />
|
||||
Europe
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="div8">
|
||||
<span class="copyright"> © 2026 </span>
|
||||
|
||||
<nav class="footer-links">
|
||||
<a href="#">Instagram ↗</a>
|
||||
<a href="#">Mail ↗</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import tom_img from "../../assets/myself/SmartTom.jpeg";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:global(*) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:global(html) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
background: #f3eee3;
|
||||
color: #29251f;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
VARIABLES
|
||||
-------------------------------- */
|
||||
|
||||
.page {
|
||||
--cream: #f3eee3;
|
||||
--beige-light: #efe8d9;
|
||||
--beige: #e8dfce;
|
||||
--beige-dark: #dfd3bd;
|
||||
--taupe: #d9cdb7;
|
||||
--sand: #cfc1a8;
|
||||
|
||||
--red: #c9362b;
|
||||
--black: #29251f;
|
||||
|
||||
--gap: 22px;
|
||||
--border: 1.5px solid var(--black);
|
||||
|
||||
min-height: 100vh;
|
||||
padding: 22px;
|
||||
|
||||
background: var(--cream);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
GRID
|
||||
-------------------------------- */
|
||||
|
||||
.parent {
|
||||
min-height: calc(100vh - 44px);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
grid-template-rows: repeat(8, 1fr);
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
GRID ELEMENTS
|
||||
-------------------------------- */
|
||||
|
||||
.div2 {
|
||||
grid-column: span 4 / span 4;
|
||||
grid-row: span 6 / span 6;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 2;
|
||||
|
||||
background: var(--beige);
|
||||
border: var(--border);
|
||||
|
||||
padding: 32px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 3;
|
||||
|
||||
background: var(--red);
|
||||
color: var(--cream);
|
||||
|
||||
padding: 24px;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
border: var(--border);
|
||||
}
|
||||
|
||||
.div5 {
|
||||
grid-column: span 2 / span 2;
|
||||
grid-row: span 2 / span 2;
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 4;
|
||||
|
||||
background: var(--beige-light);
|
||||
border: var(--border);
|
||||
|
||||
padding: 18px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.div6 {
|
||||
grid-column: span 2 / span 2;
|
||||
grid-row: span 2 / span 2;
|
||||
grid-column-start: 8;
|
||||
grid-row-start: 5;
|
||||
|
||||
background: var(--taupe);
|
||||
border: var(--border);
|
||||
|
||||
padding: 18px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.div8 {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-column-start: 6;
|
||||
grid-row-start: 7;
|
||||
|
||||
border-top: var(--border);
|
||||
padding-top: 12px;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.div10 {
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 1;
|
||||
|
||||
text-align: right;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.div12 {
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 1;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
TYPOGRAPHY
|
||||
-------------------------------- */
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 14px;
|
||||
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0;
|
||||
|
||||
font-size: clamp(64px, 8vw, 150px);
|
||||
line-height: 0.78;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.075em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-title span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-title .accent {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.intro {
|
||||
max-width: 460px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-size: clamp(18px, 1.8vw, 28px);
|
||||
line-height: 1.05;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.small {
|
||||
margin: 0;
|
||||
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.location {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
PORTRAIT
|
||||
-------------------------------- */
|
||||
|
||||
.portrait {
|
||||
width: 100%;
|
||||
height: 42%;
|
||||
|
||||
margin-top: 25px;
|
||||
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
RED STATEMENT
|
||||
-------------------------------- */
|
||||
|
||||
.statement {
|
||||
margin: 0;
|
||||
|
||||
font-size: clamp(24px, 3vw, 48px);
|
||||
line-height: 0.9;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.055em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
SKILLS
|
||||
-------------------------------- */
|
||||
|
||||
.skill-list {
|
||||
margin: 18px 0 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
font-size: 15px;
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.skill-list li {
|
||||
padding: 6px 0;
|
||||
|
||||
border-top: 1px solid rgba(41, 37, 31, 0.35);
|
||||
}
|
||||
|
||||
.skill-list li:last-child {
|
||||
border-bottom: 1px solid rgba(41, 37, 31, 0.35);
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
FOOTER
|
||||
-------------------------------- */
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
HOVER
|
||||
-------------------------------- */
|
||||
|
||||
.div2,
|
||||
.div4,
|
||||
.div5,
|
||||
.div6 {
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
}
|
||||
|
||||
.div2:hover {
|
||||
transform: translate(-4px, -4px);
|
||||
background: var(--beige-light);
|
||||
}
|
||||
|
||||
.div4:hover {
|
||||
transform: translate(4px, -4px);
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
.div5:hover {
|
||||
transform: translateY(-4px);
|
||||
background: var(--sand);
|
||||
}
|
||||
|
||||
.div6:hover {
|
||||
transform: translateY(4px);
|
||||
background: var(--beige-dark);
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
MOBILE
|
||||
-------------------------------- */
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.page {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.parent {
|
||||
min-height: auto;
|
||||
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.div2,
|
||||
.div3,
|
||||
.div4,
|
||||
.div5,
|
||||
.div6,
|
||||
.div8,
|
||||
.div10,
|
||||
.div12 {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.div10 {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.div12 {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
order: 4;
|
||||
|
||||
grid-column: 1 / -1;
|
||||
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
order: 5;
|
||||
|
||||
grid-column: 1 / -1;
|
||||
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.div5 {
|
||||
order: 6;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.div6 {
|
||||
order: 7;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.div8 {
|
||||
order: 8;
|
||||
|
||||
grid-column: 1 / -1;
|
||||
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(70px, 21vw, 130px);
|
||||
}
|
||||
|
||||
.portrait {
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
453
src/components/slim/Main.vue
Normal file
453
src/components/slim/Main.vue
Normal file
@@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<main class="landing-page">
|
||||
<div class="parent">
|
||||
<section class="div1">
|
||||
<div class="eyebrow">01 / PORTFOLIO / 2026</div>
|
||||
|
||||
<div class="hero-title">
|
||||
<h1>
|
||||
Toms<br />
|
||||
Website
|
||||
</h1>
|
||||
|
||||
<div class="hero-meta">
|
||||
<span>DE</span>
|
||||
<span>53° 9 N, 8° 13</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button class="div14 nav-item">
|
||||
<span>01</span>
|
||||
<span>About</span>
|
||||
</button>
|
||||
|
||||
<button class="div15 nav-item">
|
||||
<span>02</span>
|
||||
<span>Work</span>
|
||||
</button>
|
||||
|
||||
<button class="div16 nav-item">
|
||||
<span>03</span>
|
||||
<span>Archive</span>
|
||||
</button>
|
||||
|
||||
<button class="div17 nav-item">
|
||||
<span>04</span>
|
||||
<span>Info</span>
|
||||
</button>
|
||||
|
||||
<button class="div18 nav-item red">
|
||||
<span>05</span>
|
||||
<span>Contact</span>
|
||||
</button>
|
||||
|
||||
<section class="div19 project">
|
||||
<div class="project-header">
|
||||
<span>Selected Work</span>
|
||||
<span>01—03</span>
|
||||
</div>
|
||||
|
||||
<div class="project-title">
|
||||
<span class="project-number">01</span>
|
||||
|
||||
<h2>
|
||||
Digital<br />
|
||||
Systems
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="project-footer">
|
||||
<span>Identity / Web</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="div20 info">
|
||||
<span class="section-number">02</span>
|
||||
|
||||
<div class="info-content">
|
||||
<p>
|
||||
Independent creative developer working between design, technology
|
||||
and interaction.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="div21 small-block">
|
||||
<span>03</span>
|
||||
<span>Scroll</span>
|
||||
<span class="arrow">↓</span>
|
||||
</section>
|
||||
|
||||
<section class="div22 location">
|
||||
<span>Location</span>
|
||||
|
||||
<div class="location-name">
|
||||
<span>DE</span>
|
||||
<strong>Oldenburg</strong>
|
||||
</div>
|
||||
|
||||
<span>53°08' N</span>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style scoped>
|
||||
.landing-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
background: #f3eee3;
|
||||
color: #29251f;
|
||||
|
||||
font-family:
|
||||
Helvetica Neue,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.parent {
|
||||
display: grid;
|
||||
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
grid-template-rows: repeat(8, 1fr);
|
||||
|
||||
gap: 8px;
|
||||
|
||||
padding: 8px;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.div1,
|
||||
.div14,
|
||||
.div15,
|
||||
.div16,
|
||||
.div17,
|
||||
.div18,
|
||||
.div19,
|
||||
.div20,
|
||||
.div21,
|
||||
.div22 {
|
||||
box-sizing: border-box;
|
||||
|
||||
border: 1px solid #29251f;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.nav-item,
|
||||
.project-header,
|
||||
.project-footer,
|
||||
.section-number,
|
||||
.small-block,
|
||||
.location {
|
||||
font-size: 10px;
|
||||
|
||||
line-height: 1.1;
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.div1 {
|
||||
grid-column: span 5 / span 5;
|
||||
|
||||
grid-row: span 2 / span 2;
|
||||
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 3;
|
||||
|
||||
background: #e8dfce;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: flex;
|
||||
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hero-title h1 {
|
||||
margin: 0;
|
||||
|
||||
font-size: clamp(44px, 6vw, 86px);
|
||||
|
||||
line-height: 0.82;
|
||||
|
||||
letter-spacing: -0.07em;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 4px;
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
border: 1px solid #29251f;
|
||||
|
||||
background: transparent;
|
||||
|
||||
padding: 12px;
|
||||
|
||||
color: #29251f;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
text-align: left;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition:
|
||||
background 180ms ease,
|
||||
color 180ms ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #29251f;
|
||||
|
||||
color: #f3eee3;
|
||||
}
|
||||
|
||||
.nav-item.red {
|
||||
background: #c9362b;
|
||||
|
||||
color: #f3eee3;
|
||||
|
||||
border-color: #c9362b;
|
||||
}
|
||||
|
||||
.nav-item.red:hover {
|
||||
background: #29251f;
|
||||
|
||||
border-color: #29251f;
|
||||
}
|
||||
|
||||
.div14 {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.div15 {
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.div16 {
|
||||
grid-column-start: 5;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.div17 {
|
||||
grid-column-start: 7;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.div18 {
|
||||
grid-column-start: 9;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.div19 {
|
||||
grid-column: span 3 / span 3;
|
||||
|
||||
grid-row: span 3 / span 3;
|
||||
|
||||
grid-row-start: 6;
|
||||
|
||||
background: #dfd3bd;
|
||||
|
||||
padding: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-header,
|
||||
.project-footer {
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
display: flex;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.project-number {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.project-title h2 {
|
||||
margin: 0;
|
||||
|
||||
font-size: clamp(28px, 3vw, 46px);
|
||||
|
||||
line-height: 0.9;
|
||||
|
||||
letter-spacing: -0.05em;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.div20 {
|
||||
grid-column: span 2 / span 2;
|
||||
|
||||
grid-row: span 3 / span 3;
|
||||
|
||||
grid-column-start: 4;
|
||||
|
||||
grid-row-start: 6;
|
||||
|
||||
background: #efe8d9;
|
||||
|
||||
padding: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.info-content p {
|
||||
margin: 0;
|
||||
|
||||
font-size: 17px;
|
||||
|
||||
line-height: 1.1;
|
||||
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.div21 {
|
||||
grid-column-start: 8;
|
||||
|
||||
grid-row-start: 6;
|
||||
|
||||
background: #d9cdb7;
|
||||
|
||||
padding: 12px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24px;
|
||||
|
||||
line-height: 0.8;
|
||||
}
|
||||
|
||||
.div22 {
|
||||
grid-row: span 3 / span 3;
|
||||
|
||||
grid-column-start: 9;
|
||||
|
||||
grid-row-start: 6;
|
||||
|
||||
background: #cfc1a8;
|
||||
|
||||
padding: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.location-name strong {
|
||||
font-size: 20px;
|
||||
|
||||
line-height: 0.9;
|
||||
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ================================================= */
|
||||
/* MOBILE */
|
||||
/* ================================================= */
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.parent {
|
||||
min-height: auto;
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
grid-template-rows: auto;
|
||||
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.div1,
|
||||
.div14,
|
||||
.div15,
|
||||
.div16,
|
||||
.div17,
|
||||
.div18,
|
||||
.div19,
|
||||
.div20,
|
||||
.div21,
|
||||
.div22 {
|
||||
grid-column: 1;
|
||||
|
||||
grid-row: auto;
|
||||
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.div1 {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.hero-title h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,12 @@
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import HomeBig from '../views/HomeBig.vue'
|
||||
import DucksInfo from '../views/InfoDucks.vue'
|
||||
import BooksShow from '../views/BooksShow.vue'
|
||||
import SlimMain from '../views/HomeSlime.vue'
|
||||
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{ path: '/', component: HomeView },
|
||||
{ path: '/', component: SlimMain },
|
||||
{path: '/ducks', component: DucksInfo},
|
||||
{path: '/books', component: BooksShow}
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
|
||||
<div class="parent">
|
||||
<div class="div2">Ordnung: Gänsevögel</div>
|
||||
<div class="div3"><img class="mainImg" :src=mainDuck></div>
|
||||
<div class="div4" style="text-align: center;"> <h2 >Books</h2></div>
|
||||
<div class="div3"><img class="mainImg" :src="mainDuck" /></div>
|
||||
<div class="div4" style="text-align: center"><h2>Books</h2></div>
|
||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||
<div class="div6">Unterfamilie: Anatinae</div>
|
||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||
@@ -26,21 +25,13 @@
|
||||
<div class="div25"></div>
|
||||
<div class="div26"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="js">
|
||||
|
||||
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
||||
|
||||
|
||||
import mainDuck from "./../assets/ducks/stockEnteMain.jpg";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
@@ -180,5 +171,4 @@ import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
||||
.mainImg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,16 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeSection from "../components/sections/WelcomeSection.vue";
|
||||
// import HeroSection from "../components/sections/HeroSection.vue";
|
||||
import WelcomeSection from "../components/big/WelcomeSection.vue";
|
||||
|
||||
// import ImageSection from "../components/sections/ImageSection.vue";
|
||||
import TextSection from "../components/sections/TextSection.vue";
|
||||
import TextSection from "../components/big/TextSection.vue";
|
||||
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||
import ScrollSmoother from "gsap/ScrollSmoother";
|
||||
import MonitorModel from "../components/sections/MonitorModel.vue";
|
||||
import IntroductionSection from "../components/sections/IntroductionSection.vue";
|
||||
import MonitorModel from "../components/big/MonitorModel.vue";
|
||||
import IntroductionSection from "../components/big/IntroductionSection.vue";
|
||||
// import NewTextSection from "../components/sections/NewTextSection.vue";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
35
src/views/HomeSlime.vue
Normal file
35
src/views/HomeSlime.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import Main from "../components/slim/Main.vue";
|
||||
import AboutMe from "../components/slim/AboutMe.vue";
|
||||
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||
import ScrollSmoother from "gsap/ScrollSmoother";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
|
||||
ScrollSmoother.create({
|
||||
wrapper: "#smooth-wrapper",
|
||||
content: "#smooth-content",
|
||||
smooth: 0.2,
|
||||
effects: true,
|
||||
});
|
||||
|
||||
ScrollTrigger.refresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="smooth-wrapper">
|
||||
<div id="smooth-content">
|
||||
<Main id="welcome" />
|
||||
<AboutMe id="me" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped></style>
|
||||
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
|
||||
<div class="parent">
|
||||
<div class="div2">Ordnung: Gänsevögel</div>
|
||||
<div class="div3"><img class="mainImg" :src=mainDuck></div>
|
||||
<div class="div4" style="text-align: center;"> <h2 >Stockente</h2></div>
|
||||
<div class="div3"><img class="mainImg" :src="mainDuck" /></div>
|
||||
<div class="div4" style="text-align: center"><h2>Stockente</h2></div>
|
||||
<div class="div5">Familie: Entenvögel (Anatidae)</div>
|
||||
<div class="div6">Unterfamilie: Anatinae</div>
|
||||
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
|
||||
@@ -26,21 +25,13 @@
|
||||
<div class="div25"></div>
|
||||
<div class="div26"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="js">
|
||||
|
||||
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
||||
|
||||
|
||||
import mainDuck from "./../assets/ducks/stockEnteMain.jpg";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
@@ -180,5 +171,4 @@ import mainDuck from './../assets/ducks/stockEnteMain.jpg'
|
||||
.mainImg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user