create-foliokit 0.0.0-stage → 1.0.0

package/templates/default/src/ProjectMagazineGallery.css

@@ -0,0 +1,90 @@
+.project-magazine-gallery {
+  --magazine-gold: #D6B77A;
+  padding: 2px 0 14px;
+}
+
+.magazine-viewport {
+  position: relative;
+  width: 100%;
+  height: 320px;
+  overflow: hidden;
+  perspective: 1100px;
+  perspective-origin: 50% 43%;
+  touch-action: pan-y;
+  overscroll-behavior-x: contain;
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.magazine-viewport:focus-visible { outline: 1px solid color-mix(in srgb, var(--magazine-gold) 55%, transparent); outline-offset: -2px; }
+.magazine-viewport.is-dragging { cursor: grabbing; }
+.magazine-viewport.is-dragging .magazine-cover { cursor: grabbing; transition: none; }
+
+.magazine-cover {
+  --tilt-x: 0deg;
+  --tilt-y: 0deg;
+  position: absolute;
+  top: 15px;
+  left: 50%;
+  display: flex;
+  width: min(250px, 40%);
+  height: 270px;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid rgba(214, 183, 122, .25);
+  border-radius: 5px;
+  color: var(--warm-white);
+  background: #070707;
+  box-shadow: 0 15px 34px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 255, 255, .025) inset, 1px 0 rgba(214, 183, 122, .13) inset;
+  cursor: grab;
+  opacity: .68;
+  transform: translate3d(calc(-50% + var(--translate-x) + var(--drag-x, 0px) + var(--hover-shift)), var(--hover-lift), var(--depth-z)) rotateY(calc(var(--rotate-y) + var(--tilt-y))) rotateX(var(--tilt-x)) scale(var(--card-scale));
+  transform-style: preserve-3d;
+  transition: transform 460ms cubic-bezier(.22, .8, .22, 1), opacity 360ms ease, box-shadow 400ms ease, border-color 400ms ease;
+  animation: magazine-cover-appear 750ms cubic-bezier(.2, .72, .18, 1) var(--card-delay) both;
+  -webkit-user-select: none;
+}
+.magazine-cover.is-active { z-index: 4 !important; opacity: 1; cursor: pointer; border-color: rgba(214, 183, 122, .54); box-shadow: 0 20px 44px rgba(0, 0, 0, .62), 0 0 22px rgba(214, 183, 122, .1), 0 0 0 1px rgba(214, 183, 122, .06) inset; }
+.magazine-cover.is-hovered { opacity: 1; border-color: rgba(214, 183, 122, .68); box-shadow: 0 24px 50px rgba(0, 0, 0, .66), 0 0 28px rgba(214, 183, 122, .16), 0 0 0 1px rgba(214, 183, 122, .1) inset; }
+.magazine-cover.is-hidden { pointer-events: none; opacity: 0; }
+.magazine-cover:focus-visible { outline: 1px solid var(--magazine-gold); outline-offset: 3px; }
+.magazine-cover-image-wrap { position: relative; display: block; height: 56%; flex: 0 0 56%; overflow: hidden; background: #101010; transform: translateZ(8px); }
+.magazine-cover-image-wrap::after { position: absolute; inset: 0; border-bottom: 1px solid rgba(214, 183, 122, .22); background: linear-gradient(180deg, rgba(0, 0, 0, .24), transparent 35%, rgba(0, 0, 0, .16)); content: ''; pointer-events: none; }
+.magazine-cover-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.82); transition: filter 480ms ease, transform 700ms cubic-bezier(.2, .72, .18, 1); pointer-events: none; }
+.magazine-cover-image-placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: radial-gradient(circle at 35% 25%, #242424, #050505 72%); color: #e5cf9c; font: 600 46px/1 var(--heading-font); }
+.magazine-cover.is-active .magazine-cover-image, .magazine-cover.is-hovered .magazine-cover-image { filter: grayscale(0) brightness(.98); transform: scale(1.035); }
+.magazine-cover-info { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: flex-start; padding: 12px 14px 10px; text-align: left; transform: translateZ(14px); }
+.magazine-cover-meta { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font: 8px/1.2 var(--body-font); letter-spacing: .035em; text-transform: uppercase; }
+.magazine-cover-meta span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
+.magazine-cover-title { margin-top: 7px; color: var(--warm-white); font: 600 17px/1.1 var(--heading-font); letter-spacing: -.035em; }
+.magazine-cover-description { display: -webkit-box; max-height: 0; overflow: hidden; color: var(--muted); font: 10px/1.45 var(--body-font); opacity: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: max-height 360ms ease, opacity 280ms ease, margin 280ms ease; }
+.magazine-cover.is-active .magazine-cover-description, .magazine-cover.is-hovered .magazine-cover-description, .magazine-cover:focus-visible .magazine-cover-description { max-height: 48px; margin-top: 6px; opacity: 1; }
+.magazine-cover-hint { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 5px; color: var(--magazine-gold); font: 600 8px/1 var(--heading-font); letter-spacing: .1em; opacity: .78; }
+.magazine-cover-hint span { font-size: 13px; line-height: .8; }
+
+@keyframes magazine-cover-appear {
+  from { opacity: 0; filter: blur(3px); }
+  to { filter: blur(0); }
+}
+
+@media (min-width: 1024px) {
+  .magazine-viewport { height: 345px; perspective: 1250px; }
+  .magazine-cover { top: 18px; width: min(275px, 36%); height: 292px; }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .magazine-viewport { height: 315px; perspective: 1000px; }
+  .magazine-cover { top: 16px; width: min(238px, 42%); height: 267px; }
+}
+@media (max-width: 767px) {
+  .project-magazine-gallery { padding: 0 0 12px; }
+  .magazine-viewport { height: 300px; perspective: 850px; perspective-origin: 50% 42%; }
+  .magazine-cover { top: 14px; width: min(238px, 69%); height: 260px; border-radius: 4px; }
+  .magazine-cover-image-wrap { height: 53%; flex-basis: 53%; }
+  .magazine-cover-info { padding: 10px 12px 9px; }
+  .magazine-cover-description { font-size: 9px; }
+  .magazine-cover.is-active .magazine-cover-description { max-height: 52px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .magazine-cover, .magazine-cover-image, .magazine-cover-description { animation: none !important; transition-duration: .01ms !important; }
+}

package/templates/default/src/ProjectMagazineGallery.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useRef, useState, type CSSProperties, type PointerEvent, type KeyboardEvent, type WheelEvent } from 'react'
+import { projectCardId } from './utils'
+import type { Project } from '../data'
+import './ProjectMagazineGallery.css'
+
+type Props = { projects: Project[] }
+
+function getOffset(index: number, activeIndex: number, count: number) {
+  let offset = index - activeIndex
+  if (offset > count / 2) offset -= count
+  if (offset < -count / 2) offset += count
+  return offset
+}
+
+function ProjectMagazineGallery({ projects }: Props) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null)
+  const [dragX, setDragX] = useState(0)
+  const [isDragging, setIsDragging] = useState(false)
+  const [reducedMotion, setReducedMotion] = useState(false)
+  const dragStart = useRef<number | null>(null)
+  const wasDragged = useRef(false)
+  const clickResetTimer = useRef<number | undefined>(undefined)
+  const wheelDelta = useRef(0)
+  const wheelGestureHandled = useRef(false)
+  const wheelGestureTimer = useRef<number | undefined>(undefined)
+
+  useEffect(() => {
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const update = () => setReducedMotion(query.matches)
+    update()
+    query.addEventListener('change', update)
+    return () => {
+      query.removeEventListener('change', update)
+      window.clearTimeout(clickResetTimer.current)
+      window.clearTimeout(wheelGestureTimer.current)
+    }
+  }, [])
+
+  if (projects.length === 0) return null
+
+  const goTo = (nextIndex: number) => {
+    setActiveIndex((nextIndex + projects.length) % projects.length)
+    setHoverIndex(null)
+  }
+
+  const openProject = (index: number) => {
+    setActiveIndex(index)
+    document.getElementById(projectCardId(projects[index].name))?.scrollIntoView({
+      behavior: reducedMotion ? 'auto' : 'smooth',
+      block: 'center',
+    })
+  }
+
+  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.pointerType === 'mouse' && event.button !== 0) return
+    dragStart.current = event.clientX
+    setDragX(0)
+    const cover = (event.target as Element | null)?.closest<HTMLButtonElement>('.magazine-cover')
+    try {
+      (cover ?? event.currentTarget).setPointerCapture(event.pointerId)
+    } catch {
+      // Pointer capture may be unavailable on synthetic or cancelled pointer events.
+    }
+  }
+
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (dragStart.current === null) return
+    const delta = event.clientX - dragStart.current
+    setDragX(delta)
+    if (Math.abs(delta) > 8) setIsDragging(true)
+  }
+
+  const finishDrag = (event: PointerEvent<HTMLDivElement>) => {
+    if (dragStart.current === null) return
+    if (event.type === 'pointercancel') {
+      dragStart.current = null
+      setIsDragging(false)
+      setDragX(0)
+      return
+    }
+    const delta = event.clientX - dragStart.current
+    if (Math.abs(delta) > 48) {
+      wasDragged.current = true
+      goTo(activeIndex + (delta < 0 ? 1 : -1))
+      window.clearTimeout(clickResetTimer.current)
+      clickResetTimer.current = window.setTimeout(() => { wasDragged.current = false }, 140)
+    }
+    dragStart.current = null
+    setIsDragging(false)
+    setDragX(0)
+  }
+
+  const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
+    if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return
+    event.preventDefault()
+    window.clearTimeout(wheelGestureTimer.current)
+    wheelGestureTimer.current = window.setTimeout(() => {
+      wheelDelta.current = 0
+      wheelGestureHandled.current = false
+    }, 280)
+    if (wheelGestureHandled.current) return
+    wheelDelta.current += event.deltaX
+    if (Math.abs(wheelDelta.current) < 36) return
+    goTo(activeIndex + (wheelDelta.current > 0 ? 1 : -1))
+    wheelDelta.current = 0
+    wheelGestureHandled.current = true
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'ArrowRight') { event.preventDefault(); goTo(activeIndex + 1) }
+    if (event.key === 'ArrowLeft') { event.preventDefault(); goTo(activeIndex - 1) }
+    if (event.key === 'Home') { event.preventDefault(); goTo(0) }
+    if (event.key === 'End') { event.preventDefault(); goTo(projects.length - 1) }
+  }
+
+  const viewportStyle = { '--drag-x': `${dragX}px` } as CSSProperties
+
+  return (
+    <section className="project-magazine-gallery" aria-label="Featured project carousel">
+      <div
+        className={`magazine-viewport${isDragging ? ' is-dragging' : ''}`}
+        style={viewportStyle}
+        role="region"
+        aria-roledescription="project carousel"
+        aria-label="Project magazine gallery. Swipe, drag, or use a horizontal trackpad gesture to browse. Use the left and right arrow keys while focused."
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        onWheel={handleWheel}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={finishDrag}
+        onPointerCancel={finishDrag}
+      >
+        {projects.map((project, index) => {
+          const offset = getOffset(index, activeIndex, projects.length)
+          const distance = Math.abs(offset)
+          const isActive = index === activeIndex
+          const isHovered = index === hoverIndex
+          const hoverShift = hoverIndex !== null && index !== hoverIndex ? (index < hoverIndex ? '-9px' : '9px') : '0px'
+          const cardStyle = {
+            '--translate-x': offset === 0 ? '0%' : offset < 0 ? `${Math.max(-96, offset * 76)}%` : `${Math.min(96, offset * 76)}%`,
+            '--depth-z': `${-distance * 74}px`,
+            '--rotate-y': `${offset * -11}deg`,
+            '--card-scale': `${Math.max(.76, 1 - distance * .1)}`,
+            '--hover-lift': isHovered && !reducedMotion ? '24px' : '0px',
+            '--hover-shift': hoverShift,
+            '--card-delay': `${index * 110}ms`,
+            zIndex: projects.length - distance,
+          } as CSSProperties
+
+          const pointerTilt = (event: PointerEvent<HTMLButtonElement>) => {
+            if (event.pointerType !== 'mouse' || reducedMotion || isDragging) return
+            const bounds = event.currentTarget.getBoundingClientRect()
+            const relX = (event.clientX - bounds.left) / bounds.width - .5
+            const relY = (event.clientY - bounds.top) / bounds.height - .5
+            event.currentTarget.style.setProperty('--tilt-y', `${relX * 5}deg`)
+            event.currentTarget.style.setProperty('--tilt-x', `${-relY * 4}deg`)
+          }
+
+          const clearTilt = (event: PointerEvent<HTMLButtonElement>) => {
+            event.currentTarget.style.removeProperty('--tilt-y')
+            event.currentTarget.style.removeProperty('--tilt-x')
+            setHoverIndex(null)
+          }
+
+          return (
+            <button
+              className={`magazine-cover${isActive ? ' is-active' : ''}${isHovered ? ' is-hovered' : ''}${distance > 1 ? ' is-hidden' : ''}`}
+              key={project.name}
+              data-featured={project.featured || undefined}
+              type="button"
+              style={cardStyle}
+              aria-label={`Open ${project.name} project details`}
+              aria-hidden={distance > 1}
+              tabIndex={distance > 1 ? -1 : 0}
+              onPointerEnter={(event) => { if (event.pointerType === 'mouse') setHoverIndex(index) }}
+              onPointerMove={pointerTilt}
+              onPointerLeave={clearTilt}
+              onFocus={() => { setActiveIndex(index); setHoverIndex(index) }}
+              onBlur={() => setHoverIndex(null)}
+              onClick={() => {
+                if (wasDragged.current) { wasDragged.current = false; return }
+                openProject(index)
+              }}
+            >
+              <span className="magazine-cover-image-wrap">
+                {project.image ? <>
+                  <img src={project.image} alt={project.imageAlt ?? `${project.name} project cover`} className="magazine-cover-image" loading="lazy" draggable={false} onError={(event) => { event.currentTarget.hidden = true; const fallback = event.currentTarget.nextElementSibling; if (fallback instanceof HTMLElement) fallback.hidden = false }} />
+                  <span className="magazine-cover-image-placeholder" aria-hidden="true" hidden>{project.name.slice(0, 2).toUpperCase()}</span>
+                </> : <span className="magazine-cover-image-placeholder" aria-hidden="true">{project.name.slice(0, 2).toUpperCase()}</span>}
+              </span>
+              <span className="magazine-cover-info">
+                <span className="magazine-cover-meta">
+                  <span>{project.category}</span>
+                </span>
+                <span className="magazine-cover-title">{project.name}</span>
+                <span className="magazine-cover-description">{project.description}</span>
+                <span className="magazine-cover-hint">VIEW PROJECT <span aria-hidden="true">↗</span></span>
+              </span>
+            </button>
+          )
+        })}
+      </div>
+
+    </section>
+  )
+}
+
+export default ProjectMagazineGallery

package/templates/default/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)