commit 2dcab48852bc7ee08d88c0a3715f68400274093c
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 09:44:02 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d6db1a6
--- /dev/null
+++ b/body.html
@@ -0,0 +1,102 @@
+<header>
+ <nav>
+ <div class="logo">WHO ARE YOU</div>
+ <div class="nav-toggle" aria-label="Toggle navigation menu">
+ <span></span><span></span><span></span>
+ </div>
+ <ul class="nav-links">
+ <li><a href="#identity">Identity</a></li>
+ <li><a href="#reflection">Reflection</a></li>
+ <li><a href="#discovery">Discovery</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero" class="hero">
+ <div class="hero-content">
+ <h1>Who Are You?</h1>
+ <p class="subtitle">A journey into the depths of identity</p>
+ <div class="mirror-box">
+ <div class="mirror">
+ <div class="reflection"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="identity" class="section">
+ <h2>Identity</h2>
+ <div class="cards">
+ <div class="card">
+ <div class="card-inner">
+ <div class="card-front">
+ <h3>Physical</h3>
+ </div>
+ <div class="card-back">
+ <p>Your physical presence in the world</p>
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-inner">
+ <div class="card-front">
+ <h3>Mental</h3>
+ </div>
+ <div class="card-back">
+ <p>Your thoughts and consciousness</p>
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-inner">
+ <div class="card-front">
+ <h3>Spiritual</h3>
+ </div>
+ <div class="card-back">
+ <p>Your inner essence and beliefs</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="reflection" class="section parallax">
+ <h2>Reflection</h2>
+ <div class="quote-container">
+ <blockquote id="quote">
+ "Know thyself"
+ </blockquote>
+ <button class="reflect-btn">Reflect</button>
+ </div>
+ </section>
+
+ <section id="discovery" class="section">
+ <h2>Discovery</h2>
+ <div class="discovery-grid">
+ <div class="discovery-item">
+ <h3>Past</h3>
+ <div class="timeline"></div>
+ </div>
+ <div class="discovery-item">
+ <h3>Present</h3>
+ <div class="presence-indicator"></div>
+ </div>
+ <div class="discovery-item">
+ <h3>Future</h3>
+ <div class="possibility-cloud"></div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <nav>
+ <ul>
+ <li><a href="#hero">Home</a></li>
+ <li><a href="#identity">Identity</a></li>
+ <li><a href="#reflection">Reflection</a></li>
+ <li><a href="#discovery">Discovery</a></li>
+ </ul>
+ </nav>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..97ad591
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://whoami.scroll.pub
+metaTags
+editButton /edit.html
+title Who Are You? | A Journey of Self-Discovery
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..2f77d35
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_018rgZp2DvpKQipLfsqDWYB4",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a unique, introspective personal identity website.\n\n---domain---\nwhoami.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://whoami.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Who Are You? | A Journey of Self-Discovery\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">WHO ARE YOU</div>\n <div class=\"nav-toggle\" aria-label=\"Toggle navigation menu\">\n <span></span><span></span><span></span>\n </div>\n <ul class=\"nav-links\">\n <li><a href=\"#identity\">Identity</a></li>\n <li><a href=\"#reflection\">Reflection</a></li>\n <li><a href=\"#discovery\">Discovery</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\" class=\"hero\">\n <div class=\"hero-content\">\n <h1>Who Are You?</h1>\n <p class=\"subtitle\">A journey into the depths of identity</p>\n <div class=\"mirror-box\">\n <div class=\"mirror\">\n <div class=\"reflection\"></div>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"identity\" class=\"section\">\n <h2>Identity</h2>\n <div class=\"cards\">\n <div class=\"card\">\n <div class=\"card-inner\">\n <div class=\"card-front\">\n <h3>Physical</h3>\n </div>\n <div class=\"card-back\">\n <p>Your physical presence in the world</p>\n </div>\n </div>\n </div>\n <div class=\"card\">\n <div class=\"card-inner\">\n <div class=\"card-front\">\n <h3>Mental</h3>\n </div>\n <div class=\"card-back\">\n <p>Your thoughts and consciousness</p>\n </div>\n </div>\n </div>\n <div class=\"card\">\n <div class=\"card-inner\">\n <div class=\"card-front\">\n <h3>Spiritual</h3>\n </div>\n <div class=\"card-back\">\n <p>Your inner essence and beliefs</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"reflection\" class=\"section parallax\">\n <h2>Reflection</h2>\n <div class=\"quote-container\">\n <blockquote id=\"quote\">\n \"Know thyself\"\n </blockquote>\n <button class=\"reflect-btn\">Reflect</button>\n </div>\n </section>\n\n <section id=\"discovery\" class=\"section\">\n <h2>Discovery</h2>\n <div class=\"discovery-grid\">\n <div class=\"discovery-item\">\n <h3>Past</h3>\n <div class=\"timeline\"></div>\n </div>\n <div class=\"discovery-item\">\n <h3>Present</h3>\n <div class=\"presence-indicator\"></div>\n </div>\n <div class=\"discovery-item\">\n <h3>Future</h3>\n <div class=\"possibility-cloud\"></div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <nav>\n <ul>\n <li><a href=\"#hero\">Home</a></li>\n <li><a href=\"#identity\">Identity</a></li>\n <li><a href=\"#reflection\">Reflection</a></li>\n <li><a href=\"#discovery\">Discovery</a></li>\n </ul>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a2a2a;\n --accent-color: #6b4ce6;\n --text-color: #333;\n --light-color: #fff;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n overflow-x: hidden;\n}\n\n/* Header & Navigation */\nheader {\n position: fixed;\n width: 100%;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--accent-color);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n}\n\n.nav-links li {\n margin-left: 2rem;\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 width: 0;\n height: 2px;\n bottom: -5px;\n left: 0;\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 align-items: center;\n justify-content: center;\n text-align: center;\n background: linear-gradient(135deg, #f6f6f6 0%, #ffffff 100%);\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n color: var(--primary-color);\n}\n\n.subtitle {\n font-size: 1.5rem;\n color: var(--accent-color);\n}\n\n/* Mirror Effect */\n.mirror-box {\n margin-top: 3rem;\n perspective: 1000px;\n}\n\n.mirror {\n width: 200px;\n height: 200px;\n margin: 0 auto;\n position: relative;\n transform-style: preserve-3d;\n animation: float 6s ease-in-out infinite;\n}\n\n.reflection {\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, rgba(107, 76, 230, 0.5), rgba(107, 76, 230, 0.2));\n border-radius: 50%;\n box-shadow: 0 0 30px rgba(107, 76, 230, 0.3);\n}\n\n/* Cards */\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.card {\n perspective: 1000px;\n height: 300px;\n}\n\n.card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n cursor: pointer;\n}\n\n.card:hover .card-inner {\n transform: rotateY(180deg);\n}\n\n.card-front, .card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n border-radius: 15px;\n background: white;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.card-back {\n transform: rotateY(180deg);\n background: var(--accent-color);\n color: white;\n}\n\n/* Parallax Section */\n.parallax {\n background-attachment: fixed;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%236b4ce6\"/></svg>');\n color: var(--light-color);\n padding: 8rem 2rem;\n}\n\n/* Animations */\n@keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .nav-toggle {\n display: block;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n \n .cards {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Navigation toggle\n const navToggle = document.querySelector('.nav-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n navToggle?.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // Smooth scroll for navigation 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 // Random inspirational quotes\n const quotes = [\n \"Know thyself\",\n \"To thine own self be true\",\n \"Life is not about finding yourself, but creating yourself\",\n \"Be yourself; everyone else is already taken\",\n \"The only journey is the journey within\"\n ];\n\n const quoteElement = document.getElementById('quote');\n const reflectBtn = document.querySelector('.reflect-btn');\n\n reflectBtn?.addEventListener('click', () => {\n const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];\n quoteElement.style.opacity = 0;\n setTimeout(() => {\n quoteElement.textContent = randomQuote;\n quoteElement.style.opacity = 1;\n }, 300);\n });\n\n // Parallax effect\n window.addEventListener('scroll', () => {\n const parallax = document.querySelector('.parallax');\n const scrolled = window.pageYOffset;\n if (parallax) {\n parallax.style.backgroundPositionY = -(scrolled * 0.5) + 'px';\n }\n });\n\n // Intersection Observer for animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis website features:\n1. Smooth parallax scrolling\n2. Interactive card flips with 3D transforms\n3. Floating animation effects\n4. Responsive design\n5. Clean, accessible navigation\n6. Modern glass-morphism effects\n7. Interactive quote system\n8. Subtle hover animations\n9. CSS Grid and Flexbox layouts\n10. Intersection Observer for scroll animations\n\nThe domain \"whoami.scroll.pub\" is memorable and reflects the introspective nature of the site while being short and easy to type."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 273,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3056
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..dc14085
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# whoami.scroll.pub
+Website generated by Claude from prompt: WHO ARE YOU
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..4298404
--- /dev/null
+++ b/script.js
@@ -0,0 +1,62 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Navigation toggle
+ const navToggle = document.querySelector('.nav-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ navToggle?.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Random inspirational quotes
+ const quotes = [
+ "Know thyself",
+ "To thine own self be true",
+ "Life is not about finding yourself, but creating yourself",
+ "Be yourself; everyone else is already taken",
+ "The only journey is the journey within"
+ ];
+
+ const quoteElement = document.getElementById('quote');
+ const reflectBtn = document.querySelector('.reflect-btn');
+
+ reflectBtn?.addEventListener('click', () => {
+ const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
+ quoteElement.style.opacity = 0;
+ setTimeout(() => {
+ quoteElement.textContent = randomQuote;
+ quoteElement.style.opacity = 1;
+ }, 300);
+ });
+
+ // Parallax effect
+ window.addEventListener('scroll', () => {
+ const parallax = document.querySelector('.parallax');
+ const scrolled = window.pageYOffset;
+ if (parallax) {
+ parallax.style.backgroundPositionY = -(scrolled * 0.5) + 'px';
+ }
+ });
+
+ // Intersection Observer for animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, { threshold: 0.1 });
+
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..02ab413
--- /dev/null
+++ b/style.css
@@ -0,0 +1,202 @@
+:root {
+ --primary-color: #2a2a2a;
+ --accent-color: #6b4ce6;
+ --text-color: #333;
+ --light-color: #fff;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ overflow-x: hidden;
+}
+
+/* Header & Navigation */
+header {
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--accent-color);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+}
+
+.nav-links li {
+ margin-left: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ position: relative;
+}
+
+.nav-links a::after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 2px;
+ bottom: -5px;
+ left: 0;
+ background: var(--accent-color);
+ transition: var(--transition);
+}
+
+.nav-links a:hover::after {
+ width: 100%;
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ background: linear-gradient(135deg, #f6f6f6 0%, #ffffff 100%);
+}
+
+.hero h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ color: var(--primary-color);
+}
+
+.subtitle {
+ font-size: 1.5rem;
+ color: var(--accent-color);
+}
+
+/* Mirror Effect */
+.mirror-box {
+ margin-top: 3rem;
+ perspective: 1000px;
+}
+
+.mirror {
+ width: 200px;
+ height: 200px;
+ margin: 0 auto;
+ position: relative;
+ transform-style: preserve-3d;
+ animation: float 6s ease-in-out infinite;
+}
+
+.reflection {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(45deg, rgba(107, 76, 230, 0.5), rgba(107, 76, 230, 0.2));
+ border-radius: 50%;
+ box-shadow: 0 0 30px rgba(107, 76, 230, 0.3);
+}
+
+/* Cards */
+.cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.card {
+ perspective: 1000px;
+ height: 300px;
+}
+
+.card-inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transition: transform 0.8s;
+ transform-style: preserve-3d;
+ cursor: pointer;
+}
+
+.card:hover .card-inner {
+ transform: rotateY(180deg);
+}
+
+.card-front, .card-back {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ border-radius: 15px;
+ background: white;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.card-back {
+ transform: rotateY(180deg);
+ background: var(--accent-color);
+ color: white;
+}
+
+/* Parallax Section */
+.parallax {
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%236b4ce6"/></svg>');
+ color: var(--light-color);
+ padding: 8rem 2rem;
+}
+
+/* Animations */
+@keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-20px); }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .nav-toggle {
+ display: block;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .cards {
+ grid-template-columns: 1fr;
+ }
+}