commit 2e8de067008accad1d1c4b824cf292b6a70b6781
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 17:49:06 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..7dddc9a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,80 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">Portfolio</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#gallery">Gallery</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Creative Vision</h1>
+ <p class="tagline">Exploring artistry through digital and traditional mediums</p>
+ </section>
+
+ <section id="gallery" class="gallery">
+ <h2>Gallery</h2>
+ <div class="gallery-grid">
+ <article class="art-item">
+ <img src="placeholder1.jpg" alt="Abstract painting" loading="lazy">
+ <div class="art-info">
+ <h3>Abstract Dreams</h3>
+ <p>Oil on canvas</p>
+ </div>
+ </article>
+ <article class="art-item">
+ <img src="placeholder2.jpg" alt="Digital illustration" loading="lazy">
+ <div class="art-info">
+ <h3>Digital Horizons</h3>
+ <p>Digital art</p>
+ </div>
+ </article>
+ <article class="art-item">
+ <img src="placeholder3.jpg" alt="Sculpture" loading="lazy">
+ <div class="art-info">
+ <h3>Form Study</h3>
+ <p>Bronze sculpture</p>
+ </div>
+ </article>
+ </div>
+ </section>
+
+ <section id="about" class="about">
+ <h2>About the Artist</h2>
+ <div class="about-content">
+ <img src="artist.jpg" alt="Artist portrait" class="artist-image">
+ <div class="about-text">
+ <p>Contemporary artist exploring the boundaries between traditional and digital mediums. Specializing in abstract expressionism and multimedia installations.</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <h2>Get in Touch</h2>
+ <form class="contact-form">
+ <div class="form-group">
+ <label for="name">Name</label>
+ <input type="text" id="name" required>
+ </div>
+ <div class="form-group">
+ <label for="email">Email</label>
+ <input type="email" id="email" required>
+ </div>
+ <div class="form-group">
+ <label for="message">Message</label>
+ <textarea id="message" required></textarea>
+ </div>
+ <button type="submit">Send Message</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <p>Made with passion by an artist for artists</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..531854c
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://canvas.scroll.pub
+metaTags
+editButton /edit.html
+title Creative Portfolio | Digital & Traditional Art
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..54b0fee
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_018Tu3JSAp9ZAme8hhniEJdM",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create an elegant art portfolio website.\n\nSuggested domain name: canvas.scroll.pub - Short, memorable, and art-related.\n\n---domain---\ncanvas.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://canvas.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Creative Portfolio | Digital & Traditional Art\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">Portfolio</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=\"#gallery\">Gallery</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Creative Vision</h1>\n <p class=\"tagline\">Exploring artistry through digital and traditional mediums</p>\n </section>\n\n <section id=\"gallery\" class=\"gallery\">\n <h2>Gallery</h2>\n <div class=\"gallery-grid\">\n <article class=\"art-item\">\n <img src=\"placeholder1.jpg\" alt=\"Abstract painting\" loading=\"lazy\">\n <div class=\"art-info\">\n <h3>Abstract Dreams</h3>\n <p>Oil on canvas</p>\n </div>\n </article>\n <article class=\"art-item\">\n <img src=\"placeholder2.jpg\" alt=\"Digital illustration\" loading=\"lazy\">\n <div class=\"art-info\">\n <h3>Digital Horizons</h3>\n <p>Digital art</p>\n </div>\n </article>\n <article class=\"art-item\">\n <img src=\"placeholder3.jpg\" alt=\"Sculpture\" loading=\"lazy\">\n <div class=\"art-info\">\n <h3>Form Study</h3>\n <p>Bronze sculpture</p>\n </div>\n </article>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <h2>About the Artist</h2>\n <div class=\"about-content\">\n <img src=\"artist.jpg\" alt=\"Artist portrait\" class=\"artist-image\">\n <div class=\"about-text\">\n <p>Contemporary artist exploring the boundaries between traditional and digital mediums. Specializing in abstract expressionism and multimedia installations.</p>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <h2>Get in Touch</h2>\n <form class=\"contact-form\">\n <div class=\"form-group\">\n <label for=\"name\">Name</label>\n <input type=\"text\" id=\"name\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"email\">Email</label>\n <input type=\"email\" id=\"email\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"message\">Message</label>\n <textarea id=\"message\" required></textarea>\n </div>\n <button type=\"submit\">Send Message</button>\n </form>\n </section>\n</main>\n\n<footer>\n <p>Made with passion by an artist for artists</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --text-color: #333;\n --bg-color: #f9f9f9;\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 background: var(--bg-color);\n}\n\n/* Header & Navigation */\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n z-index: 1000;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n position: relative;\n}\n\n.nav-links a::after {\n content: '';\n position: absolute;\n bottom: -5px;\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 width: 100%;\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(135deg, #2c3e50, #3498db);\n color: white;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.tagline {\n font-size: 1.5rem;\n opacity: 0.9;\n}\n\n/* Gallery */\n.gallery {\n padding: 5rem 5%;\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.art-item {\n position: relative;\n overflow: hidden;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.art-item:hover {\n transform: translateY(-5px);\n}\n\n.art-item img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n}\n\n.art-info {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1rem;\n background: rgba(255,255,255,0.9);\n transform: translateY(100%);\n transition: var(--transition);\n}\n\n.art-item:hover .art-info {\n transform: translateY(0);\n}\n\n/* About Section */\n.about {\n padding: 5rem 5%;\n background: white;\n}\n\n.about-content {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.artist-image {\n width: 100%;\n border-radius: 10px;\n}\n\n/* Contact Form */\n.contact {\n padding: 5rem 5%;\n}\n\n.contact-form {\n max-width: 600px;\n margin: 2rem auto;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n}\n\ninput, textarea {\n width: 100%;\n padding: 0.8rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n transition: var(--transition);\n}\n\ninput:focus, textarea:focus {\n outline: none;\n border-color: var(--accent-color);\n}\n\nbutton {\n background: var(--accent-color);\n color: white;\n padding: 1rem 2rem;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: var(--transition);\n}\n\nbutton:hover {\n background: #c0392b;\n}\n\n/* Animations */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Mobile Responsiveness */\n.mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n padding: 5px;\n cursor: pointer;\n}\n\n.mobile-menu span {\n width: 25px;\n height: 3px;\n background: var(--primary-color);\n transition: var(--transition);\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: flex;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n flex-direction: column;\n padding: 1rem;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .about-content {\n grid-template-columns: 1fr;\n }\n\n .hero h1 {\n font-size: 2.5rem;\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.forEach(span => span.classList.toggle('active'));\n });\n\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n });\n });\n\n // Form submission handling\n const contactForm = document.querySelector('.contact-form');\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add form submission logic here\n alert('Thank you for your message! I will get back to you soon.');\n contactForm.reset();\n });\n\n // Lazy loading images with animation\n const observerOptions = {\n root: null,\n rootMargin: '0px',\n threshold: 0.1\n };\n\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n observer.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.art-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---end---\n\nThis creates a beautiful, responsive art portfolio website with smooth animations, a mobile-friendly design, and modern features. Key features include:\n\n1. Clean, semantic HTML5 structure\n2. Responsive navigation with mobile menu\n3. Beautiful hero section with gradient background\n4. Gallery with hover effects and lazy loading\n5. Smooth scrolling navigation\n6. Contact form with validation\n7. Intersection Observer for scroll animations\n8. Accessible design elements\n9. SEO-friendly structure\n10. Modern CSS with variables and transitions\n\nThe design is minimal yet sophisticated, perfect for showcasing artwork while maintaining professionalism."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3124
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1a519db
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# canvas.scroll.pub
+Website generated by Claude from prompt: A art portfolio website
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ebb3591
--- /dev/null
+++ b/script.js
@@ -0,0 +1,57 @@
+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.forEach(span => span.classList.toggle('active'));
+ });
+
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ });
+ });
+
+ // Form submission handling
+ const contactForm = document.querySelector('.contact-form');
+ contactForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // Add form submission logic here
+ alert('Thank you for your message! I will get back to you soon.');
+ contactForm.reset();
+ });
+
+ // Lazy loading images with animation
+ const observerOptions = {
+ root: null,
+ rootMargin: '0px',
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ observer.unobserve(entry.target);
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.art-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);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5177070
--- /dev/null
+++ b/style.css
@@ -0,0 +1,252 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #333;
+ --bg-color: #f9f9f9;
+ --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);
+ background: var(--bg-color);
+}
+
+/* Header & Navigation */
+.main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ position: relative;
+}
+
+.nav-links a::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background: var(--accent-color);
+ transition: var(--transition);
+}
+
+.nav-links a:hover::after {
+ width: 100%;
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(135deg, #2c3e50, #3498db);
+ color: white;
+}
+
+.hero h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.tagline {
+ font-size: 1.5rem;
+ opacity: 0.9;
+}
+
+/* Gallery */
+.gallery {
+ padding: 5rem 5%;
+}
+
+.gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.art-item {
+ position: relative;
+ overflow: hidden;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.art-item:hover {
+ transform: translateY(-5px);
+}
+
+.art-item img {
+ width: 100%;
+ height: 300px;
+ object-fit: cover;
+}
+
+.art-info {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 1rem;
+ background: rgba(255,255,255,0.9);
+ transform: translateY(100%);
+ transition: var(--transition);
+}
+
+.art-item:hover .art-info {
+ transform: translateY(0);
+}
+
+/* About Section */
+.about {
+ padding: 5rem 5%;
+ background: white;
+}
+
+.about-content {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.artist-image {
+ width: 100%;
+ border-radius: 10px;
+}
+
+/* Contact Form */
+.contact {
+ padding: 5rem 5%;
+}
+
+.contact-form {
+ max-width: 600px;
+ margin: 2rem auto;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+}
+
+input, textarea {
+ width: 100%;
+ padding: 0.8rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ transition: var(--transition);
+}
+
+input:focus, textarea:focus {
+ outline: none;
+ border-color: var(--accent-color);
+}
+
+button {
+ background: var(--accent-color);
+ color: white;
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+button:hover {
+ background: #c0392b;
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* Mobile Responsiveness */
+.mobile-menu {
+ display: none;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ padding: 5px;
+ cursor: pointer;
+}
+
+.mobile-menu span {
+ width: 25px;
+ height: 3px;
+ background: var(--primary-color);
+ transition: var(--transition);
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: flex;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .about-content {
+ grid-template-columns: 1fr;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+}
\ No newline at end of file