@jxsuite/starters 0.34.0

package/sites/portfolio/components/pv-footer.json

@@ -0,0 +1,145 @@
+{
+  "tagName": "pv-footer",
+  "state": {
+    "brand": "Aperture Studio",
+    "tagline": "An image-forward photography studio telling honest, timeless stories.",
+    "email": "hello@aperturestudio.example",
+    "phone": "(555) 204-7788"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "padding": "4rem 1.5rem 2rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "2fr 1fr 1fr",
+        "gap": "2.5rem",
+        "@--md": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.6rem",
+                "fontWeight": "600",
+                "marginBottom": "0.75rem"
+              },
+              "textContent": "${state.brand}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.7", "maxWidth": "34ch", "lineHeight": "1.7" },
+              "textContent": "${state.tagline}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.12em",
+                "fontSize": "0.72rem",
+                "opacity": "0.55",
+                "marginBottom": "0.85rem"
+              },
+              "textContent": "Studio"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0 0 0.4rem", "opacity": "0.8" },
+              "textContent": "${state.email}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.8" },
+              "textContent": "${state.phone}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.12em",
+                "fontSize": "0.72rem",
+                "opacity": "0.55",
+                "marginBottom": "0.85rem"
+              },
+              "textContent": "Explore"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/work/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.8",
+                "textDecoration": "none",
+                "marginBottom": "0.4rem"
+              },
+              "textContent": "Work"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/about/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.8",
+                "textDecoration": "none",
+                "marginBottom": "0.4rem"
+              },
+              "textContent": "About"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.8",
+                "textDecoration": "none"
+              },
+              "textContent": "Contact"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "2.5rem auto 0",
+        "paddingTop": "1.5rem",
+        "borderTop": "1px solid rgba(255, 255, 255, 0.14)",
+        "fontSize": "0.82rem",
+        "opacity": "0.55"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": { "margin": "0" },
+          "textContent": "© Aperture Studio. Built with Jx."
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/components/pv-gallery.json

@@ -0,0 +1,50 @@
+{
+  "tagName": "pv-gallery",
+  "state": {
+    "img1": { "type": "string", "format": "image", "default": "" },
+    "img2": { "type": "string", "format": "image", "default": "" },
+    "img3": { "type": "string", "format": "image", "default": "" },
+    "alt": "Photograph from the studio"
+  },
+  "style": {
+    "display": "grid",
+    "gridTemplateColumns": "repeat(3, 1fr)",
+    "gap": "1rem",
+    "@--sm": { "gridTemplateColumns": "1fr" }
+  },
+  "children": [
+    {
+      "tagName": "img",
+      "attributes": { "src": "${state.img1}", "alt": "${state.alt}", "loading": "lazy" },
+      "style": {
+        "width": "100%",
+        "aspectRatio": "4 / 5",
+        "objectFit": "cover",
+        "borderRadius": "var(--radius)",
+        "display": "block"
+      }
+    },
+    {
+      "tagName": "img",
+      "attributes": { "src": "${state.img2}", "alt": "${state.alt}", "loading": "lazy" },
+      "style": {
+        "width": "100%",
+        "aspectRatio": "4 / 5",
+        "objectFit": "cover",
+        "borderRadius": "var(--radius)",
+        "display": "block"
+      }
+    },
+    {
+      "tagName": "img",
+      "attributes": { "src": "${state.img3}", "alt": "${state.alt}", "loading": "lazy" },
+      "style": {
+        "width": "100%",
+        "aspectRatio": "4 / 5",
+        "objectFit": "cover",
+        "borderRadius": "var(--radius)",
+        "display": "block"
+      }
+    }
+  ]
+}

package/sites/portfolio/components/pv-hero.json

