commit 68a6b7fee77c1ef6b11003888265e315afc1a988
Author: root <root@hub.scroll.pub>
Date: 2025-01-06 19:30:59 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..cc961c3
--- /dev/null
+++ b/body.html
@@ -0,0 +1,82 @@
+<header class="main-header">
+ <nav>
+ <div class="logo">DevJourney</div>
+ <button class="nav-toggle" aria-label="Toggle navigation">
+ <span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#home" class="active">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#interests">Interests</a></li>
+ <li><a href="#work">Work</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="container">
+ <h1>Welcome to My Journey</h1>
+ <p class="lead">Exploring the intersection of design and development</p>
+ </div>
+ </section>
+
+ <section id="about" class="about">
+ <div class="container">
+ <h2>About Me</h2>
+ <div class="content">
+ <p>I'm a passionate web developer focused on creating beautiful, functional, and accessible digital experiences. With expertise in modern web technologies, I bring ideas to life through clean code and intuitive design.</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="interests" class="interests">
+ <div class="container">
+ <h2>Interests</h2>
+ <div class="interests-grid">
+ <div class="interest-card">
+ <h3>Web Development</h3>
+ <p>Building modern, responsive websites with clean code</p>
+ </div>
+ <div class="interest-card">
+ <h3>UI/UX Design</h3>
+ <p>Creating intuitive and beautiful user experiences</p>
+ </div>
+ <div class="interest-card">
+ <h3>Performance</h3>
+ <p>Optimizing for speed and efficiency</p>
+ </div>
+ <div class="interest-card">
+ <h3>Accessibility</h3>
+ <p>Making the web accessible for everyone</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="work" class="work">
+ <div class="container">
+ <h2>Recent Work</h2>
+ <div class="work-grid">
+ <article class="work-card">
+ <h3>E-Commerce Platform</h3>
+ <p>A modern shopping experience built with vanilla JavaScript</p>
+ </article>
+ <article class="work-card">
+ <h3>Portfolio Website</h3>
+ <p>Clean, responsive design showcasing creative work</p>
+ </article>
+ <article class="work-card">
+ <h3>Blog Platform</h3>
+ <p>Custom CMS with optimal performance</p>
+ </article>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="container">
+ <p>Made with passion by DevJourney</p>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..afaed18
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://devjourney.scroll.pub
+metaTags
+editButton /edit.html
+title DevJourney | Professional Web Development Blog
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..94c5f8b
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01FA1LkyEqvrMehj1V5jutwX",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a professional personal blog. For the domain, I suggest:\n\n---domain---\ndevjourney.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://devjourney.scroll.pub\nmetaTags\neditButton /edit.html\ntitle DevJourney | Professional Web Development Blog\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"main-header\">\n <nav>\n <div class=\"logo\">DevJourney</div>\n <button class=\"nav-toggle\" aria-label=\"Toggle navigation\">\n <span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#home\" class=\"active\">Home</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#interests\">Interests</a></li>\n <li><a href=\"#work\">Work</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"container\">\n <h1>Welcome to My Journey</h1>\n <p class=\"lead\">Exploring the intersection of design and development</p>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <h2>About Me</h2>\n <div class=\"content\">\n <p>I'm a passionate web developer focused on creating beautiful, functional, and accessible digital experiences. With expertise in modern web technologies, I bring ideas to life through clean code and intuitive design.</p>\n </div>\n </div>\n </section>\n\n <section id=\"interests\" class=\"interests\">\n <div class=\"container\">\n <h2>Interests</h2>\n <div class=\"interests-grid\">\n <div class=\"interest-card\">\n <h3>Web Development</h3>\n <p>Building modern, responsive websites with clean code</p>\n </div>\n <div class=\"interest-card\">\n <h3>UI/UX Design</h3>\n <p>Creating intuitive and beautiful user experiences</p>\n </div>\n <div class=\"interest-card\">\n <h3>Performance</h3>\n <p>Optimizing for speed and efficiency</p>\n </div>\n <div class=\"interest-card\">\n <h3>Accessibility</h3>\n <p>Making the web accessible for everyone</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"work\" class=\"work\">\n <div class=\"container\">\n <h2>Recent Work</h2>\n <div class=\"work-grid\">\n <article class=\"work-card\">\n <h3>E-Commerce Platform</h3>\n <p>A modern shopping experience built with vanilla JavaScript</p>\n </article>\n <article class=\"work-card\">\n <h3>Portfolio Website</h3>\n <p>Clean, responsive design showcasing creative work</p>\n </article>\n <article class=\"work-card\">\n <h3>Blog Platform</h3>\n <p>Custom CMS with optimal performance</p>\n </article>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"container\">\n <p>Made with passion by DevJourney</p>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6f97;\n --secondary: #61a5c2;\n --dark: #012a4a;\n --light: #f8f9fa;\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: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--dark);\n background: var(--light);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n/* Header */\n.main-header {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\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(--dark);\n transition: var(--transition);\n}\n\n.nav-links a:hover,\n.nav-links a.active {\n color: var(--primary);\n}\n\n.nav-toggle {\n display: none;\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease;\n}\n\n.hero .lead {\n font-size: 1.5rem;\n opacity: 0.9;\n animation: fadeInUp 1s ease 0.2s backwards;\n}\n\n/* Sections */\nsection {\n padding: 5rem 0;\n}\n\nh2 {\n font-size: 2.5rem;\n margin-bottom: 3rem;\n text-align: center;\n color: var(--primary);\n}\n\n/* Interests Grid */\n.interests-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.interest-card {\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n transition: var(--transition);\n}\n\n.interest-card:hover {\n transform: translateY(-5px);\n}\n\n/* Work Grid */\n.work-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.work-card {\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n transition: var(--transition);\n}\n\n.work-card:hover {\n transform: translateY(-5px);\n}\n\n/* Footer */\nfooter {\n padding: 2rem 0;\n background: var(--dark);\n color: white;\n text-align: center;\n}\n\n/* Animations */\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/* Mobile Responsive */\n@media (max-width: 768px) {\n .nav-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n .nav-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--primary);\n position: relative;\n }\n\n .nav-toggle span::before,\n .nav-toggle span::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: var(--primary);\n transition: var(--transition);\n }\n\n .nav-toggle span::before {\n transform: translateY(-8px);\n }\n\n .nav-toggle span::after {\n transform: translateY(8px);\n }\n\n .nav-links {\n position: fixed;\n top: 70px;\n right: -100%;\n flex-direction: column;\n background: white;\n width: 100%;\n text-align: center;\n transition: var(--transition);\n padding: 2rem;\n }\n\n .nav-links.active {\n right: 0;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n\n .hero .lead {\n font-size: 1.2rem;\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 // Accessibility\n const isExpanded = navLinks.classList.contains('active');\n navToggle.setAttribute('aria-expanded', isExpanded);\n });\n\n // Smooth Scroll\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n navLinks.classList.remove('active');\n \n const target = document.querySelector(this.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n });\n });\n\n // Active Navigation Highlight\n const sections = document.querySelectorAll('section');\n const navItems = document.querySelectorAll('.nav-links a');\n\n window.addEventListener('scroll', () => {\n let current = '';\n \n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n const sectionHeight = section.clientHeight;\n \n if (scrollY >= (sectionTop - sectionHeight/3)) {\n current = section.getAttribute('id');\n }\n });\n\n navItems.forEach(item => {\n item.classList.remove('active');\n if (item.getAttribute('href').slice(1) === current) {\n item.classList.add('active');\n }\n });\n });\n});\n\n---end---\n\nThis creates a beautiful, responsive personal blog with smooth animations, modern design, and full mobile responsiveness. The site features:\n\n1. Fixed header with smooth navigation\n2. Hero section with animated text\n3. About section\n4. Interests section with hoverable cards\n5. Work section with project showcases\n6. Mobile-responsive design with hamburger menu\n7. Smooth scrolling\n8. Active section highlighting\n9. Beautiful color scheme and animations\n10. Accessible markup and functionality\n\nThe CSS includes modern features like CSS Grid, Flexbox, CSS Variables, and smooth transitions. The JavaScript handles navigation, smooth scrolling, and active section highlighting, all while maintaining good performance and accessibility."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 283,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2884
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..985ce06
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# devjourney.scroll.pub
+Website generated by Claude from prompt: A professional blog with a home page and intro alongside interests and work
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..0013e10
--- /dev/null
+++ b/script.js
@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Navigation Toggle
+ const navToggle = document.querySelector('.nav-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ navToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ // Accessibility
+ const isExpanded = navLinks.classList.contains('active');
+ navToggle.setAttribute('aria-expanded', isExpanded);
+ });
+
+ // Smooth Scroll
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ navLinks.classList.remove('active');
+
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ });
+ });
+
+ // Active Navigation Highlight
+ const sections = document.querySelectorAll('section');
+ const navItems = document.querySelectorAll('.nav-links a');
+
+ window.addEventListener('scroll', () => {
+ let current = '';
+
+ sections.forEach(section => {
+ const sectionTop = section.offsetTop;
+ const sectionHeight = section.clientHeight;
+
+ if (scrollY >= (sectionTop - sectionHeight/3)) {
+ current = section.getAttribute('id');
+ }
+ });
+
+ navItems.forEach(item => {
+ item.classList.remove('active');
+ if (item.getAttribute('href').slice(1) === current) {
+ item.classList.add('active');
+ }
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ae284b5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,226 @@
+:root {
+ --primary: #2a6f97;
+ --secondary: #61a5c2;
+ --dark: #012a4a;
+ --light: #f8f9fa;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ background: var(--light);
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+/* Header */
+.main-header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--dark);
+ transition: var(--transition);
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+ color: var(--primary);
+}
+
+.nav-toggle {
+ display: none;
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease;
+}
+
+.hero .lead {
+ font-size: 1.5rem;
+ opacity: 0.9;
+ animation: fadeInUp 1s ease 0.2s backwards;
+}
+
+/* Sections */
+section {
+ padding: 5rem 0;
+}
+
+h2 {
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+ text-align: center;
+ color: var(--primary);
+}
+
+/* Interests Grid */
+.interests-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+.interest-card {
+ padding: 2rem;
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ transition: var(--transition);
+}
+
+.interest-card:hover {
+ transform: translateY(-5px);
+}
+
+/* Work Grid */
+.work-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.work-card {
+ padding: 2rem;
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ transition: var(--transition);
+}
+
+.work-card:hover {
+ transform: translateY(-5px);
+}
+
+/* Footer */
+footer {
+ padding: 2rem 0;
+ background: var(--dark);
+ color: white;
+ text-align: center;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+ .nav-toggle {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+ }
+
+ .nav-toggle span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--primary);
+ position: relative;
+ }
+
+ .nav-toggle span::before,
+ .nav-toggle span::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: var(--primary);
+ transition: var(--transition);
+ }
+
+ .nav-toggle span::before {
+ transform: translateY(-8px);
+ }
+
+ .nav-toggle span::after {
+ transform: translateY(8px);
+ }
+
+ .nav-links {
+ position: fixed;
+ top: 70px;
+ right: -100%;
+ flex-direction: column;
+ background: white;
+ width: 100%;
+ text-align: center;
+ transition: var(--transition);
+ padding: 2rem;
+ }
+
+ .nav-links.active {
+ right: 0;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero .lead {
+ font-size: 1.2rem;
+ }
+}