{"id":13,"date":"2026-06-01T12:52:47","date_gmt":"2026-06-01T10:52:47","guid":{"rendered":"https:\/\/jalves.ch\/?page_id=13"},"modified":"2026-06-03T22:47:47","modified_gmt":"2026-06-03T20:47:47","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/jalves.ch\/de\/portfolio\/","title":{"rendered":"Portfolio"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>Portfolio \u2014 JA Designs<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&amp;family=DM+Sans:wght@300;400;500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:root {\n  --cream: #f5f0ea;\n  --beige: #e8ddd2;\n  --warm: #d4c4b0;\n  --brown: #2c1f14;\n  --brown-light: #a07850;\n  --accent: #c4a882;\n  --white: #faf8f5;\n  --text: #2c1f14;\n  --text-mid: #6b4c32;\n  --text-light: #a07850;\n}\n\nhtml {\n  scroll-behavior: auto;\n}\n\nbody {\n  font-family: 'DM Sans', sans-serif;\n  background: var(--white);\n  color: var(--text);\n  overflow-x: hidden;\n}\n\n.scroll-section,\n.single-section,\n.plain-section {\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n}\n\n.scroll-section {\n  min-height: 100vh;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.single-section {\n  min-height: 100vh;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.plain-section {\n  flex-direction: column;\n  justify-content: center;\n}\n\n.col-left,\n.col-right {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.col-left {\n  width: 48%;\n  padding: 80px 6vw 80px 8vw;\n}\n\n.col-right {\n  width: 48%;\n  padding: 80px 8vw 80px 6vw;\n}\n\n.section-label {\n  font-size: 11px;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--text-light);\n  margin-bottom: 40px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.section-label::after {\n  content: '';\n  width: 40px;\n  height: 1px;\n  background: var(--warm);\n}\n\n.section-label.light {\n  color: var(--accent);\n}\n\n.section-label.light::after {\n  background: rgba(196, 168, 130, 0.3);\n}\n\n\/* Hero *\/\n.pf-hero {\n  background: var(--brown);\n  position: relative;\n  justify-content: flex-end;\n  padding: 80px 8vw 100px;\n  opacity: 1 !important;\n}\n\n.pf-hero::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(ellipse at 80% 20%, rgba(196, 168, 130, 0.12) 0%, transparent 60%);\n  pointer-events: none;\n}\n\n.pf-hero-label,\n.pf-hero h1,\n.pf-hero-sub,\n.pf-hero-scroll {\n  position: relative;\n  z-index: 1;\n  opacity: 0;\n  transform: translateY(20px);\n  animation: fadeUp 0.9s ease forwards;\n}\n\n.pf-hero-label {\n  font-size: 11px;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--accent);\n  margin-bottom: 32px;\n  animation-delay: 0.2s;\n}\n\n.pf-hero h1 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(72px, 12vw, 160px);\n  font-weight: 300;\n  color: var(--cream);\n  line-height: 0.9;\n  letter-spacing: -2px;\n  margin-bottom: 48px;\n  transform: translateY(30px);\n  animation-delay: 0.4s;\n}\n\n.pf-hero h1 em {\n  font-style: italic;\n  color: var(--accent);\n}\n\n.pf-hero-sub {\n  max-width: 520px;\n  animation-delay: 0.7s;\n}\n\n.pf-hero-sub p {\n  font-size: 16px;\n  line-height: 1.8;\n  color: rgba(245, 240, 234, 0.65);\n  font-weight: 300;\n}\n\n.pf-hero-sub p + p {\n  margin-top: 12px;\n}\n\n.pf-hero-scroll {\n  position: absolute;\n  bottom: 40px;\n  right: 8vw;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: var(--accent);\n  font-size: 11px;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  animation-delay: 1.2s;\n}\n\n.pf-hero-scroll::before {\n  content: '';\n  width: 40px;\n  height: 1px;\n  background: var(--accent);\n}\n\n\/* Featured *\/\n.pf-featured {\n  background: var(--white);\n}\n\n.pf-featured-img-wrap {\n  width: 100%;\n  height: 70vh;\n  border-radius: 20px;\n  overflow: hidden;\n  background: #1a1008;\n  position: relative;\n}\n\n.pf-featured-img-inner {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(135deg, #2c1f14 0%, #1a1008 50%, #3d2918 100%);\n}\n\n.pf-featured-gallery {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.pf-featured-track {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.pf-featured-item {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  transform: scale(1.04);\n  transition: opacity 0.7s ease, transform 0.7s ease;\n}\n\n.pf-featured-item.active {\n  opacity: 1;\n  transform: scale(1);\n  z-index: 2;\n}\n\n.pf-featured-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.pf-featured-btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  border: 1px solid rgba(196, 168, 130, 0.35);\n  background: rgba(250, 248, 245, 0.88);\n  color: var(--brown);\n  cursor: pointer;\n  z-index: 5;\n  font-size: 26px;\n  line-height: 1;\n}\n\n.pf-featured-prev {\n  left: 18px;\n}\n\n.pf-featured-next {\n  right: 18px;\n}\n\n.pf-featured-dots {\n  position: absolute;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 8px;\n  z-index: 5;\n}\n\n.pf-featured-dot {\n  width: 6px;\n  height: 6px;\n  border: 0;\n  border-radius: 50%;\n  background: rgba(245, 240, 234, 0.45);\n  cursor: pointer;\n  padding: 0;\n}\n\n.pf-featured-dot.active {\n  width: 20px;\n  border-radius: 4px;\n  background: var(--accent);\n}\n\n.pf-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 11px;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color: var(--text-light);\n  margin-bottom: 24px;\n}\n\n.pf-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--accent);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.pf-featured h2,\n.pf-story h2,\n.pf-process h2,\n.pf-skills h2 {\n  font-family: 'Cormorant Garamond', serif;\n  font-weight: 300;\n  line-height: 1.1;\n}\n\n.pf-featured h2 {\n  font-size: clamp(36px, 3.5vw, 52px);\n  font-weight: 400;\n  color: var(--text);\n  margin-bottom: 20px;\n}\n\n.pf-featured p {\n  font-size: 15px;\n  line-height: 1.8;\n  color: var(--text-mid);\n  font-weight: 300;\n  margin-bottom: 32px;\n}\n\n.pf-tech-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-bottom: 32px;\n}\n\n.pf-tech-tag {\n  padding: 5px 13px;\n  border: 1px solid var(--beige);\n  border-radius: 20px;\n  font-size: 12px;\n  color: var(--text-mid);\n  transition: all 0.3s ease;\n}\n\n.pf-tech-tag:hover {\n  border-color: var(--accent);\n  color: var(--brown);\n}\n\n.pf-deliverables {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.pf-deliverables li {\n  font-size: 14px;\n  color: var(--text-light);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.pf-deliverables li::before {\n  content: '';\n  width: 16px;\n  height: 1px;\n  background: var(--warm);\n  flex-shrink: 0;\n}\n\n\/* Story *\/\n.pf-story {\n  background: var(--cream);\n}\n\n.pf-story .col-left,\n.pf-process .col-left,\n.pf-skills .col-left {\n  width: 35%;\n}\n\n.pf-story .col-right,\n.pf-process .col-right,\n.pf-skills .col-right {\n  width: 60%;\n  padding-left: 4vw;\n}\n\n.pf-story h2,\n.pf-skills h2 {\n  font-size: clamp(40px, 4vw, 60px);\n  color: var(--text);\n}\n\n.pf-story h2 em,\n.pf-skills h2 em {\n  font-style: italic;\n  color: var(--brown-light);\n}\n\n.pf-story-cards {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.pf-story-card {\n  background: var(--white);\n  border-radius: 14px;\n  padding: 32px;\n  display: grid;\n  grid-template-columns: 56px 1fr;\n  gap: 20px;\n  align-items: start;\n  transition: box-shadow 0.3s ease;\n}\n\n.pf-story-card:hover {\n  box-shadow: 0 12px 40px rgba(44, 31, 20, 0.07);\n}\n\n.pf-story-num {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 40px;\n  font-weight: 300;\n  color: var(--beige);\n  line-height: 1;\n}\n\n.pf-story-card h3 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 22px;\n  font-weight: 400;\n  color: var(--text);\n  margin-bottom: 8px;\n}\n\n.pf-story-card p {\n  font-size: 14px;\n  line-height: 1.75;\n  color: var(--text-mid);\n  font-weight: 300;\n}\n\n\/* Process *\/\n.pf-process {\n  background: var(--brown);\n}\n\n.pf-process h2 {\n  font-size: clamp(40px, 4vw, 60px);\n  color: var(--cream);\n}\n\n.pf-process h2 em {\n  font-style: italic;\n  color: var(--accent);\n}\n\n.pf-timeline {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.pf-timeline::before {\n  content: '';\n  position: absolute;\n  left: 28px;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: rgba(196, 168, 130, 0.1);\n}\n\n.pf-timeline-item {\n  display: grid;\n  grid-template-columns: 72px 1fr;\n  gap: 24px;\n  padding: 28px 0;\n  border-bottom: 1px solid rgba(196, 168, 130, 0.07);\n  position: relative;\n}\n\n.pf-timeline-item:last-child {\n  border-bottom: none;\n}\n\n.pf-timeline-num {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 13px;\n  color: var(--accent);\n  letter-spacing: 2px;\n  padding-top: 4px;\n  position: relative;\n  z-index: 1;\n}\n\n.pf-timeline-content h3 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 24px;\n  font-weight: 400;\n  color: var(--cream);\n  margin-bottom: 6px;\n}\n\n.pf-timeline-content p {\n  font-size: 13px;\n  line-height: 1.75;\n  color: rgba(245, 240, 234, 0.4);\n  font-weight: 300;\n}\n\n\/* Skills *\/\n.pf-skills {\n  background: var(--cream);\n}\n\n.pf-skills-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 2px;\n  background: var(--warm);\n  border-radius: 16px;\n  overflow: hidden;\n}\n\n.pf-skill-item {\n  background: var(--white);\n  padding: 28px 24px;\n  transition: background 0.3s ease;\n  cursor: default;\n}\n\n.pf-skill-name {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 18px;\n  font-weight: 400;\n  color: var(--text);\n  margin-bottom: 12px;\n  transition: color 0.3s ease;\n}\n\n.pf-skill-line {\n  width: 24px;\n  height: 1px;\n  background: var(--warm);\n  transition: background 0.3s ease, width 0.3s ease;\n}\n\n.pf-skill-item:hover {\n  background: var(--brown);\n}\n\n.pf-skill-item:hover .pf-skill-name {\n  color: var(--cream);\n}\n\n.pf-skill-item:hover .pf-skill-line {\n  background: var(--accent);\n  width: 40px;\n}\n\n\/* CTA *\/\n.pf-cta {\n  background: var(--brown);\n  text-align: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  padding: 160px 8vw;\n}\n\n.pf-cta::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(ellipse at 50% 100%, rgba(196, 168, 130, 0.08) 0%, transparent 60%);\n  pointer-events: none;\n}\n\n.pf-cta h2 {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(48px, 7vw, 96px);\n  font-weight: 300;\n  color: var(--cream);\n  line-height: 1.1;\n  margin-bottom: 24px;\n  letter-spacing: -1px;\n  position: relative;\n  z-index: 1;\n}\n\n.pf-cta h2 em {\n  font-style: italic;\n  color: var(--accent);\n}\n\n.pf-cta p {\n  font-size: 16px;\n  line-height: 1.8;\n  color: rgba(245, 240, 234, 0.5);\n  font-weight: 300;\n  max-width: 440px;\n  margin: 0 auto 48px;\n  position: relative;\n  z-index: 1;\n}\n\n.pf-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  padding: 18px 48px;\n  border: 1px solid rgba(196, 168, 130, 0.4);\n  border-radius: 4px;\n  font-family: 'DM Sans', sans-serif;\n  font-size: 13px;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color: var(--cream);\n  text-decoration: none;\n  position: relative;\n  overflow: hidden;\n  transition: color 0.4s ease, border-color 0.4s ease;\n  z-index: 1;\n}\n\n.pf-btn::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--accent);\n  transform: translateY(100%);\n  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.pf-btn:hover::before {\n  transform: translateY(0);\n}\n\n.pf-btn:hover {\n  color: var(--brown);\n  border-color: var(--accent);\n}\n\n.pf-btn span {\n  position: relative;\n  z-index: 1;\n}\n\n@keyframes fadeUp {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  50% {\n    opacity: 0.5;\n    transform: scale(0.8);\n  }\n}\n\n@media (max-width: 1024px) {\n  .scroll-section {\n    flex-direction: column;\n  }\n\n  .col-left,\n  .col-right {\n    width: 100% !important;\n    min-height: auto;\n    padding: 60px 6vw !important;\n  }\n\n  .pf-story .col-left,\n  .pf-process .col-left,\n  .pf-skills .col-left {\n    padding-bottom: 0 !important;\n  }\n\n  .pf-featured-img-wrap {\n    height: 50vw;\n    min-height: 320px;\n  }\n\n  .pf-skills-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 767px) {\n  .pf-hero {\n    padding: 60px 6vw 80px;\n  }\n\n  .pf-hero-scroll {\n    right: 6vw;\n  }\n\n  .pf-story-card {\n    grid-template-columns: 1fr;\n    padding: 26px;\n  }\n\n  .pf-skills-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .pf-skill-item {\n    padding: 24px 20px;\n  }\n\n  .pf-cta {\n    padding: 80px 6vw;\n  }\n\n  .pf-timeline::before {\n    left: 22px;\n  }\n\n  .pf-timeline-item {\n    grid-template-columns: 56px 1fr;\n  }\n}\n<\/style>\n\n<section class=\"single-section pf-hero\">\n  <div class=\"pf-hero-label\">JA Designs \u2014 Portfolio<\/div>\n  <h1>Port<em>folio<\/em><\/h1>\n\n  <div class=\"pf-hero-sub\">\n    <p>Selected projects, digital experiences and websites I&#8217;ve designed and built.<\/p>\n    <p>Every project starts with a problem to solve. Here are some of the digital experiences I&#8217;ve worked on.<\/p>\n  <\/div>\n\n  <div class=\"pf-hero-scroll\">Scroll to explore<\/div>\n<\/section>\n\n<section class=\"scroll-section pf-featured\">\n  <div class=\"col-left\">\n    <div class=\"pf-featured-img-wrap\">\n      <div class=\"pf-featured-img-inner\">\n        <div class=\"pf-featured-gallery\" id=\"pfFeaturedGallery\">\n          <div class=\"pf-featured-track\" id=\"pfFeaturedTrack\"><\/div>\n\n          <button class=\"pf-featured-btn pf-featured-prev\" type=\"button\" onclick=\"pfFeaturedMove(-1)\">\u2039<\/button>\n          <button class=\"pf-featured-btn pf-featured-next\" type=\"button\" onclick=\"pfFeaturedMove(1)\">\u203a<\/button>\n\n          <div class=\"pf-featured-dots\" id=\"pfFeaturedDots\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"col-right\">\n    <div class=\"section-label\">Featured Project<\/div>\n    <div class=\"pf-status\"><span class=\"pf-status-dot\"><\/span>Launching Soon<\/div>\n\n    <h2>TCG Liga<br>Murten<\/h2>\n    <p>Complete redesign and modernization of a local Trading Card Game community website \u2014 built for scale, built for community.<\/p>\n\n    <div class=\"pf-tech-grid\">\n      <span class=\"pf-tech-tag\">WordPress<\/span>\n      <span class=\"pf-tech-tag\">Kadence<\/span>\n      <span class=\"pf-tech-tag\">WooCommerce<\/span>\n      <span class=\"pf-tech-tag\">Event Management<\/span>\n      <span class=\"pf-tech-tag\">SEO Foundations<\/span>\n      <span class=\"pf-tech-tag\">Responsive Design<\/span>\n    <\/div>\n\n    <ul class=\"pf-deliverables\">\n      <li>Modern Homepage<\/li>\n      <li>Events System<\/li>\n      <li>Account Management<\/li>\n      <li>Archive Structure<\/li>\n      <li>Category Organization<\/li>\n      <li>Scalable Architecture<\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n<section class=\"scroll-section pf-story\">\n  <div class=\"col-left\">\n    <div class=\"section-label\">Project Story<\/div>\n    <h2>Behind<br>the<br><em>Work<\/em><\/h2>\n  <\/div>\n\n  <div class=\"col-right\">\n    <div class=\"pf-story-cards\">\n      <div class=\"pf-story-card\">\n        <div class=\"pf-story-num\">01<\/div>\n        <div>\n          <h3>The Challenge<\/h3>\n          <p>The previous website lacked modern structure, visual hierarchy and user experience, making it hard for the community to engage.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"pf-story-card\">\n        <div class=\"pf-story-num\">02<\/div>\n        <div>\n          <h3>The Solution<\/h3>\n          <p>A complete redesign focused on simplicity, navigation, scalability and community engagement, built from the ground up.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"pf-story-card\">\n        <div class=\"pf-story-num\">03<\/div>\n        <div>\n          <h3>The Result<\/h3>\n          <p>A future-ready platform with a professional appearance and a solid foundation for growth and community interaction.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"scroll-section pf-process\">\n  <div class=\"col-left\">\n    <div class=\"section-label light\">Process<\/div>\n    <h2>How I<br><em>Work<\/em><\/h2>\n  <\/div>\n\n  <div class=\"col-right\">\n    <div class=\"pf-timeline\">\n      <div class=\"pf-timeline-item\"><div class=\"pf-timeline-num\">01<\/div><div class=\"pf-timeline-content\"><h3>Discovery<\/h3><p>Understanding the project goals, the people behind it, and what success looks like.<\/p><\/div><\/div>\n      <div class=\"pf-timeline-item\"><div class=\"pf-timeline-num\">02<\/div><div class=\"pf-timeline-content\"><h3>Planning<\/h3><p>Building structure, user flow and architecture before touching any design tool.<\/p><\/div><\/div>\n      <div class=\"pf-timeline-item\"><div class=\"pf-timeline-num\">03<\/div><div class=\"pf-timeline-content\"><h3>Design<\/h3><p>Creating the visual experience: clean, intentional and consistent.<\/p><\/div><\/div>\n      <div class=\"pf-timeline-item\"><div class=\"pf-timeline-num\">04<\/div><div class=\"pf-timeline-content\"><h3>Development<\/h3><p>Building the website in WordPress with precision and performance in mind.<\/p><\/div><\/div>\n      <div class=\"pf-timeline-item\"><div class=\"pf-timeline-num\">05<\/div><div class=\"pf-timeline-content\"><h3>Launch<\/h3><p>Optimization, testing and deployment, making sure everything is ready.<\/p><\/div><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"scroll-section pf-skills\">\n  <div class=\"col-left\">\n    <div class=\"section-label\">Skills<\/div>\n    <h2>Tools &amp;<br><em>Expertise<\/em><\/h2>\n  <\/div>\n\n  <div class=\"col-right\">\n    <div class=\"pf-skills-grid\">\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">WordPress<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">Kadence<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">WooCommerce<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">HTML<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">CSS<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">Responsive<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">UI \/ UX<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">SEO<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n      <div class=\"pf-skill-item\"><div class=\"pf-skill-name\">Performance<\/div><div class=\"pf-skill-line\"><\/div><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"plain-section pf-cta\">\n  <h2>Let&#8217;s Build<br><em>Something<\/em><br>Together<\/h2>\n  <p>Looking for a modern website, redesign or digital project? I&#8217;d love to hear about your idea.<\/p>\n  <a href=\"\/contact\/\" class=\"pf-btn\"><span>Get in Touch<\/span><\/a>\n<\/section>\n\n<script>\n(function () {\n  const pfFeaturedImages = [\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 pfFeaturedCurrent = 0;\n  let pfFeaturedAutoplay;\n\n  function pfFeaturedRender() {\n    document.querySelectorAll(\".pf-featured-item\").forEach((item, index) => {\n      item.classList.toggle(\"active\", index === pfFeaturedCurrent);\n    });\n\n    document.querySelectorAll(\".pf-featured-dot\").forEach((dot, index) => {\n      dot.classList.toggle(\"active\", index === pfFeaturedCurrent);\n    });\n  }\n\n  window.pfFeaturedMove = function (direction) {\n    pfFeaturedCurrent = ((pfFeaturedCurrent + direction) % pfFeaturedImages.length + pfFeaturedImages.length) % pfFeaturedImages.length;\n    pfFeaturedRender();\n    pfFeaturedStart();\n  };\n\n  function pfFeaturedStart() {\n    clearInterval(pfFeaturedAutoplay);\n    pfFeaturedAutoplay = setInterval(() => window.pfFeaturedMove(1), 3500);\n  }\n\n  function pfInitFeaturedGallery() {\n    const track = document.getElementById(\"pfFeaturedTrack\");\n    const dots = document.getElementById(\"pfFeaturedDots\");\n    const gallery = document.getElementById(\"pfFeaturedGallery\");\n\n    if (!track || !dots || !gallery) return;\n    if (track.dataset.initialized === \"true\") return;\n\n    track.dataset.initialized = \"true\";\n    track.innerHTML = \"\";\n    dots.innerHTML = \"\";\n\n    pfFeaturedImages.forEach((image, index) => {\n      const item = document.createElement(\"div\");\n      item.className = \"pf-featured-item\" + (index === 0 ? \" active\" : \"\");\n      item.innerHTML = '<img decoding=\"async\" src=\"' + image.src + '\" alt=\"' + image.alt + '\" draggable=\"false\">';\n      track.appendChild(item);\n\n      const dot = document.createElement(\"button\");\n      dot.type = \"button\";\n      dot.className = \"pf-featured-dot\" + (index === 0 ? \" active\" : \"\");\n      dot.setAttribute(\"aria-label\", \"Show project image \" + (index + 1));\n\n      dot.addEventListener(\"click\", () => {\n        pfFeaturedCurrent = index;\n        pfFeaturedRender();\n        pfFeaturedStart();\n      });\n\n      dots.appendChild(dot);\n    });\n\n    gallery.addEventListener(\"mouseenter\", () => clearInterval(pfFeaturedAutoplay));\n    gallery.addEventListener(\"mouseleave\", pfFeaturedStart);\n\n    pfFeaturedStart();\n  }\n\n  function pfInitPortfolioScroll() {\n    const portfolioPage = document.querySelector(\".pf-hero\");\n    if (!portfolioPage) return;\n\n    if (document.body.dataset.pfScrollInitialized === \"true\") return;\n    document.body.dataset.pfScrollInitialized = \"true\";\n\n    if (typeof gsap === \"undefined\" || typeof ScrollTrigger === \"undefined\" || typeof Lenis === \"undefined\") {\n      console.warn(\"Portfolio: GSAP, ScrollTrigger or Lenis is missing.\");\n      return;\n    }\n\n    gsap.registerPlugin(ScrollTrigger);\n\n    const isMobile = window.innerWidth <= 767;\n    const sectionEnd = isMobile ? \"+=391%\" : \"+=340%\";\n    const heroEnd = isMobile ? \"+=1095px\" : \"+=950px\";\n    const revealDistance = isMobile ? 34 : 60;\n    const revealDuration = isMobile ? 0.7 : 0.85;\n\n    if (!window.jaLenis) {\n      window.jaLenis = new Lenis({\n        duration: isMobile ? 0.85 : 0.75,\n        easing: (t) => 1 - Math.pow(1 - t, 3),\n        smooth: true,\n        syncTouch: true,\n        touchMultiplier: 1.05,\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(\".single-section, .scroll-section, .plain-section\");\n\n    sections.forEach((section) => {\n      const isSingle = section.classList.contains(\"single-section\");\n      const isPlain = section.classList.contains(\"plain-section\");\n      const left = section.querySelector(\".col-left\");\n      const right = section.querySelector(\".col-right\");\n\n      if (isSingle) {\n        gsap.set(section, { clearProps: \"opacity,transform\" });\n\n        ScrollTrigger.create({\n          trigger: section,\n          start: \"top top\",\n          end: heroEnd,\n          pin: true,\n          pinSpacing: true,\n          anticipatePin: 1,\n        });\n\n        return;\n      }\n\n      if (isPlain) {\n        const plainItems = gsap.utils.toArray(section.children);\n\n        gsap.set(plainItems, {\n          y: isMobile ? 32 : 46,\n          opacity: 0,\n        });\n\n        const plainTl = gsap.timeline({ paused: true });\n\n        plainTl.to(plainItems, {\n          y: 0,\n          opacity: 1,\n          duration: isMobile ? 0.75 : 0.85,\n          stagger: isMobile ? 0.08 : 0.12,\n          ease: \"power3.out\",\n        });\n\n        ScrollTrigger.create({\n          trigger: section,\n          start: \"top top\",\n          end: sectionEnd,\n          pin: true,\n          pinSpacing: true,\n          anticipatePin: 1,\n          onEnter: () => plainTl.play(),\n          onEnterBack: () => plainTl.play(),\n          onLeaveBack: () => plainTl.reverse(),\n        });\n\n        return;\n      }\n\n      if (!left || !right) return;\n\n      gsap.set(section, { opacity: 1, y: 0 });\n      gsap.set(left, { x: -revealDistance, opacity: 0 });\n      gsap.set(right, { x: revealDistance, opacity: 0 });\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl\n        .to(left, {\n          x: 0,\n          opacity: 1,\n          duration: revealDuration,\n          ease: \"power3.out\",\n        })\n        .to(right, {\n          x: 0,\n          opacity: 1,\n          duration: revealDuration,\n          ease: \"power3.out\",\n        }, \"<0.05\");\n\n      ScrollTrigger.create({\n        trigger: section,\n        start: \"top top\",\n        end: sectionEnd,\n        pin: true,\n        pinSpacing: true,\n        anticipatePin: 1,\n        onEnter: () => tl.play(),\n        onEnterBack: () => tl.play(),\n        onLeaveBack: () => tl.reverse(),\n      });\n    });\n\n    ScrollTrigger.sort();\n    ScrollTrigger.refresh();\n\n    window.addEventListener(\"resize\", () => {\n      ScrollTrigger.refresh();\n    });\n  }\n\n  document.addEventListener(\"DOMContentLoaded\", pfInitFeaturedGallery);\n  window.addEventListener(\"load\", pfInitPortfolioScroll);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Portfolio \u2014 JA Designs JA Designs \u2014 Portfolio Portfolio Selected projects, digital experiences and websites I&#8217;ve designed and built. Every project starts with a problem to solve. Here are some of the digital experiences I&#8217;ve worked on. Scroll to explore \u2039 \u203a Featured Project Launching Soon TCG LigaMurten Complete redesign and modernization of a local&#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":"hide","_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-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/13","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=13"}],"version-history":[{"count":15,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":397,"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/pages\/13\/revisions\/397"}],"wp:attachment":[{"href":"https:\/\/jalves.ch\/de\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}