@@ -0,0 +1,132 @@
+{
+  "tagName": "pv-hero",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "cta": "View the Work",
+    "ctaHref": "/work/",
+    "cta2": "",
+    "cta2Href": "/contact/",
+    "bg": { "type": "string", "format": "image", "default": "" }
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "minHeight": "88vh",
+    "color": "var(--color-text-white)",
+    "backgroundImage": "url('${state.bg}')",
+    "backgroundSize": "cover",
+    "backgroundPosition": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "inset": "0",
+        "background": "linear-gradient(180deg, rgba(17,24,39,0.30) 0%, rgba(17,24,39,0.78) 100%)"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "10",
+        "display": "flex",
+        "alignItems": "flex-end",
+        "minHeight": "88vh",
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "4rem 1.5rem 5rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "maxWidth": "720px" },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.24em",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "marginBottom": "1.25rem",
+                "color": "var(--color-primary)"
+              },
+              "textContent": "${state.eyebrow}"
+            },
+            {
+              "tagName": "h1",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(2.75rem, 7vw, 5rem)",
+                "fontWeight": "600",
+                "lineHeight": "1.04",
+                "margin": "0 0 1.5rem",
+                "letterSpacing": "-0.01em"
+              },
+              "textContent": "${state.heading}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "clamp(1.1rem, 2vw, 1.35rem)",
+                "lineHeight": "1.65",
+                "margin": "0 0 2.25rem",
+                "opacity": "0.92",
+                "maxWidth": "50ch"
+              },
+              "textContent": "${state.subheading}"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "gap": "0.85rem", "flexWrap": "wrap" },
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.ctaHref}" },
+                  "style": {
+                    "display": "inline-block",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.9rem 2.1rem",
+                    "borderRadius": "var(--radius)",
+                    "fontSize": "0.95rem",
+                    "fontWeight": "600",
+                    "letterSpacing": "0.04em",
+                    "textTransform": "uppercase",
+                    "textDecoration": "none",
+                    "transition": "background-color 0.15s",
+                    ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                  },
+                  "textContent": "${state.cta}"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.cta2Href}" },
+                  "style": {
+                    "display": "${state.cta2 ? 'inline-block' : 'none'}",
+                    "border": "1px solid rgba(255,255,255,0.6)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.9rem 2.1rem",
+                    "borderRadius": "var(--radius)",
+                    "fontSize": "0.95rem",
+                    "fontWeight": "600",
+                    "letterSpacing": "0.04em",
+                    "textTransform": "uppercase",
+                    "textDecoration": "none",
+                    "transition": "background-color 0.15s",
+                    ":hover": { "backgroundColor": "rgba(255,255,255,0.14)" }
+                  },
+                  "textContent": "${state.cta2}"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/components/pv-nav.json

@@ -0,0 +1,106 @@
+{
+  "tagName": "pv-nav",
+  "state": {
+    "brand": "Aperture Studio"
+  },
+  "style": {
+    "display": "block",
+    "position": "sticky",
+    "top": "0",
+    "zIndex": "50",
+    "backgroundColor": "rgba(255, 255, 255, 0.85)",
+    "backdropFilter": "blur(10px)",
+    "borderBottom": "1px solid var(--color-border)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "1.1rem 1.5rem",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "/" },
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.5rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)",
+            "textDecoration": "none",
+            "letterSpacing": "0.01em"
+          },
+          "textContent": "${state.brand}"
+        },
+        {
+          "tagName": "nav",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "1.75rem",
+            "@--sm": { "gap": "1.1rem" }
+          },
+          "children": [
+            {
+              "tagName": "a",
+              "attributes": { "href": "/work/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.9rem",
+                "letterSpacing": "0.04em",
+                "textTransform": "uppercase",
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Work"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/about/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.9rem",
+                "letterSpacing": "0.04em",
+                "textTransform": "uppercase",
+                "@--sm": { "display": "none" },
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "About"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "inline-block",
+                "border": "1px solid var(--color-ink)",
+                "color": "var(--color-text-primary)",
+                "padding": "0.5rem 1.15rem",
+                "borderRadius": "var(--radius)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.9rem",
+                "letterSpacing": "0.04em",
+                "textTransform": "uppercase",
+                "transition": "background-color 0.15s, color 0.15s",
+                ":hover": {
+                  "backgroundColor": "var(--color-ink)",
+                  "color": "var(--color-text-white)"
+                }
+              },
+              "textContent": "Inquire"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/components/pv-project-card.json

@@ -0,0 +1,103 @@
+{
+  "tagName": "pv-project-card",
+  "state": {
+    "title": "",
+    "category": "",
+    "year": "",
+    "href": "#",
+    "cover": { "type": "string", "format": "image", "default": "" },
+    "alt": ""
+  },
+  "style": {
+    "display": "block",
+    "breakInside": "avoid",
+    "marginBottom": "1.75rem"
+  },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": { "href": "${state.href}" },
+      "style": {
+        "display": "block",
+        "textDecoration": "none",
+        "color": "var(--color-text-primary)",
+        ":hover img": { "transform": "scale(1.05)" },
+        ":hover h3": { "color": "var(--color-primary)" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "overflow": "hidden",
+            "borderRadius": "var(--radius)",
+            "backgroundColor": "var(--color-bg-cream)"
+          },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.cover}",
+                "alt": "${state.alt}",
+                "loading": "lazy"
+              },
+              "style": {
+                "width": "100%",
+                "height": "auto",
+                "display": "block",
+                "objectFit": "cover",
+                "transition": "transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "justifyContent": "space-between",
+            "alignItems": "baseline",
+            "gap": "1rem",
+            "margin": "1rem 0 0"
+          },
+          "children": [
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.5rem",
+                "fontWeight": "600",
+                "margin": "0",
+                "lineHeight": "1.2",
+                "transition": "color 0.15s"
+              },
+              "textContent": "${state.title}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "display": "${state.year ? 'inline' : 'none'}",
+                "fontSize": "0.85rem",
+                "color": "var(--color-text-muted)",
+                "whiteSpace": "nowrap"
+              },
+              "textContent": "${state.year}"
+            }
+          ]
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.category ? 'block' : 'none'}",
+            "margin": "0.3rem 0 0",
+            "fontSize": "0.75rem",
+            "fontWeight": "600",
+            "letterSpacing": "0.14em",
+            "textTransform": "uppercase",
+            "color": "var(--color-primary)"
+          },
+          "textContent": "${state.category}"
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/components/pv-project-grid.json

