commit 3a9b0ebdcd03e2113d612751bb55a10f400cba93
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 02:04:29 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0a542f4
--- /dev/null
+++ b/body.html
@@ -0,0 +1,58 @@
+<header>
+ <nav>
+ <div class="logo">Glass Alchemy</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="/" class="active">Home</a></li>
+ <li><a href="/portfolio">Portfolio</a></li>
+ <li><a href="/about">About</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="featured-work">
+ <img src="images/featured-piece.jpg" alt="Iridescent fused glass wall sculpture with flowing patterns" class="featured-image">
+ <div class="featured-text">
+ <h1>Where Glass Transforms into Art</h1>
+ <p>Exploring color, light, and form through contemporary fused glass artwork</p>
+ <a href="/portfolio" class="cta-button">Explore Gallery</a>
+ </div>
+ </div>
+ </section>
+
+ <section class="latest-works">
+ <h2>Latest Creations</h2>
+ <div class="gallery-grid">
+ <article class="gallery-item">
+ <img src="images/work1.jpg" alt="Abstract fused glass bowl" loading="lazy">
+ <h3>Oceanic Waves Bowl</h3>
+ </article>
+ <article class="gallery-item">
+ <img src="images/work2.jpg" alt="Decorative glass wall panel" loading="lazy">
+ <h3>Aurora Wall Panel</h3>
+ </article>
+ <article class="gallery-item">
+ <img src="images/work3.jpg" alt="Fused glass jewelry piece" loading="lazy">
+ <h3>Dichroic Pendant</h3>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="contact-info">
+ <h4>Contact</h4>
+ <p>studio@glassalchemy.scroll.pub</p>
+ <p>Portland, Oregon</p>
+ </div>
+ <div class="social-links">
+ <a href="#" aria-label="Instagram">Instagram</a>
+ <a href="#" aria-label="Pinterest">Pinterest</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..70fadf8
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://glassalchemy.scroll.pub
+metaTags
+editButton /edit.html
+title Glass Alchemy | Sarah Chen's Fused Glass Art Studio
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..962d27b
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_017M3qBWvqndnMdq6G8BbcJN",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website for the fused glass artist. For the domain, I suggest:\n\n---domain---\nglassalchemy.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://glassalchemy.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Glass Alchemy | Sarah Chen's Fused Glass Art Studio\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Glass Alchemy</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"/\" class=\"active\">Home</a></li>\n <li><a href=\"/portfolio\">Portfolio</a></li>\n <li><a href=\"/about\">About</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"featured-work\">\n <img src=\"images/featured-piece.jpg\" alt=\"Iridescent fused glass wall sculpture with flowing patterns\" class=\"featured-image\">\n <div class=\"featured-text\">\n <h1>Where Glass Transforms into Art</h1>\n <p>Exploring color, light, and form through contemporary fused glass artwork</p>\n <a href=\"/portfolio\" class=\"cta-button\">Explore Gallery</a>\n </div>\n </div>\n </section>\n\n <section class=\"latest-works\">\n <h2>Latest Creations</h2>\n <div class=\"gallery-grid\">\n <article class=\"gallery-item\">\n <img src=\"images/work1.jpg\" alt=\"Abstract fused glass bowl\" loading=\"lazy\">\n <h3>Oceanic Waves Bowl</h3>\n </article>\n <article class=\"gallery-item\">\n <img src=\"images/work2.jpg\" alt=\"Decorative glass wall panel\" loading=\"lazy\">\n <h3>Aurora Wall Panel</h3>\n </article>\n <article class=\"gallery-item\">\n <img src=\"images/work3.jpg\" alt=\"Fused glass jewelry piece\" loading=\"lazy\">\n <h3>Dichroic Pendant</h3>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"contact-info\">\n <h4>Contact</h4>\n <p>studio@glassalchemy.scroll.pub</p>\n <p>Portland, Oregon</p>\n </div>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Instagram\">Instagram</a>\n <a href=\"#\" aria-label=\"Pinterest\">Pinterest</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --text-color: #333;\n --light-bg: #f5f6fa;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n/* Header & Navigation */\nheader {\n background: rgba(255, 255, 255, 0.95);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n backdrop-filter: blur(10px);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n position: relative;\n padding-bottom: 0.25rem;\n}\n\n.nav-links a::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--accent-color);\n transition: var(--transition);\n}\n\n.nav-links a:hover::after,\n.nav-links a.active::after {\n width: 100%;\n}\n\n/* Hero Section */\n.hero {\n min-height: 100vh;\n padding-top: 80px;\n background: var(--light-bg);\n}\n\n.featured-work {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: center;\n}\n\n.featured-image {\n width: 100%;\n height: auto;\n border-radius: 10px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.featured-image:hover {\n transform: translateY(-10px);\n}\n\n.featured-text h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n line-height: 1.2;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--accent-color);\n color: white;\n text-decoration: none;\n border-radius: 30px;\n margin-top: 2rem;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);\n}\n\n/* Gallery Grid */\n.latest-works {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.gallery-item {\n position: relative;\n overflow: hidden;\n border-radius: 10px;\n transition: var(--transition);\n}\n\n.gallery-item img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n transition: var(--transition);\n}\n\n.gallery-item:hover img {\n transform: scale(1.05);\n}\n\n.gallery-item h3 {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1rem;\n background: linear-gradient(transparent, rgba(0,0,0,0.7));\n color: white;\n margin: 0;\n}\n\n/* Footer */\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 3rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.social-links {\n display: flex;\n gap: 1rem;\n}\n\n.social-links a {\n color: white;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.social-links a:hover {\n color: var(--accent-color);\n}\n\n/* Mobile Responsive */\n.mobile-menu {\n display: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text-color);\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n padding: 1rem;\n flex-direction: column;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .featured-work {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n\n .featured-text h1 {\n font-size: 2rem;\n }\n\n .footer-content {\n flex-direction: column;\n gap: 2rem;\n text-align: center;\n }\n\n .social-links {\n justify-content: center;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const spans = mobileMenu.querySelectorAll('span');\n spans[0].style.transform = navLinks.classList.contains('active') \n ? 'rotate(45deg) translate(6px, 6px)' \n : 'none';\n spans[1].style.opacity = navLinks.classList.contains('active') \n ? '0' \n : '1';\n spans[2].style.transform = navLinks.classList.contains('active')\n ? 'rotate(-45deg) translate(6px, -6px)'\n : 'none';\n });\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.gallery-item').forEach(item => {\n item.style.opacity = '0';\n item.style.transform = 'translateY(20px)';\n item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(item);\n });\n});\n\n---end---\n\nThis creates a modern, responsive website with smooth animations and transitions. The design focuses on showcasing the glass artwork with large, impactful images and elegant typography. The website includes:\n\n1. A fixed header with smooth navigation\n2. A hero section with a featured piece\n3. A gallery grid for latest works\n4. Mobile-responsive design with a hamburger menu\n5. Smooth animations and transitions\n6. Intersection Observer for scroll animations\n7. Accessible navigation and semantic HTML\n8. SEO-friendly structure\n9. Clean, modern aesthetic with careful attention to typography and spacing\n\nThe domain name \"glassalchemy\" combines \"glass\" with \"alchemy\" to suggest the transformative nature of fused glass art, making it memorable and relevant to the artist's work."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 331,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3138
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..c3bc879
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# glassalchemy.scroll.pub
+Website generated by Claude from prompt: I need a website for a fused glass artist. She has a portfolio of glasswork she has done and would like to show it as well as a featured glass piece on the home page and an about me page with a photo of her and a marketing blurb about her story becoming an artist.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ca5e560
--- /dev/null
+++ b/script.js
@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ const spans = mobileMenu.querySelectorAll('span');
+ spans[0].style.transform = navLinks.classList.contains('active')
+ ? 'rotate(45deg) translate(6px, 6px)'
+ : 'none';
+ spans[1].style.opacity = navLinks.classList.contains('active')
+ ? '0'
+ : '1';
+ spans[2].style.transform = navLinks.classList.contains('active')
+ ? 'rotate(-45deg) translate(6px, -6px)'
+ : 'none';
+ });
+
+ // Smooth scroll for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.gallery-item').forEach(item => {
+ item.style.opacity = '0';
+ item.style.transform = 'translateY(20px)';
+ item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(item);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9e9f22c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,260 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #333;
+ --light-bg: #f5f6fa;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+/* Header & Navigation */
+header {
+ background: rgba(255, 255, 255, 0.95);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ backdrop-filter: blur(10px);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ position: relative;
+ padding-bottom: 0.25rem;
+}
+
+.nav-links a::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background: var(--accent-color);
+ transition: var(--transition);
+}
+
+.nav-links a:hover::after,
+.nav-links a.active::after {
+ width: 100%;
+}
+
+/* Hero Section */
+.hero {
+ min-height: 100vh;
+ padding-top: 80px;
+ background: var(--light-bg);
+}
+
+.featured-work {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4rem;
+ align-items: center;
+}
+
+.featured-image {
+ width: 100%;
+ height: auto;
+ border-radius: 10px;
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.featured-image:hover {
+ transform: translateY(-10px);
+}
+
+.featured-text h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ line-height: 1.2;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--accent-color);
+ color: white;
+ text-decoration: none;
+ border-radius: 30px;
+ margin-top: 2rem;
+ transition: var(--transition);
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
+}
+
+/* Gallery Grid */
+.latest-works {
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.gallery-item {
+ position: relative;
+ overflow: hidden;
+ border-radius: 10px;
+ transition: var(--transition);
+}
+
+.gallery-item img {
+ width: 100%;
+ height: 300px;
+ object-fit: cover;
+ transition: var(--transition);
+}
+
+.gallery-item:hover img {
+ transform: scale(1.05);
+}
+
+.gallery-item h3 {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 1rem;
+ background: linear-gradient(transparent, rgba(0,0,0,0.7));
+ color: white;
+ margin: 0;
+}
+
+/* Footer */
+footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+
+.social-links {
+ display: flex;
+ gap: 1rem;
+}
+
+.social-links a {
+ color: white;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.social-links a:hover {
+ color: var(--accent-color);
+}
+
+/* Mobile Responsive */
+.mobile-menu {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ margin: 5px 0;
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ padding: 1rem;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .featured-work {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+
+ .featured-text h1 {
+ font-size: 2rem;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ gap: 2rem;
+ text-align: center;
+ }
+
+ .social-links {
+ justify-content: center;
+ }
+}