14 Groups
Groups let you combine videos, images, 3D models, embeds, and buttons in sequence within any section.
Place groups inside any section's "data": { }:
"data": {
"label": "MY SECTION",
"paragraphs": ["Some text..."],
"groups": [
{ /* group 1 */ },
{ /* group 2 */ },
{ /* group 3 */ }
]
}Each { } inside groups is one block. They appear top-to-bottom in order.
Example 1: Map + Calendar
VISIT US
Come visit our lab!
Science Building, Room 204
Google Maps location
Book an appointment
{
"type": "contact",
"id": "contact",
"data": {
"label": "VISIT US",
"text": "Come visit our lab!",
"address": "Science Building, Room 204",
"groups": [
{
"type": "embed",
"src": "https://www.google.com/maps/embed?pb=...",
"ratio": "4/3",
"caption": "Google Maps location"
},
{
"type": "embed",
"src": "https://calendar.google.com/calendar/embed?src=...",
"ratio": "4/3",
"caption": "Book an appointment"
}
]
}
}Example 2: Two Galleries with Different Aspect Ratios
GALLERY
Wide Photos (16:9)
Square Photos (1:1)
{
"type": "research",
"id": "research",
"data": {
"label": "GALLERY",
"groups": [
{
"label": "Wide Photos (16:9)",
"gallery": { "layout": "grid", "ratio": "16x9", "cols": 2 },
"images": [
{ "src": "assets/images/other/1.webp", "alt": "Wide shot 1" },
{ "src": "assets/images/other/2.webp", "alt": "Wide shot 2" }
]
},
{
"label": "Square Photos (1:1)",
"gallery": { "layout": "grid", "ratio": "1x1", "cols": 3 },
"images": [
{ "src": "assets/images/other/3.webp", "alt": "Square 1" },
{ "src": "assets/images/other/4.webp", "alt": "Square 2" },
{ "src": "assets/images/other/5.webp", "alt": "Square 3" }
]
}
]
}
}Example 3: Single Image + Button
MY LAB
{
"type": "about",
"id": "about",
"data": {
"label": "MY LAB",
"groups": [
{
"gallery": { "layout": "grid", "ratio": "16x9", "cols": 1 },
"images": [
{ "src": "assets/images/other/1.webp", "alt": "Lab photo", "credit": "Credit" }
]
},
{
"type": "button",
"label": "Join Our Team",
"url": "#",
"style": "primary",
"align": "center"
}
]
}
}Example 4: Course Page (Education section)
TEACHING
CHEM 201: Coffee Chemistry
Spring 2024
Undergraduate course on the chemistry of coffee brewing.
Course Materials
Syllabus
Lecture 1
Lab Manual
Study Guide
Lecture 1: Introduction to Coffee Chemistry
Office hours schedule
{
"type": "education",
"id": "education",
"data": {
"label": "TEACHING",
"items": [
{
"degree": "CHEM 201: Coffee Chemistry",
"institution": "Spring 2024",
"description": "Undergraduate course on the chemistry of coffee brewing."
}
],
"groups": [
{
"label": "Course Materials",
"gallery": { "layout": "grid", "ratio": "1x1", "cols": 4 },
"images": [
{ "src": "assets/images/other/1.webp", "alt": "Syllabus", "caption": "Syllabus" },
{ "src": "assets/images/other/2.webp", "alt": "Lecture 1", "caption": "Lecture 1" },
{ "src": "assets/images/other/3.webp", "alt": "Lab Manual", "caption": "Lab Manual" },
{ "src": "assets/images/other/4.webp", "alt": "Study Guide", "caption": "Study Guide" }
]
},
{
"type": "video",
"src": "https://youtu.be/VIDEO_ID",
"ratio": "16/9",
"caption": "Lecture 1: Introduction to Coffee Chemistry"
},
{
"type": "embed",
"src": "https://docs.google.com/document/d/EXAMPLE_ID/edit",
"ratio": "4/3",
"caption": "Office hours schedule"
}
]
}
}Example 5: Publication with Media
PUBLICATIONS
Kinetics of Coffee Extraction at Varying Temperatures
Bean, C., Grinder, P. — Journal of Coffee Science, 2024
Supplementary: Experimental Setup
Temperature-controlled brewing
Sample collection
Time-lapse of extraction process
{
"type": "publications",
"id": "publications",
"data": {
"label": "PUBLICATIONS",
"papers": [
{
"title": "Kinetics of Coffee Extraction at Varying Temperatures",
"authors": "Bean, C., Grinder, P.",
"url": "#",
"meta": "Journal of Coffee Science, 2024"
}
],
"groups": [
{
"label": "Supplementary: Experimental Setup",
"gallery": { "layout": "grid", "ratio": "16x9", "cols": 2 },
"images": [
{ "src": "assets/images/other/1.webp", "alt": "Setup 1", "caption": "Temperature-controlled brewing" },
{ "src": "assets/images/other/2.webp", "alt": "Setup 2", "caption": "Sample collection" }
]
},
{
"type": "video",
"src": "https://youtu.be/VIDEO_ID",
"ratio": "16/9",
"caption": "Time-lapse of extraction process"
},
{
"type": "button",
"label": "Download Dataset",
"url": "#",
"style": "outline",
"align": "left"
},
{
"type": "button",
"label": "View Code",
"url": "#",
"style": "outline",
"align": "left"
}
]
}
}Example 6: Lab Facilities Tour
OUR LAB
Location: Room 204, Science Building
Equipment: HPLC, Mass Spec, Brewing Station
Find us on campus
3D scan of our lab layout
Lab Equipment
HPLC Machine
Brewing station
Microscope setup
{
"type": "research",
"id": "research",
"data": {
"label": "OUR LAB",
"texts": [
"**Location:** Room 204, Science Building",
"**Equipment:** HPLC, Mass Spec, Brewing Station"
],
"groups": [
{
"type": "embed",
"src": "https://www.google.com/maps/embed?pb=...",
"ratio": "4/3",
"caption": "Find us on campus"
},
{
"type": "model",
"src": "assets/models/7rm9A protein.glb",
"ratio": "1/1",
"rotate": true,
"caption": "3D scan of our lab layout"
},
{
"label": "Lab Equipment",
"gallery": { "layout": "masonry", "cols": 3 },
"images": [
{ "src": "assets/images/other/3.webp", "alt": "HPLC Machine", "credit": "Photo by Lab Manager" },
{ "src": "assets/images/other/4.webp", "alt": "Brewing station" },
{ "src": "assets/images/other/5.webp", "alt": "Microscope setup" }
]
},
{
"type": "button",
"label": "Book a Tour",
"url": "#",
"style": "primary",
"align": "right"
}
]
}
}Example 7: Conference Talk Page
ABOUT ME
I presented my work on extraction kinetics at the 2024 Coffee Science Conference.
Conference talk recording
Conference Photos
Answering questions
{
"type": "about",
"id": "about",
"data": {
"label": "ABOUT ME",
"paragraphs": [
"I presented my work on **extraction kinetics** at the 2024 Coffee Science Conference."
],
"groups": [
{
"type": "video",
"src": "https://youtu.be/VIDEO_ID",
"ratio": "16/9",
"caption": "Conference talk recording"
},
{
"label": "Conference Photos",
"gallery": { "layout": "grid", "ratio": "4x3", "cols": 2 },
"images": [
{ "src": "assets/images/other/1.webp", "alt": "Presentation" },
{ "src": "assets/images/other/2.webp", "alt": "Q&A session", "caption": "Answering questions" }
]
},
{
"type": "button",
"label": "Download Slides",
"url": "#",
"style": "outline",
"align": "center"
}
]
}
}