From 02fcc75790c5509c9f1efc7c4e14cd281ab7c134 Mon Sep 17 00:00:00 2001
From: T-A-H-prog <tomherpel.de>
Date: Wed, 12 Aug 2026 19:49:45 +0200
Subject: [PATCH] slim landing page

---
 .../{sections => big}/HeroSection.vue         |   0
 .../{sections => big}/ImageSection.vue        |   0
 .../{sections => big}/IntroductionSection.vue |   1 -
 .../{sections => big}/MonitorModel.vue        |   0
 .../{sections => big}/NewTextSection.vue      |   0
 .../{sections => big}/TextSection.vue         |   0
 .../{sections => big}/WelcomeSection.vue      |   2 +-
 src/components/slim/AboutMe.vue               | 539 ++++++++++++++++++
 src/components/slim/Main.vue                  | 453 +++++++++++++++
 src/router/index.ts                           |   5 +-
 src/views/BooksShow.vue                       | 156 +++--
 src/views/{HomeView.vue => HomeBig.vue}       |  10 +-
 src/views/HomeSlime.vue                       |  35 ++
 src/views/InfoDucks.vue                       | 156 +++--
 14 files changed, 1181 insertions(+), 176 deletions(-)
 rename src/components/{sections => big}/HeroSection.vue (100%)
 rename src/components/{sections => big}/ImageSection.vue (100%)
 rename src/components/{sections => big}/IntroductionSection.vue (99%)
 rename src/components/{sections => big}/MonitorModel.vue (100%)
 rename src/components/{sections => big}/NewTextSection.vue (100%)
 rename src/components/{sections => big}/TextSection.vue (100%)
 rename src/components/{sections => big}/WelcomeSection.vue (98%)
 create mode 100644 src/components/slim/AboutMe.vue
 create mode 100644 src/components/slim/Main.vue
 rename src/views/{HomeView.vue => HomeBig.vue} (69%)
 create mode 100644 src/views/HomeSlime.vue

diff --git a/src/components/sections/HeroSection.vue b/src/components/big/HeroSection.vue
similarity index 100%
rename from src/components/sections/HeroSection.vue
rename to src/components/big/HeroSection.vue
diff --git a/src/components/sections/ImageSection.vue b/src/components/big/ImageSection.vue
similarity index 100%
rename from src/components/sections/ImageSection.vue
rename to src/components/big/ImageSection.vue
diff --git a/src/components/sections/IntroductionSection.vue b/src/components/big/IntroductionSection.vue
similarity index 99%
rename from src/components/sections/IntroductionSection.vue
rename to src/components/big/IntroductionSection.vue
index 645225a..75cc8fc 100644
--- a/src/components/sections/IntroductionSection.vue
+++ b/src/components/big/IntroductionSection.vue
@@ -28,7 +28,6 @@ function createTween() {
     scrollTrigger: {
       trigger: ".poster",
       pin: true,
-      markers: true,
       start: "top top",
       end: "+=500",
     },
diff --git a/src/components/sections/MonitorModel.vue b/src/components/big/MonitorModel.vue
similarity index 100%
rename from src/components/sections/MonitorModel.vue
rename to src/components/big/MonitorModel.vue
diff --git a/src/components/sections/NewTextSection.vue b/src/components/big/NewTextSection.vue
similarity index 100%
rename from src/components/sections/NewTextSection.vue
rename to src/components/big/NewTextSection.vue
diff --git a/src/components/sections/TextSection.vue b/src/components/big/TextSection.vue
similarity index 100%
rename from src/components/sections/TextSection.vue
rename to src/components/big/TextSection.vue
diff --git a/src/components/sections/WelcomeSection.vue b/src/components/big/WelcomeSection.vue
similarity index 98%
rename from src/components/sections/WelcomeSection.vue
rename to src/components/big/WelcomeSection.vue
index 11e6fc6..cd45258 100644
--- a/src/components/sections/WelcomeSection.vue
+++ b/src/components/big/WelcomeSection.vue
@@ -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";
diff --git a/src/components/slim/AboutMe.vue b/src/components/slim/AboutMe.vue
new file mode 100644
index 0000000..2be6652
--- /dev/null
+++ b/src/components/slim/AboutMe.vue
@@ -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>
diff --git a/src/components/slim/Main.vue b/src/components/slim/Main.vue
new file mode 100644
index 0000000..e8cb608
--- /dev/null
+++ b/src/components/slim/Main.vue
@@ -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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 8ec8d40..7a977ae 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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}
 