@@ -0,0 +1,22 @@
+{
+  "tagName": "pv-project-grid",
+  "state": {},
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto",
+    "padding": "0 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "columns": "3",
+        "columnGap": "1.75rem",
+        "@--md": { "columns": "2" },
+        "@--sm": { "columns": "1" }
+      },
+      "children": [{ "tagName": "slot" }]
+    }
+  ]
+}

package/sites/portfolio/components/pv-section-header.json

@@ -0,0 +1,53 @@
+{
+  "tagName": "pv-section-header",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "align": "center"
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width-narrow)",
+    "margin": "0 auto 3rem",
+    "textAlign": "${state.align}"
+  },
+  "children": [
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.eyebrow ? 'block' : 'none'}",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.2em",
+        "fontSize": "0.78rem",
+        "fontWeight": "600",
+        "color": "var(--color-primary)",
+        "margin": "0 0 0.85rem"
+      },
+      "textContent": "${state.eyebrow}"
+    },
+    {
+      "tagName": "h2",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "clamp(2rem, 4.5vw, 3rem)",
+        "fontWeight": "600",
+        "lineHeight": "1.12",
+        "letterSpacing": "-0.01em",
+        "margin": "0"
+      },
+      "textContent": "${state.heading}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.subheading ? 'block' : 'none'}",
+        "fontSize": "1.1rem",
+        "lineHeight": "1.7",
+        "color": "var(--color-text-muted)",
+        "margin": "1.1rem 0 0"
+      },
+      "textContent": "${state.subheading}"
+    }
+  ]
+}

package/sites/portfolio/content/projects/architecture.md

@@ -0,0 +1,12 @@
+---
+title: Concrete & Sky
+category: Architecture
+cover: /images/project-6.jpg
+year: 2022
+order: 6
+slug: architecture
+---
+
+An architectural study of a brutalist civic building, commissioned for the firm that restored it. We returned across several days to read how the light moves over the concrete — hard geometry at noon, softening into something almost tender at dusk.
+
+The brief was simple: show the structure honestly, and let its proportions carry the frame. No wide-angle theatrics, just clean lines and patient observation.

package/sites/portfolio/content/projects/editorial.md

@@ -0,0 +1,12 @@
+---
+title: The Winter Issue
+category: Editorial
+cover: /images/project-3.jpg
+year: 2023
+order: 3
+slug: editorial
+---
+
+A ten-page fashion story shot on location for an independent print magazine. Working alongside the stylist and art director, we chased a cold, cinematic palette — long shadows, muted wool, a single thread of warm light.
+
+Editorial work is where the studio experiments most: bolder framing, deliberate motion, and a willingness to let a frame feel a little strange if it feels alive.

package/sites/portfolio/content/projects/food.md

@@ -0,0 +1,12 @@
+---
+title: On the Pass
+category: Food
+cover: /images/project-5.jpg
+year: 2022
+order: 5
+slug: food
+---
+
+A commissioned menu shoot for a neighborhood kitchen, photographed in the rush of a working service rather than a sterile studio. Steam, char, and the honest imperfection of a plate handed across the pass — that is the texture we were after.
+
+We styled lightly and shot fast, chasing the exact moment a dish looks its most tempting before it goes out the door.

package/sites/portfolio/content/projects/portraits.md

@@ -0,0 +1,12 @@
+---
+title: Studio Portraits
+category: Portraits
+cover: /images/project-2.jpg
+year: 2024
+order: 2
+slug: portraits
+---
+
+A portrait series built on patience and a single soft window. We keep the setup minimal so the attention stays where it belongs — on the face, the posture, the small tells that make a likeness feel true.
+
+Whether for founders, artists, or families, each sitting is a short collaboration: we talk, we adjust, and we wait for the frame that finally looks like you.

package/sites/portfolio/content/projects/travel.md

@@ -0,0 +1,12 @@
+---
+title: Northern Light
+category: Travel
+cover: /images/project-4.jpg
+year: 2023
+order: 4
+slug: travel
+---
+
+Three weeks along a coastal range, documenting landscape and the small human marks within it — a fishing hut, a footpath, a lone figure against the weather. We travel light and shoot early, trusting the hour when the light does the composing for you.
+
+The series is a study in scale and silence, printed large so the horizon has room to breathe.