{"id":15,"date":"2026-06-01T12:53:02","date_gmt":"2026-06-01T10:53:02","guid":{"rendered":"https:\/\/jalves.ch\/?page_id=15"},"modified":"2026-06-03T22:49:23","modified_gmt":"2026-06-03T20:49:23","slug":"about","status":"publish","type":"page","link":"https:\/\/jalves.ch\/de\/about\/","title":{"rendered":"About"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=DM+Mono:wght@300;400&family=DM+Sans:wght@300;400;500&display=swap');\n\n.ab-page {\n  width: 100vw;\n  min-height: 100vh;\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  background: #2C1F14;\n  padding: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ab-inner {\n  width: min(860px, calc(100vw - 48px));\n  max-width: 860px;\n  margin: 0 auto;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ab-stack-wrap {\n  position: relative;\n  height: 520px;\n}\n\n.ab-card {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  border-radius: 20px;\n  box-shadow: 0 12px 40px rgba(0,0,0,0.45);\n  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.ab-card.active-card {\n  pointer-events: all;\n}\n\n.ab-card-inner {\n  min-height: 520px;\n  padding: 60px 56px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n}\n\n.ab-tag {\n  font-family: 'DM Mono', monospace;\n  font-size: 11px;\n  letter-spacing: 2px;\n  color: #a07850;\n  margin-bottom: 24px;\n}\n\n.ab-card h2 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 34px;\n  font-weight: 400;\n  color: #2c1f14;\n  line-height: 1.15;\n  margin: 0 0 18px;\n}\n\n.ab-card p {\n  font-family: 'DM Sans', sans-serif;\n  font-size: 17px;\n  line-height: 1.75;\n  margin: 0;\n  color: #2c1f14;\n  opacity: 0.75;\n}\n\n.ab-card .ab-btn {\n  display: inline-block;\n  margin-top: 28px;\n  padding: 14px 32px;\n  border: 1.5px solid #2c1f14;\n  border-radius: 8px;\n  font-family: 'DM Sans', sans-serif;\n  font-size: 14px;\n  color: #2c1f14;\n  text-decoration: none;\n  letter-spacing: 1px;\n  transition: all 0.3s ease;\n}\n\n.ab-card .ab-btn:hover {\n  background: #2c1f14;\n  color: #f0e8df;\n}\n\n.hero-card {\n  background: #1a1008;\n  min-height: 520px;\n}\n\n.hero-img {\n  position: absolute;\n  inset: 0;\n  background: url('https:\/\/jalves.ch\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-1-2026-05_43_31-PM.png') center\/cover;\n  border-radius: 20px;\n}\n\n.hero-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to top, rgba(20,10,5,0.92) 40%, rgba(20,10,5,0.3));\n  border-radius: 20px;\n}\n\n.hero-content {\n  position: relative;\n  z-index: 2;\n  min-height: 520px;\n  padding: 60px 56px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  box-sizing: border-box;\n}\n\n.hero-content h1 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 44px;\n  font-weight: 500;\n  color: #f0e8df;\n  margin: 0 0 8px;\n}\n\n.hero-content h3 {\n  font-family: 'DM Sans', sans-serif;\n  font-size: 16px;\n  color: #c4a882;\n  font-weight: 400;\n  margin: 0 0 10px;\n  letter-spacing: 1px;\n}\n\n.hero-content p {\n  font-family: 'DM Sans', sans-serif;\n  font-size: 13px;\n  color: #a08060;\n  margin: 0;\n}\n\n.ab-dots {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n  margin-top: 24px;\n}\n\n.ab-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.2);\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.ab-dot.active {\n  width: 20px;\n  border-radius: 3px;\n  background: #c4a882;\n}\n\n@media (max-width: 767px) {\n  .ab-page {\n    padding: 0;\n    min-height: 100svh;\n  }\n\n  .ab-inner {\n    width: min(100%, calc(100vw - 32px));\n    padding: 0 16px;\n  }\n\n  .ab-stack-wrap {\n    height: 440px;\n  }\n\n  .ab-card-inner {\n    min-height: 440px;\n    padding: 34px 28px;\n  }\n\n  .hero-card {\n    min-height: 440px;\n  }\n\n  .hero-content {\n    min-height: 440px;\n    padding: 34px 28px;\n  }\n\n  .ab-card h2 {\n    font-size: 25px;\n  }\n\n  .ab-card p {\n    font-size: 15px;\n    line-height: 1.65;\n  }\n\n  .hero-content h1 {\n    font-size: 31px;\n  }\n\n  .hero-content h3 {\n    font-size: 14px;\n  }\n}\n<\/style>\n\n<div class=\"ab-page\">\n  <div class=\"ab-inner\">\n    <div class=\"ab-stack-wrap\" id=\"abStack\"><\/div>\n    <div class=\"ab-dots\" id=\"abDots\"><\/div>\n  <\/div>\n<\/div>\n\n<script>\nwindow.addEventListener(\"load\", function () {\n  const stack = document.getElementById(\"abStack\");\n  const dots = document.getElementById(\"abDots\");\n  const aboutSection = document.querySelector(\".ab-page\");\n\n  if (!stack || !dots || !aboutSection) return;\n\n  if (typeof gsap === \"undefined\" || typeof ScrollTrigger === \"undefined\") {\n    console.warn(\"About cards: GSAP or ScrollTrigger is missing.\");\n    return;\n  }\n\n  const abCards = [\n    { type: \"hero\" },\n    { num: \"02\", title: \"Hi, I'm Jonathan Alves.\", text: \"I'm a creative web designer from Switzerland, focused on building modern websites, digital experiences, and meaningful online projects.\", bg: \"#e8ddd4\" },\n    { num: \"03\", title: \"Who Am I?\", text: \"I'm someone who loves turning ideas into clean, functional, and visually appealing websites. Growing my skills in WordPress, frontend design, and digital branding.\", bg: \"#ede5db\" },\n    { num: \"04\", title: \"My Journey\", text: \"My journey started with curiosity and the desire to learn. Every project helps me improve, understand design better, and create something more professional.\", bg: \"#f0e8e0\" },\n    { num: \"05\", title: \"What I Do\", text: \"I design and build websites with a focus on structure, usability, and visual identity. My goal is to make every page feel modern, clear, and easy to use.\", bg: \"#f3ece5\" },\n    { num: \"06\", title: \"My Approach\", text: \"I believe good design should be simple, authentic, and useful. I try to understand the idea, the people behind it, and the feeling the website should create.\", bg: \"#f5efea\" },\n    { num: \"07\", title: \"Beyond Work\", text: \"Outside of web design, I'm interested in gaming communities, creative projects, business ideas, and learning new digital skills.\", bg: \"#f7f2ee\" },\n    { num: \"08\", title: \"Let's Build Something Together.\", text: \"If you have an idea, a business, or a project that needs a strong online presence, I'd love to help bring it to life.\", bg: \"#f9f6f3\", btn: { text: \"Get in Touch\", url: \"\/contact\/\" } },\n  ];\n\n  stack.innerHTML = \"\";\n  dots.innerHTML = \"\";\n\n  window.abCurrent = 0;\n  window.abTotal = abCards.length;\n\n  abCards.forEach((card, index) => {\n    const el = document.createElement(\"div\");\n    el.className = \"ab-card\";\n\n    if (card.type === \"hero\") {\n      el.classList.add(\"hero-card\");\n      el.innerHTML = `\n        <div class=\"hero-img\"><\/div>\n        <div class=\"hero-overlay\"><\/div>\n        <div class=\"hero-content\">\n          <h1>Jonathan Alves<\/h1>\n          <h3>Website Designer & Digital Creator<\/h3>\n          <p>Building modern websites and digital experiences.<\/p>\n        <\/div>\n      `;\n    } else {\n      const btnHtml = card.btn ? `<a href=\"${card.btn.url}\" class=\"ab-btn\">${card.btn.text}<\/a>` : \"\";\n      el.style.background = card.bg;\n      el.innerHTML = `\n        <div class=\"ab-card-inner\">\n          <div class=\"ab-tag\">${card.num}<\/div>\n          <h2>${card.title}<\/h2>\n          <p>${card.text}<\/p>\n          ${btnHtml}\n        <\/div>\n      `;\n    }\n\n    stack.appendChild(el);\n\n    const dot = document.createElement(\"div\");\n    dot.className = \"ab-dot\" + (index === 0 ? \" active\" : \"\");\n    dot.addEventListener(\"click\", () => {\n      window.abCurrent = index;\n      window.abRender();\n    });\n\n    dots.appendChild(dot);\n  });\n\n  function abGetStyle(index) {\n    const diff = index - window.abCurrent;\n\n    if (diff === 0) {\n      return { scale: 1, y: 0, z: 30, opacity: 1 };\n    }\n\n    if (diff < 0) {\n      const distance = Math.abs(diff);\n      return {\n        scale: 0.94 - distance * 0.025,\n        y: -distance * 18,\n        z: 30 - distance,\n        opacity: 0\n      };\n    }\n\n    return {\n      scale: 0.95 - diff * 0.025,\n      y: diff * 18,\n      z: 30 - diff,\n      opacity: diff <= 2 ? 0.22 : 0\n    };\n  }\n\n  window.abRender = function () {\n    stack.querySelectorAll(\".ab-card\").forEach((el, index) => {\n      const style = abGetStyle(index);\n\n      el.style.transform = `translateY(${style.y}px) scale(${style.scale})`;\n      el.style.zIndex = style.z;\n      el.style.opacity = style.opacity;\n      el.classList.toggle(\"active-card\", index === window.abCurrent);\n    });\n\n    dots.querySelectorAll(\".ab-dot\").forEach((dot, index) => {\n      dot.classList.toggle(\"active\", index === window.abCurrent);\n    });\n  };\n\n  window.abRender();\n\n  gsap.registerPlugin(ScrollTrigger);\n\n  const isMobile = window.innerWidth <= 767;\n const cardScroll = isMobile ? 680 : 820;\nconst endHold = isMobile ? 760 : 1050;\n  const totalScroll = (abCards.length - 1) * cardScroll + endHold;\n\n  ScrollTrigger.create({\n    trigger: aboutSection,\n    start: \"top top\",\n    end: \"+=\" + totalScroll,\n    pin: true,\n    pinSpacing: true,\n    anticipatePin: 1,\n    scrub: true,\n\n    onUpdate: (self) => {\n      const usableProgress = Math.min(\n        1,\n        self.progress \/ ((abCards.length - 1) * cardScroll \/ totalScroll)\n      );\n\n      const nextIndex = Math.min(\n        abCards.length - 1,\n        Math.round(usableProgress * (abCards.length - 1))\n      );\n\n      if (nextIndex !== window.abCurrent) {\n        window.abCurrent = nextIndex;\n        window.abRender();\n      }\n    }\n  });\n\n  ScrollTrigger.refresh();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"","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-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/15","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=15"}],"version-history":[{"count":38,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/15\/revisions\/398"}],"wp:attachment":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}