diff --git a/src/views/BooksShow.vue b/src/views/BooksShow.vue
index a30d458..ffae38c 100644
--- a/src/views/BooksShow.vue
+++ b/src/views/BooksShow.vue
@@ -1,12 +1,11 @@
 <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="div5">Familie: 	Entenvögel (Anatidae)</div>
-    <div class="div6">Unterfamilie: 	Anatinae</div>
-    <div class="div8">Tribus: 	Schwimmenten (Anatini)</div>
+  <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="div5">Familie: Entenvögel (Anatidae)</div>
+    <div class="div6">Unterfamilie: Anatinae</div>
+    <div class="div8">Tribus: Schwimmenten (Anatini)</div>
     <div class="div9"></div>
     <div class="div10"></div>
     <div class="div11"></div>
@@ -25,160 +24,151 @@
     <div class="div24"></div>
     <div class="div25"></div>
     <div class="div26"></div>
-</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);
-    grid-template-rows: repeat(7, 1fr);
-    gap: 9px;
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(7, 1fr);
+  gap: 9px;
 }
-    
+
 .div2 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 1;
-    grid-row-start: 2;
+  grid-column: span 3 / span 3;
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .div3 {
-    grid-column: span 4 / span 4;
-    grid-row: span 4 / span 4;
-    grid-column-start: 4;
-    grid-row-start: 2;
+  grid-column: span 4 / span 4;
+  grid-row: span 4 / span 4;
+  grid-column-start: 4;
+  grid-row-start: 2;
 }
 
 .div4 {
-    grid-column: span 4 / span 4;
-    grid-column-start: 4;
-    grid-row-start: 1;
+  grid-column: span 4 / span 4;
+  grid-column-start: 4;
+  grid-row-start: 1;
 }
 
 .div5 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 1;
-    grid-row-start: 3;
+  grid-column: span 3 / span 3;
+  grid-column-start: 1;
+  grid-row-start: 3;
 }
 
 .div6 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 8;
-    grid-row-start: 2;
+  grid-column: span 3 / span 3;
+  grid-column-start: 8;
+  grid-row-start: 2;
 }
 
 .div8 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 8;
-    grid-row-start: 3;
+  grid-column: span 3 / span 3;
+  grid-column-start: 8;
+  grid-row-start: 3;
 }
 
 .div9 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 8;
-    grid-row-start: 4;
+  grid-column: span 3 / span 3;
+  grid-column-start: 8;
+  grid-row-start: 4;
 }
 
 .div10 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 1;
