commit c4116ad38f914c5a9751c299a30cdc1971f13325
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 04:44:55 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..891b135
--- /dev/null
+++ b/body.html
@@ -0,0 +1,37 @@
+<header class="hero">
+ <nav>
+ <div class="logo">JO</div>
+ <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
+ </nav>
+ <div class="hero-content">
+ <h1>Joshua Omomia</h1>
+ <p class="tagline">Developer. Creator. Innovator.</p>
+ </div>
+</header>
+
+<main>
+ <section class="cool-factor">
+ <h2>What Makes Joshua Cool?</h2>
+ <div class="cards">
+ <article class="card">
+ <div class="card-icon">💻</div>
+ <h3>Tech Wizard</h3>
+ <p>Crafting elegant solutions with code</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">🎨</div>
+ <h3>Creative Mind</h3>
+ <p>Bringing ideas to life with style</p>
+ </article>
+ <article class="card">
+ <div class="card-icon">🚀</div>
+ <h3>Innovator</h3>
+ <p>Always pushing boundaries</p>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ by Joshua Omomia</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..17ffc74
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://josh-is-cool.scroll.pub
+metaTags
+editButton /edit.html
+title Joshua Omomia | Developer & Creative
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..80bb2d4
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_011hw9aNDeBAN3MPThABJDTq",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a simple but elegant personal website for Joshua Omomia.\n\n---domain---\njosh-is-cool.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://josh-is-cool.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Joshua Omomia | Developer & Creative\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"hero\">\n <nav>\n <div class=\"logo\">JO</div>\n <button class=\"theme-toggle\" aria-label=\"Toggle dark mode\">🌙</button>\n </nav>\n <div class=\"hero-content\">\n <h1>Joshua Omomia</h1>\n <p class=\"tagline\">Developer. Creator. Innovator.</p>\n </div>\n</header>\n\n<main>\n <section class=\"cool-factor\">\n <h2>What Makes Joshua Cool?</h2>\n <div class=\"cards\">\n <article class=\"card\">\n <div class=\"card-icon\">💻</div>\n <h3>Tech Wizard</h3>\n <p>Crafting elegant solutions with code</p>\n </article>\n <article class=\"card\">\n <div class=\"card-icon\">🎨</div>\n <h3>Creative Mind</h3>\n <p>Bringing ideas to life with style</p>\n </article>\n <article class=\"card\">\n <div class=\"card-icon\">🚀</div>\n <h3>Innovator</h3>\n <p>Always pushing boundaries</p>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ by Joshua Omomia</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2563eb;\n --text: #1f2937;\n --background: #ffffff;\n --card-bg: #f8fafc;\n --transition: all 0.3s ease;\n}\n\n.dark-mode {\n --primary: #60a5fa;\n --text: #f1f5f9;\n --background: #0f172a;\n --card-bg: #1e293b;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n color: var(--text);\n background: var(--background);\n transition: var(--transition);\n line-height: 1.6;\n}\n\n.hero {\n min-height: 80vh;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);\n color: white;\n position: relative;\n overflow: hidden;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.theme-toggle {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: white;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 4rem auto;\n text-align: center;\n}\n\nh1 {\n font-size: clamp(2.5rem, 8vw, 4rem);\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease;\n}\n\n.tagline {\n font-size: clamp(1.2rem, 4vw, 1.8rem);\n opacity: 0.9;\n animation: fadeInUp 1s ease 0.2s backwards;\n}\n\n.cool-factor {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: clamp(1.8rem, 5vw, 2.5rem);\n color: var(--primary);\n}\n\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 1rem;\n}\n\n.card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n text-align: center;\n transition: var(--transition);\n cursor: pointer;\n}\n\n.card:hover {\n transform: translateY(-10px);\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n}\n\n.card-icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--card-bg);\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 768px) {\n .cool-factor {\n padding: 2rem 1rem;\n }\n \n .cards {\n gap: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const themeToggle = document.querySelector('.theme-toggle');\n const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');\n \n // Check for saved theme preference or system preference\n const currentTheme = localStorage.getItem('theme') || \n (prefersDarkScheme.matches ? 'dark' : 'light');\n \n // Set initial theme\n if (currentTheme === 'dark') {\n document.body.classList.add('dark-mode');\n themeToggle.textContent = '☀️';\n }\n\n // Theme toggle functionality\n themeToggle.addEventListener('click', () => {\n document.body.classList.toggle('dark-mode');\n \n const isDark = document.body.classList.contains('dark-mode');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n themeToggle.textContent = isDark ? '☀️' : '🌙';\n });\n\n // Add hover effect to cards\n const cards = document.querySelectorAll('.card');\n cards.forEach(card => {\n card.addEventListener('mouseenter', () => {\n card.style.transform = 'translateY(-10px)';\n });\n \n card.addEventListener('mouseleave', () => {\n card.style.transform = 'translateY(0)';\n });\n });\n});\n\n---end---\n\nThis website features:\n- Clean, semantic HTML5 structure\n- Responsive design with CSS Grid and Flexbox\n- Dark mode toggle with system preference detection\n- Smooth animations and transitions\n- Interactive card elements\n- Beautiful gradient hero section\n- Accessible navigation and content\n- Modern typography and spacing\n- Local storage for theme preference\n- Performance optimized CSS animations\n- Mobile-first approach\n- SEO-friendly structure\n\nThe domain name \"josh-is-cool.scroll.pub\" is short, memorable, and directly relates to the website's purpose while maintaining a professional tone."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 281,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1911
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..332d017
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# josh-is-cool.scroll.pub
+Website generated by Claude from prompt: Create a website showing Joshua Omomia is cool
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d23a1cc
--- /dev/null
+++ b/script.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const themeToggle = document.querySelector('.theme-toggle');
+ const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+ // Check for saved theme preference or system preference
+ const currentTheme = localStorage.getItem('theme') ||
+ (prefersDarkScheme.matches ? 'dark' : 'light');
+
+ // Set initial theme
+ if (currentTheme === 'dark') {
+ document.body.classList.add('dark-mode');
+ themeToggle.textContent = '☀️';
+ }
+
+ // Theme toggle functionality
+ themeToggle.addEventListener('click', () => {
+ document.body.classList.toggle('dark-mode');
+
+ const isDark = document.body.classList.contains('dark-mode');
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
+ themeToggle.textContent = isDark ? '☀️' : '🌙';
+ });
+
+ // Add hover effect to cards
+ const cards = document.querySelectorAll('.card');
+ cards.forEach(card => {
+ card.addEventListener('mouseenter', () => {
+ card.style.transform = 'translateY(-10px)';
+ });
+
+ card.addEventListener('mouseleave', () => {
+ card.style.transform = 'translateY(0)';
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..91759ab
--- /dev/null
+++ b/style.css
@@ -0,0 +1,141 @@
+:root {
+ --primary: #2563eb;
+ --text: #1f2937;
+ --background: #ffffff;
+ --card-bg: #f8fafc;
+ --transition: all 0.3s ease;
+}
+
+.dark-mode {
+ --primary: #60a5fa;
+ --text: #f1f5f9;
+ --background: #0f172a;
+ --card-bg: #1e293b;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ color: var(--text);
+ background: var(--background);
+ transition: var(--transition);
+ line-height: 1.6;
+}
+
+.hero {
+ min-height: 80vh;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
+ color: white;
+ position: relative;
+ overflow: hidden;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.theme-toggle {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: white;
+}
+
+.hero-content {
+ max-width: 800px;
+ margin: 4rem auto;
+ text-align: center;
+}
+
+h1 {
+ font-size: clamp(2.5rem, 8vw, 4rem);
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease;
+}
+
+.tagline {
+ font-size: clamp(1.2rem, 4vw, 1.8rem);
+ opacity: 0.9;
+ animation: fadeInUp 1s ease 0.2s backwards;
+}
+
+.cool-factor {
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ font-size: clamp(1.8rem, 5vw, 2.5rem);
+ color: var(--primary);
+}
+
+.cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 1rem;
+}
+
+.card {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ text-align: center;
+ transition: var(--transition);
+ cursor: pointer;
+}
+
+.card:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+}
+
+.card-icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--card-bg);
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@media (max-width: 768px) {
+ .cool-factor {
+ padding: 2rem 1rem;
+ }
+
+ .cards {
+ gap: 1rem;
+ }
+}