{"id":10,"date":"2026-06-01T12:52:33","date_gmt":"2026-06-01T10:52:33","guid":{"rendered":"https:\/\/jalves.ch\/?page_id=10"},"modified":"2026-06-04T02:04:09","modified_gmt":"2026-06-04T00:04:09","slug":"home","status":"publish","type":"page","link":"https:\/\/jalves.ch\/de\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style>\n.entry-content.single-content {\n  max-width: 100% !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n.ja-home-page {\n  --cream: #f5f0ea;\n  --beige: #e8ddd2;\n  --warm: #d4c4b0;\n  --brown: #2c1f14;\n  --brown-mid: #6b4c32;\n  --accent: #c4a882;\n  --wine: #8b1a3a;\n  --sage: #8f9b7a;\n  --clay: #b9825b;\n  --white: #faf8f5;\n\n  width: 100%;\n  overflow: hidden;\n  background: var(--white);\n  color: var(--brown);\n  font-family: 'DM Sans', sans-serif;\n}\n\n.ja-home-section,\n.ja-home-hero {\n  width: 100%;\n  min-height: 100vh;\n  min-height: 100svh;\n  display: flex;\n  overflow: hidden;\n}\n\n.ja-home-hero {\n  align-items: center;\n  background: linear-gradient(90deg, var(--cream) 65%, var(--white) 65%);\n  padding: 120px 8vw;\n}\n\n.ja-home-hero-grid {\n  width: 100%;\n  display: grid;\n  grid-template-columns: 55% 45%;\n  gap: 64px;\n  align-items: center;\n}\n\n.ja-home-label {\n  font-size: 11px;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--brown-mid);\n  margin-bottom: 32px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.ja-home-label::after {\n  content: '';\n  width: 44px;\n  height: 1px;\n  background: var(--warm);\n}\n\n.ja-home-hero h1 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(52px, 7vw, 104px);\n  font-weight: 300;\n  line-height: 0.98;\n  letter-spacing: -2px;\n  margin: 0 0 32px;\n}\n\n.ja-home-hero h1 em {\n  color: var(--accent);\n}\n\n.ja-home-hero p {\n  max-width: 560px;\n  font-size: 18px;\n  line-height: 1.85;\n  color: var(--brown-mid);\n  font-weight: 300;\n}\n\n.ja-home-btn {\n  display: inline-flex;\n  margin-top: 34px;\n  padding: 16px 38px;\n  border: 1px solid var(--brown);\n  color: var(--brown);\n  text-decoration: none;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  font-size: 12px;\n  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;\n}\n\n.ja-home-btn:hover {\n  background: var(--brown);\n  color: var(--cream);\n  transform: translateY(-2px);\n}\n\n.ja-home-hero-image {\n  border-radius: 24px;\n  overflow: hidden;\n  box-shadow: 0 30px 90px rgba(44, 31, 20, 0.18);\n}\n\n.ja-home-hero-image img {\n  width: 100%;\n  display: block;\n  object-fit: cover;\n}\n\n.ja-service {\n  align-items: center;\n  justify-content: space-between;\n  background: var(--white);\n}\n\n.ja-service:nth-of-type(odd) {\n  background: var(--cream);\n}\n\n.col-left,\n.col-right {\n  width: 50%;\n  min-height: 100vh;\n  min-height: 100svh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.col-left {\n  padding: 80px 6vw 80px 8vw;\n}\n\n.col-right {\n  padding: 80px 8vw 80px 6vw;\n}\n\n.ja-service-number {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(96px, 14vw, 210px);\n  font-style: italic;\n  font-weight: 300;\n  line-height: 0.9;\n  letter-spacing: -6px;\n  color: transparent;\n  -webkit-background-clip: text;\n  background-clip: text;\n  opacity: 0.95;\n}\n\n.ja-num-1 { background-image: linear-gradient(135deg, #c4a882, #8b7355); }\n.ja-num-2 { background-image: linear-gradient(135deg, #8b1a3a, #c4a882); }\n.ja-num-3 { background-image: linear-gradient(135deg, #b9825b, #e8b58a); }\n.ja-num-4 { background-image: linear-gradient(135deg, #8f9b7a, #c4a882); }\n.ja-num-5 { background-image: linear-gradient(135deg, #6b4c32, #d4c4b0); }\n.ja-num-6 { background-image: linear-gradient(135deg, #2c1f14, #8b1a3a); }\n\n.ja-service-kicker {\n  font-size: 11px;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--brown-mid);\n  margin-bottom: 28px;\n}\n\n.ja-service h2 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(42px, 5vw, 76px);\n  font-style: italic;\n  font-weight: 300;\n  line-height: 1.05;\n  margin: 0 0 26px;\n}\n\n.ja-service p {\n  max-width: 560px;\n  font-size: clamp(19px, 2vw, 30px);\n  line-height: 1.45;\n  color: var(--brown-mid);\n  font-weight: 300;\n}\n\n.ja-projects-title {\n  background: var(--cream);\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 80px 8vw;\n}\n\n.ja-projects-title h2 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(54px, 8vw, 118px);\n  font-style: italic;\n  font-weight: 300;\n  color: var(--brown);\n}\n\n.ja-carousel-section {\n  background: var(--white);\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 80px 0;\n}\n\n.ja-carousel-section h2 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(36px, 5vw, 64px);\n  font-weight: 300;\n  margin: 0 0 28px;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.ja-carousel-wrap {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  padding: 40px 0;\n}\n\n.ja-carousel-track {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 500px;\n  position: relative;\n}\n\n.ja-carousel-item {\n  position: absolute;\n  transition:\n    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n    width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n    height 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  cursor: pointer;\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: 0 24px 70px rgba(44, 31, 20, 0.12);\n}\n\n.ja-carousel-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.4s ease;\n}\n\n.ja-carousel-item:hover img {\n  transform: scale(1.06);\n}\n\n.ja-carousel-item.active {\n  width: 600px;\n  height: 420px;\n  opacity: 1;\n  z-index: 3;\n  transform: translateX(0) scale(1);\n}\n\n.ja-carousel-item.prev {\n  width: 300px;\n  height: 160px;\n  opacity: 0.45;\n  z-index: 2;\n  transform: translateX(-290px) scale(0.85);\n}\n\n.ja-carousel-item.prev2 {\n  width: 140px;\n  height: 120px;\n  opacity: 0.2;\n  z-index: 1;\n  transform: translateX(-450px) scale(0.7);\n}\n\n.ja-carousel-item.next {\n  width: 300px;\n  height: 160px;\n  opacity: 0.45;\n  z-index: 2;\n  transform: translateX(290px) scale(0.85);\n}\n\n.ja-carousel-item.next2 {\n  width: 140px;\n  height: 120px;\n  opacity: 0.2;\n  z-index: 1;\n  transform: translateX(450px) scale(0.7);\n}\n\n.ja-carousel-item.hidden {\n  opacity: 0;\n  z-index: 0;\n  transform: translateX(600px) scale(0.5);\n  pointer-events: none;\n  width: 140px;\n  height: 120px;\n}\n\n.ja-carousel-item.hidden-left {\n  opacity: 0;\n  z-index: 0;\n  transform: translateX(-600px) scale(0.5);\n  pointer-events: none;\n  width: 140px;\n  height: 120px;\n}\n\n.ja-carousel-btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: var(--white);\n  border: 1px solid var(--beige);\n  color: var(--brown);\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 10;\n  font-size: 24px;\n}\n\n.ja-carousel-prev { left: 8vw; }\n.ja-carousel-next { right: 8vw; }\n\n.ja-carousel-dots {\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  margin-top: 16px;\n}\n\n.ja-carousel-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--warm);\n  cursor: pointer;\n  transition: all 0.3s;\n}\n\n.ja-carousel-dot.active {\n  width: 22px;\n  border-radius: 3px;\n  background: var(--brown);\n}\n\n.ja-lightbox {\n  display: none;\n  position: fixed;\n  inset: 0;\n  background: rgba(44, 31, 20, 0.92);\n  z-index: 99999;\n  align-items: center;\n  justify-content: center;\n}\n\n.ja-lightbox.open {\n  display: flex;\n}\n\n.ja-lightbox img {\n  max-width: 90vw;\n  max-height: 82vh;\n  object-fit: contain;\n  border-radius: 12px;\n}\n\n.ja-lightbox-close,\n.ja-lightbox-prev,\n.ja-lightbox-next {\n  position: fixed;\n  color: var(--cream);\n  background: none;\n  border: none;\n  cursor: pointer;\n  z-index: 100000;\n}\n\n.ja-lightbox-close {\n  top: 24px;\n  right: 28px;\n  font-size: 28px;\n}\n\n.ja-lightbox-prev,\n.ja-lightbox-next {\n  top: 50%;\n  transform: translateY(-50%);\n  font-size: 44px;\n  padding: 20px;\n}\n\n.ja-lightbox-prev { left: 20px; }\n.ja-lightbox-next { right: 20px; }\n\n.ja-home-cta {\n  background: var(--brown);\n  color: var(--cream);\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 120px 8vw;\n}\n\n.ja-home-cta h2 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(44px, 7vw, 96px);\n  font-weight: 300;\n  line-height: 1.05;\n  max-width: 900px;\n  margin: 0 auto 32px;\n}\n\n.ja-home-cta p {\n  max-width: 620px;\n  margin: 0 auto 42px;\n  color: rgba(245, 240, 234, 0.6);\n  font-size: 17px;\n  line-height: 1.8;\n}\n\n.ja-home-cta .ja-home-label {\n  justify-content: center;\n}\n\n.ja-home-cta .ja-home-btn {\n  border-color: var(--accent);\n  color: var(--cream);\n}\n\n.ja-home-cta .ja-home-btn:hover {\n  background: var(--accent);\n  color: var(--brown);\n}\n@keyframes jaHeroFadeUp {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.ja-home-hero-copy .ja-home-label,\n.ja-home-hero-copy h1,\n.ja-home-hero-copy p,\n.ja-home-hero-copy .ja-home-btn,\n.ja-home-hero-image {\n  opacity: 0;\n  transform: translateY(22px);\n  animation: jaHeroFadeUp 0.9s ease forwards;\n}\n\n.ja-home-hero-copy .ja-home-label { animation-delay: 0.15s; }\n.ja-home-hero-copy h1 {\n  transform: translateY(34px);\n  animation-delay: 0.35s;\n}\n.ja-home-hero-copy p { animation-delay: 0.6s; }\n.ja-home-hero-copy .ja-home-btn { animation-delay: 0.82s; }\n.ja-home-hero-image { animation-delay: 1s; }\n@media (max-width: 1024px) {\n  .ja-home-hero {\n    padding: 100px 6vw;\n  }\n\n  .ja-home-hero-grid {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .ja-home-hero-image {\n    max-width: 620px;\n  }\n\n  .ja-carousel-item.active {\n    width: 520px;\n    height: 360px;\n  }\n}\n\n@media (max-width: 767px) {\n  .ja-home-page {\n    overflow: hidden;\n  }\n\n  .ja-home-section,\n  .ja-home-hero {\n    min-height: 100svh;\n  }\n\n  .ja-home-hero {\n  position: relative;\n  align-items: center;\n  background: var(--cream);\n  padding: 86px 6vw 64px;\n}\n.ja-home-hero-grid {\n  position: relative;\n  display: block;\n  min-height: calc(100svh - 150px);\n}\n\n.ja-home-hero-copy {\n  position: relative;\n  z-index: 2;\n  padding-top: 24px;\n}\n\n.ja-home-hero-image {\n  position: absolute;\n  inset: auto 0 0 0;\n  z-index: 1;\n  height: 56%;\n  max-height: none;\n  opacity: 0.32;\n  border-radius: 22px;\n  pointer-events: none;\n}\n\n.ja-home-hero-image::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    rgba(245, 240, 234, 0.15),\n    rgba(245, 240, 234, 0.65) 55%,\n    rgba(245, 240, 234, 0.92)\n  );\n}\n\n.ja-home-hero-image img {\n  width: 100%;\n  height: 100%;\n  max-height: none;\n  object-fit: cover;\n  object-position: center top;\n}\n\n  .ja-home-hero-grid {\n    gap: 34px;\n  }\n\n  .ja-home-label {\n    font-size: 10px;\n    letter-spacing: 2.4px;\n    margin-bottom: 22px;\n  }\n\n  .ja-home-label::after {\n    width: 32px;\n  }\n\n  .ja-home-hero h1 {\n    font-size: clamp(46px, 15vw, 68px);\n    letter-spacing: -1.4px;\n    margin-bottom: 24px;\n  }\n\n  .ja-home-hero p {\n    font-size: 16px;\n    line-height: 1.75;\n  }\n\n  .ja-home-btn {\n    margin-top: 26px;\n    padding: 14px 28px;\n    font-size: 11px;\n    letter-spacing: 1.8px;\n  }\n\n  .ja-home-hero-image {\n    border-radius: 20px;\n    max-height: 48vh;\n  }\n\n  .ja-home-hero-image img {\n    max-height: 48vh;\n    object-position: center top;\n  }\n\n  .ja-service {\n    flex-direction: column;\n    justify-content: center;\n    gap: 0;\n    padding: 72px 0;\n  }\n\n  .col-left,\n  .col-right {\n    width: 100%;\n    min-height: auto;\n    padding: 0 7vw;\n  }\n\n  .col-left {\n    justify-content: flex-end;\n    margin-bottom: 34px;\n  }\n\n  .col-right {\n    justify-content: flex-start;\n  }\n\n  .ja-service-number {\n    font-size: clamp(96px, 32vw, 150px);\n    letter-spacing: -4px;\n  }\n\n  .ja-service-kicker {\n    font-size: 10px;\n    letter-spacing: 2.5px;\n    margin-bottom: 20px;\n  }\n\n  .ja-service h2 {\n    font-size: clamp(40px, 13vw, 58px);\n    margin-bottom: 20px;\n  }\n\n  .ja-service p {\n    font-size: clamp(20px, 6vw, 26px);\n    line-height: 1.35;\n  }\n\n  .ja-projects-title {\n    min-height: 100svh;\n    padding: 90px 8vw;\n  }\n\n  .ja-projects-title h2 {\n    font-size: clamp(56px, 16vw, 86px);\n    line-height: 0.98;\n  }\n\n  .ja-carousel-section {\n    min-height: 100svh;\n    padding: 70px 0;\n  }\n\n  .ja-carousel-section h2 {\n    font-size: clamp(36px, 11vw, 52px);\n    margin-bottom: 14px;\n  }\n\n  .ja-carousel-wrap {\n    padding: 18px 0 28px;\n  }\n\n  .ja-carousel-track {\n    height: 390px;\n  }\n\n  .ja-carousel-item {\n    border-radius: 14px;\n  }\n\n  .ja-carousel-item.active {\n    width: 78vw;\n    height: 300px;\n  }\n\n  .ja-carousel-item.prev,\n  .ja-carousel-item.next {\n    width: 42vw;\n    height: 140px;\n    opacity: 0.38;\n  }\n\n  .ja-carousel-item.prev {\n    transform: translateX(-42vw) scale(0.8);\n  }\n\n  .ja-carousel-item.next {\n    transform: translateX(42vw) scale(0.8);\n  }\n\n  .ja-carousel-item.prev2 {\n    width: 24vw;\n    height: 100px;\n    transform: translateX(-68vw) scale(0.65);\n  }\n\n  .ja-carousel-item.next2 {\n    width: 24vw;\n    height: 100px;\n    transform: translateX(68vw) scale(0.65);\n  }\n\n  .ja-carousel-btn {\n    width: 38px;\n    height: 38px;\n    font-size: 22px;\n  }\n\n  .ja-carousel-prev { left: 4vw; }\n  .ja-carousel-next { right: 4vw; }\n\n  .ja-home-cta {\n    min-height: 100svh;\n    padding: 90px 7vw;\n  }\n\n  .ja-home-cta h2 {\n    font-size: clamp(42px, 13vw, 66px);\n  }\n\n  .ja-home-cta p {\n    font-size: 16px;\n  }\n\n  .ja-lightbox img {\n    max-width: 92vw;\n    max-height: 72vh;\n  }\n\n  .ja-lightbox-close {\n    top: 18px;\n    right: 20px;\n  }\n\n  .ja-lightbox-prev {\n    left: 6px;\n  }\n\n  .ja-lightbox-next {\n    right: 6px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ja-carousel-item,\n  .ja-carousel-item img,\n  .ja-home-btn,\n  .ja-carousel-dot {\n    transition: none !important;\n  }\n}\n<\/style>\n\n<div class=\"ja-home-page\">\n\n  <section class=\"ja-home-hero home-single-section\">\n    <div class=\"ja-home-hero-grid\">\n      <div class=\"ja-home-hero-copy\">\n        <div class=\"ja-home-label\">JA Designs<\/div>\n        <h1>Jonathan Alves<br><em>WordPress Websites<\/em><br>&amp; Digital Projects<\/h1>\n        <p>I build clean, modern websites with focus on structure, design and user experience.<\/p>\n        <a href=\"\/about\/\" class=\"ja-home-btn\">About us<\/a>\n      <\/div>\n\n      <div class=\"ja-home-hero-image\">\n        <img decoding=\"async\" src=\"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-1-2026-05_43_31-PM.png\" alt=\"Jonathan Alves\">\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ja-home-section ja-service home-scroll-section\">\n    <div class=\"col-left\"><div class=\"ja-service-number ja-num-1\">01<\/div><\/div>\n    <div class=\"col-right\">\n      <div class=\"ja-service-kicker\">Development<\/div>\n      <h2>WordPress Development<\/h2>\n      <p>Building modern websites with WordPress and WooCommerce.<\/p>\n    <\/div>\n  <\/section>\n\n  <section class=\"ja-home-section ja-service home-scroll-section\">\n    <div class=\"col-left\"><div class=\"ja-service-number ja-num-2\">02<\/div><\/div>\n    <div class=\"col-right\">\n      <div class=\"ja-service-kicker\">Design<\/div>\n      <h2>Web Design<\/h2>\n      <p>Creating clean, modern and user-focused interfaces.<\/p>\n    <\/div>\n  <\/section>\n\n  <section class=\"ja-home-section ja-service home-scroll-section\">\n    <div class=\"col-left\"><div class=\"ja-service-number ja-num-3\">03<\/div><\/div>\n    <div class=\"col-right\">\n      <div class=\"ja-service-kicker\">Commerce<\/div>\n      <h2>E-Commerce<\/h2>\n      <p>Developing online stores that are easy to manage and built to convert.<\/p>\n    <\/div>\n  <\/section>\n\n  <section class=\"ja-home-section ja-service home-scroll-section\">\n    <div class=\"col-left\"><div class=\"ja-service-number ja-num-4\">04<\/div><\/div>\n    <div class=\"col-right\">\n      <div class=\"ja-service-kicker\">Community<\/div>\n      <h2>Community Platforms<\/h2>\n      <p>Building event hubs, gaming communities and member-driven websites.<\/p>\n    <\/div>\n  <\/section>\n\n  <section class=\"ja-home-section ja-service home-scroll-section\">\n    <div class=\"col-left\"><div class=\"ja-service-number ja-num-5\">05<\/div><\/div>\n    <div class=\"col-right\">\n      <div class=\"ja-service-kicker\">Strategy<\/div>\n      <h2>Problem Solving<\/h2>\n      <p>Turning ideas and sketches into working digital experiences.<\/p>\n    <\/div>\n  <\/section>\n\n  <section class=\"ja-home-section ja-service home-scroll-section\">\n    <div class=\"col-left\"><div class=\"ja-service-number ja-num-6\">06<\/div><\/div>\n    <div class=\"col-right\">\n      <div class=\"ja-service-kicker\">Care<\/div>\n      <h2>Optimization &amp; Care<\/h2>\n      <p>Improving structure, performance and clarity so your website feels polished and reliable.<\/p>\n    <\/div>\n  <\/section>\n\n  <section class=\"ja-home-section ja-projects-title home-scroll-section\">\n    <h2>Selected Projects<\/h2>\n  <\/section>\n\n  <section class=\"ja-home-section ja-carousel-section home-scroll-section\">\n    <h2>TCG Liga Murten \u2014 Projekt<\/h2>\n\n    <div class=\"ja-carousel-wrap\" id=\"jaCarouselWrap\">\n      <div class=\"ja-carousel-track\" id=\"jaCarouselTrack\"><\/div>\n      <button class=\"ja-carousel-btn ja-carousel-prev\" type=\"button\" onclick=\"jaMoveCarousel(-1)\">\u2039<\/button>\n      <button class=\"ja-carousel-btn ja-carousel-next\" type=\"button\" onclick=\"jaMoveCarousel(1)\">\u203a<\/button>\n    <\/div>\n\n    <div class=\"ja-carousel-dots\" id=\"jaCarouselDots\"><\/div>\n  <\/section>\n\n  <div class=\"ja-lightbox\" id=\"jaLightbox\">\n    <button class=\"ja-lightbox-close\" type=\"button\" onclick=\"jaCloseLightbox()\">\u2715<\/button>\n    <button class=\"ja-lightbox-prev\" type=\"button\" onclick=\"jaLightboxMove(-1)\">\u2039<\/button>\n    <img decoding=\"async\" id=\"jaLightboxImg\" src=\"\" alt=\"\">\n    <button class=\"ja-lightbox-next\" type=\"button\" onclick=\"jaLightboxMove(1)\">\u203a<\/button>\n  <\/div>\n\n  <section class=\"ja-home-section ja-home-cta home-scroll-section\">\n    <div>\n      <div class=\"ja-home-label\">Let&#8217;s build something<\/div>\n      <h2>Have an idea, a project or a website that needs a clean digital presence?<\/h2>\n      <p>I\u2019d love to help turn it into something real.<\/p>\n      <a href=\"\/contact\/\" class=\"ja-home-btn\">Contact Me<\/a>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n(function () {\n  const jaImages = [\n    { src: \"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/1.png\", alt: \"Projekt 1\" },\n    { src: \"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/2.png\", alt: \"Projekt 2\" },\n    { src: \"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/3.png\", alt: \"Projekt 3\" },\n    { src: \"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/4.png\", alt: \"Projekt 4\" },\n    { src: \"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/5.png\", alt: \"Projekt 5\" },\n    { src: \"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/6.png\", alt: \"Projekt 6\" },\n    { src: \"https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/7.png\", alt: \"Projekt 7\" },\n  ];\n\n  let jaCurrent = 0;\n  let jaAutoplay;\n  let jaLightboxIndex = 0;\n  let jaTouchStartX = 0;\n  let jaAutoScrolling = false;\n\n  const jaCarouselClasses = [\"active\", \"prev\", \"prev2\", \"next\", \"next2\", \"hidden\", \"hidden-left\"];\n\n  function jaGetCarouselClass(index) {\n    const total = jaImages.length;\n    const diff = ((index - jaCurrent) % total + total) % total;\n\n    if (diff === 0) return \"active\";\n    if (diff === 1) return \"next\";\n    if (diff === 2) return \"next2\";\n    if (diff === total - 1) return \"prev\";\n    if (diff === total - 2) return \"prev2\";\n    if (diff > total \/ 2) return \"hidden-left\";\n\n    return \"hidden\";\n  }\n\n  function jaUpdateCarousel() {\n    document.querySelectorAll(\".ja-carousel-item\").forEach((item, index) => {\n      item.classList.remove(...jaCarouselClasses);\n      item.classList.add(jaGetCarouselClass(index));\n    });\n\n    document.querySelectorAll(\".ja-carousel-dot\").forEach((dot, index) => {\n      dot.classList.toggle(\"active\", index === jaCurrent);\n    });\n  }\n\n  window.jaMoveCarousel = function (direction) {\n    jaCurrent = ((jaCurrent + direction) % jaImages.length + jaImages.length) % jaImages.length;\n    jaUpdateCarousel();\n  };\n\n  function jaStartAutoplay() {\n    clearInterval(jaAutoplay);\n    jaAutoplay = setInterval(() => window.jaMoveCarousel(1), 3200);\n  }\n\n  function jaOpenLightbox(index) {\n    jaLightboxIndex = index;\n    clearInterval(jaAutoplay);\n\n    const lightboxImg = document.getElementById(\"jaLightboxImg\");\n    const lightbox = document.getElementById(\"jaLightbox\");\n\n    if (!lightboxImg || !lightbox) return;\n\n    lightboxImg.src = jaImages[index].src;\n    lightboxImg.alt = jaImages[index].alt;\n    lightbox.classList.add(\"open\");\n  }\n\n  window.jaCloseLightbox = function () {\n    const lightbox = document.getElementById(\"jaLightbox\");\n    if (!lightbox) return;\n\n    lightbox.classList.remove(\"open\");\n    jaStartAutoplay();\n  };\n\n  window.jaLightboxMove = function (direction) {\n    const lightboxImg = document.getElementById(\"jaLightboxImg\");\n    if (!lightboxImg) return;\n\n    jaLightboxIndex = ((jaLightboxIndex + direction) % jaImages.length + jaImages.length) % jaImages.length;\n    lightboxImg.src = jaImages[jaLightboxIndex].src;\n    lightboxImg.alt = jaImages[jaLightboxIndex].alt;\n  };\n\n  function jaInitCarousel() {\n    const track = document.getElementById(\"jaCarouselTrack\");\n    const dots = document.getElementById(\"jaCarouselDots\");\n    const wrap = document.getElementById(\"jaCarouselWrap\");\n    const lightbox = document.getElementById(\"jaLightbox\");\n\n    if (!track || !dots || !wrap || !lightbox) return;\n    if (track.dataset.initialized === \"true\") return;\n\n    track.dataset.initialized = \"true\";\n    track.innerHTML = \"\";\n    dots.innerHTML = \"\";\n\n    jaImages.forEach((image, index) => {\n      const item = document.createElement(\"div\");\n      item.className = \"ja-carousel-item \" + jaGetCarouselClass(index);\n      item.innerHTML = '<img decoding=\"async\" src=\"' + image.src + '\" alt=\"' + image.alt + '\" draggable=\"false\">';\n\n      item.addEventListener(\"click\", () => {\n        if (item.classList.contains(\"active\")) {\n          jaOpenLightbox(index);\n        } else {\n          jaCurrent = index;\n          jaUpdateCarousel();\n        }\n      });\n\n      track.appendChild(item);\n\n      const dot = document.createElement(\"div\");\n      dot.className = \"ja-carousel-dot\" + (index === jaCurrent ? \" active\" : \"\");\n      dot.addEventListener(\"click\", () => {\n        jaCurrent = index;\n        jaUpdateCarousel();\n      });\n\n      dots.appendChild(dot);\n    });\n\n    wrap.addEventListener(\"mouseenter\", () => clearInterval(jaAutoplay));\n    wrap.addEventListener(\"mouseleave\", jaStartAutoplay);\n\n    wrap.addEventListener(\"touchstart\", (event) => {\n      jaTouchStartX = event.changedTouches[0].clientX;\n    }, { passive: true });\n\n    wrap.addEventListener(\"touchend\", (event) => {\n      const distance = event.changedTouches[0].clientX - jaTouchStartX;\n\n      if (Math.abs(distance) > 45) {\n        window.jaMoveCarousel(distance > 0 ? -1 : 1);\n      }\n    }, { passive: true });\n\n    lightbox.addEventListener(\"click\", (event) => {\n      if (event.target === lightbox) window.jaCloseLightbox();\n    });\n\n    document.addEventListener(\"keydown\", (event) => {\n      if (!lightbox.classList.contains(\"open\")) return;\n\n      if (event.key === \"Escape\") window.jaCloseLightbox();\n      if (event.key === \"ArrowLeft\") window.jaLightboxMove(-1);\n      if (event.key === \"ArrowRight\") window.jaLightboxMove(1);\n    });\n\n    jaStartAutoplay();\n  }\n\n  function jaInitHomeScroll() {\n    const page = document.querySelector(\".ja-home-page\");\n    if (!page) return;\n\n    if (page.dataset.scrollInitialized === \"true\") return;\n    page.dataset.scrollInitialized = \"true\";\n\n    if (typeof gsap === \"undefined\" || typeof ScrollTrigger === \"undefined\" || typeof Lenis === \"undefined\") {\n      console.warn(\"JA Home: GSAP, ScrollTrigger or Lenis is missing.\");\n      return;\n    }\n\n    gsap.registerPlugin(ScrollTrigger);\n\n    const isMobile = window.innerWidth <= 767;\n    const serviceEnd = isMobile ? \"+=200%\" : \"+=250%\";\n    const singleEnd = isMobile ? \"+=680px\" : \"+=860px\";\n    const revealDistance = isMobile ? 34 : 60;\n\n    if (!window.jaLenis) {\n      window.jaLenis = new Lenis({\n        duration: isMobile ? 0.72 : 0.75,\n        easing: (t) => 1 - Math.pow(1 - t, 3),\n        smooth: true,\n        syncTouch: true,\n        touchMultiplier: 1.08,\n      });\n\n      gsap.ticker.add((time) => {\n        window.jaLenis.raf(time * 1000);\n      });\n\n      gsap.ticker.lagSmoothing(0);\n      window.jaLenis.on(\"scroll\", ScrollTrigger.update);\n    }\n\n    const sections = gsap.utils.toArray(\n      \".ja-home-page > .home-single-section, .ja-home-page > .home-scroll-section\"\n    );\n\n    function jaScrollToSection(target) {\n      if (!target || !window.jaLenis || jaAutoScrolling) return;\n\n      jaAutoScrolling = true;\n\n      window.jaLenis.scrollTo(target, {\n        duration: isMobile ? 0.5 : 0.7,\n        easing: (t) => 1 - Math.pow(1 - t, 3),\n        lock: true,\n      });\n\n      setTimeout(() => {\n        jaAutoScrolling = false;\n      }, isMobile ? 650 : 850);\n    }\n\n    function jaNextSection(section) {\n      return sections[sections.indexOf(section) + 1];\n    }\n\n    function jaPrevSection(section) {\n      return sections[sections.indexOf(section) - 1];\n    }\n\n    sections.forEach((section) => {\n      const left = section.querySelector(\".col-left\");\n      const right = section.querySelector(\".col-right\");\n      const heroGrid = section.querySelector(\".ja-home-hero-grid\");\n      const title = section.querySelector(\".ja-projects-title h2\");\n      const carouselHeading = section.querySelector(\".ja-carousel-section h2\");\n      const carouselWrap = section.querySelector(\".ja-carousel-wrap\");\n      const ctaContent = section.querySelector(\".ja-home-cta > div\");\n      const isSingle = section.classList.contains(\"home-single-section\");\n\n      if (isSingle) {\n        gsap.set(section, { opacity: 1, y: 0 });\n        gsap.set(heroGrid, { opacity: 1, y: 0, scale: 1 });\n\n        gsap.timeline({\n          scrollTrigger: {\n            trigger: section,\n            start: \"top top\",\n            end: singleEnd,\n            pin: true,\n            pinSpacing: true,\n            scrub: 0.55,\n            anticipatePin: 1,\n            onLeave: () => jaScrollToSection(jaNextSection(section)),\n            onLeaveBack: () => jaScrollToSection(jaPrevSection(section)),\n          }\n        })\n          .to(heroGrid, {\n            opacity: 1,\n            y: 0,\n            scale: 1,\n            duration: 0.5,\n            ease: \"none\",\n          })\n          .to(heroGrid, {\n            opacity: 0,\n            y: isMobile ? -24 : -44,\n            scale: 0.985,\n            duration: 0.5,\n            ease: \"none\",\n          });\n\n        return;\n      }\n\n      if (left || right) {\n        if (left) gsap.set(left, { x: -revealDistance, opacity: 0 });\n        if (right) gsap.set(right, { x: revealDistance, opacity: 0 });\n\n        const serviceTl = gsap.timeline({\n          scrollTrigger: {\n            trigger: section,\n            start: \"top top\",\n            end: serviceEnd,\n            pin: true,\n            pinSpacing: true,\n            scrub: 0.55,\n            anticipatePin: 1,\n            onLeave: () => jaScrollToSection(jaNextSection(section)),\n            onLeaveBack: () => jaScrollToSection(jaPrevSection(section)),\n          }\n        });\n\n        serviceTl\n          .to([left, right].filter(Boolean), {\n            x: 0,\n            opacity: 1,\n            duration: 0.32,\n            stagger: 0.04,\n            ease: \"none\",\n          })\n          .to([left, right].filter(Boolean), {\n            x: 0,\n            opacity: 1,\n            duration: 0.38,\n            ease: \"none\",\n          })\n          .to([left, right].filter(Boolean), {\n            y: isMobile ? -20 : -34,\n            opacity: 0,\n            duration: 0.3,\n            stagger: 0.03,\n            ease: \"none\",\n          });\n\n        return;\n      }\n\n      const revealItems = [title, carouselHeading, carouselWrap, ctaContent].filter(Boolean);\n\n      if (revealItems.length) {\n        gsap.set(revealItems, { y: isMobile ? 32 : 46, opacity: 0 });\n\n        gsap.timeline({\n          scrollTrigger: {\n            trigger: section,\n            start: \"top top\",\n            end: serviceEnd,\n            pin: true,\n            pinSpacing: true,\n            scrub: 0.55,\n            anticipatePin: 1,\n            onLeave: () => jaScrollToSection(jaNextSection(section)),\n            onLeaveBack: () => jaScrollToSection(jaPrevSection(section)),\n          }\n        })\n          .to(revealItems, {\n            y: 0,\n            opacity: 1,\n            duration: 0.34,\n            stagger: 0.04,\n            ease: \"none\",\n          })\n          .to(revealItems, {\n            y: 0,\n            opacity: 1,\n            duration: 0.36,\n            ease: \"none\",\n          })\n          .to(revealItems, {\n            y: isMobile ? -20 : -34,\n            opacity: 0,\n            duration: 0.3,\n            stagger: 0.03,\n            ease: \"none\",\n          });\n      }\n    });\n\n    ScrollTrigger.sort();\n    ScrollTrigger.refresh();\n\n    window.addEventListener(\"resize\", () => {\n      ScrollTrigger.refresh();\n    });\n  }\n\n  document.addEventListener(\"DOMContentLoaded\", jaInitCarousel);\n  window.addEventListener(\"load\", jaInitHomeScroll);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>JA Designs Jonathan AlvesWordPress Websites&amp; Digital Projects I build clean, modern websites with focus on structure, design and user experience. About us 01 Development WordPress Development Building modern websites with WordPress and WooCommerce. 02 Design Web Design Creating clean, modern and user-focused interfaces. 03 Commerce E-Commerce Developing online stores that are easy to manage and&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":132,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":409,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/10\/revisions\/409"}],"wp:attachment":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}