-    grid-row-start: 4;
+  grid-column: span 3 / span 3;
+  grid-column-start: 1;
+  grid-row-start: 4;
 }
 
 .div11 {
-    grid-column-start: 3;
-    grid-row-start: 6;
+  grid-column-start: 3;
+  grid-row-start: 6;
 }
 
 .div12 {
-    grid-column-start: 2;
-    grid-row-start: 6;
+  grid-column-start: 2;
+  grid-row-start: 6;
 }
 
 .div13 {
-    grid-column-start: 2;
-    grid-row-start: 7;
+  grid-column-start: 2;
+  grid-row-start: 7;
 }
 
 .div14 {
-    grid-column-start: 3;
-    grid-row-start: 7;
+  grid-column-start: 3;
+  grid-row-start: 7;
 }
 
 .div15 {
-    grid-column-start: 4;
-    grid-row-start: 7;
+  grid-column-start: 4;
+  grid-row-start: 7;
 }
 
 .div16 {
-    grid-column-start: 4;
-    grid-row-start: 6;
+  grid-column-start: 4;
+  grid-row-start: 6;
 }
 
 .div17 {
-    grid-column-start: 5;
-    grid-row-start: 6;
+  grid-column-start: 5;
+  grid-row-start: 6;
 }
 
 .div18 {
-    grid-column-start: 5;
-    grid-row-start: 7;
+  grid-column-start: 5;
+  grid-row-start: 7;
 }
 
 .div19 {
-    grid-column-start: 6;
-    grid-row-start: 7;
+  grid-column-start: 6;
+  grid-row-start: 7;
 }
 
 .div20 {
-    grid-column-start: 6;
-    grid-row-start: 6;
+  grid-column-start: 6;
+  grid-row-start: 6;
 }
 
 .div21 {
-    grid-column-start: 7;
-    grid-row-start: 6;
+  grid-column-start: 7;
+  grid-row-start: 6;
 }
 
 .div22 {
-    grid-column-start: 7;
-    grid-row-start: 7;
+  grid-column-start: 7;
+  grid-row-start: 7;
 }
 
 .div23 {
-    grid-column-start: 8;
-    grid-row-start: 7;
+  grid-column-start: 8;
+  grid-row-start: 7;
 }
 
 .div24 {
-    grid-column-start: 8;
-    grid-row-start: 6;
+  grid-column-start: 8;
+  grid-row-start: 6;
 }
 
 .div25 {
-    grid-column-start: 9;
-    grid-row-start: 6;
+  grid-column-start: 9;
+  grid-row-start: 6;
 }
 
 .div26 {
-    grid-column-start: 9;
-    grid-row-start: 7;
+  grid-column-start: 9;
+  grid-row-start: 7;
 }
 
 .mainImg {
-    width: 100%;
+  width: 100%;
 }
-        
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeBig.vue
similarity index 69%
rename from src/views/HomeView.vue
rename to src/views/HomeBig.vue
index 9018074..70bee5d 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeBig.vue
@@ -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);
diff --git a/src/views/HomeSlime.vue b/src/views/HomeSlime.vue
new file mode 100644
index 0000000..a1c938a
--- /dev/null
+++ b/src/views/HomeSlime.vue
@@ -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>
diff --git a/src/views/InfoDucks.vue b/src/views/InfoDucks.vue
index 1e48d8b..2c75252 100644
--- a/src/views/InfoDucks.vue
+++ b/src/views/InfoDucks.vue
@@ -1,12 +1,11 @@
 <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="div5">Familie: 	Entenvögel (Anatidae)</div>
-    <div class="div6">Unterfamilie: 	Anatinae</div>
-    <div class="div8">Tribus: 	Schwimmenten (Anatini)</div>
+  <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="div5">Familie: Entenvögel (Anatidae)</div>
+    <div class="div6">Unterfamilie: Anatinae</div>
+    <div class="div8">Tribus: Schwimmenten (Anatini)</div>
     <div class="div9"></div>
     <div class="div10"></div>
     <div class="div11"></div>
@@ -25,160 +24,151 @@
     <div class="div24"></div>
     <div class="div25"></div>
     <div class="div26"></div>
-</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);
-    grid-template-rows: repeat(7, 1fr);
-    gap: 9px;
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(7, 1fr);
+  gap: 9px;
 }
-    
+
 .div2 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 1;
-    grid-row-start: 2;
+  grid-column: span 3 / span 3;
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .div3 {
-    grid-column: span 4 / span 4;
-    grid-row: span 4 / span 4;
-    grid-column-start: 4;
-    grid-row-start: 2;
+  grid-column: span 4 / span 4;
+  grid-row: span 4 / span 4;
+  grid-column-start: 4;
+  grid-row-start: 2;
 }
 
 .div4 {
-    grid-column: span 4 / span 4;
-    grid-column-start: 4;
-    grid-row-start: 1;
+  grid-column: span 4 / span 4;
+  grid-column-start: 4;
+  grid-row-start: 1;
 }
 
 .div5 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 1;
-    grid-row-start: 3;
+  grid-column: span 3 / span 3;
+  grid-column-start: 1;
+  grid-row-start: 3;
 }
 
 .div6 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 8;
-    grid-row-start: 2;
+  grid-column: span 3 / span 3;
+  grid-column-start: 8;
+  grid-row-start: 2;
 }
 
 .div8 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 8;
-    grid-row-start: 3;
+  grid-column: span 3 / span 3;
+  grid-column-start: 8;
+  grid-row-start: 3;
 }
 
 .div9 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 8;
-    grid-row-start: 4;
+  grid-column: span 3 / span 3;
+  grid-column-start: 8;
+  grid-row-start: 4;
 }
 
 .div10 {
-    grid-column: span 3 / span 3;
-    grid-column-start: 1;
-    grid-row-start: 4;
+  grid-column: span 3 / span 3;
+  grid-column-start: 1;
+  grid-row-start: 4;
 }
 
 .div11 {
-    grid-column-start: 3;
-    grid-row-start: 6;
+  grid-column-start: 3;
+  grid-row-start: 6;
 }
 
 .div12 {
-    grid-column-start: 2;
-    grid-row-start: 6;
+  grid-column-start: 2;
+  grid-row-start: 6;
 }
 
 .div13 {
-    grid-column-start: 2;
-    grid-row-start: 7;
+  grid-column-start: 2;
+  grid-row-start: 7;
 }
 
 .div14 {
-    grid-column-start: 3;
-    grid-row-start: 7;
+  grid-column-start: 3;
+  grid-row-start: 7;
 }
 
 .div15 {
-    grid-column-start: 4;
-    grid-row-start: 7;
+  grid-column-start: 4;
+  grid-row-start: 7;
 }
 
 .div16 {
-    grid-column-start: 4;
-    grid-row-start: 6;
+  grid-column-start: 4;
+  grid-row-start: 6;
 }
 
 .div17 {
-    grid-column-start: 5;
-    grid-row-start: 6;
+  grid-column-start: 5;
+  grid-row-start: 6;
 }
 
 .div18 {
-    grid-column-start: 5;
-    grid-row-start: 7;
+  grid-column-start: 5;
+  grid-row-start: 7;
 }
 
 .div19 {
-    grid-column-start: 6;
-    grid-row-start: 7;
+  grid-column-start: 6;
+  grid-row-start: 7;
 }
 
 .div20 {
-    grid-column-start: 6;
-    grid-row-start: 6;
+  grid-column-start: 6;
+  grid-row-start: 6;
 }
 
 .div21 {
-    grid-column-start: 7;
-    grid-row-start: 6;
+  grid-column-start: 7;
+  grid-row-start: 6;
 }
 
 .div22 {
-    grid-column-start: 7;
-    grid-row-start: 7;
+  grid-column-start: 7;
+  grid-row-start: 7;
 }
 
 .div23 {
-    grid-column-start: 8;
-    grid-row-start: 7;
+  grid-column-start: 8;
+  grid-row-start: 7;
 }
 
 .div24 {
-    grid-column-start: 8;
-    grid-row-start: 6;
+  grid-column-start: 8;
+  grid-row-start: 6;
 }
 
 .div25 {
-    grid-column-start: 9;
-    grid-row-start: 6;
+  grid-column-start: 9;
+  grid-row-start: 6;
 }
 
 .div26 {
-    grid-column-start: 9;
-    grid-row-start: 7;
+  grid-column-start: 9;
+  grid-row-start: 7;
 }
 
 .mainImg {
-    width: 100%;
+  width: 100%;
 }
-        
-</style>
\ No newline at end of file
+</style>